/* FL CDL Training — design tokens
 * ─────────────────────────────────────────────────────────────────────────────
 * Ported 1:1 from the sibling FL Drivers Training app's src/config/theme.ts so
 * the two products are visibly one family. Every value here has a counterpart
 * there; if you change a hue, change it in both or they drift.
 *
 * The reason this is a CSS custom-property file rather than a JS object: this
 * site is plain HTML/CSS/JS with no build step, so the tokens have to be
 * readable by the stylesheet itself. Dark mode is a re-declaration of the same
 * names under a different selector, which means no component needs to know
 * which theme it is in.
 *
 * THEME RESOLUTION ORDER (last one wins):
 *   :root                        light, the default
 *   @media (prefers-color-scheme: dark)  the OS preference
 *   :root[data-theme="light"|"dark"]     the explicit in-app toggle
 * The explicit toggle must come last so a visitor who picks light on a
 * dark-mode OS actually gets light.
 */

:root {
  /* ── Primary palette ───────────────────────────────────────────────────── */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #60a5fa;
  --primary-bg: #eff6ff;

  /* ── Secondary palette ─────────────────────────────────────────────────── */
  --secondary: #f59e0b;
  --secondary-dark: #d97706;
  --secondary-light: #fcd34d;
  --secondary-bg: #fffbeb;

  /* ── Status ────────────────────────────────────────────────────────────── */
  --success: #10b981;
  --success-bg: #ecfdf5;
  --error: #ef4444;
  --error-bg: #fef2f2;
  --warning: #f59e0b;
  --warning-bg: #fffbeb;
  --info: #3b82f6;
  --info-bg: #eff6ff;

  /* ── Neutrals / roles ──────────────────────────────────────────────────── */
  --white: #ffffff;
  --background: #f8fafc;
  --background-secondary: #f1f5f9;
  --surface: #ffffff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --disabled: #cbd5e1;
  --placeholder: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-link: #2563eb;

  /* Label colour for text on a SATURATED, THEME-INVARIANT fill.
     Deliberately NOT overridden in the dark blocks below — the fill does not
     invert with the theme, so neither may its label. White measures 5.17:1 on
     --primary and 6.70:1 on --primary-dark; it is only safe on the BLUES. */
  --on-accent: #ffffff;
  /* The counterpart, for fills too light to carry white: success, warning,
     error, info, the ambers. White on --success is 2.54:1; this is 7.04:1. */
  --on-status-fill: #0f172a;

  /* ── Neutral ramp, named ───────────────────────────────────────────────── */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-900: #0f172a;

  /* ── Gamification ──────────────────────────────────────────────────────── */
  --xp-gold: #f59e0b;
  --streak-orange: #f97316;
  --badge-purple: #8b5cf6;
  --legendary-gold: #ffd700;

  /* ── Brand rainbow ─────────────────────────────────────────────────────── */
  /* A CONTROLLED SIGNATURE, not a wash. Logo, hero keywords, per-feature accent
     chips, section eyebrow rules, one closing CTA band. UI chrome stays
     blue/amber. Never a full-page background. */
  --brand-pink: #ec4899;
  --brand-indigo: #6366f1;
  --brand-cyan: #06b6d4;
  --brand-green: #10b981;
  --brand-amber: #f59e0b;
  --brand-orange: #f97316;
  --brand-violet: #8b5cf6;

  --gradient-brand: linear-gradient(
    120deg,
    #ec4899,
    #6366f1,
    #06b6d4,
    #10b981,
    #f59e0b,
    #f97316,
    #8b5cf6
  );
  --gradient-brand-h: linear-gradient(
    90deg,
    #ec4899,
    #6366f1,
    #06b6d4,
    #10b981,
    #f59e0b,
    #f97316,
    #8b5cf6
  );

  /* READABLE counterparts of the rainbow, same order, same hues, darkened until
     they clear 4.5:1 against both white and their own 12% tint.
       --brand-*     → fills, stripes, the gradient rule. Decorative only.
       --ink-*       → anything a person must READ or recognise: text, meaningful
                       icons, borders that convey state.
     Skipping this is how a module number ends up at 1.96:1 on its own chip. */
  --ink-pink: #ba3979;
  --ink-indigo: #595cd9;
  --ink-cyan: #04788c;
  --ink-green: #0b7e58;
  --ink-amber: #9a6407;
  --ink-orange: #b15210;
  --ink-violet: #7a51d8;

  /* ── Spacing / radius / shadow ─────────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-huge: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.12);
  --shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.1);
  --shadow-cta: 0 6px 18px rgba(37, 99, 235, 0.28);

  /* ── Type ──────────────────────────────────────────────────────────────── */
  /* No bundled webfonts, matching the sibling app: it uses the platform system
     stack and this mirrors that choice rather than the reverse. Substituting a
     webfont would change the whole look of both products. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  --tracking-eyebrow: 1.5px;

  /* Height of the sticky nav, so anchor targets can offset themselves by it
     instead of every section guessing. */
  --nav-height: 66px;
}

/* ── Dark mode: OS preference ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #0f172a;
    --background-secondary: #1e293b;
    --surface: #1e293b;
    --border: #334155;
    --border-light: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #64748b;
    --primary-bg: #1e293b;
    --secondary-bg: #292524;
    --success-bg: #0f2a22;
    --error-bg: #2a1315;
    --warning-bg: #292524;
    --info-bg: #1e293b;
    --disabled: #475569;
    --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}

/* ── Dark mode: explicit toggle ──────────────────────────────────────────── */
/* Must sit after the media query so an explicit choice beats the OS. */
:root[data-theme="dark"] {
  --background: #0f172a;
  --background-secondary: #1e293b;
  --surface: #1e293b;
  --border: #334155;
  --border-light: #1e293b;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #64748b;
  --primary-bg: #1e293b;
  --secondary-bg: #292524;
  --success-bg: #0f2a22;
  --error-bg: #2a1315;
  --warning-bg: #292524;
  --info-bg: #1e293b;
  --disabled: #475569;
  --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}