/*
 * IELTSMIND Design System Tokens (epic #544 Phase 0)
 *
 * Global CSS custom properties covering the three token families called out
 * in the design brief §5: colours (§5.1), typography (§5.2) and motion (§5.5),
 * plus spacing / radius scales that primitives and paradigms compose against.
 *
 * Scope: global. Loaded from every page via the base + lesson layouts so any
 * primitive, paradigm, or shell chrome can reference these tokens without
 * extra wiring. Existing Tailwind theme variables are intentionally left
 * untouched — this file defines the design-token custom properties the new
 * design language binds to, authored verbatim from the brief (e.g. `--snow`,
 * `--ink`) so primitives can reference them without a prefix translation.
 *
 * No @keyframes, no component styles — Wave 2 owns component CSS.
 *
 * Accessibility: respects `prefers-reduced-motion` by zeroing the motion
 * durations. Primitives should consume `--motion-fast|medium|slow` rather
 * than hard-coding durations so this override cascades.
 */

:root {
  /* ---------- §5.1 Surfaces ------------------------------------------- */
  --snow: #F8FAFC;        /* surface 0 — page background                  */
  --cream: #F1F5F9;       /* surface 1 — cards, lifts                     */
  --sand: #E2E8F0;        /* surface 2 — borders, dividers                */
  --stone: #CBD5E1;       /* muted surface, deep borders                  */

  /* ---------- §5.1 Text ---------------------------------------------- */
  --gray: #64748B;        /* secondary text                               */
  --charcoal: #475569;    /* primary text (soft)                          */
  --ink: #0F172A;         /* primary text (emphasis)                      */

  /* ---------- §5.1 Accent -------------------------------------------- */
  /*
   * Named "teal" in the brief for continuity; actual hue is indigo. Do NOT
   * rename — the slide-base content uses the teal alias.
   */
  --teal: #4F46E5;
  --teal-pale: #EEF2FF;
  --teal-dark: #3730A3;

  /* ---------- §5.1 Feedback ------------------------------------------ */
  --success: #059669;
  --success-bg: #ECFDF5;
  --success-border: #86efac;
  --error: #DC2626;
  --error-bg: #FEF2F2;
  --error-border: #fca5a5;

  /* ---------- §5.1 Topic accents ------------------------------------- */
  /* Used on editorial section tags (e.g. "[06] FORM · INTERACTIVE"). */
  --topic-meaning: #2563eb;  /* blue    */
  --topic-form: #ea580c;     /* orange  */
  --topic-pron: #db2777;     /* pink    */

  /* ---------- §5.2 Typography families ------------------------------- */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /*
   * §5.2 Type scale — 6 steps, fluid via clamp(min, preferred-vw, max).
   * Minimums tuned for 360px mobile, maxes for ~1280px desktop.
   * Authors: reference via `--text-<step>` on primitives.
   */
  --text-display: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);   /* 36 → 64px  */
  --text-h1: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);    /* 28 → 44px  */
  --text-h2: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);       /* 22 → 32px  */
  --text-h3: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);      /* 18 → 24px  */
  --text-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); /* 15 → 17px */
  --text-caption: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem); /* 12 → 13px */

  /* Typography rhythm */
  --line-height-display: 1.05;
  --line-height-heading: 1.15;
  --line-height-body: 1.55;
  --letter-spacing-display: -0.022em;
  --letter-spacing-tag: 0.08em;

  /* ---------- Spacing scale ------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ---------- Radius scale ------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ---------- §5.5 Motion -------------------------------------------- */
  --motion-fast: 120ms ease;
  --motion-medium: 180ms ease;
  --motion-slow: 220ms ease;

  /* Raw duration values for primitives that need the number alone
   * (e.g. JavaScript-driven transitions). */
  --motion-duration-fast: 120ms;
  --motion-duration-medium: 180ms;
  --motion-duration-slow: 220ms;
  --motion-ease-standard: ease;
}

/*
 * §5.5 Reduced-motion override.
 * Zeroes the shared motion durations. Primitives must either consume the
 * `--motion-*` tokens above, or provide their own `prefers-reduced-motion`
 * override — there's no magic here, the override cascades through tokens.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms linear;
    --motion-medium: 0ms linear;
    --motion-slow: 0ms linear;
    --motion-duration-fast: 0ms;
    --motion-duration-medium: 0ms;
    --motion-duration-slow: 0ms;
  }
}

/*
 * Global focus ring (DESIGN.md §Focus Ring — non-negotiable a11y floor).
 * Every focusable element gets a visible keyboard-focus indicator. This is
 * a default at the lowest specificity — components keep their per-class
 * `:focus-visible` overrides where the spec'd ring needs adjustment for
 * size, shape, or color (e.g. inputs that pair an inset box-shadow with
 * border-color shifts). Bare element-level `:focus` rules that set
 * `outline: none` are NOT overridden here because `:focus-visible` only
 * fires on keyboard focus — mouse-focus styling stays as-authored.
 */
:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.35);
  outline-offset: 2px;
}

/*
 * Global font-family fallback (closes the Times New Roman / Arial leak).
 * `<html>` and form elements (input, button, textarea, select) don't
 * inherit `font-family` from `<body>` in browser defaults — they fall
 * back to Times New Roman (UA serif default) or Arial (UA sans default).
 * Setting these explicitly to the design tokens means primitives that
 * forget a font-family declaration still render with the design fonts.
 */
html {
  font-family: var(--font-body);
  color: var(--ink);
}
input, button, textarea, select {
  font-family: inherit;
  color: inherit;
}