/* Design tokens — Louisburg Community Choir.
   Palette sampled from the logo emblem and the approved mockups in
   docs/design/. Contrast ratios noted below are against the surface each
   token is actually painted on; every text pairing meets WCAG AA (4.5:1),
   which the concept brief calls for explicitly ("high contrast ... for all
   ages"). Do not introduce a raw hex in a component stylesheet — add the
   token here first. */
:root {
  /* --- Brand colors ---
     Navy is the structural color: nav bar, footer, hero scrim, date cards.
     Rust is the action color: it only ever appears as a button or a large
     display accent, never as small text on cream (it fails AA there). */
  --color-navy: #0D1E48;
  --color-navy-deep: #091635;   /* pressed/hover state on navy surfaces */

  /* The mockup's rust is #CE6422, which only reaches 3.84:1 against white —
     too low for button labels. --color-rust is that hue darkened to 4.68:1
     so white label text passes AA; --color-rust-bright keeps the original
     value for display type 24px+, where 3:1 is the bar. */
  --color-rust: #B8591E;
  --color-rust-hover: #9E4C1A;
  --color-rust-bright: #CE6422;

  --color-cream: #F6EFDB;       /* page background */
  --color-slate: #9EAFB5;       /* alternating section bands */
  --color-slate-pale: #DCE4E7;  /* card containers on cream */
  --color-gold: #A68C6C;        /* logo trim; hairline rules on navy */
  --color-white: #FFFFFF;

  /* --- Text --- */
  --color-text: #0D1E48;        /* headings + body on cream — 14.11:1 */
  --color-text-body: #46505F;   /* long-form body copy — 7.11:1 on cream */
  --color-text-muted: #5A6270;  /* captions, dates — 5.35:1 on cream */

  /* --- Lines & status --- */
  --color-border: #DDD2B9;      /* decorative dividers on cream */
  --color-border-strong: #6E7787; /* form inputs — 4:1, clears the 3:1 UI bar */
  --color-error: #B3261E;
  --color-success: #1E7A34;
  --color-focus-outer: #FFFFFF;
  --color-focus-inner: #0D1E48;

  /* Typography */
  --font-heading: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-hero-size: 40px;
  --text-hero-line: 1.15;
  --text-hero-size-mobile: 28px;
  --text-hero-line-mobile: 1.2;

  --text-h1-size: 32px;
  --text-h1-line: 1.2;

  --text-h2-size: 24px;
  --text-h2-line: 1.25;

  --text-h3-size: 20px;
  --text-h3-line: 1.3;

  --text-body-size: 16px;
  --text-body-line: 1.5;

  --text-small-size: 14px;
  --text-small-line: 1.4;

  --text-label-size: 13px;
  --text-label-line: 1.3;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 2px 8px rgba(13, 30, 72, 0.12);

  /* Navy band used behind the hero, the CTA band and the footer. */
  --bg-navy-band: linear-gradient(90deg, #0A1837 0%, #14275A 100%);

  /* Scrim over the hero photo. Ties the image to the palette; it is not what
     makes the hero text readable (.hero__panel is). Applied to the whole
     section when the panel overlays the photo, and to the image band alone
     once the hero stacks under 600px. */
  --hero-scrim: linear-gradient(180deg, rgba(13, 30, 72, 0.25) 0%, rgba(9, 22, 53, 0.6) 100%);

  /* Layout */
  --container-max-width: 1140px;
  --container-pad-mobile: var(--space-4);
  --container-pad-desktop: var(--space-6);

  /* Breakpoints (referenced in comments; media queries use raw px) */
  --bp-tablet: 600px;
  --bp-desktop: 960px;
}