/* ==========================================================================
   Révise — Design Tokens (v3 — Option B editorial re-skin, course identity)
   Palette/typography remapped onto the course design system (paper / ink /
   marker / Barlow). Token NAMES are preserved so app.js/styles.css need no
   structural change; only VALUES change. Light + dark via prefers-color-scheme
   AND the authoritative [data-theme] manual toggle. Per-module accent via
   [data-module]. Ratios verified in design/COURSES_INTEGRATION_SPEC.md §8.
   ========================================================================== */

/* --- Self-hosted editorial fonts (offline path; no remote Google Fonts).
   WOFF2 binaries live in app/fonts/ (dropped in by the team / fetched). If a
   file is absent the declared system stack renders instead (graceful). The SW
   precaches these and also serves them to the embedded course iframe. -------- */
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("../fonts/barlow-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/barlow-condensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/space-mono-700.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* --- Typography — course voice (self-hosted, system fallback) ----------- */
  --font-sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-display: "Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* Type scale (unchanged sizes → no size regression; §8) */
  --fs-caption: 0.75rem;
  --fs-footnote: 0.8125rem;
  --fs-body: 1.0625rem;
  --fs-callout: 1rem;
  --fs-headline: 1.0625rem;
  --fs-title3: 1.25rem;
  --fs-title2: 1.375rem;
  --fs-title1: 1.75rem;
  --fs-large: 2.125rem;
  --fs-display: 2.75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  /* --- Spacing (8pt grid) ------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* --- Radii — course editorial radius 22 --------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 22px;   /* cards, answer options (course --radius) */
  --radius-xl: 22px;   /* sheets, large cards */
  --radius-pill: 980px;

  /* --- Layout ------------------------------------------------------------- */
  --content-max: 42rem;
  --wrap-max: 61.25rem;      /* 980px — course content column */
  --touch-min: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* --- Motion ------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* --- Shared marker motif (lime highlighter — correct-answer reveal).
     Always ink text on marker (14.55:1 both themes, §8.2 #11). Not per-module. */
  --marker: #D8F53F;
  --marker-ink: #16180F;     /* fixed dark ink — stays dark on lime in BOTH themes */
  --marker-soft: rgba(216, 245, 63, 0.18);

  /* ======================================================================
     Color — LIGHT (course "paper") — default
     ====================================================================== */
  --bg: #F4F5EE;             /* paper */
  --surface: #FFFFFF;        /* card */
  --surface-2: #E8EADF;      /* paper-2 */
  --surface-hover: #ECEEE2;
  --separator: #D3D6C6;      /* rule (decorative ~1.3:1) */
  --separator-strong: #BFC3AD;

  --text: #16180F;           /* ink — 16.34 on paper ✓ */
  --text-secondary: #595D4E; /* ink-2 — 6.17 on paper ✓ */
  --text-tertiary: #595D4E;  /* AA-safe: same as ink-2 (captions stay ≥4.5) */
  --text-on-accent: #FFFFFF; /* white on dark light-mode accent fills (≥4.95 ✓) */

  /* Accent — default = M1 green (shared course base) */
  --accent: #3F7A00;         /* fill; white-on-accent 5.26 ✓ */
  --accent-hover: #356600;
  --accent-active: #2B5400;
  --accent-soft: var(--marker-soft);  /* selected tint = marker tint */
  --accent-text: #3F7A00;    /* accent-colored text on paper/surface only (4.79 ✓) */

  /* Semantic */
  --success: #1B7A4B;        /* good — 4.87 on paper ✓ */
  --success-soft: rgba(27, 122, 75, 0.12);
  --danger: #B3261E;         /* bad — 5.96 ✓ */
  --danger-soft: rgba(179, 38, 30, 0.12);
  --warning: #9A5B00;        /* warn — 4.95 ✓ */

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(22, 24, 15, 0.06), 0 1px 3px rgba(22, 24, 15, 0.05);
  --shadow-md: 0 4px 12px rgba(22, 24, 15, 0.08), 0 1px 3px rgba(22, 24, 15, 0.04);
  --shadow-lg: 0 12px 32px rgba(22, 24, 15, 0.14), 0 4px 10px rgba(22, 24, 15, 0.06);

  --focus-ring: 0 0 0 4px rgba(63, 122, 0, 0.28);
  --focus-ring-color: var(--accent);
}

/* ======================================================================
   Color — DARK (course "night"): shared values factored for reuse by the
   media query AND the [data-theme="dark"] override.
   ====================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1109;           /* paper/night */
    --surface: #1F2217;      /* surface/night */
    --surface-2: #181B11;    /* paper-2/night */
    --surface-hover: #262a1c;
    --separator: #30332A;
    --separator-strong: #474b3c;

    --text: #F1F3E8;         /* ink/night */
    --text-secondary: #A9AE9C;
    --text-tertiary: #A9AE9C;
    --text-on-accent: #16180F; /* ink on lime accent fills (14.55 ✓) */

    --accent: #D8F53F;       /* lime */
    --accent-hover: #D8F53F;
    --accent-active: #c5e22f;
    --accent-soft: rgba(216, 245, 63, 0.20);
    --accent-text: #D8F53F;  /* 13.12 on surface ✓ */

    --success: #6FE3B0;
    --success-soft: rgba(111, 227, 176, 0.18);
    --danger: #FF9C92;
    --danger-soft: rgba(255, 156, 146, 0.18);
    --warning: #FFC069;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.6);

    --focus-ring: 0 0 0 4px rgba(216, 245, 63, 0.30);
  }
}

