/* =========================================================================
   Ga Presbytery — Design tokens
   Visual language: warm cream paper, Presbyterian blue, deep navy bands with
   grain, a red accent and old gold. Serif display headlines (Cormorant
   Garamond) with an italic accent word; small uppercase tracked labels in
   Plus Jakarta Sans. The "Rainbow Presbytery" signature is a blue → red →
   gold hairline under the utility bar, on dark bands and above the footer.
   Every colour is a token. Light values on :root; dark values redefined in
   the two dark blocks below (system preference + explicit data-theme).
   ========================================================================= */

:root {
  /* Brand */
  --c-blue: #1F287F;               /* Presbyterian blue */
  --c-red: #E31B23;                /* accent: eyebrows, hovers, rules */
  --c-red-dark: #C4141B;
  --c-red-ink: #C8161E;            /* red for small text on cream/white (≥ 5:1); bright --c-red stays for fills and rules */
  --c-gold: #C5A059;               /* old gold: on navy, frames, diamonds */
  --c-navy: #0d102b;               /* deep navy bands (same in both themes) */
  --c-on-dark: #ffffff;

  --c-primary: var(--c-blue);      /* headings, primary buttons, links */
  --c-primary-strong: #161d63;
  --c-primary-soft: rgba(31, 40, 127, 0.07);
  --c-accent: var(--c-gold);
  --c-accent-soft: rgba(197, 160, 89, 0.18);
  --c-on-primary: #ffffff;
  --c-on-accent: #1e1a10;
  --c-on-photo: #ffffff;
  --c-heading: var(--c-blue);
  --c-footer-bg: var(--c-navy);
  --c-footer-text: #ffffff;
  --c-footer-muted: rgba(255, 255, 255, 0.72);

  /* Neutrals (warm cream) */
  --c-bg: #FAF8F5;                 /* page */
  --c-surface: #FFFFFF;            /* cards, panels */
  --c-surface-alt: #F4F0EA;        /* cream card band, image wells */
  --c-border: rgba(31, 40, 127, 0.16);
  --c-border-strong: rgba(31, 40, 127, 0.32);
  --c-text: #12141D;
  --c-text-muted: #656978;         /* ≥ 4.5:1 on bg + surface */
  --c-link: var(--c-blue);

  /* Semantic */
  --c-success: #23784a;  --c-success-soft: #e3f2e9;
  --c-warning: #8a5a12;  --c-warning-soft: rgba(197, 160, 89, 0.2);
  --c-danger:  #C4141B;  --c-danger-soft:  #fce6e7;
  --c-info:    var(--c-blue); --c-info-soft: rgba(31, 40, 127, 0.07);

  /* Gradients */
  --rainbow: linear-gradient(90deg, var(--c-blue) 0%, var(--c-red) 50%, var(--c-gold) 100%);
  --g-navy: linear-gradient(140deg, var(--c-navy) 0%, var(--c-blue) 100%);
  --g-progress: linear-gradient(90deg, var(--c-blue), var(--c-red), var(--c-gold));
  --overlay: linear-gradient(0deg, rgba(13, 16, 43, 0.9) 0%, rgba(13, 16, 43, 0) 65%);
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-xs: .8125rem;               /* 13 */
  --fs-sm: .9375rem;               /* 15 */
  --fs-base: 1rem;
  --fs-lg: 1.0625rem;
  --fs-label: .75rem;              /* uppercase tracked labels, buttons */
  --fs-h4: 1.35rem;
  --fs-h3: clamp(1.45rem, 1.25rem + .8vw, 1.85rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --fs-h1: clamp(2.6rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-display: clamp(2.6rem, 4.8vw, 4rem);
  --lh-tight: 1.12;
  --lh-body: 1.75;
  --tracking-label: .18em;

  /* Spacing (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3.5rem; --s-8: 5rem; --s-9: 7rem;

  /* Shape */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 24px;
  --radius-pill: 100px;
  --shadow-1: 0 10px 30px rgba(31, 40, 127, 0.06);
  --shadow-2: 0 22px 44px rgba(31, 40, 127, 0.12);
  --shadow-3: 0 26px 50px rgba(31, 40, 127, 0.14);
  --shadow-pop: 0 24px 50px rgba(13, 16, 43, 0.14);

  /* Layout */
  --container: 1280px;
  --measure: 720px;
  --gutter: 1.25rem;
  --header-h: 86px;

  /* Motion */
  --ease: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 200ms;
  --t: 350ms;
  --transition: all 0.35s var(--ease-out);

  --focus: 0 0 0 3px var(--c-gold);
  color-scheme: light;
}

@media (min-width: 600px) { :root { --gutter: 1.5rem; } }
@media (min-width: 901px) { :root { --gutter: 2rem; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-red: #ff5a60;
  --c-red-ink: #ff6b70;
    --c-red-ink: #ff6b70;
    --c-primary: #aeb6ff;
    --c-primary-strong: #d3d8ff;
    --c-primary-soft: rgba(174, 182, 255, 0.1);
    --c-on-primary: #0d102b;
    --c-heading: #e9ebff;
    --c-bg: #0a0c22;
    --c-surface: #121637;
    --c-surface-alt: #0f132f;
    --c-border: rgba(255, 255, 255, 0.12);
    --c-border-strong: rgba(255, 255, 255, 0.26);
    --c-text: #e8e9f2;
    --c-text-muted: #a5a9bd;
    --c-link: #aeb6ff;
    --c-success: #6fcf97;  --c-success-soft: #173325;
    --c-warning: #e2c27c;  --c-warning-soft: rgba(197, 160, 89, 0.18);
    --c-danger:  #ff7a7f;  --c-danger-soft:  #3b1a1d;
    --c-info:    #aeb6ff;  --c-info-soft:    rgba(174, 182, 255, 0.1);
    --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 22px 44px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 26px 50px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 24px 50px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-red: #ff5a60;
  --c-red-ink: #ff6b70;
  --c-primary: #aeb6ff;
  --c-primary-strong: #d3d8ff;
  --c-primary-soft: rgba(174, 182, 255, 0.1);
  --c-on-primary: #0d102b;
  --c-heading: #e9ebff;
  --c-bg: #0a0c22;
  --c-surface: #121637;
  --c-surface-alt: #0f132f;
  --c-border: rgba(255, 255, 255, 0.12);
  --c-border-strong: rgba(255, 255, 255, 0.26);
  --c-text: #e8e9f2;
  --c-text-muted: #a5a9bd;
  --c-link: #aeb6ff;
  --c-success: #6fcf97;  --c-success-soft: #173325;
  --c-warning: #e2c27c;  --c-warning-soft: rgba(197, 160, 89, 0.18);
  --c-danger:  #ff7a7f;  --c-danger-soft:  #3b1a1d;
  --c-info:    #aeb6ff;  --c-info-soft:    rgba(174, 182, 255, 0.1);
  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 22px 44px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 26px 50px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 24px 50px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}