/* ============================================================
   IMMANUEL FAMILY PRACTICE — DESIGN SYSTEM (locked before compose)
   Concept: medicine and ministry are inseparable. Maroon ground,
   gold as the light through glass. Sanctuary warmth, never clinical.
   System per design-precision.md. Nothing hand-placed.
   ============================================================ */

:root {
  /* ---- TYPE: two families. Display = Fraunces (devotional warmth,
         carries scripture + name). Text = Archivo (clean grotesque). ---- */
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Archivo", system-ui, sans-serif;

  /* fluid root: 16px@360 -> 19px@1440 (one shared curve) */
  font-size: clamp(1rem, 0.93rem + 0.31vw, 1.1875rem);

  /* type ramp — 1.25 major third, generated */
  --ms-0: 1rem;     --ms-1: 1.25rem;  --ms-2: 1.563rem; --ms-3: 1.953rem;
  --ms-4: 2.441rem; --ms-5: 3.052rem; --ms-6: 3.815rem; --ms-7: 4.768rem;
  --ms-dn1: 0.8rem; --ms-dn2: 0.64rem;

  /* ---- SPACING: 4-based, 16px heartbeat ---- */
  --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;  --space-10: 128px; --space-11: 160px; --space-12: 224px;
  --section-y: clamp(3.5rem, 2.5rem + 4.5vw, 8rem);

  /* ---- LAYOUT ---- */
  --edge:    clamp(1rem, 0.6rem + 1.1vw, 1.5rem);
  --gutter:  clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --measure: 65ch;
  --shell:   min(100% - 2 * var(--edge), 75rem);

  /* ---- COLOR: maroon ground + gold light. Neutrals carry the maroon hue. ---- */
  /* L1 primitives */
  --maroon-900: #2a0d12;   /* deepest ground */
  --maroon-800: #45131c;
  --maroon-700: #5e1a26;
  --maroon-600: #7a2230;   /* brand maroon */
  --maroon-500: #9a3340;
  --gold-500:   #c79a3e;   /* brand gold */
  --gold-400:   #d8b25a;
  --gold-300:   #e7cd86;   /* light through glass */
  --cream-50:   #faf4ea;   /* warm paper */
  --cream-100:  #f2e7d6;
  /* maroon-tinted neutrals (never flat gray) */
  --neutral-50:  #f7f1ea;
  --neutral-200: #d9c9c2;
  --neutral-400: #a98f8c;
  --neutral-600: #6e5550;
  --neutral-800: #3a2024;

  /* L2 semantic — components point here */
  --surface:        var(--cream-50);
  --surface-deep:   var(--maroon-900);
  --surface-raised: #ffffff;
  --ink:            #1c1012;
  --ink-ondark:     var(--cream-50);
  --ink-muted:      var(--neutral-600);
  --ink-muted-dark: #c9a9a0;
  --accent:         var(--gold-500);
  --accent-ink:     #271a06;          /* on gold, >=4.5:1 */
  --line:           color-mix(in srgb, var(--maroon-900) 12%, transparent);
  --line-dark:      color-mix(in srgb, var(--gold-300) 22%, transparent);
  --focus:          var(--gold-400);

  /* ---- RADIUS: soft house (12/16/24) ---- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --r-pill: 999px; --r-full: 50%;

  /* ---- ELEVATION: one light, straight down, ink-tinted ---- */
  --e1: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent),
        0 1px 1px color-mix(in srgb, var(--ink) 8%, transparent);
  --e2: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent),
        0 4px 8px color-mix(in srgb, var(--ink) 10%, transparent);
  --e3: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent),
        0 12px 20px color-mix(in srgb, var(--ink) 12%, transparent);
  --e4: 0 1px 2px color-mix(in srgb, var(--ink) 16%, transparent),
        0 24px 40px color-mix(in srgb, var(--ink) 12%, transparent);

  /* ---- MOTION: two eases, four durations, one reveal verb (rise) ---- */
  --ease-standard:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-expressive: cubic-bezier(0.16, 1, 0.30, 1);
  --dur-micro: 120ms; --dur-element: 200ms; --dur-section: 320ms; --dur-cinematic: 600ms;
  --stagger: 75ms;

  /* the scarce metallic gold — used only where light should fall */
  --gold-leaf: linear-gradient(100deg,
     #a9772b 0%, var(--gold-500) 28%, var(--gold-300) 50%,
     var(--gold-500) 72%, #8f6322 100%);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}