/* ============================================================
   HOLY LIGHT — Design Tokens
   Palette sampled directly from the official logo & banner.
   The brand is FLAME (amber → red) on monochrome, with a
   classical serif wordmark. Dark-first.
   ============================================================ */

:root {
  /* ---- Brand flame (sampled from logo_dark.JPG) ---- */
  --flame-amber:  #F99B27;   /* dominant, top of flame */
  --flame-orange: #F36F27;
  --flame-deep:   #F26428;
  --flame-red:    #F04828;   /* flame tip */
  --flame-coral:  #EA7A64;   /* softer, from the banner */
  --flame-soft:   #F0B265;   /* banner amber wash */

  /* Embers — deep warm tones for gradients & surfaces */
  --ember:        #7A2E12;
  --ember-deep:   #3A1508;
  --ember-black:  #1A0B04;

  /* ---- Purple: SECONDARY accent, used sparingly ----
     Flame stays the hero colour. Purple appears only in small doses —
     atmospheric glow, icon gradients, hairline details — as the cool
     counterpoint that makes the flame read hotter. */
  --purple:       #4B2E83;
  --purple-glow:  #6A47B8;
  --purple-deep:  #2A1A4A;

  /* ---- Typography ---- */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;   /* matches the wordmark */
  --font-body:    "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-hero:  clamp(2.6rem, 7.5vw, 6.5rem);
  --fs-h1:    clamp(2.1rem, 5.2vw, 4rem);
  --fs-h2:    clamp(1.7rem, 3.6vw, 2.8rem);
  --fs-h3:    clamp(1.15rem, 1.9vw, 1.45rem);
  --fs-body:  clamp(1rem, 1.1vw, 1.075rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.05;
  --lh-head:  1.16;
  --lh-body:  1.65;

  --tracking-tight: -0.015em;   /* serif needs less negative tracking */
  --tracking-wide:   0.2em;

  /* ---- Layout ---- */
  --wrap:      1240px;
  --wrap-wide: 1600px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  /* Was clamp(4.5rem, 11vh, 9rem) — up to 288px of nothing between every
     pair of sections. Generous spacing reads as considered on a page with
     a lot to say; on these pages it read as unfinished. */
  --section-y: clamp(3rem, 7vh, 5.5rem);

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --dur-fast:   .25s;
  --dur:        .5s;
  --dur-slow:   .9s;

  --z-nav: 100;
  --z-overlay: 200;

  /* ---- Story panel imagery ----
     The panel photos are generated stand-ins, so they are blurred to read as
     atmosphere rather than documentary. Raise --story-blur for more abstract;
     set it to 0 (and the scale to 1) when real photography is dropped in.
     Keep the scale roughly 1 + (blur / 100) so the softened edge stays hidden. */
  --story-blur: 14px;
  --story-blur-scale: 1.14;

  /* Find Us footage brightness. Satellite imagery is bright; lower this if the
     copy is still hard to read, raise it to show more of the aerial. */
  --city-dim: 0.45;

  /* Hero embers. Strength is overall intensity (1 = full, 0 = off);
     blur softens the points into glowing motes. */
  --embers-strength: 0.8;
  --embers-blur: 2px;
}

/* ============================================================
   PALETTE
   Dark is not a mode here, it is the brand — "light out of darkness"
   (John 8:12). There is no light variant and no toggle.
   ============================================================ */
:root {
  color-scheme: dark;

  --base:        #0A0705;   /* warm near-black, matches logo ground */
  --base-2:      #100B08;
  --surface:     #16100C;
  --surface-2:   #1E1611;
  --surface-3:   #2A1F17;

  --text:        #F7F4F1;
  --text-muted:  #ADA49C;
  --text-dim:    #7C736B;

  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.20);

  --accent:      var(--flame-amber);
  --accent-hi:   var(--flame-soft);
  --accent-deep: var(--flame-red);
  --brand:       var(--flame-orange);

  /* "Light out of darkness" — flame glow, with a cool purple counterpoint */
  --glow-hero:
    radial-gradient(920px 640px at 74% 6%,  rgba(249,155,39,.26), transparent 62%),
    radial-gradient(760px 560px at 10% 30%, rgba(106,71,184,.20), transparent 66%),
    radial-gradient(700px 500px at 14% 84%, rgba(240,72,40,.16),  transparent 68%);
  --glow-soft:
    radial-gradient(620px 420px at 50% 0%,  rgba(243,111,39,.20), transparent 72%),
    radial-gradient(520px 380px at 18% 90%, rgba(106,71,184,.16), transparent 74%);

  --shadow:    0 30px 80px rgba(0,0,0,.7);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.5);

  --btn-gold-text: #241002;
  --scrim: linear-gradient(180deg, transparent, rgba(10,7,5,.86) 60%, var(--base));
  --header-bg: rgba(10,7,5,.74);
  --hairline-gradient: linear-gradient(90deg, transparent, var(--flame-amber), transparent);

}

/* Deeper-than-base sections, for bands that need extra contrast */
.force-dark {
  color-scheme: dark;
  --base:       #0A0705;
  --surface:    #16100C;
  --surface-2:  #1E1611;
  --text:       #F7F4F1;
  --text-muted: #ADA49C;
  --line:       rgba(255,255,255,.10);
  --accent:     var(--flame-amber);
  background: var(--base);
  color: var(--text);
}