/* ============================================================
   FAITH LUTHERAN — Design Tokens
   Quiet reverence, modern warmth. LCMS, Bear, DE.
   ============================================================ */

/* Fonts ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Color: Confessional palette ---- */
  /* Ink — deep navy, used for body text and primary surfaces */
  --ink-900: #111826;   /* near-black, strongest text */
  --ink-800: #1b2436;   /* primary text / dark surface */
  --ink-700: #2a3548;   /* soft ink */
  --ink-600: #4a5566;   /* muted text */
  --ink-500: #6b7385;   /* secondary */
  --ink-400: #95a0af;   /* tertiary / disabled */

  /* Parchment — warm off-whites, page surfaces */
  --parchment-50:  #fdfaf3;  /* lightest — page background */
  --parchment-100: #f7f1e4;  /* cards on ink */
  --parchment-200: #eee5d1;  /* subtle section divider */
  --parchment-300: #dccfb2;  /* parchment border */

  /* Stone — cool neutrals for grid, rules, borders */
  --stone-100: #f4f2ee;
  --stone-200: #e7e3db;
  --stone-300: #cfcabf;
  --stone-400: #a8a296;

  /* Oxblood — restrained liturgical red, single accent */
  --oxblood-700: #6b1f24;  /* dark accent, links on parchment */
  --oxblood-600: #8b2a2f;  /* primary accent */
  --oxblood-500: #a53a3f;  /* hover */
  --oxblood-100: #f4e3e1;  /* wash */

  /* Sage — a calm secondary, for quiet UI (events, tags) */
  --sage-700: #3f5447;
  --sage-500: #6d8577;
  --sage-100: #dfe7e0;

  /* Gold — sparing, communion / highlight */
  --gold-600: #a07b2a;
  --gold-500: #c19544;
  --gold-100: #f1e7cf;

  /* Semantic */
  --surface-page: var(--parchment-50);
  --surface-card: #ffffff;
  --surface-sunken: var(--stone-100);
  --surface-inverse: var(--ink-800);

  --text-primary: var(--ink-800);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-on-dark: var(--parchment-100);
  --text-on-dark-muted: #b8b3a5;

  --border-subtle: var(--stone-200);
  --border-strong: var(--stone-300);
  --border-parchment: var(--parchment-300);

  --accent: var(--oxblood-600);
  --accent-hover: var(--oxblood-500);
  --accent-deep: var(--oxblood-700);

  /* ---- Type ---- */
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  /* Display / editorial serif — for hero titles, scripture, H1s */
  --display-xxl: 500 clamp(3.5rem, 7vw, 6rem)/1.02 var(--font-serif);
  --display-xl:  500 clamp(2.75rem, 5.5vw, 4.5rem)/1.05 var(--font-serif);
  --display-lg:  500 clamp(2.25rem, 4vw, 3.25rem)/1.1 var(--font-serif);
  --display-md:  500 2rem/1.15 var(--font-serif);
  --display-sm:  500 1.5rem/1.2 var(--font-serif);

  /* Scripture — italic serif, for pull quotes */
  --scripture-lg: italic 400 clamp(1.5rem, 2.6vw, 2.25rem)/1.35 var(--font-serif);
  --scripture-md: italic 400 1.375rem/1.45 var(--font-serif);

  /* UI / body */
  --text-xl: 400 1.25rem/1.6 var(--font-sans);
  --text-lg: 400 1.125rem/1.65 var(--font-sans);
  --text-md: 400 1rem/1.65 var(--font-sans);
  --text-sm: 400 0.9375rem/1.55 var(--font-sans);
  --text-xs: 500 0.8125rem/1.45 var(--font-sans);

  --label: 600 0.75rem/1 var(--font-sans);
  --eyebrow: 600 0.75rem/1 var(--font-sans); /* pair with letter-spacing .18em uppercase */

  /* ---- Spacing (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Radius (restrained — church, not an app) ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- Shadow (soft, infrequent) ---- */
  --shadow-xs: 0 1px 2px rgba(27, 36, 54, 0.05);
  --shadow-sm: 0 2px 8px rgba(27, 36, 54, 0.06), 0 1px 2px rgba(27, 36, 54, 0.04);
  --shadow-md: 0 8px 24px rgba(27, 36, 54, 0.08), 0 2px 6px rgba(27, 36, 54, 0.04);
  --shadow-lg: 0 24px 60px rgba(27, 36, 54, 0.14), 0 4px 12px rgba(27, 36, 54, 0.06);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 880px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

/* Utility eyebrow helper */
.eyebrow {
  font: var(--eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}