/* ============================================================================
   tokens.css — the single source of truth for every visual value.
   Change a value here and it propagates everywhere. Never hard-code a colour,
   radius, or duration in a component; reach for a token instead.
   ========================================================================== */

:root {
  /* ---- Type scale (1.200 minor third, 16px base) ------------------------ */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;   /* 12 — meta, kbd */
  --fs-sm:   0.8125rem; /* 13 — labels, chips */
  --fs-base: 0.9375rem; /* 15 — UI body */
  --fs-md:   1rem;      /* 16 — reading body */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-body:  1.6;

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

  /* ---- Spacing (4px rhythm) --------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;

  /* Density-aware values — overridden by [data-density] below */
  --pad-card: var(--sp-5);
  --gap-grid: var(--sp-4);
  --row-h: 44px;

  /* ---- Radii ------------------------------------------------------------ */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* ---- Elevation — flat design: borders first, shadow only for overlays -- */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08), 0 1px 3px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 16px 40px rgb(15 23 42 / 0.16), 0 2px 8px rgb(15 23 42 / 0.08);

  /* ---- Motion ----------------------------------------------------------- */
  --dur-instant: 90ms;   /* press feedback   */
  --dur-fast:    150ms;  /* hover, colour    */
  --dur-base:    220ms;  /* enter, expand    */
  --dur-slow:    320ms;  /* sheets, overlays */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---- Layering --------------------------------------------------------- */
  /* The drawer must sit ABOVE its scrim, or the scrim tints it and eats the
     clicks. Anything overlay-like added later belongs in this ladder. */
  --z-base: 0; --z-sticky: 10; --z-nav: 20;
  --z-scrim: 30; --z-drawer: 35;
  --z-modal: 50; --z-palette: 60; --z-toast: 70;

  /* ---- Layout ----------------------------------------------------------- */
  --topbar-h: 56px;
  --sidenav-w: 244px;
  --tabbar-h: 60px;
  --content-max: 1180px;

  /* ---- Accent ramp (default: teal). [data-accent] swaps these three. ----- */
  --a-600: #0f766e;
  --a-500: #0d9488;
  --a-400: #2dd4bf;
  --a-tint: #f0fdfa;
}

