/* ============================================================
   Sam Yugos — Design Tokens
   Token architecture: W3C DTCG approach via CSS custom properties
   (designtokens.org; css-tricks.com/what-are-design-tokens/)
   Palette anchored in Sam's cover art (navy/gold/ivory) — see
   docs/2026-08-24/research/DESIGN_RESEARCH.md §6
   Dark theme rules: Material dark theme (m2.material.io/design/color/dark-theme)
   + web.dev/articles/prefers-color-scheme — no pure #000/#FFF,
   desaturated accents, elevation by lightness.
   ============================================================ */

:root {
  /* ---- Brand primitives ---- */
  --brand-navy-900: #141a29;
  --brand-navy-800: #1c2333;
  --brand-navy-600: #2e3a56;
  --brand-gold-700: #8a6d1f;
  --brand-gold-500: #c9a227;
  --brand-gold-300: #d9bc62;
  --brand-ivory: #faf7f2;

  /* ---- Semantic: LIGHT theme (default) ---- */
  --bg: #faf7f2;               /* warm ivory ground */
  --surface: #ffffff;           /* cards */
  --surface-alt: #f1ece2;       /* alternating sections */
  --text: #1c2333;              /* 14.6:1 on --bg (WCAG AAA) */
  --text-muted: #4a5265;        /* 7.5:1 on --bg (AA+) */
  --accent: #8a6d1f;            /* gold usable as text: 5.4:1 on --bg */
  --accent-strong: #6f5719;     /* hover state */
  --accent-decor: #a3831c;      /* meaningful icons/rules: 3.4:1 (WCAG 1.4.11) */
  --cta-bg: #1c2333;
  --cta-text: #faf7f2;          /* 13.9:1 */
  --border: #ddd5c5;            /* decorative hairlines */
  --border-input: #8f8468;      /* form control borders: 3.5:1 (WCAG 1.4.11) */
  --focus-ring: #1c2333;
  --scripture-bg: #f1ece2;
  --shadow: 0 2px 12px rgba(28, 35, 51, 0.08);

  /* ---- Type scale: 1.25 major third (Tim Brown, A List Apart,
     "More Meaningful Typography") base 1.0625rem = 17px
     (Butterick: 15–25px body) ---- */
  --fs-sm: 0.85rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.328rem;
  --fs-lg: 1.66rem;
  --fs-xl: 2.075rem;
  --fs-2xl: 2.594rem;
  --fs-3xl: 3.242rem;

  /* Line heights: Butterick 120–145% for body */
  --lh-body: 1.6;
  --lh-heading: 1.15;

  /* ---- Fonts (Google Fonts: Fraunces — Charles/Zimbardi;
     Inter — Rasmus Andersson) ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

  /* ---- Spacing: 8px base grid ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6rem;

  /* ---- Layout ---- */
  --measure: 65ch;              /* Butterick: 45–90 char line length */
  --container: 72rem;
  --radius: 10px;
  --radius-lg: 18px;

  /* Touch targets ≥44px (Apple HIG; WCAG 2.5.8 min 24px) */
  --tap: 44px;

  color-scheme: light dark;     /* web.dev/articles/color-scheme */
}

/* ---- Semantic: DARK theme ----
   Surfaces #121212-family, not #000; text ~87% ivory, not #FFF;
   gold lightened+desaturated for contrast on dark (Material dark theme). */
[data-theme="dark"] {
  --bg: #14161d;
  --surface: #1d2029;
  --surface-alt: #191c24;
  --text: #e8e4da;              /* ~87% ivory: 12.7:1 on --bg */
  --text-muted: #a8aebd;        /* 6.8:1 */
  --accent: #d9bc62;            /* light gold: 8.6:1 on --bg */
  --accent-strong: #e5cd82;
  --accent-decor: #d9bc62;
  --cta-bg: #d9bc62;
  --cta-text: #14161d;          /* 8.6:1 */
  --border: #323748;            /* decorative hairlines */
  --border-input: #5b6480;      /* form borders: 3.1:1 (WCAG 1.4.11) */
  --focus-ring: #d9bc62;
  --scripture-bg: #191c24;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161d;
    --surface: #1d2029;
    --surface-alt: #191c24;
    --text: #e8e4da;
    --text-muted: #a8aebd;
    --accent: #d9bc62;
    --accent-strong: #e5cd82;
    --accent-decor: #d9bc62;
    --cta-bg: #d9bc62;
    --cta-text: #14161d;
    --border: #323748;
    --focus-ring: #d9bc62;
    --scripture-bg: #191c24;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  }
}