/* ============================================================
   Zeluu — Shared Static Design Foundation (UI-1)
   ============================================================
   Single source of truth for the warm-editorial design system
   (OKLCH cream/terracotta palette, Fraunces + Plus Jakarta Sans).

   Extracted from the identical inline :root blocks of the seven
   warm-system pages (index, pricing, login, child-login, app,
   dashboard, exam-prep). Values match the existing pages exactly;
   pages still keep their own inline tokens for now and override
   this file by cascade order, so linking it must not change
   appearance. Later slices (UI-2…UI-4) migrate pages onto this
   file and remove the duplicates.

   Load order contract: link this file AFTER the Google Fonts
   <link> and BEFORE the page's inline <style>.
   ============================================================ */

:root {
  /* ---- Color: surfaces & text ---- */
  --color-cream: oklch(97.5% 0.004 60);
  --color-warm-bg: oklch(98.8% 0.005 62);
  --color-surface: oklch(99% 0.003 60);
  /* Frosted/translucent surface for sticky navs & glass overlays */
  --color-surface-glass: oklch(99% 0.003 60 / 0.85);
  --color-text-dark: oklch(15% 0.02 60);
  --color-text-muted: oklch(50% 0.015 65);
  --color-text-light: oklch(75% 0.01 65);
  --color-border: oklch(92% 0.008 65);

  /* ---- Color: brand accent (terracotta) ---- */
  --color-accent: oklch(55% 0.15 50);
  --color-accent-dark: oklch(45% 0.18 48);
  --color-accent-light: oklch(82% 0.1 55);

  /* ---- Brand foundation (premium trust-forward) — ADDITIVE ----
     Deep-teal trust anchor + warm-amber accent. New pages/sections opt in via
     these --brand-* tokens; existing pages keep --color-accent until redesigned
     (staged Brand → Home → Login rollout). Hex refs: teal #1E6E78 / #13525A,
     amber #E08A3C, safe-green #3B9B6E. */
  --brand-primary: oklch(48% 0.062 210);
  --brand-primary-strong: oklch(38% 0.058 210);
  --brand-primary-tint: oklch(95% 0.018 210);
  --brand-accent: oklch(70% 0.12 60);
  --brand-accent-strong: oklch(60% 0.13 55);
  --brand-safe: oklch(60% 0.11 160);
  --brand-on-primary: oklch(99% 0.003 60);

  /* ---- Color: status ---- */
  --color-success: oklch(65% 0.16 142);
  --color-error: oklch(55% 0.2 25);
  --color-warning: oklch(70% 0.15 80);

  /* ---- Color: child-facing variants (child-login) ---- */
  --color-child-accent: oklch(70% 0.14 75);
  --color-child-bg: oklch(96% 0.03 80);

  /* ---- Legacy aliases (older JS/markup still reads these) ---- */
  --primary: var(--color-accent);
  --primary-light: var(--color-accent-light);
  --danger: var(--color-error);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --gray-50: oklch(96% 0.005 60);
  --gray-100: oklch(94% 0.005 60);
  --gray-200: oklch(92% 0.008 65);
  --gray-500: oklch(50% 0.015 65);
  --gray-600: oklch(45% 0.012 65);
  --gray-700: oklch(30% 0.015 60);
  --gray-900: oklch(15% 0.02 60);

  /* ---- Typography ---- */
  --font-display: 'Fraunces', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* ---- Spacing scale ---- */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;
  --spacing-2xl: 100px;

  /* ---- Radius scale ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Shadows (warm-tinted, soft) ---- */
  --shadow-sm: 0 1px 3px oklch(20% 0.02 60 / 0.06), 0 1px 2px oklch(20% 0.02 60 / 0.04);
  --shadow-md: 0 4px 12px oklch(20% 0.02 60 / 0.08), 0 2px 4px oklch(20% 0.02 60 / 0.04);
  --shadow-lg: 0 12px 32px oklch(20% 0.02 60 / 0.10), 0 4px 8px oklch(20% 0.02 60 / 0.05);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms;
  --transition-base: 250ms;

  /* ---- Z-index layers ---- */
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* ============================================================
   Dark theme (warm dark)
   ============================================================
   Opt-in: set <html data-theme="dark">. The selector
   html[data-theme="dark"] has specificity (0,1,1), which beats
   the bare :root (0,1,0) blocks several pages still inline — so
   these dark values win centrally without editing those pages.

   Only COLOR tokens are redefined (surfaces, text, border, the
   gray scale, accent, status, child variants, shadows). Spacing,
   radius, typography, motion and z-index are theme-independent
   and intentionally inherited from :root above.

   Palette intent: keep the warm-editorial identity in the dark —
   warm near-black backgrounds (hue ~60), warm off-white text, and
   a brightened terracotta accent for AA contrast on dark surfaces.
   The legacy --primary/--danger/--success/--warning aliases are
   var() references to these tokens, so they re-resolve to the dark
   values automatically and are not repeated here.
   ============================================================ */

html[data-theme="dark"] {
  /* Tell the UA to render native controls, scrollbars and form
     widgets in their dark variant too. */
  color-scheme: dark;

  /* ---- Surfaces & text ---- */
  --color-cream: oklch(20% 0.012 60);
  --color-warm-bg: oklch(17% 0.012 62);
  --color-surface: oklch(24% 0.014 60);
  --color-surface-glass: oklch(20% 0.014 60 / 0.82);
  --color-text-dark: oklch(95% 0.008 75);
  --color-text-muted: oklch(73% 0.015 70);
  /* 63% (not 56%) so tertiary text clears WCAG AA 4.5:1 on dark surfaces
     while staying clearly below --color-text-muted in the de-emphasis order. */
  --color-text-light: oklch(63% 0.013 65);
  --color-border: oklch(33% 0.013 65);

  /* ---- Brand accent (terracotta, brightened for dark) ---- */
  --color-accent: oklch(70% 0.15 55);
  --color-accent-dark: oklch(62% 0.16 52);
  --color-accent-light: oklch(40% 0.09 55);

  /* ---- Brand foundation (premium trust-forward) — dark overrides ----
     Teal lightened for dark surfaces (#4FB3C0 / #6FC7D2), amber #F0A35C. */
  --brand-primary: oklch(72% 0.082 205);
  --brand-primary-strong: oklch(80% 0.078 200);
  --brand-primary-tint: oklch(30% 0.04 210);
  --brand-accent: oklch(78% 0.11 62);
  --brand-accent-strong: oklch(72% 0.12 58);
  --brand-safe: oklch(74% 0.13 160);
  --brand-on-primary: oklch(13% 0.012 220);

  /* ---- Status (brightened for dark backgrounds) ---- */
  --color-success: oklch(72% 0.16 142);
  --color-error: oklch(68% 0.19 25);
  --color-warning: oklch(78% 0.14 80);

  /* ---- Child-facing variants ---- */
  --color-child-accent: oklch(78% 0.13 75);
  --color-child-bg: oklch(26% 0.04 80);

  /* ---- Gray scale: inverted so light grays read as dark ---- */
  --gray-50: oklch(24% 0.008 60);
  --gray-100: oklch(28% 0.009 60);
  --gray-200: oklch(33% 0.011 65);
  --gray-500: oklch(60% 0.013 65);
  --gray-600: oklch(68% 0.013 65);
  --gray-700: oklch(80% 0.012 60);
  --gray-900: oklch(95% 0.008 75);

  /* ---- Shadows: deepen to read against dark surfaces ---- */
  --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.40), 0 1px 2px oklch(0% 0 0 / 0.30);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.45), 0 2px 4px oklch(0% 0 0 / 0.30);
  --shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.55), 0 4px 8px oklch(0% 0 0 / 0.35);
}

