/* ══════════════════════════════════════════════════════════════
   IMB — DESIGN TOKENS · SINGLE SOURCE OF TRUTH
   Load FIRST on every page:
     tokens.css → style.css → glass.css → chrome.css → fixes.css

   No other stylesheet and no page may declare a :root token.
   If a value needs to change, it changes here and it changes
   everywhere. (Site Audit Sept 2026, Root Cause 1.)
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── Brand ─────────────────────────────────────────────── */
  --purple:#3B1F6E;
  --purple-mid:#5A3491;
  --purple-light:#EDE8F7;

  /* Gold. --gold is the TEXT gold and is AA-safe on light grounds
     (5.23:1). --gold-bright is decorative only: gradients, glows,
     and dark-mode text. Brand standard: never set gold text from
     --gold-bright on a light background. */
  --gold:#8a5a05;
  --gold-dark:#8a5a05;
  --gold-text:#8a5a05;
  --gold-a11y:#8a5a05;
  --gold-bright:#E8B54A;
  --gold-light:#FEF8E7;
  --give-ink:#241303;

  /* ── Ink & surfaces ───────────────────────────────────── */
  /* Only two text colors sitewide: --ink (body/headings) and gold (labels/accents).
     These all resolve to --ink so nothing drifts to a third gray. Purple/red/green
     remain for links, active states, and semantic exceptions. */
  --dark:var(--ink);
  --text:var(--ink);
  --text-main:var(--ink);
  --text-mid:var(--ink);
  --text-light:var(--ink);
  --white:#FFFFFF;
  --off-white:#F1EEF4;
  --cream:#FAF9F5;
  --color-brand:#552E6F;
  --color-accent:#FCC428;
  --bg-section-a:#FAF9F5;
  --bg-section-b:#F1EEF4;
  --bg-card-on-a:#FFFFFF;
  --bg-card-on-b:#FAF9F5;
  --card-shadow:0 4px 12px rgba(45,37,51,.05);
  --card-border:none;
  --btn-bg:var(--color-brand);
  --btn-text:#FFFFFF;

  /* ── Glass theme — content surfaces ───────────────────── */
  --page-bg:#F3EFF9;
  --ink:#2D2040;
  --ink-dim:var(--ink);
  --glass:rgba(255,255,255,.55);
  --glass-border:rgba(59,31,110,.14);
  --glass-inset:rgba(255,255,255,.85);
  --glass-shadow:0 18px 44px rgba(59,31,110,.14);
  --rule:rgba(59,31,110,.22);
  --hover:rgba(59,31,110,.07);
  --active:rgba(59,31,110,.10);
  /* Resting border on an interactive control. Clears WCAG 1.4.11 (3:1)
     against both the page and card surfaces. Decorative card borders
     use --glass-border instead. */
  --control-border:rgba(59,31,110,.6);
  /* Editorial hairline between stacked rows. Was hand-written as
     rgba(128,110,160,.25) on five pages and as a local --rule override on
     a sixth. One value now. (Audit Sept 10 2026 §A.) */
  --rule-soft:rgba(128,110,160,.25);
  /* Solid purple badge/chip. A badge set from --purple or --purple-mid
     with white text inverts in dark mode (white on lavender, 1.8:1), so
     the pair is declared together. (Audit Sept 10 2026 §F.) */
  --badge-bg:#3B1F6E;
  --badge-ink:#FFFFFF;

  /* ── Glass theme — nav & chrome surfaces ──────────────
     Chrome sits over scrolling content, so in dark mode it needs
     a more opaque plate than a content card does. */
  --nav-glass:rgba(255,255,255,.55);
  --nav-glass-border:rgba(59,31,110,.14);
  --nav-glass-inset:rgba(255,255,255,.85);
  --nav-glass-shadow:0 18px 44px rgba(59,31,110,.14);
  --nav-menu-bg:#F3EFF9;

  /* ── Ambient background ───────────────────────────────── */
  --blob-a:#CBB7EC;
  --blob-b:#F2DCA8;
  --amb-1:rgba(122,82,190,.20);
  --amb-2:rgba(200,144,10,.10);
  --amb-3:rgba(90,52,145,.16);

  /* ── Type ─────────────────────────────────────────────── */
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --eyebrow-size:.78rem;
  --eyebrow-weight:800;
  --eyebrow-color:var(--gold-text);
  --eyebrow-spacing:.12em;
  --h2-weight:700;
  --h3-weight:700;
  --h3-size:clamp(1.1rem,2vw,1.4rem);
  --body-size:1rem;
  --lead-size:var(--body-size);
  --stat-label-size:.72rem;
  --meta-size:var(--stat-label-size);
  --stat-num-color:var(--dark);
  --stat-label-weight:800;
  --stat-label-color:var(--text-light);
  --btn-weight:700;

  /* H1 has exactly two roles. Hero = the homepage only.
     Page = every other page, centered or not. */
  --h1-hero:clamp(2.6rem,6.5vw,5rem);
  --h1-page:clamp(2.1rem,4.2vw,3.2rem);
  /* Section-level h2 inside a page. One ramp, so a heading is the same
     size on About as it is on Patrons. */
  --h2-section:clamp(1.8rem,4vw,3.2rem);
  --h2-block:clamp(1.5rem,2.6vw,2rem);

  /* ── Geometry ─────────────────────────────────────────── */
  --max-w:1160px;
  /* Document-like pages (contact form, business patrons packet) measure from ONE
     narrow width so their left gutter still agrees with the nav. */
  --max-w-narrow:900px;
  --gutter:24px;
  --radius-pill:999px;
  --radius:22px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow:0 4px 24px rgba(59,31,110,.10);
  --shadow-lg:0 12px 48px rgba(59,31,110,.18);

  /* ── Spacing rhythm ────────────────────────────────────
     --section-gap is the canonical distance between two stacked
     sections. A section pads HALF of it, top and bottom, so the
     gap is identical everywhere without anyone hand-tuning a
     number. Sections that must sit tighter use .section-tight.
     (Site Audit §04.) */
  --sp-xl:96px;
  --sp-lg:64px;
  --sp-md:48px;
  --sp-sm:32px;
  --sp-xs:24px;
  --section-gap:96px;
  --section-pad:calc(var(--section-gap) / 2);
  --section-pad-tight:var(--sp-xs);
  /* Card padding scale. Every card on the site takes one of these three —
     no more 22px/24px/26px/28px/32px/36px drift. */
  --card-pad-sm:18px 20px;
  --card-pad:24px 26px;
  --card-pad-lg:32px 34px;
  --hero-pad-top:56px;
  --hero-pad-bottom:16px;
  --after-hero-pad:var(--sp-xs);
}

