/**
 * Sophia STARS — design tokens (roadmap Phase 1, §1.1 / Appendix A)
 *
 * Single source of truth for color, type, space, radii, shadow, motion,
 * z-index and the header/sidebar "chrome contract" (§1.2). No selectors
 * other than :root/theme roots belong in this file — component and page
 * styles live in components.css / pages/*.css and reference these
 * variables, never hardcode a value this file already defines.
 *
 * House colors: the student roster itself names the official house
 * colors (Solis - Yellow, Aqua - Blue, Luna - Silver, Ignis - Orange —
 * secure/student-data-current.csv HouseName column). Two different hex
 * sets already coexist in home.html for these; the set below was chosen
 * because it actually matches those names (Luna #94a3b8 reads as silver,
 * Ignis #f97316 reads as orange) — the other set uses purple for Luna and
 * red for Ignis, neither of which matches the roster's own naming. Worth
 * a full audit to point every usage at these tokens (tracked separately,
 * not done as part of creating this file).
 */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --navy-900: #001c38;
  --navy-800: #003057; /* primary brand */
  --navy-700: #004173;
  --navy-600: #00508c;
  --gold-500: #a8761a;
  --gold-400: #c9942c; /* accent stripe */
  --blue-500: #0078d4; /* interactive/BCE blue */

  /* ── Semantic (never used for brand accents) ───────── */
  --ok-500: #10b981;
  --warn-500: #f59e0b;
  --err-500: #ef4444;
  --info-500: #3b82f6;

  /* ── Houses (verified against roster HouseName column) ─ */
  --house-solis: #f59e0b; /* Yellow */
  --house-aqua: #3b82f6; /* Blue */
  --house-luna: #94a3b8; /* Silver */
  --house-ignis: #f97316; /* Orange */

  /* ── Neutrals (slate ramp biased toward navy) ──────── */
  --n-0: #ffffff;
  --n-50: #f8fafc;
  --n-100: #f1f5f9;
  --n-200: #e2e8f0;
  --n-400: #94a3b8;
  --n-500: #64748b;
  --n-700: #334155;
  --n-900: #0f172a;

  /* ── Surface/text roles (theme-switched) ───────────── */
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-100);
  --border: var(--n-200);
  --text: var(--n-900);
  --text-2: var(--n-500);

  /* ── Space (4px base) ──────────────────────────────── */
  --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;

  /* ── Type (Inter/system stack already in use) ──────── */
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 1.8rem;

  /* ── Radii / shadows ───────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;
  --sh-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --sh-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --sh-lg: 0 12px 32px rgba(15, 23, 42, 0.16);

  /* ── Motion ────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;

  /* ── Z ladder (raw z-index numbers allowed ONLY here) ─
     Mapping from the values already observed in the codebase:
     header 11003 -> --z-chrome; search dropdown 9999 -> --z-dropdown;
     toasts 10000 -> --z-toast; sidebar drawer 12000/12020 -> --z-drawer;
     backdrop 11900 -> --z-backdrop; skip-link 99999 -> --z-critical;
     house modal overlay -> --z-modal. */
  --z-behind: -1; /* push a decorative layer behind its own container */
  --z-raised: 10;
  --z-sticky: 100;
  --z-chrome: 1000;
  --z-dropdown: 1100;
  --z-backdrop: 1190;
  --z-drawer: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-critical: 1500;

  /* ── Chrome contract (§1.2) ─────────────────────────── */
  --header-height: 64px;
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 60px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --surface: #111a2c;
    --surface-2: #182338;
    --border: rgba(255, 255, 255, 0.09);
    --text: #e2e8f0;
    --text-2: #94a3b8;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #111a2c;
  --surface-2: #182338;
  --border: rgba(255, 255, 255, 0.09);
  --text: #e2e8f0;
  --text-2: #94a3b8;
}
:root[data-theme="light"] {
  --bg: #f8fafc;
  --surface: #fff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-2: #64748b;
}