/* ============================================================================
   INTERACTIVE BIBLE STUDIO DESIGN SYSTEM · tokens.css   
   The single source of truth. Two layers:
     1. BRAND + SHELL + NEUTRAL tokens — constant everywhere (the cohesion).
     2. PER-COURSE ACCENT tokens — set via [data-course="…"] (the character).
   Components read these variables only; they never hard-code a colour.
   Built from Direction B ("Gathered Light"). Accent values are contrast-checked
   for text use on their intended surfaces.
   ========================================================================== */

:root {
  /* ── Brand identity (the wordmark + chrome — never changes per course) ── */
  --brand-gold:        #f6d98a;   /* the brand flame — on dark only */
  --brand-gold-deep:   #d4ae5c;
  --brand-gold-ink:    #6b4e1a;   /* gold as text on parchment (7.0:1) */

  /* ── Shell: the indigo canvas the whole site sits on ── */
  --shell:             #14122a;   /* page background */
  --shell-raised:      #1b1838;   /* raised dark panels */
  --shell-card:        #241f44;   /* dark cards (e.g. "in preparation") */
  --shell-line:        rgba(201,182,226,.16);   /* hairlines on dark */
  --shell-violet:      #c9b6e2;   /* labels/eyebrows on dark */
  --on-shell:          #e9e3d2;   /* primary text on shell */
  --on-shell-soft:     #b9aad0;   /* secondary text on shell */
  --on-shell-faint:    #9b8fb8;   /* tertiary / footer text on shell */

  /* ── Parchment: the warm surfaces (course cards, reading) ── */
  --parchment:         #faf6ee;
  --parchment-deep:    #f1e7d2;
  --parchment-line:    rgba(44,35,24,.12);
  --ink:               #2c2318;   /* headings on parchment (12.4:1) */
  --ink-soft:          #4a3b2c;   /* body on parchment (7.1:1) */
  --ink-faint:         #5a4535;   /* hints on parchment (5.1:1) */

  /* ── State ── */
  --ok:                #1e3010;
  --focus-ring:        #f6d98a;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;  /* hero + titles */
  --font-body:    'Crimson Pro', Georgia, serif;          /* reading */
  --font-label:   'Cinzel', Georgia, serif;               /* eyebrows, UI, wordmark */

  /* fluid type scale (~1.22 ratio), serif-forward */
  --t-display: clamp(40px, 7vw, 76px);   /* hero */
  --t-title:   clamp(30px, 4.4vw, 46px); /* course / page titles */
  --t-h2:      clamp(24px, 3vw, 32px);
  --t-h3:      23px;
  --t-lead:    19px;                     /* italic standfirst */
  --t-body:    17px;
  --t-small:   15px;
  --t-label:   11px;                     /* Cinzel, letter-spaced, caps */
  --t-eyebrow: 11px;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.62;
  --ls-label: 2.4px;   /* letter-spacing for Cinzel labels */
  --ls-eyebrow: 4px;

  /* ── Spacing (4px base) ──────────────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;  --space-10: 64px; --space-11: 80px; --space-12: 96px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --r-sm:   2px;    /* course interior keeps the original square-ish feel */
  --r-md:   8px;    /* cards in the shell */
  --r-lg:   14px;   /* large panels / modern surfaces */
  --r-pill: 999px;

  /* ── Elevation + glow ────────────────────────────────────────────────── */
  --shadow-card:  0 18px 50px rgba(0,0,0,.40);
  --shadow-float: 0 26px 64px rgba(0,0,0,.50);
  --shadow-soft:  0 8px 24px rgba(0,0,0,.28);

  /* ── Motion (reduced-motion zeroes these where used) ─────────────────── */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: .18s;  --dur-base: .26s;  --dur-slow: .7s;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container: 1100px;
}

/* ============================================================================
   PER-COURSE ACCENT THEMES
   Each sets the same contract so any component retints by wrapping it in
   `data-course="…"`. The shell + parchment + brand stay constant.
   Contract:
     --accent        bright accent for dark surfaces (CTAs, glow, progress)
     --accent-deep   mid tone for fills/bars
     --accent-ink    accent as TEXT on parchment (contrast-checked)
     --glow          hero radial-glow hue
     --thread-1/2/3  the course's three threads (its conceptual triad)
   ========================================================================== */

/* 1 JOHN — "That You May Know" · gold, certainty/communion/conduct (LOCKED) */
[data-course="1john"] {
  --accent:      #f6d98a;
  --accent-deep: #b8923a;
  --accent-ink:  #6b4e1a;
  --glow:        rgba(246,217,138,.50);
  --thread-1: #d4ae5c;  --thread-1-ink: #6b4e1a;  /* certainty — gold  */
  --thread-2: #96ab64;  --thread-2-ink: #3a4a25;  /* communion — olive */
  --thread-3: #b5683f;  --thread-3-ink: #6b2e0f;  /* conduct  — sienna */
  --course-title: "That You May Know";
}

/* PSALMS — "Songs in the Night" · twilight→morning blue (future course) */
[data-course="psalms"] {
  --accent:      #8fb4d9;
  --accent-deep: #3f5e8c;
  --accent-ink:  #28425f;
  --glow:        rgba(143,180,217,.46);
  --thread-1: #8fb4d9;  --thread-1-ink: #28425f;  /* night     */
  --thread-2: #6f7fa8;  --thread-2-ink: #353f63;  /* watch      */
  --thread-3: #d8b56a;  --thread-3-ink: #6b4e1a;  /* morning    */
  --course-title: "Songs in the Night";
}

/* ROMANS — "No Condemnation" · ember crimson, guilt→grace→glory (future) */
[data-course="romans"] {
  --accent:      #d98a6b;
  --accent-deep: #9b3b2e;
  --accent-ink:  #7a2a1e;
  --glow:        rgba(217,138,107,.46);
  --thread-1: #9b3b2e;  --thread-1-ink: #7a2a1e;  /* guilt      */
  --thread-2: #c2722f;  --thread-2-ink: #6e3f15;  /* grace      */
  --thread-3: #c8a84e;  --thread-3-ink: #6b4e1a;  /* glory      */
  --course-title: "No Condemnation";
}

/* Sensible default if data-course is absent → fall back to brand gold */
:root {
  --accent:      var(--brand-gold);
  --accent-deep: var(--brand-gold-deep);
  --accent-ink:  var(--brand-gold-ink);
  --glow:        rgba(246,217,138,.50);
  --thread-1: #d4ae5c; --thread-2: #96ab64; --thread-3: #b5683f;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .001s; --dur-base: .001s; --dur-slow: .001s; }
}