/* ===========================================================================
   Ukrainian Out Loud — tokens.css   (Phase 3 design-token layer — LOCKED)
   ---------------------------------------------------------------------------
   The :root / [data-theme="dark"] blocks below are the Phase 3 §6 tokens
   VERBATIM (exact OKLCH; hex noted for reference). The prefers-color-scheme
   mirror is resolved (Phase 3 left it as a "mirror the block above" comment;
   per its build note the dark values are duplicated into the media query so
   the toggle and the OS default share the same result). Font faces and two
   Phase-5 layout helpers (font-weight aliases, --tap) are added below the
   Phase 3 block and clearly marked; they introduce no new colors or fonts.
   =========================================================================== */

/* ---- Fonts: self-hosted, latin + latin-ext + cyrillic, font-display: swap ----
   Each .woff2 below should contain the latin + latin-ext + cyrillic subsets
   (unicode-range covers all three). Preload = Spectral 600 + Inter 400 (in
   base.html). Spectral 600 renders the hero Cyrillic word + wordmark; Inter
   700 is reserved for the stressed syllable. */

@font-face {
  font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/spectral-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-02AF, U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+2116, U+2122;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-02AF, U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+2116, U+2122;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-02AF, U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+2116, U+2122;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-02AF, U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+2116, U+2122;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/inter-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-02AF, U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+2116, U+2122;
}

/* =================== PHASE 3 §6 — LIGHT (default) ===================== */
:root {
  /* Fonts */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Type scale */
  --text-2xs: 0.75rem;  --text-xs: 0.8125rem; --text-sm: 0.9375rem;
  --text-base: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem;
  --text-2xl: 1.9375rem; --text-3xl: 2.5rem;
  --phonetic: clamp(1.5rem, 5vw, 2.25rem);
  --cyrillic-hero: clamp(2.75rem, 10vw, 4.5rem);
  --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6;
  --tracking-tight: -0.01em; --tracking-wide: 0.02em;

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;

  /* Radius */
  --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem;
  --radius-xl: 1.5rem;   --radius-pill: 999px;

  /* Layout */
  --container: 72rem; --container-reading: 44rem;

  /* Colors — LIGHT (default) */
  --surface-base: oklch(0.985 0.006 85);   /* #FCFAF6 */
  --surface-raised: oklch(0.998 0.002 85);  /* #FFFEFD */
  --surface-sunken: oklch(0.955 0.008 85);  /* #F3F0EA */
  --border: oklch(0.90 0.010 85);           /* #E1DED7 */
  --border-strong: oklch(0.64 0.015 258);   /* #878D95 */
  --text-primary: oklch(0.27 0.020 258);    /* #202730 */
  --text-secondary: oklch(0.47 0.020 258);  /* #545B66 */
  --text-muted: oklch(0.55 0.018 258);      /* #6B727C */
  --primary: oklch(0.50 0.14 255);          /* #2063B0 */
  --primary-hover: oklch(0.44 0.15 255);    /* #0050A2 */
  --on-primary: oklch(0.99 0 0);            /* #FCFCFC */
  --accent-gold: oklch(0.80 0.10 85);       /* #DBB970 */
  --stress: oklch(0.50 0.14 255);           /* #2063B0 */
  --success: oklch(0.55 0.11 155);
  --warning: oklch(0.80 0.10 85);
  --danger: oklch(0.53 0.15 28);

  /* Shadows — LIGHT (brand-tinted, soft) */
  --shadow-sm: 0 1px 2px oklch(0.27 0.02 258 / 0.06), 0 1px 3px oklch(0.27 0.02 258 / 0.08);
  --shadow-md: 0 4px 12px oklch(0.27 0.02 258 / 0.09);
  --shadow-lg: 0 12px 32px oklch(0.27 0.02 258 / 0.13);
  --focus-ring: 0 0 0 3px oklch(0.50 0.14 255 / 0.45);

  color-scheme: light;

  /* ---- Phase 5 layout helpers (not colors/fonts; encode Phase 3 §14 a11y) ---- */
  --font-weight-body: 400;      /* Inter body                    */
  --font-weight-medium: 500;    /* transliteration, chips        */
  --font-weight-semibold: 600;  /* buttons, badges, display face */
  --font-weight-stress: 700;    /* stressed syllable — Inter 700 */
  --tap: 44px;                  /* min tap target (Phase 3 §14)  */
}

/* ===================== PHASE 3 §6 — DARK (explicit toggle) =============== */
[data-theme="dark"] {
  --surface-base: oklch(0.21 0.020 258);    /* #131922 */
  --surface-raised: oklch(0.26 0.024 258);  /* #1D2430 */
  --surface-sunken: oklch(0.17 0.018 258);  /* #0B1017 */
  --border: oklch(0.38 0.020 258);          /* #3C434D */
  --border-strong: oklch(0.52 0.020 258);   /* #626A75 */
  --text-primary: oklch(0.95 0.008 258);    /* #EBEFF4 */
  --text-secondary: oklch(0.77 0.014 258);  /* #AFB5BD */
  --text-muted: oklch(0.66 0.016 258);      /* #8C939C */
  --primary: oklch(0.72 0.13 255);          /* #6AA7F4 */
  --primary-hover: oklch(0.79 0.12 255);    /* #85BEFF */
  --on-primary: oklch(0.20 0.020 258);      /* #10161F */
  --accent-gold: oklch(0.83 0.11 88);       /* #E5C370 */
  --stress: oklch(0.83 0.11 88);            /* #E5C370 */
  --success: oklch(0.72 0.11 155);
  --warning: oklch(0.83 0.11 88);
  --danger: oklch(0.68 0.15 28);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40);
  --shadow-md: 0 6px 18px oklch(0 0 0 / 0.45);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.55);
  --focus-ring: 0 0 0 3px oklch(0.72 0.13 255 / 0.50);

  color-scheme: dark;
}

/* Auto dark when the user hasn't chosen a theme — same values as above
   (Phase 3 build note: one result for toggle + OS default). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-base: oklch(0.21 0.020 258);
    --surface-raised: oklch(0.26 0.024 258);
    --surface-sunken: oklch(0.17 0.018 258);
    --border: oklch(0.38 0.020 258);
    --border-strong: oklch(0.52 0.020 258);
    --text-primary: oklch(0.95 0.008 258);
    --text-secondary: oklch(0.77 0.014 258);
    --text-muted: oklch(0.66 0.016 258);
    --primary: oklch(0.72 0.13 255);
    --primary-hover: oklch(0.79 0.12 255);
    --on-primary: oklch(0.20 0.020 258);
    --accent-gold: oklch(0.83 0.11 88);
    --stress: oklch(0.83 0.11 88);
    --success: oklch(0.72 0.11 155);
    --warning: oklch(0.83 0.11 88);
    --danger: oklch(0.68 0.15 28);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40);
    --shadow-md: 0 6px 18px oklch(0 0 0 / 0.45);
    --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.55);
    --focus-ring: 0 0 0 3px oklch(0.72 0.13 255 / 0.50);

    color-scheme: dark;
  }
}