/* ═══════════════════════════════════════════════════════════
   Design tokens. Everything downstream reads from here.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ── */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, monospace;

  /* Fluid type scale */
  --fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --fs-base: clamp(0.94rem, 0.90rem + 0.18vw, 1.02rem);
  --fs-md:   clamp(1.05rem, 1.00rem + 0.24vw, 1.16rem);
  --fs-lg:   clamp(1.22rem, 1.13rem + 0.42vw, 1.44rem);
  --fs-xl:   clamp(1.50rem, 1.34rem + 0.76vw, 1.95rem);
  --fs-2xl:  clamp(1.90rem, 1.62rem + 1.32vw, 2.70rem);

  --lh-tight: 1.22;
  --lh-snug: 1.42;
  --lh-body: 1.68;

  /* ── Space (4px base) ── */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.75rem;  --s-8: 4rem;

  /* ── Radii ── */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 22px;  --r-full: 999px;

  /* ── Motion ── */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ── Layout ── */
  --sidebar-w: 248px;
  --rail-w: 68px;
  --topbar-h: 60px;
  --tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px));
  --measure: 64ch;   /* ~72 chars/line — inside the comfortable reading band */

  /* ── Brand hues (shared across themes) ── */
  --hue-primary: 254;
  --hue-accent: 22;

  /* CEFR level colours — perceptually ordered, cool → warm */
  --lvl-a1: #10b981;
  --lvl-a2: #14b8a6;
  --lvl-b1: #3b82f6;
  --lvl-b2: #8b5cf6;
  --lvl-c1: #e11d48;
}

/* ═══════════════ Light ═══════════════ */
:root, :root[data-theme="light"] {
  color-scheme: light;

  --bg:            #f7f7fb;
  --bg-elev:       #ffffff;
  --bg-sunken:     #eeeef4;
  --bg-inset:      #f2f2f8;

  --surface:       #ffffff;
  --surface-2:     #fafafd;
  --surface-hover: #f4f4f9;

  --text:          #16161d;
  --text-muted:    #5b5b6b;
  /* --text-faint carries real meta (unit numbers, timings, notes), so it must
     clear 4.5:1 on both --surface and --bg-inset, not merely look quiet. */
  --text-faint:    #6c6c7c;
  --text-invert:   #ffffff;

  --border:        #e2e2eb;
  --border-strong: #cdcdda;

  --primary:       hsl(var(--hue-primary) 78% 56%);
  --primary-hover: hsl(var(--hue-primary) 78% 49%);
  --primary-soft:  hsl(var(--hue-primary) 80% 96%);
  --primary-text:  hsl(var(--hue-primary) 62% 42%);
  --on-primary:    #ffffff;

  --accent:        hsl(var(--hue-accent) 92% 54%);
  --accent-soft:   hsl(var(--hue-accent) 94% 95%);

  --ok:            #0f9d58;
  --ok-soft:       #e7f7ee;
  --ok-text:       #08663a;

  --warn:          #d97706;
  --warn-soft:     #fef4e6;
  --warn-text:     #92500a;

  --err:           #dc2626;
  --err-soft:      #fdeceb;
  --err-text:      #971b1b;

  --info:          #0369a1;
  --info-soft:     #e6f3fa;
  --info-text:     #075985;

  --shadow-sm: 0 1px 2px hsl(250 20% 20% / .05), 0 1px 1px hsl(250 20% 20% / .04);
  --shadow:    0 2px 4px hsl(250 20% 20% / .04), 0 6px 16px -4px hsl(250 20% 20% / .10);
  --shadow-lg: 0 4px 8px hsl(250 20% 20% / .05), 0 18px 40px -12px hsl(250 20% 20% / .18);

  --ring: 0 0 0 3px hsl(var(--hue-primary) 90% 60% / .32);
}

