/* =====================================================================
   Sovereign Grace Reformed Baptist Church — Core Design Tokens
   colors_and_type.css

   Warm, reverent, Scripture-centered. Source Serif 4 for identity & display,
   Inter for body & practical communication.

   Fonts: Source Serif 4 and Inter are both self-hosted from /fonts (brand files
   supplied by the church). Both are variable fonts — Source Serif 4 carries
   optical-size + weight axes; Inter carries weight + slant axes.
   ===================================================================== */

/* Inter — body/UI — self-hosted variable font from /fonts (uploaded brand file) */
@font-face { font-family: 'Inter'; font-style: oblique 0deg 10deg; font-weight: 100 900; font-display: swap; src: url('../fonts/Inter_slnt_wght_.ttf') format('truetype'); }

/* Source Serif 4 — display/identity/Scripture — self-hosted variable font from
   /fonts (uploaded brand file). One face per axis-set covers weights 200–900;
   optical sizing is left on `auto` so large display sizes pick up the high-opsz
   refinements automatically. */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../fonts/SourceSerif4_opsz_wght.ttf') format('truetype'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('../fonts/SourceSerif4-Italic_opsz_wght.ttf') format('truetype'); }

:root {
  /* ---------------------------------------------------------------
     CORE PALETTE — the six brand colors, untransformed
     --------------------------------------------------------------- */
  --warm-cream:     #F4E8D2;  /* secondary surface, panels, calm fills   */
  --soft-parchment: #FBF6ED;  /* primary page surface                    */
  --deep-brown:     #3A2418;  /* display headings, serif identity ink     */
  --charcoal-ink:   #1E1E1E;  /* primary body text                        */
  --doctrine-blue:  #1F4E79;  /* structural accent, links, emphasis       */
  --muted-gold:     #B8893B;  /* rule lines, ornament, restrained accent  */

  /* Tonal extensions — derived in oklch to stay in the family.
     Use ONLY when a core color needs a lighter/darker neighbour. */
  --cream-deep:     #EBDCC0;  /* hairlines on parchment, hover fills      */
  --parchment-edge: #F1E9DA;  /* faint dividers on parchment              */
  --brown-soft:     #5A4233;  /* secondary serif text, captions on cream  */
  --ink-muted:      #5C5A56;  /* metadata, secondary sans text            */
  --ink-faint:      #8A857D;  /* timestamps, disabled, fine print         */
  --blue-deep:      #163A5C;  /* link hover, pressed structural accent    */
  --gold-deep:      #936B27;  /* gold on light when contrast is needed    */

  /* ---------------------------------------------------------------
     SEMANTIC COLOR ROLES — reach for these in components
     --------------------------------------------------------------- */
  --surface:        var(--soft-parchment); /* default page background    */
  --surface-2:      var(--warm-cream);     /* raised panels, sidebars     */
  --surface-ink:    var(--deep-brown);     /* dark / reversed sections    */
  --surface-ink-2:  var(--charcoal-ink);   /* deepest reversed surface    */

  --fg-1:           var(--charcoal-ink);   /* primary text                */
  --fg-2:           var(--ink-muted);      /* secondary text, metadata    */
  --fg-3:           var(--ink-faint);      /* tertiary, fine print        */
  --fg-display:     var(--deep-brown);     /* serif headings on light     */
  --fg-on-dark:     var(--soft-parchment); /* text on dark surfaces       */
  --fg-on-dark-2:   #CDB893;               /* muted text on dark          */

  --accent:         var(--doctrine-blue);  /* primary structural accent   */
  --accent-hover:   var(--blue-deep);
  --ornament:       var(--muted-gold);     /* rule lines, flourishes      */

  --link:           var(--doctrine-blue);
  --link-hover:     var(--blue-deep);

  /* Lines & borders */
  --rule-hair:      var(--cream-deep);     /* faint structural hairline   */
  --rule-strong:    var(--deep-brown);     /* primary rule line           */
  --rule-gold:      var(--muted-gold);     /* ceremonial / accent rule    */
  --border:         rgba(58, 36, 24, 0.14);/* default component border    */
  --border-strong:  rgba(58, 36, 24, 0.30);

  /* ---------------------------------------------------------------
     TYPOGRAPHY — families
     --------------------------------------------------------------- */
  --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;
  --w-bold:    700;

  /* Type scale — fluid-ready px values, 1.25 major-third-ish rhythm.
     Source Serif 4 has a true text-grade x-height and sits at conventional
     metrics; the generous display sizes below give it room to read as identity.

     Two regimes share ONE ramp:
     · MEDIA tier — for FIXED-SIZE canvases only. The YouTube sermon thumbnail
       (1920×1080 / 1280×720) hierarchy, over a full-bleed warm sermon photo
       with a left-to-right dark scrim. Tuned for mobile legibility:
         eyebrow line  51px  "SERVICE TYPE | Reference"  (Inter; service is
                             uppercase+tracked & muted, reference is title-case
                             & brighter, split by a thin vertical divider)
         --t-poster   144px  sermon title   (Source Serif 4 — the only serif)
         (title rule)        short ~110px gold bar between title and speaker
         --t-speaker   72px  speaker/preacher name (Inter)
       The HIERARCHY is fixed; the TEXT COLORS are not — tune them per image to
       harmonize with the background photo, drawing from the warm palette
       (parchment, cream, --muted-gold / --gold-media). Keep enough contrast
       against the scrim for mobile legibility. Set all media sizes as fixed px
       on the canvas; do NOT make them responsive.
     · EDITORIAL tier (display→meta) — for web/print; responsive where noted. */
  --t-poster:    9rem;      /* 144px  sermon thumbnail title (Source Serif 4)   */
  --t-speaker:   4.5rem;    /* 72px   thumbnail speaker / preacher name (Inter)*/
  --t-kicker-lg: 3.1875rem; /* 51px   thumbnail eyebrow line (Inter)           */
  --t-jumbo:     6.75rem;   /* 108px  livestream title card (Source Serif 4)    */
  --gold-media:  #C9A368;   /* a lifted warm gold — one harmonizing title tone */
  --t-display:   clamp(3.5rem, 6vw, 5.5rem);  /* 56–88px  hero identity    */
  --t-h1:        clamp(2.5rem, 4vw, 3.5rem);  /* 40–56px  page titles      */
  --t-h2:        2.25rem;   /* 36px  sermon / section titles               */
  --t-h3:        1.75rem;   /* 28px  subsection                            */
  --t-h4:        1.375rem;  /* 22px  card titles                           */
  --t-lead:      1.3125rem; /* 21px  serif lead / pull text                */
  --t-body:      1.0625rem; /* 17px  body copy (Inter)                     */
  --t-body-sm:   0.9375rem; /* 15px  dense body, secondary                 */
  --t-meta:      0.8125rem; /* 13px  labels, dates, metadata               */
  --t-caption:   0.75rem;   /* 12px  fine print                            */
  --t-eyebrow:   0.75rem;   /* 12px  uppercase eyebrow / kicker            */

  /* Line heights */
  --lh-tight:   1.05;  /* large display                                    */
  --lh-snug:    1.18;  /* headings                                         */
  --lh-body:    1.65;  /* body copy — generous, literate                   */
  --lh-meta:    1.4;

  /* Letter spacing */
  --ls-display: -0.01em;  /* tighten large serif                           */
  --ls-body:     0;
  --ls-eyebrow:  0.22em;  /* wide tracking for uppercase Inter labels      */
  --ls-meta:     0.04em;

  /* ---------------------------------------------------------------
     SPACING — 8px base, 4px half-step. Editorial, airy.
     --------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4   */
  --space-2:   0.5rem;   /* 8   */
  --space-3:   0.75rem;  /* 12  */
  --space-4:   1rem;     /* 16  */
  --space-5:   1.5rem;   /* 24  */
  --space-6:   2rem;     /* 32  */
  --space-7:   3rem;     /* 48  */
  --space-8:   4rem;     /* 64  */
  --space-9:   6rem;     /* 96  */
  --space-10:  8rem;     /* 128 */

  /* Measure — line length for readable text */
  --measure:        66ch;  /* body prose                                   */
  --measure-narrow: 42ch;  /* Scripture, pull quotes                       */
  --measure-wide:   78ch;

  /* ---------------------------------------------------------------
     BORDERS & RADII — square and honest. Minimal rounding.
     --------------------------------------------------------------- */
  --radius-0:  0;          /* default — frames, rules, panels are square   */
  --radius-sm: 2px;        /* the most rounding we allow on UI controls    */
  --radius-md: 4px;        /* photos, soft cards only                      */
  --border-w-hair:   1px;
  --border-w-rule:   1.5px;
  --border-w-frame:  2px;  /* monogram-style enclosing frame               */

  /* ---------------------------------------------------------------
     ELEVATION — used sparingly. This is a print-rooted system;
     prefer rule lines and surface contrast over shadow.
     --------------------------------------------------------------- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(58, 36, 24, 0.06);
  --shadow-md: 0 8px 24px -12px rgba(58, 36, 24, 0.18);
  --shadow-lg: 0 24px 60px -28px rgba(58, 36, 24, 0.28);

  /* Motion — quiet, dignified. No bounce. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur:      220ms;
  --dur-slow: 420ms;
}

/* =====================================================================
   SEMANTIC ELEMENT DEFAULTS — opt in by adding class "sg" to a root,
   or copy these rules into your component styles.
   ===================================================================== */
.sg {
  background: var(--surface);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sg h1, .sg h2, .sg h3, .sg h4,
.sg .display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--fg-display);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  margin: 0;
  text-wrap: balance;
}

