/*
 * Faith Matters v1 — design tokens
 *
 * Every value is measured from TEMPLATE_interpreted.json (FM email TEMPLATE v1.7.ai).
 * Each section-specific metric carries a comment with its JSON source.
 *
 * No invented padding. No round-number "friendly" spacing. The artboard
 * has intentional asymmetry; tokens preserve it.
 *
 * Dev-only authoring sugar. The inliner resolves every var() to a literal
 * before juice runs.
 */

:root {

  /* ─────────────────────────────────────────────────────────────
   * SEMANTIC COLORS — every design color points at the editorial
   * palette below. The palette is the source of truth; semantic
   * tokens are the names modules use.
   *
   * Where the TEMPLATE JSON specified a color that isn't in the
   * palette, it's been re-mapped to the nearest palette token.
   * Documented in RECONCILIATION.md.
   * ───────────────────────────────────────────────────────────── */

  --fm-color-hero-green:      var(--fm-color-sage-2);   /* was #8DC63F (TEMPLATE) → sage-2 */
  --fm-color-gold:            #A27E2D;                  /* LOCKED — original TEMPLATE gold, kept outside the palette for rules / bar / dividers */
  --fm-color-body-brown:      var(--fm-color-tan-4);    /* was #673D09 (TEMPLATE) → tan-4 */
  --fm-color-q-photo-bg:      var(--fm-q-green-1);      /* Q-section outer wrapper — lightest green */
  --fm-color-q-photo-inner:   var(--fm-q-green-3);      /* Q-section inner photo+headline panel — medium-dark green */
  --fm-color-q-photo-image:   var(--fm-q-green-5);      /* fallback bg behind photo cell when no image */
  --fm-color-q-marker:        var(--fm-q-green-2);      /* Q: glyph color */
  --fm-color-q-text:          var(--fm-q-green-5);      /* Q-section dark accent text */
  --fm-color-button-bg:       var(--fm-q-green-3);      /* canonical button bg (Q-section MORE button) */
  --fm-color-legal-bg:        #D1D3D4;                  /* JSON-exact neutral gray; intentionally outside the tan palette */
  --fm-color-basic-bg:        var(--fm-color-tan-1);    /* basic-section panel — lightest tan */

  --fm-color-button-stroke:   #FFFFFF;                  /* structural — outside the palette */
  --fm-color-white:           #FFFFFF;                  /* structural */
  --fm-color-canvas-bg:       #FFFFFF;                  /* structural */
  --fm-color-page-surround:   #6B6B6B;                  /* structural — outside the 600px canvas */

  /* ─────────────────────────────────────────────────────────────
   * EDITORIAL PALETTE — 5 families × 4 shades each (20 colors)
   * Source: assets/colors/colors_1_interpreted.json
   * Shade 1 = lightest, shade 4 = darkest (left → right on the artboard).
   *
   * Family overlaps with JSON-locked structural colors:
   *   sage-2 (#92AB71) = Q-marker glyph color
   *   sage-3 (#547332) = Q-section text + button fill
   * Both keep their semantic Q-section tokens below; this palette
   * just formalizes the family they belong to.
   *
   * The tan family does NOT include #A27E2D (the TEMPLATE-locked gold
   * used by rules / dividers / branded bar). That hex sits between
   * tan-2 and tan-3 — kept separate as --fm-color-gold above.
   * ───────────────────────────────────────────────────────────── */

  --fm-color-tan-1:    #DDD0B2;
  --fm-color-tan-2:    #C0AA7C;
  --fm-color-tan-3:    #90713D;
  --fm-color-tan-4:    #5E3D15;

  --fm-color-sage-1:   #C1D1AA;
  --fm-color-sage-2:   #92AB71;   /* same as --fm-color-q-marker */
  --fm-color-sage-3:   #547332;   /* same as --fm-color-q-text and --fm-color-button-bg */
  --fm-color-sage-4:   #243F0E;

  /* fray-blue: per-section palette for the IN-THE-FRAY section.
   * Naming convention: --fm-<section>-<hue>-<shade>. Other sections
   * will move to their own section-scoped palettes as the redesign
   * progresses. */
  --fm-fray-blue-1:    #D9E6EF;
  --fm-fray-blue-2:    #86A9C5;
  --fm-fray-blue-3:    #477098;
  --fm-fray-blue-4:    #2B527D;

  /* virtue-brown: per-section palette for the VIRTUE OF THE MONTH section.
   * 5 shades, lightest to darkest. -1 is the section bg; -3 is the
   * scripture box bg; -5 is the dark accent text/bracket/decoration. */
  --fm-virtue-brown-1: #E7DDC8;
  --fm-virtue-brown-2: #BDA67B;
  --fm-virtue-brown-3: #9B7D4B;
  --fm-virtue-brown-4: #7F5E2E;
  --fm-virtue-brown-5: #5E3D16;

  /* q-green: per-section palette for the Q-section (interview feature).
   * 5 shades, lightest to darkest. */
  --fm-q-green-1:      #D6E2C0;
  --fm-q-green-2:      #97B16D;
  --fm-q-green-3:      #6B8B3E;
  --fm-q-green-4:      #4C6D23;
  --fm-q-green-5:      #365614;

  --fm-color-peach-1:  #EFCEA8;
  --fm-color-peach-2:  #E0A66F;
  --fm-color-peach-3:  #C56D2F;
  --fm-color-peach-4:  #A2390D;

  --fm-color-mauve-1:  #CAB2C0;
  --fm-color-mauve-2:  #A07C91;
  --fm-color-mauve-3:  #653D52;
  --fm-color-mauve-4:  #321524;

  /* (--fm-color-basic-bg defined above as tan-1 — the active basic-section
   *  panel bg; swap to any of the 20 palette tokens per issue.) */

  /* ─────────────────────────────────────────────────────────────
   * TYPE  — Merriweather everywhere (loaded via Google Fonts in <head>).
   * Georgia is the fallback for Outlook desktop / Outlook mobile, which
   * strip the @import and fall back along the stack.
   * Sans stack still Arial for the button (Trend Sans in JSON).
   * ───────────────────────────────────────────────────────────── */

  --fm-font-serif: "Merriweather", Georgia, "Times New Roman", Times, serif;
  --fm-font-sans:  Arial, Helvetica, sans-serif;

  --fm-fs-headline:    32px;   /* JSON: "new SECTION" Merriweather 32.3px */
  --fm-fs-body:        16px;   /* JSON: body Lorem ipsum Merriweather 16px */
  --fm-fs-question:    18px;   /* JSON: "Question here..." Merriweather 18px */
  --fm-fs-q-marker:    43px;   /* JSON: "Q:" Merriweather 42.9px */
  --fm-fs-button:      14px;   /* JSON: "more" Trend Sans 14px */
  --fm-fs-legal:       16px;   /* LOCKED — legal copy must match body size at all times (compliance requirement) */

  /* ─────────────────────────────────────────────────────────────
   * LAYOUT  — canvas, margins, body insets (JSON measurements)
   * ───────────────────────────────────────────────────────────── */

  --fm-width:                 600px;        /* JSON canvas width */
  --fm-margin-outer:          42px;         /* JSON: pink rails x=0–42 and x=558–600 */
  --fm-content-width:         516px;        /* 600 − 2×42 */
  --fm-body-inset:            36px;         /* JSON: basic/Q body text x=36 w=528 → 36px each side */
  --fm-legal-inset:           42px;         /* JSON: legal text x=42 w=515 → 42px each side */

  /* ─────────────────────────────────────────────────────────────
   * HEADER IMAGE  (the green hero + gold bar) — JSON y=0–382
   * ───────────────────────────────────────────────────────────── */

  --fm-hero-height:           360px;        /* JSON: green rect h=360 */
  --fm-gold-bar-height:       22px;         /* JSON: gold rect 600×22 at y=360 */

  /* ─────────────────────────────────────────────────────────────
   * BASIC SECTION  (the gold panel + bracketed headline + body)
   * JSON: panel rect 600×294 fill #A27E2D at y=704
   * ───────────────────────────────────────────────────────────── */

  --fm-basic-panel-height:    294px;        /* JSON: panel h=294 */
  --fm-basic-pad-top:         41px;         /* JSON: headline y=745 − panel y=704 */
  --fm-basic-pad-gap:         27px;         /* JSON: body y=804 − (headline y=745 + ~32px headline height) */
  --fm-basic-bracket-rule-w:  60px;         /* JSON: stroke x=114 w=60 (left) and x=425 w=60 (right) */
  --fm-basic-bracket-tick-h:  30px;         /* JSON: stroke x=175 h=30 (vertical tick centered on rule y=761) */
  --fm-basic-bracket-rule-y:  15px;         /* tick height/2 — vertical tick extends 15px above and below the rule */

  /* Headline bracket-to-text gap — single token controls the space between the
   * bracket inner edge and the headline text on BOTH sides.
   * Overrides the asymmetric 17/22px JSON measurements (kept above for audit). */
  --fm-headline-bracket-gap:  20px;

  /* Headline bracket geometry — the bracket is a `]` / `[` shape:
   *   top horizontal + connecting vertical + bottom horizontal.
   *   The vertical sits at the inner end (toward the headline).
   *   Distance between top and bottom horizontals = bracket-height. */
  --fm-headline-bracket-rule-w:  60px;
  --fm-headline-bracket-height:  32px;


  /* ─────────────────────────────────────────────────────────────
   * TRANSITION DIVIDER  (the gold "+" cross between sections)
   * JSON: rule stroke #A27E2D 1.22px full-width at y=438, y=998, y=2549
   *       cross — vertical x=300 y=406 h=21, horizontal x=295 y=414 w=10
   * Cross is 10w × 21h, centered, ~24px below the rule (rule y=438, cross y=406? Actually
   *   the cross at y=406-427 sits ABOVE the rule at y=438. So order: cross → rule.)
   * ───────────────────────────────────────────────────────────── */

  --fm-divider-rule-w:        1px;          /* JSON stroke 1.22 → 1px for email-safe */
  --fm-divider-cross-w:       10px;         /* JSON cross horizontal w=10 */
  --fm-divider-cross-h:       21px;         /* JSON cross vertical h=21 */

  /* ─────────────────────────────────────────────────────────────
   * Q: PHOTO SECTION  (olive panel + dark olive photo column + headline)
   * JSON: panel rect 600×188 fill #6F8C4C at y=1217
   *       photo rect 227×188 fill #33441C at y=1217 x=0
   *       headline text x=265 y=1248 w=100 (font outlined → 0px in JSON)
   *       bracket-above stroke #33441C  x=266 y=1302 w=70
   *       bracket-below stroke #33441C  x=266 y=1380 w=70
   * ───────────────────────────────────────────────────────────── */

  --fm-q-photo-panel-h:       188px;        /* JSON: panel h=188 */
  --fm-q-photo-image-w:       227px;        /* JSON: photo column w=227 */
  --fm-q-photo-content-x:     38px;         /* JSON: content text x=265 − photo right x=227 = 38 */
  --fm-q-photo-bracket-w:     70px;         /* JSON: bracket stroke w=70 */
  --fm-q-photo-headline-y:    31px;         /* JSON: headline y=1248 − panel y=1217 = 31 (from panel top to headline top) */
  --fm-q-photo-bracket-above: 54px;         /* JSON: bracket-above y=1302 − headline y=1248 = 54 */
  --fm-q-photo-bracket-below: 132px;        /* JSON: bracket-below y=1380 − headline y=1248 = 132 */

  /* ─────────────────────────────────────────────────────────────
   * Q: SPECIFIC ART  (Q-marker + L-bracket + question + body)
   * JSON: Q-marker  x=37  y=1440 w=43 h=- Merriweather 43px #92AB71 "Q:"
   *       L-bracket vertical   x=28 y=1447 h=30  #FFFFFF 0.76px
   *       L-bracket horizontal x=0  y=1462 w=28  #FFFFFF 0.76px
   *       question text x=94  y=1447 w=434  Merriweather 18px #547332
   *       body text     x=36  y=1512 w=528  Merriweather 16px #547332
   * ───────────────────────────────────────────────────────────── */

  --fm-q-art-marker-w:        60px;         /* visual column for the "Q:" glyph (43px text + breathing room to x=80) */
  --fm-q-art-marker-q-gap:    14px;         /* JSON: question x=94 − Q-marker right (37+43)=80 = 14 */
  --fm-q-art-bracket-h:       30px;         /* JSON: white vertical bracket h=30 */
  --fm-q-art-bracket-w:       28px;         /* JSON: white horizontal bracket w=28 */
  --fm-q-art-q-to-body:       65px;         /* JSON: body y=1512 − Q-marker y=1440 − ~7 baseline offset */

  /* ─────────────────────────────────────────────────────────────
   * BUTTON  (bulletproof CTA)
   * JSON: button rect 132×35 fill #547332 stroke #FFFFFF 2.29px at y=1884 x=237
   *       label "more" Trend Sans 14px #FFFFFF at y=1894 x=276 w=54
   * ───────────────────────────────────────────────────────────── */

  --fm-button-w:              132px;        /* JSON button width */
  --fm-button-h:              35px;         /* JSON button height */
  --fm-button-stroke-w:       2px;          /* JSON stroke 2.29 → 2px for email-safe */
  --fm-button-label-x:        39px;         /* JSON: label x=276 − button x=237 = 39 (left pad to label) */
  --fm-button-label-y:        10px;         /* JSON: label y=1894 − button y=1884 = 10 (top pad to label) */

  /* ─────────────────────────────────────────────────────────────
   * LEGAL SECTION  (gray panel + body + gold top rule)
   * JSON: panel rect 600×335 fill #D1D3D4 at y=2214
   *       gold rule stroke #A27E2D 1.22px at y=2214 (panel top)
   *       gold rule stroke #A27E2D 1.22px at y=2549 (panel bottom)
   *       body text x=42 y=2256 w=515 — outlined text frame
   * ───────────────────────────────────────────────────────────── */

  --fm-legal-panel-h:         335px;        /* JSON: legal panel h=335 */
  --fm-legal-pad-top:         42px;         /* JSON: body y=2256 − panel y=2214 = 42 */
  --fm-legal-body-w:          515px;        /* JSON: body w=515 */

  /* ─────────────────────────────────────────────────────────────
   * SPACER scale (no JSON measurement for inter-section gaps — these
   * are determined by the editorial composition of each issue, not
   * by TEMPLATE. Scale kept simple: small / medium / large / xl.)
   * ───────────────────────────────────────────────────────────── */

  --fm-space-sm:  16px;
  --fm-space-md:  32px;
  --fm-space-lg:  48px;
  --fm-space-xl:  64px;
}