/* ==========================================================================
   Design tokens — the single source of truth.
   No component may use a raw colour or a magic pixel value.
   Rationale for every choice: docs/07-UX-DESIGN-SYSTEM.md
   ========================================================================== */

:root {
  /* ---------- Typography ----------
     Three roles, and no more: a display face with enough personality to be recognisable, a body face
     built for long-form reading in many scripts, and a code face with real ligature-free clarity.

     Every stack ends in the system font, so the page is fully readable before a single font file
     arrives. The Noto script families sit in the body stack in unicode-range order, which means a
     Tamil, Devanagari, Arabic or Japanese quotation inside a lesson renders in a face designed for
     it instead of falling back to a mismatched default — and a learner reading only English never
     downloads any of them.
  */
  --font-display: "Space Grotesk", "Noto Sans", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Noto Sans", "Noto Sans Tamil", "Noto Sans Devanagari", "Noto Sans Arabic",
               "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code",
               SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* 1.200 minor-third scale; the two display sizes are fluid */
  --fs-xs:  0.75rem;
  --fs-sm:  0.8125rem;
  --fs-md:  0.9375rem;
  --fs-lg:  1.0625rem;
  --fs-xl:  1.25rem;
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --fs-3xl: clamp(1.85rem, 1.4rem + 2.4vw, 2.85rem);

  --lh-tight: 1.18;
  --lh-snug:  1.4;
  --lh-body:  1.65;   /* measured comfortable for long-form reading */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --measure: 70ch;    /* comprehension drops past ~75 characters per line */

  --editor-fs: 14px;  /* user-adjustable in Settings */
  --editor-lh: 1.55;

  /* ---------- Space (4px base, geometric) ---------- */
  --sp-0: 0;
  --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;
  --sp-9: 6rem;

  /* ---------- Radius ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 999px;

  /* ---------- Motion ---------- */
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  380ms;
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Layout ---------- */
  --header-h:      56px;
  --sidebar-w:     288px;
  --sidebar-w-sm:  0px;
  --content-max:   1120px;
  --z-base: 1;
  --z-sticky: 50;
  --z-drawer: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-palette: 400;

  /* ---------- Elevation ---------- */
  --sh-1: 0 1px 2px rgb(0 0 0 / 0.18);
  --sh-2: 0 2px 8px rgb(0 0 0 / 0.22);
  --sh-3: 0 8px 28px rgb(0 0 0 / 0.30);
  --sh-4: 0 20px 60px rgb(0 0 0 / 0.42);
  --ring: 0 0 0 3px var(--accent-ring);
}

/* ==========================================================================
   Semantic colour — dark is the default theme.
   Overrides for other themes live in themes.css.
   ========================================================================== */
:root,
[data-theme="dark"] {
  --bg:          #0c0f16;
  --bg-sunken:   #080a10;
  --bg-elev:     #121722;
  --surface:     #171d2a;
  --surface-2:   #1d2434;
  --surface-hi:  #252d40;

  --border:        #242c3d;
  --border-strong: #354057;

  --text:       #e8ecf4;
  --text-dim:   #a2adc2;
  --text-faint: #6f7b93;

  --accent:          #7c8cff;
  --accent-hover:    #93a0ff;
  --accent-active:   #6674f5;
  --accent-soft:     #7c8cff1f;
  --accent-ring:     #7c8cff59;
  --accent-contrast: #0b0e16;

  --ok:        #3ecf8e;
  --ok-soft:   #3ecf8e1f;
  --warn:      #f0b429;
  --warn-soft: #f0b4291f;
  --danger:    #ff6b81;
  --danger-soft:#ff6b811f;
  --info:      #48b6ff;
  --info-soft: #48b6ff1f;

  /* Code surface + syntax tokens (hue-separated for deuteranopia) */
  --code-bg:     #0a0d14;
  --code-border: #1e2534;
  --code-gutter: #5a6480;
  --code-line-hl:#ffffff08;

  --tok-key:   #c792ea;  /* keywords            */
  --tok-str:   #a5e075;  /* strings             */
  --tok-num:   #ffb86c;  /* numbers, booleans   */
  --tok-fn:    #82aaff;  /* function names      */
  --tok-cls:   #ffcb6b;  /* classes, builtins   */
  --tok-com:   #62708c;  /* comments            */
  --tok-op:    #89ddff;  /* operators           */
  --tok-punct: #97a3bd;  /* punctuation         */
  --tok-regex: #f78c6c;
  --tok-prop:  #d7dcea;

  --selection: #7c8cff3d;
}

/* Reduced motion: one global switch, honoured everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}