/* Lowkey design tokens. The reasons are in docs/design-system.md. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../../assets/fonts/SpaceGrotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../../assets/fonts/JetBrainsMono.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Palette */
  --ink: #0B0C10;
  --slate: #171A21;
  --line: #2A2F3A;
  --ash: #8D93A1;
  --chalk: #EDEEF1;
  --amber: #F2A93B;
  --record: #E5484D;
  --confirm: #3DD68C;
  --amber-tint: rgba(242, 169, 59, 0.12);
  --amber-tint-strong: rgba(242, 169, 59, 0.24);
  --scrim: rgba(11, 12, 16, 0.72);

  /* Type */
  --font-ui: 'Space Grotesk', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --t-cap: 12px;
  --t-label: 13px;
  --t-body: 15px;
  --t-title: 17px;
  --t-head: 22px;
  --t-disp: 28px;
  --t-hero: 40px;

  /* Spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* Radius */
  --r1: 6px;
  --r2: 10px;
  --r3: 16px;
  --rp: 999px;

  /* Layout */
  --topbar-h: 48px;
  --transport-h: 64px;
  --tabbar-h: 52px;
  --sidebar-w: 88px;
  --gutter: var(--s4);
  --tap: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-sheet: 220ms;
  --t-moment: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-sheet: 0ms;
    --t-moment: 0ms;
  }
}