/* DLS THEME KIT — design tokens.
   ------------------------------------------------------------------
   Lifted from DLS Class Planner so a second site looks like it came
   from the same shop. Every colour, size, radius and duration in the
   whole theme is defined HERE and nowhere else.

   THE ONE RULE THAT KEEPS THIS WORKING:
   never write a raw colour, px size or ms duration in your own CSS.
   Always reach for a var() from this file. The moment a #hex appears
   in a component, that component stops following the theme — it will
   look right in light mode and wrong in dark, and no one will notice
   until a user complains.

   Register: product UI (a tool people work inside), not a brand page.
   The interface should disappear into the task.

   TWO RULES CARRIED OVER FROM CLASS PLANNER:

   1. The three language colours (Thai amber, English blue, Chinese
      red) are the ONLY colours that carry meaning. They mark which
      team owns a class. They are never decoration.
      ⚠️ IF YOUR NEW SITE IS NOT ABOUT LANGUAGES: keep the block, but
      rename it to whatever your site categorises by (--status-a/b/c,
      --dept-*, …). Do NOT delete it and scatter raw colours instead,
      and do NOT keep the names 'thai/eng/chi' for something unrelated
      — a token called --thai-bg behind a Sales card is a trap for
      whoever reads this next.
      If your site categorises by nothing at all, delete all three
      blocks; the neutrals and the accent are a complete theme alone.

   2. Everything the APP itself does — primary buttons, the selected
      tab, focus rings, checkboxes — uses graphite ink, never a
      category colour. Otherwise 'Save' would look like it belongs to
      English.

   Every colour pair below meets WCAG AA (4.5:1 for text, 3:1 for
   marks). Muted grey is deliberately darker than the usual 'elegant'
   light grey; readable beats delicate. */