.sg .display      { font-size: var(--t-display); line-height: var(--lh-tight); font-weight: var(--w-medium); }
.sg h1            { font-size: var(--t-h1); }
.sg h2            { font-size: var(--t-h2); }
.sg h3            { font-size: var(--t-h3); }
.sg h4            { font-size: var(--t-h4); font-weight: var(--w-semibold); }

.sg .lead {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--brown-soft);
  line-height: 1.45;
}

.sg p { margin: 0 0 var(--space-4); max-width: var(--measure); }

/* Eyebrow / kicker — uppercase Inter, wide tracking, gold or blue */
.sg .eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ornament);
}

.sg .meta {
  font-family: var(--font-body);
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  color: var(--fg-2);
}

.sg a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(31,78,121,0.35); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sg a:hover { color: var(--link-hover); border-color: var(--link-hover); }

/* Scripture / reference block */
.sg .scripture {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  line-height: 1.5;
  color: var(--deep-brown);
  max-width: var(--measure-narrow);
  border-left: var(--border-w-rule) solid var(--muted-gold);
  padding-left: var(--space-5);
}

/* Horizontal rules */
.sg hr, .sg .rule { border: 0; border-top: var(--border-w-hair) solid var(--rule-hair); margin: var(--space-6) 0; }
.sg .rule-strong { border-top: var(--border-w-rule) solid var(--rule-strong); }
.sg .rule-gold { border-top: var(--border-w-rule) solid var(--rule-gold); }