/* ==========================================================================
   Citadel Ministries — Design Tokens
   Single source of truth for colour, type, space, radius, shadow, motion.
   Import this file first; every component reads from these variables.
   ========================================================================== */

:root {
  /* ---------- Colour: brand ---------- */
  --c-ink-900: #121A26;   /* deepest surface, footer */
  --c-ink-800: #1B2431;   /* primary dark: nav on scroll, dark sections, headings */
  --c-ink-700: #2A3646;
  --c-ink-600: #3F4B5C;   /* body text on light */
  --c-ink-500: #5C6878;   /* secondary text */
  --c-ink-400: #8A94A3;   /* placeholders, captions */
  --c-ink-300: #B9C0CA;   /* dividers on dark */

  --c-stone-50:  #FBF9F5;  /* page background */
  --c-stone-100: #F5F1EA;  /* alternate section background */
  --c-stone-200: #EAE4D8;  /* borders, wells */
  --c-stone-300: #D9D0BF;  /* strong borders */
  --c-stone-400: #B8AD98;

  --c-brass-600: #8F6B2A;  /* accent hover / text on light */
  --c-brass-500: #B8873B;  /* accent: primary buttons, links, highlights */
  --c-brass-400: #D4A65A;  /* accent on dark surfaces */
  --c-brass-100: #F3E7D0;  /* accent tint */

  --c-sage-600: #4F6046;   /* secondary: supporting UI, success */
  --c-sage-500: #6B7C5D;
  --c-sage-100: #E4EADF;

  --c-wine-600: #7B2F3A;   /* error / destructive only */
  --c-wine-100: #F4E1E4;

  --c-white: #FFFFFF;

  /* ---------- Colour: semantic ---------- */
  --bg:            var(--c-stone-50);
  --bg-alt:        var(--c-stone-100);
  --bg-dark:       var(--c-ink-800);
  --bg-darker:     var(--c-ink-900);
  --surface:       var(--c-white);
  --border:        var(--c-stone-200);
  --border-strong: var(--c-stone-300);

  --text:          var(--c-ink-800);
  --text-body:     var(--c-ink-600);
  --text-muted:    var(--c-ink-500);
  --text-on-dark:  #F2EFE8;
  --text-on-dark-muted: #B9C0CA;

  --accent:        var(--c-brass-500);
  --accent-hover:  var(--c-brass-600);
  --accent-on-dark: var(--c-brass-400);
  --accent-tint:   var(--c-brass-100);

  --focus-ring: 0 0 0 3px rgba(184, 135, 59, 0.35);

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;

  --fs-xs:   0.8125rem;  /* 13px  captions, legal */
  --fs-sm:   0.9375rem;  /* 15px  UI, meta */
  --fs-md:   1.0625rem;  /* 17px  body */
  --fs-lg:   1.25rem;    /* 20px  lede */
  --fs-xl:   1.5rem;     /* 24px  h4 */
  --fs-2xl:  1.875rem;   /* 30px  h3 */
  --fs-3xl:  2.375rem;   /* 38px  h2 */
  --fs-4xl:  3rem;       /* 48px  h1 */
  --fs-5xl:  clamp(2.75rem, 6vw, 4.5rem); /* hero display */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  --ls-eyebrow: 0.14em;

  /* ---------- Spacing (4pt 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;

  --section-y: clamp(4rem, 8vw, 7rem);
  --container: 72rem;      /* 1152px */
  --container-narrow: 46rem; /* 736px reading measure */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Shape ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(18, 26, 38, 0.06), 0 1px 1px rgba(18, 26, 38, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 26, 38, 0.08), 0 1px 3px rgba(18, 26, 38, 0.05);
  --shadow-lg: 0 16px 40px rgba(18, 26, 38, 0.12), 0 4px 10px rgba(18, 26, 38, 0.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}