/* Bible Biker Ministries — GO HARD mockup tokens.
 *
 * Every color, size, line-height and spacing value used across the
 * mockup pages lives here. Nothing in a page's own <style> block should
 * be a literal hex, px/rem/vw font-size, or bare line-height number --
 * if a new value is needed, it gets a name here first.
 *
 * This is the direct cause of the round-3 punch list (line-height too
 * tight, an invented orange instead of a real logo color, a max-width
 * that produced four lines instead of two, a favicon nobody added): none
 * of those values had a name, so nobody could check them, and each round
 * re-guessed instead of reusing a ruling. See DESIGN.md in this folder
 * for the reasoning behind each token.
 */
:root {
  /* --- Color: every value here is either measured off the real logo
     art (Calvary-Graphic-Master-PRINT_FINAL.png, measured 2026-09-14)
     or a named, commented exception where the raw measurement fails
     contrast. Never invent a new color inline. --- */
  --black:        #0d0d0d;   /* rough/dark ground */
  --paper:        #F5EFE3;   /* light ground (patches, numeral band) */
  --ink:          #221A13;   /* body text on --paper */
  --cream:        #F2E8D8;   /* text on dark grounds */
  --gold:         #D8AB1D;   /* measured, 5.84% coverage, 9.68:1 on black */
  --gold-dark:    #B98F14;   /* gold button hover (round 15) */
  --gap-card:     2rem;      /* round 16: card gutters, a touch wider (was 1.5rem) to cut the crowding */
  --gap-card-sm:  1.25rem;
  --blood:        #6B0F0F;   /* measured family (~#821919), darkened for
                                 large fills so it reads as a surface, not
                                 a text color */
  --blood-dark:   #4A0A0A;   /* --blood's hover/pressed shade, same ratio
                                 the live site already uses for
                                 --rust -> --rust-dark */
  --ink-soft:     #4a3c2c;   /* muted body text on --paper (secondary
                                 emphasis -- the .chapter paragraph) */
  --cream-soft:   rgba(242,232,216,.9);  /* --cream at reduced emphasis
                                 for long paragraphs on dark grounds */
  --cream-faint:  rgba(242,232,216,.4);  /* --cream at lowest emphasis --
                                 footer credit lines, nothing above it */
  --gold-line:    rgba(216,171,29,.55);  /* --gold as a thin border/rule,
                                 not a fill (the stamp-frame double rule) */
  --shadow-soft:  rgba(0,0,0,.35);   /* small lifted elements (a photo
                                 rotated inside a card) */
  --shadow-strong: rgba(0,0,0,.6);   /* larger lifted elements (the hero
                                 wordmark floating off the leather) */
  --shadow-lift: 0 14px 30px rgba(0,0,0,.6);  /* the one recipe for a photo
                                 lifted off a surface (hero art print, story
                                 floats) -- was retyped per element, Fable
                                 round 11 */
  --sup-size: .65em;  /* verse-number superscripts in scripture */

  /* --- Panel shadow: for a dark leather panel floating on another dark
     ground (the hero banner) -- --shadow-card's warm ink tone is tuned
     for paper, not leather-on-leather, so this is its own recipe: a
     tight near-black contact shadow plus a big soft ambient one. --- */
  --shadow-panel: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.55), 0 60px 90px rgba(0,0,0,.35);

  /* REMOVED 2026-09-14: --blood-bright (#D4553F), the lightened-red
     exception for text-on-black. Mike ruled it still read as orange and
     wanted gold there instead -- gold already carries "important/accent"
     everywhere else on the page (ticker, nav, chapter labels), so the
     hero's third line uses --gold now. No text-on-black red token exists
     until a real future need proves one is worth the contrast math again. */

  /* --- Type scale: a fixed set of sizes, each fluid (clamp), so no page
     invents a one-off font-size. Name says the job, not the pixel value. */
  --text-body:     clamp(17px, .95vw + 10px, 21px);
  --text-lead:     clamp(1.05rem, .5vw + .95rem, 1.35rem);   /* hero/closing paragraphs */
  --text-poem:     clamp(1.3rem, .9vw + 1.05rem, 1.75rem);   /* God's Theater: Mike, round 14, "too small"; it is the only verse on the site and it sits on a photo */
  --text-label:    clamp(.8rem, .4vw + .7rem, 1rem);          /* nav, ticker, eyebrow */
  --text-h2:       clamp(2rem, 2.6vw + 1rem, 3.4rem);         /* section headings (Anton) */
  --text-callback: clamp(1.4rem, 1.6vw + .9rem, 2.1rem);      /* one-line red callback */
  --text-hero:     clamp(3rem, 9vw, 8.5rem);                  /* the hero headline stack */
  --text-micro:    clamp(.68rem, .3vw + .62rem, .85rem);      /* chapter-num, stamp-chip */
  --text-caption:  clamp(.62rem, .2vw + .58rem, .72rem);      /* r112 (Mike): bold all-caps photo captions, smaller than micro */
  --text-btn:      var(--text-label);                          /* round 21: the button label gets its own token so phone
                                                                   label bumps don't grow the buttons (Mike: "cta button text
                                                                   ... sized well on mobile") */
  --text-fine:     clamp(.68rem, .3vw + .62rem, .85rem);      /* round 21: footer disclaimer only; the one size that stays small on phones */
  --text-title:    clamp(2.2rem, 5vw, 4.2rem);                /* a page's own title (a sermon, a study
                                                                   series) -- between --text-h2 and --text-hero:
                                                                   it's the biggest thing on its page but it
                                                                   has to hold titles nine words long ("The
                                                                   Plain Truth About Ellen White and the
                                                                   Trinity"), which --text-hero can't. Added
                                                                   2026-09-14 for the sermon pages. */
  --text-h3:       clamp(1rem, .5vw + .85rem, 1.2rem);         /* round 16: a notch smaller so card titles hold two lines */      /* card titles (sermon cards, episode cards):
                                                                   Anton, so it reads as display at a size
                                                                   Literata would call body. Added 2026-09-14. */
  --text-num:      clamp(6rem, 16vw, 13rem);                  /* RESERVED, not currently placed on
                                                                   any page -- was the homepage's giant
                                                                   "60", cut 2026-09-14 for repeating
                                                                   the hero headline. Candidate for a
                                                                   different page (About/Testimony);
                                                                   kept named rather than deleted so
                                                                   that reuse doesn't re-invent it. */

  /* --- Line-height: named, never a bare number in a rule. --- */
  --lh-body:    1.65;
  --lh-tight:   .92;   /* hero headline stack -- ruled 2026-09-14: .86 read
                           as lines touching, .92 is the floor that still
                           reads as "tight" without colliding */
  --lh-snug:    1.05;  /* section headings (h2.slab) */
  --lh-display: 1.15;  /* short display statements (the red callback line) */
  --lh-caps:    1;     /* buttons: text is centred by flex, never by line-height (round 45, universal) */
  --lh-caps-x:  1;     /* round 40 (Mike, universal, all projects): all-caps text is always set solid, 20pt on 20pt. Every uppercase selector takes this. */
  --lh-label:   1.12;  /* round 23 (Mike): bold Archivo labels that wrap to two lines (the wordmark next to the logo, chips, kickers) sit tight */

  /* --- Measure (line-wrap width): named per use, chosen by rendering the
     real copy and counting lines, never guessed. Pair with text-wrap:
     balance (in base.css) so the browser also helps. --- */
  --measure-callback: 44ch;  /* round 16: Mike wants the quote on two lines; 34ch made three */  /* ruled 2026-09-14: 20ch produced 4 lines on
                                 "Take it from the Bible Biker..."; 34ch
                                 holds it to 2 at the standard hero width */
  --measure-lead:      30em;
  --measure-read:      66ch;  /* long-form reading column (a sermon body): Literata
                                 at --text-body, 66ch keeps 12-15 words a line, the
                                 classic book measure. Added 2026-09-14; checked
                                 against the real sermon copy at 390/900/1440px. */

  /* --- Page margin: the one horizontal gutter every section uses, so
     content never runs up against the viewport edge. Ruled 2026-09-14,
     round 8, after several sections were each carrying their own small
     fixed rem value (1.25rem-1.5rem) that never grew on a wide screen --
     tight on a phone AND tight on a 1440px monitor is the same bug twice.
     Fluid instead: generous room on a wide screen, still reasonable on
     mobile. Every section's horizontal padding should reference this,
     never a fresh literal. */
  --page-margin: clamp(1.5rem, 5vw, 5rem);

  /* --- Surfaces: named background TREATMENTS, not raw texture calls.
     A page picks a surface by name; it never writes its own
     background-image line. Leather = red/blood only. Rough = every
     other dark ground. The hero is the one named exception (a jacket
     is leather everywhere, not just the red parts) and gets its own
     token rather than a one-off rule. */
  --surface-leather-red:   linear-gradient(rgba(107,15,15,.78), rgba(107,15,15,.78)), url("../assets/img/textures/leather.jpg");
  --surface-leather-dark:  linear-gradient(rgba(13,13,13,.52), rgba(13,13,13,.52)), url("../assets/img/textures/leather.jpg");
  --surface-patch-paper:   linear-gradient(rgba(245,239,227,.9), rgba(245,239,227,.9)), url("../assets/img/textures/paper.jpg");

  /* Veils: --black at three strengths for laying copy over a photo (the
     God's Theater poem: heavy over the text, light over the road). Named
     round 11 after Fable flagged them as raw rgba() literals. */
  --veil-heavy:   rgba(13,13,13,.92);
  --veil-mid:     rgba(13,13,13,.85);
  --veil-light:   rgba(13,13,13,.25);
  --glow-soft:    rgba(255,255,255,.06);  /* the closing's faint radial light */
  --watermark-hero:    .14;  /* emblem ghost in the hero corner */
  --watermark-closing: .22;  /* emblem impression in the closing leather */

  /* Photo grades: two recipes, named so pages stop re-typing them.
     --grade-photo warms and punches real photographs (strip, carousel,
     patch-grid); --grade-patch darkens the studio patch photo so its
     neutral glossy leather sits in the hero's darker, warmer leather.jpg
     instead of reading as a lighter panel (Fable, round 11). */
  --grade-photo: contrast(1.12) sepia(.12) saturate(.95);
  --grade-patch: brightness(.8) contrast(1.05) sepia(.18);
  --grade-painting: brightness(.92) contrast(1.04) saturate(.92); /* round 13: the hero painting; slightly pulled back so cream type wins, never darkened like the patch photo */

  /* --black as a translucent overlay (the photo-strip vignette) --
     named so that value doesn't get retyped as a raw rgba() a second
     time and drift from the solid --black it's supposed to match. */
  --black-veil: rgba(13,13,13,.5);

  /* --- Shadow: one lush, layered shadow for any card on --paper, not a
     single heavy drop-shadow. Three layers (contact, lift, ambient) is
     the actual editorial-print recipe -- a tight dark shadow close to
     the card, a softer mid shadow, and a big diffuse one that reads as
     the card floating in real light, not just "shadow turned up." */
  --shadow-card: 0 1px 2px rgba(34,26,19,.10), 0 10px 20px rgba(34,26,19,.14), 0 32px 56px rgba(34,26,19,.18);

  /* --- Seam: ruled 2026-09-14, round 5 -- the gold-hairline-plus-dash
     version read as a thick border, not stitching. Real topstitch is a
     muted THREAD color (not the bright accent gold), sitting in a
     shadowed groove, with each stitch catching a highlight -- that's
     what makes it read as raised thread rather than a printed line. */
  --patch-border:     #0d0d0d;  /* the die-cut merrow border traced around
                                 the logo's own silhouette (round 9) --
                                 real embroidered-patch black, not --black
                                 reused for a different reason */
  --thread:           #B98A3E;
  --thread-line:      rgba(185,138,62,.6);  /* --thread translucent, for
                                 a second/inner stitch line paired with a
                                 solid --thread border (the patch, round 9) */
  --thread-groove:    rgba(0,0,0,.4);
  --thread-highlight: rgba(255,255,255,.22);

  /* The hero wordmark's size, named because it's read in two places
     (the image itself and the text column that has to leave room for
     it) -- round 4's collision bug was exactly these two going out of
     sync. One token, used both places, can't drift. */
  --logo-hero-w: clamp(340px, 34vw, 540px);

  /* ---- Round 16 tokenization pass (Fable audit): spacing, geometry, effects ---- */
  --measure-panel: 1050px;     /* story/reading panels */
  --measure-wide: 1400px;      /* card groups, poem inner */
  --measure-hero: 1800px;      /* hero inner */
  --pad-panel-y: clamp(2rem, 5vw, 3.5rem);
  --pad-panel-x: clamp(1.5rem, 6vw, 5rem);
  --pad-card: 1rem;
  --space-section: 3.5rem;
  --space-panel: 3rem;
  /* r112 page hero (Mike: text must not run over to the photo): one template for every page */
  --hero-text-max: 34rem;                      /* headline + sub wrap before reaching the art */
  --hero-gap: clamp(2.5rem, 6vw, 6rem);         /* air between text column and art */
  --hero-art-max: 520px;
  --space-row: clamp(1.75rem, 3vw, 2.5rem);     /* r112: between stacked media rows sitewide */
  --gap-tight: 1rem;
  --gap-panel: 2.5rem;
  --float-w: min(38%, 260px);
  --float-w-sm: min(30%, 200px);
  --float-gutter: 1.5rem;
  --featured-max-h: 380px;
  --track-tight: .01em;
  --track-label: .06em;
  --track-wide: .1em;
  --track-kicker: .08em;
  --track-btn: .04em;
  --track-eyebrow: .12em;
  --gap-grid: 2rem;
  --gap-wide: 3.5rem;
  --gap-card-row: 1.5rem;
  --lift: -3px;
  --reveal-shift: 24px;
  --reveal-dur: .7s;
  --seam-h: 18px;
  --thread-y: 5px;
  --thread-h: 7px;
  --grain-line: rgba(255,255,255,.04);
  --grain-tile: 500px 500px;
  --veil-texture: .92;
  --blend-texture: .5;
  --grade-card: contrast(1.05);
  --btn-icon: 44px;
  --thumb: 64px;
  --logo-nav-h: clamp(56px, 6vw, 84px);
  --hero-min-h: clamp(420px, 44vw, 640px);
  --hero-photo-w: 56%;
}

