/*
 * Souf at School — semantic design tokens (contract §4, doc 06 §3 and §7).
 *
 * This is the only file in the site that may contain literal colors. Every
 * layout, component and page reads colors through these custom properties;
 * scripts/check-contrast.mjs fails when a hex literal appears anywhere else
 * under src/styles, src/layouts or src/components, and it recomputes the WCAG
 * contrast of every text and control pair below in both themes.
 *
 * Light values are the existing brand palette: Deep Blue #003366, Light Blue
 * #6699CC, Blue Wash #E6F0F7, Blue Tint #CCE0F0 and the owner-approved
 * accessible CTA orange #C04C00 / #A34000. Dark values are PROVISIONAL
 * derivations (contract §14, doc 06 "full color token palette not yet
 * defined"): they keep the brand hue, invert the value scale and pass 4.5:1
 * for text and 3:1 for controls on every surface a control can sit on (--bg,
 * --bg-band, --surface, --surface-raised, --tint). The neutral art surface is
 * identical in both themes so a coloring canvas never changes under the child
 * (doc 06 §3).
 *
 * Dark CTA (provisional, owner to confirm): the approved orange #C04C00 with
 * white text cannot reach 3:1 against the raised dark surfaces, and its darker
 * hover #A34000 falls under 3:1 on every dark surface. The dark theme therefore
 * lightens the same hue (#E0702E, hover #EA8040) and sets the button text to
 * the dark background color, which passes 4.5:1 for the label and 3:1 for the
 * control boundary everywhere. The light theme keeps the approved pair.
 *
 * Theme selection: `html[data-theme]` is set before first paint by the inline
 * bootstrap in SiteLayout (localStorage "sas-theme" → server-known adult
 * preference → prefers-color-scheme). A document without the attribute
 * behaves as light.
 */

:root,
:root[data-theme='light'] {
  color-scheme: light;

  /* Surfaces */
  --bg: #e6f0f7;
  --bg-band: #cce0f0;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --tint: #cce0f0;
  --overlay: rgba(0, 51, 102, 0.55);
  --shadow-raised: 0 12px 32px rgba(0, 51, 102, 0.18);

  /* Text and lines */
  --text: #003366;
  --text-muted: #3d5166;
  --border: #4f80b8;
  --border-subtle: #a8c6de;
  --link: #1a4f8c;

  /* Actions */
  --primary: #c04c00;
  --primary-hover: #a34000;
  --primary-contrast: #ffffff;
  --secondary: #003366;
  --secondary-hover: #1a4f8c;
  --secondary-contrast: #ffffff;

  /* Status (text-safe on --bg and --surface) */
  --success: #1b6b3a;
  --warning: #8a5a00;
  --error: #b3261e;
  --info: #1f5f8b;
  --success-tint: #dff3e6;
  --warning-tint: #fff1d6;
  --error-tint: #fde3e1;
  --info-tint: #dcecfa;

  /* Keyboard focus, disabled controls */
  --focus: #003366;
  --focus-halo: #ffffff;
  --disabled-bg: #d5dee7;
  --disabled-text: #5a6b7c;

  /* Neutral art surface around coloring canvases — identical in both themes */
  --art-surface: #efefec;
  --art-paper: #ffffff;
  --art-line: #6b6b66;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0b1a2b;
  --bg-band: #10233a;
  --surface: #14293f;
  --surface-raised: #1b3450;
  --tint: #24405e;
  --overlay: rgba(2, 10, 20, 0.7);
  --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.55);

  --text: #e8f0f8;
  --text-muted: #b4c6d9;
  --border: #6b93ba;
  --border-subtle: #2f4a68;
  --link: #8fc1f2;

  /* Lighter derivation of the CTA orange with dark text; see the note above. */
  --primary: #e0702e;
  --primary-hover: #ea8040;
  --primary-contrast: #0b1a2b;
  --secondary: #cce0f0;
  --secondary-hover: #e6f0f7;
  --secondary-contrast: #003366;

  --success: #6fcf97;
  --warning: #ffc65c;
  --error: #ff8a80;
  --info: #7fb8f0;
  --success-tint: #16382a;
  --warning-tint: #3d2f0f;
  --error-tint: #43201e;
  --info-tint: #16324a;

  --focus: #ffd166;
  --focus-halo: #0b1a2b;
  --disabled-bg: #24384e;
  --disabled-text: #8fa3b8;

  --art-surface: #efefec;
  --art-paper: #ffffff;
  --art-line: #6b6b66;
}

/* Shape, rhythm and type — theme independent */
:root {
  /* Existing game-board artwork colors, stable in both UI themes. */
  --game-preview-ink: #003366;
  --game-preview-piece: #6699cc;
  --game-preview-grid: #e0e0e0;
  --game-preview-tint: #cce0f0;
  /* Owner direction, 23 September 2026: this navy is exclusive to the public
     header and footer, identical in both themes, never a page/art surface. */
  --chrome-bg: #06142b;
  --chrome-text: #ffffff;
  --chrome-muted: #c6d8eb;
  --chrome-border: #6c91b6;
  --chrome-hover: #122b48;

  --radius-card: 16px;
  --radius-control: 12px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Type scale (rem so browser text-size settings and 200 % zoom both apply) */
  --fs-display: 3.5rem;
  --fs-h1: 2.75rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-button: 1rem;

  --lh-tight: 1.15;
  --lh-body: 1.55;

  --font-heading: 'Fredoka Variable', 'Fredoka', 'Montserrat Variable', 'Montserrat', sans-serif;
  --font-body: 'Montserrat Variable', 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-arabic: 'Cairo Variable', 'Cairo', 'Segoe UI', system-ui, sans-serif;

  /* Touch targets (doc 06 §11, contract §4) */
  --target: 48px;
  --target-mode: 56px;

  --container: 1200px;
  --gutter: 32px;
  --reading: 680px;

  --transition: 160ms ease;
}

@media (max-width: 680px) {
  :root {
    --fs-display: 2.25rem;
    --fs-h1: 2rem;
    --fs-h2: 1.625rem;
    --fs-h3: 1.25rem;
    --fs-body: 1.0625rem;
    --fs-small: 0.9375rem;
    --fs-caption: 0.8125rem;
    --fs-button: 1rem;
    --gutter: 16px;
  }
}