/* Manual theme override — AUTHORITATIVE over the media query (§0.1). */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1109; --surface: #1F2217; --surface-2: #181B11; --surface-hover: #262a1c;
  --separator: #30332A; --separator-strong: #474b3c;
  --text: #F1F3E8; --text-secondary: #A9AE9C; --text-tertiary: #A9AE9C;
  --text-on-accent: #16180F;
  --accent: #D8F53F; --accent-hover: #D8F53F; --accent-active: #c5e22f;
  --accent-soft: rgba(216, 245, 63, 0.20); --accent-text: #D8F53F;
  --success: #6FE3B0; --success-soft: rgba(111, 227, 176, 0.18);
  --danger: #FF9C92; --danger-soft: rgba(255, 156, 146, 0.18); --warning: #FFC069;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 4px rgba(216, 245, 63, 0.30);
}

/* ======================================================================
   Per-module accent (§2A, LOCKED + AA-verified). M1 = the base above.
   Applied via [data-module="M1|M2|M3"] on the view/card wrapper. The shared
   lime --marker (correct-answer reveal) is intentionally NOT overridden.
   ====================================================================== */
/* M2 — Opportunités : magenta (L) / pink (D) */
[data-module="M2"] {
  --accent: #AD0F78; --accent-hover: #960C68; --accent-active: #7E0A58;
  --accent-text: #AD0F78; --accent-soft: rgba(173, 15, 120, 0.12);
  --focus-ring: 0 0 0 4px rgba(173, 15, 120, 0.28);
}
[data-theme="dark"] [data-module="M2"],
[data-module="M2"][data-theme="dark"] {
  --accent: #FF9BD6; --accent-hover: #FF9BD6; --accent-active: #f080c4;
  --accent-text: #FF9BD6; --accent-soft: rgba(255, 155, 214, 0.20);
  --focus-ring: 0 0 0 4px rgba(255, 155, 214, 0.30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-module="M2"] {
    --accent: #FF9BD6; --accent-hover: #FF9BD6; --accent-active: #f080c4;
    --accent-text: #FF9BD6; --accent-soft: rgba(255, 155, 214, 0.20);
    --focus-ring: 0 0 0 4px rgba(255, 155, 214, 0.30);
  }
}
/* M3 — Analyse business : teal (L) / mint (D) */
[data-module="M3"] {
  --accent: #007F6A; --accent-hover: #006B59; --accent-active: #005648;
  --accent-text: #007F6A; --accent-soft: rgba(0, 127, 106, 0.12);
  --focus-ring: 0 0 0 4px rgba(0, 127, 106, 0.28);
}
[data-theme="dark"] [data-module="M3"],
[data-module="M3"][data-theme="dark"] {
  --accent: #6FE3B0; --accent-hover: #6FE3B0; --accent-active: #5ccf9e;
  --accent-text: #6FE3B0; --accent-soft: rgba(111, 227, 176, 0.20);
  --focus-ring: 0 0 0 4px rgba(111, 227, 176, 0.30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-module="M3"] {
    --accent: #6FE3B0; --accent-hover: #6FE3B0; --accent-active: #5ccf9e;
    --accent-text: #6FE3B0; --accent-soft: rgba(111, 227, 176, 0.20);
    --focus-ring: 0 0 0 4px rgba(111, 227, 176, 0.30);
  }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}