/* ── DARK MODE ──────────────────────────────────────────── */
@media (prefers-color-scheme:dark){
  :root{
    --purple:#C9B6EF;
    --purple-mid:#B9A3E3;
    --purple-light:rgba(255,255,255,.10);

    --gold:#E8B54A;
    --gold-dark:#E8B54A;
    --gold-text:#E8B54A;
    --gold-a11y:#E8B54A;
    --gold-light:#3D2E1A;

    --dark:var(--ink);
    --text:var(--ink);
    --text-main:var(--ink);
    --text-mid:var(--ink);
    --text-light:var(--ink);
    --white:#241B2B;
    --off-white:#241B2B;
    --cream:#18121C;
    --color-brand:#8C5DA6;
    --bg-section-a:#18121C;
    --bg-section-b:#241B2B;
    --bg-card-on-a:#241B2B;
    --bg-card-on-b:#2F2438;
    --card-shadow:none;
    --card-border:1px solid #3A2D44;
    --btn-bg:var(--color-accent);
    --btn-text:#18121C;
    --shadow:none;
    --shadow-lg:none;

    --page-bg:#150a2e;
    --ink:#F2EEF8;
    --ink-dim:var(--ink);
    --glass:rgba(255,255,255,.07);
    --glass-border:rgba(255,255,255,.18);
    --glass-inset:rgba(255,255,255,.22);
    --glass-shadow:0 20px 50px rgba(5,0,20,.45);
    --rule:rgba(255,255,255,.22);
    --rule-soft:rgba(205,193,228,.22);
    --badge-bg:#C9B6EF;
    --badge-ink:#1B1030;
    --hover:rgba(255,255,255,.09);
    --active:rgba(255,255,255,.13);
    --control-border:rgba(255,255,255,.5);

    --nav-glass:rgba(30,18,52,.55);
    --nav-glass-border:rgba(255,255,255,.12);
    --nav-glass-inset:rgba(255,255,255,.10);
    --nav-glass-shadow:0 18px 44px rgba(0,0,0,.4);
    --nav-menu-bg:#221838;

    --blob-a:#4a2080;
    --blob-b:#7a5200;
    --amb-1:rgba(90,52,145,.55);
    --amb-2:rgba(200,144,10,.22);
    --amb-3:rgba(59,31,110,.65);
  }
}

/* ── Legacy aliases ─────────────────────────────────────
   glass.css was written against a parallel --g-* namespace and
   chrome.css against --nav-*. Both now resolve to the tokens
   above, so there is only one place to edit a value. */
:root{
  --g-ink:var(--ink);
  --g-ink-dim:var(--ink-dim);
  --g-page:var(--page-bg);
  --g-glass:var(--glass);
  --g-border:var(--glass-border);
  --g-inset:var(--glass-inset);
  --g-shadow:var(--glass-shadow);
  --g-rule:var(--rule);
  --g-hover:var(--hover);
  --g-active:var(--active);
  --g-gold:var(--gold);
  --g-gold-bright:var(--gold-bright);
  --g-blob-a:var(--blob-a);
  --g-blob-b:var(--blob-b);
  --g-amb-1:var(--amb-1);
  --g-amb-2:var(--amb-2);
  --g-amb-3:var(--amb-3);
  --g-radius:var(--radius);
  --nav-hover:var(--hover);
  --nav-active:var(--active);
}

/* ── Shared geometry primitives ─────────────────────────
   Nav, content, and footer all measure from the SAME max-width
   and the SAME gutter, so their left edges agree top to bottom.
   (Site Audit §03, "three different left gutters".) */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.page{position:relative;z-index:1}
@media (max-width:640px){:root{--gutter:20px}}

/* ── Responsive rhythm ──────────────────────────────────── */
@media (max-width:900px){:root{--section-gap:72px;--hero-pad-top:44px;--card-pad-lg:26px 24px}}
@media (max-width:640px){:root{--section-gap:56px;--hero-pad-top:36px;--hero-pad-bottom:8px;--card-pad-sm:16px 18px;--card-pad:20px 20px;--card-pad-lg:22px 20px}}