:root {
  color-scheme: light;

  /* ── Neutrals ────────────────────────────────────────────────── */
  --ink: #0f172a; /* headings, primary text */
  --ink-2: #1e293b; /* body text */
  --muted: #475569; /* secondary text — 7:1 on white */
  --line: #e2e8f0; /* hairlines */
  --line-strong: #cbd5e1; /* dividers that must be seen */
  --bg: #f1f5f994; /* page */
  --surface: #ffffff; /* cards, panels */
  --surface-2: #f8fafc; /* table headers, toolbars */
  --surface-3: #eef2f7; /* pressed / hover on neutral */

  /* ── App accent — deliberately NOT a language colour ─────────── */
  --accent: #0f172a;
  --accent-hover: #263449;
  --accent-ink: #ffffff;
  --ring: #0f172a;

  /* ── Language: Thai ──────────────────────────────────────────── */
  --thai-bg: #fef3c7; /* tint behind a Thai class */
  --thai-ring: #fcd34d; /* its border */
  --thai-mark: #d97706; /* the dot — 3.3:1 on white */
  --thai-solid: #b45309; /* filled chip, white text — 4.9:1 */
  --thai-title: #78350f; /* class name on tint */
  --thai-meta: #92400e; /* teacher + count on tint */

  /* ── Language: English ───────────────────────────────────────── */
  --eng-bg: #dbeafe;
  --eng-ring: #93c5fd;
  --eng-mark: #2563eb;
  --eng-solid: #1d4ed8;
  --eng-title: #1e3a8a;
  --eng-meta: #1e40af;

  /* ── Language: Chinese ───────────────────────────────────────── */
  --chi-bg: #fee2e2;
  --chi-ring: #fca5a5;
  --chi-mark: #dc2626;
  --chi-solid: #b91c1c;
  --chi-title: #7f1d1d;
  --chi-meta: #991b1b;

  /* ── Semantic state ──────────────────────────────────────────── */
  --warn: #92400e; /* warning text */
  --warn-strong: #78350f;
  --warn-solid: #b45309; /* warning tag, white text */
  --warn-bg: #fffbeb;
  --warn-ring: #fcd34d;
  --ok: #166534; /* free room, assigned */
  --ok-bg: #dcfce7;
  --ok-ring: #86efac;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  /* Help & Support button (the warning triangle on the header). Its own pair
     rather than --warn-solid, because that one is #b45309 in BOTH themes —
     fine as a tag background, far too dark as a line-art icon on a dark
     ground. This pair gets lighter in the dark theme, the way an icon colour
     has to. The -glow value is only ever used inside drop-shadow/box-shadow,
     so it carries its own alpha. */
  --alert-ico: #ea580c;
  --alert-glow: rgba(234, 88, 12, 0.45);
  /* Sub-teacher marker (Attendance grid) — indigo, deliberately not
     English's blue (--eng-solid): rule 1 above reserves blue for "this
     class belongs to the English team", so a literal blue here would
     collide with that meaning on an English-language class. */
  --sub-solid: #4338ca;

  /* ── The page action (solid green button) ────────────────────── */
  /* Its own trio, NOT --ok + white. --ok is a TEXT colour ("free room",
     "assigned") and it flips light↔dark, so a button painted with it and
     hard-coded white text fails badly in one of the two themes. Measured on
     the dark theme's --ok: white lands at 1.74:1. See THEME.md. */
  --ok-solid: #166534; /* text on this — 7.13:1 */
  --ok-solid-hover: #14532d; /* 9.11:1 */
  --ok-ink: #ffffff;
  /* ── Text selection ──────────────────────────────────────────── */
  /* Its own pair on purpose. Selection has to stay legible over BOTH
     body text and headings, so it cannot simply reuse --accent, which is
     near-black here — a near-black highlight behind near-black text is a
     black rectangle. */
  --sel-bg: #dbeafe;
  --sel-ink: #1e3a8a;
  /* ── Typefaces — ClickUp's pairing (per Big, 2026-08-10) ─────────
     Plus Jakarta Sans for headings, Inter for everything else: that is
     what ClickUp itself uses, which is what was asked for. Both are
     loaded from Google Fonts in index.html.

     ⚠️ THE SYSTEM FALLBACKS ARE NOT DECORATION — DO NOT TRIM THEM.
     Neither Inter nor Plus Jakarta Sans contains a single Thai or Chinese
     glyph, and this app runs in three languages. A browser falls back
     PER CHARACTER, so with the tail below a Thai screen keeps rendering
     exactly as it does today (Windows resolves it through Segoe UI) while
     Latin text picks up Inter. Cut the tail and every Thai and Chinese
     screen falls to the browser's default serif.

     Loading them is best-effort by design: if the school's network ever
     blocks Google Fonts, every string still renders in the system stack
     rather than not at all. */
  --font-ui:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    sans-serif;
  --font-display:
    "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;

  /* ── Type scale — fixed rem, ratio ≈1.15. Product UI, not a hero */
  --fs-xs: 0.6875rem; /* 11px — tags */
  --fs-sm: 0.75rem; /* 12px — labels, meta */
  --fs-base: 0.8125rem; /* 13px — table body, dense UI */
  --fs-md: 0.875rem; /* 14px — controls, prose */
  --fs-lg: 1rem; /* 16px — panel titles */
  --fs-xl: 1.125rem; /* 18px — section titles */
  --fs-2xl: 1.375rem; /* 22px — login wordmark */

  /* ── Spacing — 4px base ──────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ── Sidebar widths (rail = collapsed, panel = open) ─────────────── */
  --rail-w: 60px;
  --panel-w: 232px;

  /* ── Radius ──────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 999px;

  /* ── Elevation — borders do the work, shadows only lift ──────── */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-2: 0 4px 12px rgba(15, 23, 42, 0.08);
  --sh-3: 0 16px 40px rgba(15, 23, 42, 0.18);

  /* ── z-index — named layers, never 9999 ──────────────────────── */
  --z-sticky: 10; /* sticky table headers / first columns */
  --z-sidebar: 15; /* sidebar fly-out must cover sticky table columns */
  --z-header: 20;
  --z-float: 30; /* draggable boards — over the page, UNDER any modal */
  --z-backdrop: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* ── Motion — users are mid-task; nothing waits on choreography */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════════════════════════════
   DARK THEME (per Big, 2026-08-04)
   ------------------------------------------------------------------
   js/theme.js resolves the user's choice (System / Light / Dark) to a
   concrete `data-theme` on <html>; the no-FOUC inline script in
   index.html sets it before first paint so there's no light flash.
   Only the COLOUR tokens are redefined — spacing, radius, type and
   z-index are theme-agnostic and stay in :root.

   The two design rules from the top of this file still hold:
   the three language hues keep their MEANING (Thai amber / English
   blue / Chinese red), they just move onto dark-tinted grounds with
   brighter marks + text so they read on a dark page without glaring;
   and the app accent stays neutral (now a light graphite so primary
   buttons read as "the app", never a language colour).
   ══════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ── Neutrals (inverted) ─────────────────────────────────────── */
  --ink: #eaf1fb; /* headings, primary text */
  --ink-2: #d3ddec; /* body text */
  --muted: #93a3ba; /* secondary text — ~4.6:1 on --surface */
  --line: #26324a; /* hairlines */
  --line-strong: #3a4a67; /* dividers that must be seen */
  --bg: #0b111f; /* page */
  --surface: #141d30; /* cards, panels */
  --surface-2: #1b2740; /* table headers, toolbars */
  --surface-3: #243350; /* pressed / hover on neutral */

  /* ── App accent — neutral, now a LIGHT graphite on dark ──────── */
  --accent: #e9eff8;
  --accent-hover: #cfd9e9;
  --accent-ink: #0f172a; /* dark text on the light accent */
  --ring: #7f9ac4; /* focus ring, visible on dark */

  /* ── Language: Thai (amber) ──────────────────────────────────── */
  --thai-bg: #322715;
  --thai-ring: #5c481f;
  --thai-mark: #fbbf24;
  --thai-solid: #b45309; /* filled chip keeps white text */
  --thai-title: #fcd34d;
  --thai-meta: #fbbf24;

  /* ── Language: English (blue) ────────────────────────────────── */
  --eng-bg: #142440;
  --eng-ring: #2d4c7d;
  --eng-mark: #60a5fa;
  --eng-solid: #1d4ed8;
  --eng-title: #93c5fd;
  --eng-meta: #bfd4f7;

  /* ── Language: Chinese (red) ─────────────────────────────────── */
  --chi-bg: #38191b;
  --chi-ring: #6b2e30;
  --chi-mark: #f87171;
  --chi-solid: #b91c1c;
  --chi-title: #fca5a5;
  --chi-meta: #f5a3a3;

  /* ── Semantic state ──────────────────────────────────────────── */
  --warn: #fbbf24;
  --warn-strong: #fcd34d;
  --warn-solid: #b45309;
  --warn-bg: #2b2411;
  --warn-ring: #5c481f;
  --ok: #4ade80;
  --ok-bg: #12331f;
  --ok-ring: #2f6b43;
  --danger: #f2686b;
  --danger-bg: #38191b;
  --sub-solid: #818cf8;
  /* Lighter than the light-theme orange — see the note beside its twin. */
  --alert-ico: #fb923c;
  --alert-glow: rgba(251, 146, 60, 0.5);

  /* ── The page action (solid green button) ────────────────────── */
  /* Brightens on dark, the way every other mark in this theme does — and
     the text goes DARK to follow it, instead of staying white. */
  --ok-solid: #22c55e; /* text on this — 6.54:1 */
  --ok-solid-hover: #4ade80; /* 8.55:1 */
  --ok-ink: #052e16;
  /* ── Text selection ──────────────────────────────────────────── */
  --sel-bg: #1e3a8a;
  --sel-ink: #dbeafe;
  /* ── Elevation — shadows must be darker to show on a dark ground */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sh-3: 0 18px 44px rgba(0, 0, 0, 0.62);
}