/* ═══════════════ Dark ═══════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0d0d12;
  --bg-elev:       #15151d;
  --bg-sunken:     #08080c;
  --bg-inset:      #101017;

  --surface:       #15151d;
  --surface-2:     #1a1a24;
  --surface-hover: #20202c;

  --text:          #ecedf2;
  --text-muted:    #a0a1b0;
  --text-faint:    #8b8c99;
  --text-invert:   #0d0d12;

  --border:        #272733;
  --border-strong: #3a3a49;

  --primary:       hsl(var(--hue-primary) 88% 70%);
  --primary-hover: hsl(var(--hue-primary) 90% 76%);
  --primary-soft:  hsl(var(--hue-primary) 50% 18%);
  --primary-text:  hsl(var(--hue-primary) 90% 78%);
  --on-primary:    #0d0d12;

  --accent:        hsl(var(--hue-accent) 94% 62%);
  --accent-soft:   hsl(var(--hue-accent) 60% 17%);

  --ok:            #34d399;
  --ok-soft:       #0d2b21;
  --ok-text:       #6ee7b7;

  --warn:          #fbbf24;
  --warn-soft:     #2e2210;
  --warn-text:     #fcd34d;

  --err:           #f87171;
  --err-soft:      #2f1416;
  --err-text:      #fca5a5;

  --info:          #38bdf8;
  --info-soft:     #0b2733;
  --info-text:     #7dd3fc;

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / .40);
  --shadow:    0 2px 4px hsl(0 0% 0% / .34), 0 8px 20px -6px hsl(0 0% 0% / .52);
  --shadow-lg: 0 4px 10px hsl(0 0% 0% / .40), 0 22px 48px -14px hsl(0 0% 0% / .70);

  --ring: 0 0 0 3px hsl(var(--hue-primary) 90% 70% / .38);

  --lvl-a1: #34d399;
  --lvl-a2: #2dd4bf;
  --lvl-b1: #60a5fa;
  --lvl-b2: #a78bfa;
  --lvl-c1: #fb7185;
}

/* System preference, when theme = "system" */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;

    --bg: #0d0d12; --bg-elev: #15151d; --bg-sunken: #08080c; --bg-inset: #101017;
    --surface: #15151d; --surface-2: #1a1a24; --surface-hover: #20202c;
    --text: #ecedf2; --text-muted: #a0a1b0; --text-faint: #8b8c99; --text-invert: #0d0d12;
    --border: #272733; --border-strong: #3a3a49;

    --primary: hsl(var(--hue-primary) 88% 70%);
    --primary-hover: hsl(var(--hue-primary) 90% 76%);
    --primary-soft: hsl(var(--hue-primary) 50% 18%);
    --primary-text: hsl(var(--hue-primary) 90% 78%);
    --on-primary: #0d0d12;

    --accent: hsl(var(--hue-accent) 94% 62%);
    --accent-soft: hsl(var(--hue-accent) 60% 17%);

    --ok: #34d399; --ok-soft: #0d2b21; --ok-text: #6ee7b7;
    --warn: #fbbf24; --warn-soft: #2e2210; --warn-text: #fcd34d;
    --err: #f87171; --err-soft: #2f1416; --err-text: #fca5a5;
    --info: #38bdf8; --info-soft: #0b2733; --info-text: #7dd3fc;

    --shadow-sm: 0 1px 2px hsl(0 0% 0% / .40);
    --shadow:    0 2px 4px hsl(0 0% 0% / .34), 0 8px 20px -6px hsl(0 0% 0% / .52);
    --shadow-lg: 0 4px 10px hsl(0 0% 0% / .40), 0 22px 48px -14px hsl(0 0% 0% / .70);
    --ring: 0 0 0 3px hsl(var(--hue-primary) 90% 70% / .38);

    --lvl-a1: #34d399; --lvl-a2: #2dd4bf; --lvl-b1: #60a5fa;
    --lvl-b2: #a78bfa; --lvl-c1: #fb7185;
  }
}