/**
 * SIGHTLEARN design tokens (PROMPT 4, A-17).
 * Replaces FTED §14 template palettes with one blue / white / red system.
 * White + very light blue ≈ 70% of a view; blue ≈ 20–25%; red ≤ 5%.
 * Red is accent only (active tab underline, one badge, hero rule, at most one
 * highlighted CTA). Red is never the only carrier of meaning.
 * Focus rings use --brand-blue-500 at 3px — never red.
 */

:root {
  --brand-navy: #0b2a5b;
  --brand-blue: #1747a6;
  --brand-blue-500: #2f6fdb;
  --brand-blue-50: #eef4fe;
  --white: #ffffff;
  --canvas: #ffffff;
  --surface: #f7f9fc;
  --border: #d6deea;
  --text: #0f172a;
  --text-muted: #475569;
  --brand-red: #c8102e;
  --danger: #a4161a;

  --sl-font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --sl-font-serif: "Source Serif 4", "Georgia", serif;
  --sl-font-rounded: "Nunito", "Segoe UI", sans-serif;
  --sl-focus: 3px solid var(--brand-blue-500);
  --sl-radius: 12px;
  --sl-radius-pill: 999px;
}

[data-theme="dark"] {
  --brand-navy: #0b2a5b;
  --brand-blue: #6b9aef;
  --brand-blue-500: #8fb4f5;
  --brand-blue-50: #132347;
  --white: #ffffff;
  --canvas: #0b2a5b;
  --surface: #0e2148;
  --border: #2a4474;
  --text: #f8fafc;
  --text-muted: #c5d4ee;
  --brand-red: #ff8a8a;
  --danger: #ff8a8a;
}

/* Template variants stay inside the same palette (A-17). */
[data-template="nursery"] {
  --tpl-hero-tint: var(--brand-blue-50);
  --tpl-radius: 22px;
  --tpl-font: var(--sl-font-rounded);
  --tpl-accent: var(--brand-red);
}

[data-template="primary"] {
  --tpl-hero-tint: var(--canvas);
  --tpl-radius: 12px;
  --tpl-font: var(--sl-font-sans);
  --tpl-accent: var(--brand-blue);
}

[data-template="junior-high"] {
  --tpl-hero-tint: var(--brand-blue);
  --tpl-radius: 8px;
  --tpl-font: var(--sl-font-sans);
  --tpl-accent: var(--brand-red);
}

[data-template="senior-high"] {
  --tpl-hero-tint: var(--brand-navy);
  --tpl-radius: 4px;
  --tpl-font: var(--sl-font-serif);
  --tpl-accent: var(--brand-red);
}

[data-template="combined"] {
  --tpl-hero-tint: var(--brand-navy);
  --tpl-radius: 10px;
  --tpl-font: var(--sl-font-sans);
  --tpl-accent: var(--brand-blue);
}

:focus-visible {
  outline: var(--sl-focus);
  outline-offset: 2px;
}