/* ---- Accent themes ------------------------------------------------------ */
[data-accent="indigo"]  { --a-600:#4338ca; --a-500:#4f46e5; --a-400:#818cf8; --a-tint:#eef2ff; }
[data-accent="violet"]  { --a-600:#6d28d9; --a-500:#7c3aed; --a-400:#a78bfa; --a-tint:#f5f3ff; }
[data-accent="rose"]    { --a-600:#be123c; --a-500:#e11d48; --a-400:#fb7185; --a-tint:#fff1f2; }
[data-accent="amber"]   { --a-600:#b45309; --a-500:#d97706; --a-400:#fbbf24; --a-tint:#fffbeb; }
[data-accent="emerald"] { --a-600:#047857; --a-500:#059669; --a-400:#34d399; --a-tint:#ecfdf5; }
[data-accent="slate"]   { --a-600:#334155; --a-500:#475569; --a-400:#94a3b8; --a-tint:#f8fafc; }

/* ---- Density ------------------------------------------------------------ */
[data-density="compact"]     { --pad-card: var(--sp-3); --gap-grid: var(--sp-3); --row-h: 38px; }
[data-density="comfortable"] { --pad-card: var(--sp-5); --gap-grid: var(--sp-4); --row-h: 44px; }
[data-density="spacious"]    { --pad-card: var(--sp-6); --gap-grid: var(--sp-6); --row-h: 52px; }

/* ============================================================================
   LIGHT PALETTE — defined on bare :root so it is always the fallback.
   ========================================================================== */
:root {
  --bg:            #f6f8f9;
  --surface:       #ffffff;
  --surface-2:     #f1f5f6;
  --surface-hover: #eef2f3;
  --border:        #dde5e7;
  --border-strong: #c3d0d3;

  --text:        #10312f;
  --text-muted:  #4b5f62;   /* 6.15:1 on the darkest light surface */
  --text-subtle: #5c6f72;   /* 4.82:1 — still clears AA at 10px */

  --primary:      var(--a-600);
  --primary-fg:   #ffffff;
  --primary-soft: var(--a-tint);
  --primary-soft-fg: var(--a-600);
  --ring:         var(--a-500);

  --accent:      #c2410c;   /* action orange, contrast-safe on white */
  --accent-fg:   #ffffff;
  --accent-soft: #fff7ed;

  --danger:      #b91c1c; --danger-fg:#ffffff; --danger-soft:#fef2f2;
  --success:     #15803d; --success-fg:#ffffff; --success-soft:#f0fdf4;
  --warn:        #a16207; --warn-fg:#ffffff;   --warn-soft:#fefce8;
  --info:        #1d4ed8; --info-fg:#ffffff;   --info-soft:#eff6ff;

  --grid-line:  #e6ecee;
  --now-line:   #c2410c;
  --scrim-bg:   rgb(8 24 26 / 0.44);
}

/* ============================================================================
   DARK PALETTE — applied for explicit dark, and for system-dark unless the
   user explicitly chose light. Only tokens are redefined; nothing structural.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0b1416;
    --surface:       #111d20;
    --surface-2:     #16262a;
    --surface-hover: #1b2e33;
    --border:        #22383d;
    --border-strong: #325056;

    --text:        #e6f1f2;
    --text-muted:  #a3b8bb;
    --text-subtle: #7f9599;

    --primary:      var(--a-400);
    --primary-fg:   #07211f;
    --primary-soft: #10312f;
    --primary-soft-fg: var(--a-400);
    --ring:         var(--a-400);

    --accent:      #fb923c; --accent-fg:#2a1206; --accent-soft:#2b1508;
    --danger:      #f87171; --danger-fg:#2a0a0a; --danger-soft:#2a1214;
    --success:     #4ade80; --success-fg:#052e16; --success-soft:#0d2818;
    --warn:        #fbbf24; --warn-fg:#2a1e05;   --warn-soft:#2a2208;
    --info:        #60a5fa; --info-fg:#0a1a33;   --info-soft:#0f2036;

    --grid-line:  #1c3035;
    --now-line:   #fb923c;
    --scrim-bg:   rgb(0 0 0 / 0.6);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  --bg:            #0b1416;
  --surface:       #111d20;
  --surface-2:     #16262a;
  --surface-hover: #1b2e33;
  --border:        #22383d;
  --border-strong: #325056;

  --text:        #e6f1f2;
  --text-muted:  #a3b8bb;
  --text-subtle: #7f9599;

  --primary:      var(--a-400);
  --primary-fg:   #07211f;
  --primary-soft: #10312f;
  --primary-soft-fg: var(--a-400);
  --ring:         var(--a-400);

  --accent:      #fb923c; --accent-fg:#2a1206; --accent-soft:#2b1508;
  --danger:      #f87171; --danger-fg:#2a0a0a; --danger-soft:#2a1214;
  --success:     #4ade80; --success-fg:#052e16; --success-soft:#0d2818;
  --warn:        #fbbf24; --warn-fg:#2a1e05;   --warn-soft:#2a2208;
  --info:        #60a5fa; --info-fg:#0a1a33;   --info-soft:#0f2036;

  --grid-line:  #1c3035;
  --now-line:   #fb923c;
  --scrim-bg:   rgb(0 0 0 / 0.6);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.6);
}

/* Course colour chips — same eight hues resolve per theme. */
:root {
  --c-teal:#0d9488; --c-blue:#2563eb; --c-violet:#7c3aed; --c-rose:#e11d48;
  --c-amber:#d97706; --c-emerald:#059669; --c-cyan:#0891b2; --c-slate:#475569;
}
:root[data-theme="dark"], :root.is-dark {
  --c-teal:#2dd4bf; --c-blue:#60a5fa; --c-violet:#a78bfa; --c-rose:#fb7185;
  --c-amber:#fbbf24; --c-emerald:#34d399; --c-cyan:#22d3ee; --c-slate:#94a3b8;
}