/* Phone type (Mike, 2026-09-16, rounds 19-22). RULE, all projects: text
   scales with the viewport, never fixed px. Every value below is vw-based
   with a floor and a ceiling; the numbers were tuned at 412px (Mike's
   phone) where body lands at 20px, buttons at 17px (both "sized well"),
   and everything else a step up for older eyes. Footer keeps --text-fine. */
@media (max-width: 699px) {
  :root {
    --text-body:     clamp(17px, 4.9vw, 21px);
    --text-btn:      clamp(15px, 4.1vw, 18px);
    --text-lead:     clamp(19px, 5.6vw, 24px);
    --text-label:    clamp(16px, 4.6vw, 20px);
    --text-micro:    clamp(14px, 3.9vw, 17px);
    --text-caption:  clamp(12px, 3.3vw, 14px);
    --text-h3:       clamp(21px, 6.6vw, 28px);   /* round 22: "The Bible header is too small proportionally" */
    --text-poem:     clamp(21px, 6.2vw, 27px);
    --text-hero:     15vw;                        /* "ONE MESSAGE." holds one line 320-699 */
    --text-h2:       clamp(36px, 11vw, 48px);
    --text-title:    clamp(38px, 11.7vw, 50px);
    --text-callback: clamp(24px, 7.3vw, 32px);
  }
}