/* ============================================================
   Base / reset
   Identical to the reset every warm-system page already ships
   inline, so double-loading is a no-op. Kept minimal on purpose
   — page-level styles continue to own layout and components.
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Skip link (UI-3)
   Hidden off-screen until focused; lets keyboard users jump
   past the nav. Pages opt in by adding
   <a href="#main" class="skip-link">Skip to content</a>.
   ============================================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-text-dark);
  color: var(--color-cream);
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  z-index: var(--z-toast);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* ============================================================
   Accessible focus baseline
   Pages currently define no :focus-visible styles; this gives
   keyboard users a consistent, visible accent ring everywhere
   without showing rings on mouse clicks.
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   RTL readiness (UI-7)
   The child app toggles document.documentElement.dir to "rtl"
   for Arabic. These rules mirror the shared primitives; pages
   add their own [dir="rtl"] overrides for physical-property
   styles. Full Arabic localization (copy translation, fonts,
   logical-property migration, QA) is tracked separately in
   SPEC-003 / the Stage 2 deferred plan.
   ============================================================ */

[dir="rtl"] .skip-link {
  left: auto;
  right: -9999px;
  border-radius: 0 0 0 8px;
}

[dir="rtl"] .skip-link:focus {
  left: auto;
  right: 0;
}

/* ============================================================
   Reduced motion
   Respect vestibular-sensitivity preferences: collapse all
   animation/transition timing and disable smooth scrolling.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}