/* ==========================================================================
   Design tokens - the only place raw values live.
   Themes: light (default) | dark via prefers-color-scheme | manual override
   with <html data-theme="light|dark">. [data-scope] lets the styleguide
   render both themes side by side.
   Keep the three dark blocks identical (scripts/check-contrast.mjs asserts it).
   ========================================================================== */

/* ---- Theme-independent tokens ------------------------------------------ */
:root {
  --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* fluid type scale (min ~12.8px) */
  --fs-n1: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --fs-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-1: clamp(1.125rem, 1.06rem + 0.33vw, 1.3125rem);
  --fs-2: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-3: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  --fs-4: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
  --fs-5: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* spacing (4px base) */
  --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: 4.5rem;
  --sp-9: 6rem;

  /* radii */
  --r-1: 0.25rem;
  --r-2: 0.5rem;
  --r-3: 0.875rem;
  --r-pill: 999px;

  /* motion */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* layout */
  --content-max: 72rem;
  --measure: 65ch;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4rem;
}

/* ---- Light theme (default) --------------------------------------------- */
:root,
[data-scope="light"] {
  color-scheme: light;

  --c-bg: #ffffff;
  --c-surface: #f4f5f8;
  --c-surface-2: #e9ebf1;
  --c-text: #12151b;
  --c-text-muted: #4a5262;
  --c-border: #d3d7df;          /* decorative dividers */
  --c-border-strong: #7a8394;   /* UI component edges (>= 3:1) */

  --c-accent: #3a36c9;
  --c-accent-hover: #2a27a8;
  --c-on-accent: #ffffff;
  --c-accent-soft: #e9e8fd;

  --c-success: #0d6a37;
  --c-success-bg: #e3f3ea;
  --c-warn: #8a4b00;
  --c-warn-bg: #fdf0dc;
  --c-error: #b42318;
  --c-error-bg: #fde8e6;

  /* Layer palette: Shell, Content, Assessment, Progress, Commerce, Support */
  --layer-shell: #2f55c9;
  --layer-content: #0a6c7e;
  --layer-assessment: #b8400a;
  --layer-progress: #2a7a2e;
  --layer-commerce: #a3207c;
  --layer-support: #5b6676;
  --on-layer: #ffffff;

  --shadow-1: 0 1px 2px rgb(18 21 27 / 0.08), 0 1px 1px rgb(18 21 27 / 0.04);
  --shadow-2: 0 4px 12px rgb(18 21 27 / 0.10), 0 2px 4px rgb(18 21 27 / 0.06);
  --shadow-3: 0 12px 32px rgb(18 21 27 / 0.14), 0 4px 8px rgb(18 21 27 / 0.06);
}

/* ---- Dark theme: OS preference, unless user forced light --------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-bg: #0d1015;
    --c-surface: #161a21;
    --c-surface-2: #1f2430;
    --c-text: #e9ecf1;
    --c-text-muted: #a9b1bf;
    --c-border: #2c3340;
    --c-border-strong: #7d8798;

    --c-accent: #9aa0ff;
    --c-accent-hover: #b6baff;
    --c-on-accent: #0d1015;
    --c-accent-soft: #232650;

    --c-success: #6fd49a;
    --c-success-bg: #12291d;
    --c-warn: #f2b25c;
    --c-warn-bg: #2e2210;
    --c-error: #ff8f86;
    --c-error-bg: #331513;

    --layer-shell: #8da6ff;
    --layer-content: #55cfe0;
    --layer-assessment: #ff9d6e;
    --layer-progress: #86d98b;
    --layer-commerce: #f08fd1;
    --layer-support: #aeb8c6;
    --on-layer: #0d1015;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
    --shadow-3: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}

/* ---- Dark theme: manual override --------------------------------------- */
:root[data-theme="dark"],
[data-scope="dark"] {
  color-scheme: dark;

  --c-bg: #0d1015;
  --c-surface: #161a21;
  --c-surface-2: #1f2430;
  --c-text: #e9ecf1;
  --c-text-muted: #a9b1bf;
  --c-border: #2c3340;
  --c-border-strong: #7d8798;

  --c-accent: #9aa0ff;
  --c-accent-hover: #b6baff;
  --c-on-accent: #0d1015;
  --c-accent-soft: #232650;

  --c-success: #6fd49a;
  --c-success-bg: #12291d;
  --c-warn: #f2b25c;
  --c-warn-bg: #2e2210;
  --c-error: #ff8f86;
  --c-error-bg: #331513;

  --layer-shell: #8da6ff;
  --layer-content: #55cfe0;
  --layer-assessment: #ff9d6e;
  --layer-progress: #86d98b;
  --layer-commerce: #f08fd1;
  --layer-support: #aeb8c6;
  --on-layer: #0d1015;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
  --shadow-3: 0 12px 32px rgb(0 0 0 / 0.6);
}

/* ---- Reduced motion: collapse all durations ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-scope] {
    --dur-1: 0.01ms;
    --dur-2: 0.01ms;
    --dur-3: 0.01ms;
  }
}