/**
 * Design tokens for v3.
 *
 * Values are lifted from templates/draft_2.html, which authored its
 * composition on a fixed 340x720 artboard. That artboard is narrower than
 * every device we target (375-430 CSS px), so draft pixel values are read as
 * the design's *intent* rather than as literal measurements.
 *
 * Type therefore does not scale with the viewport in any meaningful way. Each
 * size is a clamp anchored so a 390px-wide device lands on the draft's value,
 * with a slope gentle enough that body copy moves ~0.2px across the whole
 * device range. Reading size should be a constant; only display type and
 * spacing are allowed to breathe. The clamp bounds are guards for viewports
 * outside the target range -- within it, the calc governs.
 */

/* Variable fonts: one file per family covers the whole weight range. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/sora-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Families ---- */
  --font-sans: 'Sora', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Surfaces ---- */
  --surface-page: #050505;
  --surface-app: #0a0a09;
  --surface-raised: #242421;
  --surface-bubble: #2f2f2b;
  --surface-veil: rgba(10, 10, 9, 0.55);
  --surface-scrim: rgba(0, 0, 0, 0.28);
  --surface-glass: rgba(8, 8, 7, 0.74);
  --surface-menu: rgba(8, 8, 7, 0.92);

  /* The faint warm wash the draft lays over the whole frame. */
  --surface-tint: rgba(242, 232, 61, 0.04);

  --gradient-card: linear-gradient(150deg, #2d2d29, #191917);
  --gradient-sheet: linear-gradient(165deg, #232320, #161614);
  --gradient-accent: linear-gradient(155deg, #f6ee56, #e6da2e);

  /* ---- Accent ---- */
  --accent: #f2e83d;
  --accent-soft: rgba(242, 232, 61, 0.12);
  --accent-faint: rgba(242, 232, 61, 0.09);
  --accent-line: rgba(242, 232, 61, 0.4);
  --accent-dim: rgba(242, 232, 61, 0.55);
  --on-accent: #0a0a09;

  /* ---- Text ---- */
  --text-primary: rgba(255, 255, 255, 0.9);
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-dim: rgba(255, 255, 255, 0.5);
  --text-faint: rgba(255, 255, 255, 0.45);
  --text-ghost: rgba(255, 255, 255, 0.34);
  --text-on-accent: #0a0a09;
  --text-on-accent-dim: rgba(10, 10, 9, 0.6);

  /* ---- Lines ---- */
  --line-soft: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.35);

  /*
   * ---- Type scale ----
   * Anchored to the draft's value at a 390px viewport. Slope 0.36vw keeps
   * reading sizes effectively constant across 375-430.
   */
  --fs-3xs: clamp(7.3px, 6.1px + 0.36vw, 8.1px);      /* 7.5  TAP TO PLAY */
  --fs-2xs: clamp(8.3px, 7.1px + 0.36vw, 9.1px);      /* 8.5  timecodes, meta labels */
  --fs-xs: clamp(9.3px, 8.1px + 0.36vw, 10.1px);      /* 9.5  small mono */
  --fs-sm: clamp(10.3px, 9.1px + 0.36vw, 11.1px);     /* 10.5 control labels */
  --fs-base: clamp(11.3px, 10.1px + 0.36vw, 12.1px);  /* 11.5 note body */
  --fs-md: clamp(12.3px, 11.1px + 0.36vw, 13.1px);    /* 12.5 chat body, tabs */
  --fs-lg: clamp(12.8px, 11.6px + 0.36vw, 13.6px);    /* 13   card titles */
  --fs-xl: clamp(14.8px, 13.6px + 0.36vw, 15.6px);    /* 15   wordmark */
  --fs-2xl: clamp(15.8px, 14.4px + 0.41vw, 16.7px);   /* 16   sheet title */

  /*
   * Display sizes are the exception: these are compositional elements rather
   * than reading copy, so they scale with the viewport.
   */
  --fs-display-sm: clamp(20px, 11.35px + 2.73vw, 25px);  /* 22 stream times */
  --fs-display-lg: clamp(35.1px, 16.18px + 5.98vw, 45px); /* year, date -- ~40 @390 */

  /* ---- Tracking ---- */
  --track-tight: -0.055em;
  --track-normal: 0.02em;
  --track-wide: 0.06em;
  --track-wider: 0.08em;
  --track-widest: 0.14em;
  --track-vertical: 0.2em;

  /* ---- Spacing ---- */
  --gutter: clamp(20px, 16.2px + 2vw, 30px); /* 24 @390 -- the draft's margin */
  --space-2xs: 3px;
  --space-xs: 5px;
  --space-sm: 8px;
  --space-md: 11px;
  --space-lg: 14px;
  --space-xl: 18px;
  --space-2xl: 24px;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-2xl: 22px;
  --radius-3xl: 26px;
  --radius-pill: 99px;

  /* ---- Elevation ---- */
  --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-media: 0 18px 44px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -18px 50px rgba(0, 0, 0, 0.6);
  --shadow-menu: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-clip: 0 10px 26px rgba(0, 0, 0, 0.4);

  /* The accent ring the draft puts around playable media. */
  --ring-accent: 0 0 0 1.5px var(--accent), 0 0 0 6px var(--accent-soft);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-snap: 0.45s;
  --dur-ui: 0.22s;

  /* ---- Minimum comfortable tap target ---- */
  --tap-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-snap: 0.01ms;
    --dur-ui: 0.01ms;
  }
}