/* ═══════════════════════════════════════════════════════════════
   E5 WEB ESTATE — CANONICAL DESIGN TOKENS (v2.0)
   DAG: consolidation-sprint-2026-0802
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette: Midnight & Gold Leaf (primary, the DC register) ── */
  --e5-bg:          #0a1430;
  --e5-bg-tonal:    #0f1c3d;
  --e5-surface:     #162544;
  --e5-text:        #ecd9a4;
  --e5-text-muted:  #8b7e65;
  --e5-gold:        #d6a84b;
  --e5-gold-light:  #ecd9a4;
  --e5-metal:       #8b7e65;
  --e5-leaf:        #4a7c5c;
  --e5-danger:      #a03030;
  --e5-danger-light:#d06060;

  /* ── Typography ── */
  --e5-font-display:  'Cormorant Garamond', Georgia, serif;
  --e5-font-body:     'Inter', -apple-system, sans-serif;
  --e5-font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* ── Scale ── */
  --e5-size-eyebrow: 0.6875rem;
  --e5-size-body:    1rem;
  --e5-size-h5:      1.125rem;
  --e5-size-h4:      1.375rem;
  --e5-size-h3:      1.75rem;
  --e5-size-h2:      2.25rem;
  --e5-size-h1:      3rem;
  --e5-size-display: clamp(3rem, 6vw, 5rem);

  /* ── Spacing ── */
  --e5-space-xs:  0.25rem;
  --e5-space-sm:  0.5rem;
  --e5-space-md:  1rem;
  --e5-space-lg:  1.5rem;
  --e5-space-xl:  2rem;
  --e5-space-2xl: 3rem;
  --e5-space-3xl: 5rem;
  --e5-section-pad: 84px;

  /* ── Borders & Rules ── */
  --e5-rule-hairline: 1px solid var(--e5-metal);
  --e5-rule-gold:     1px solid var(--e5-gold);

  /* ── Body defaults ── */
  --e5-body-align: justify;
  --e5-body-line-height: 1.75;
  --e5-heading-weight: 400;
  --e5-heading-line-height: 0.95;
}

/* ── SCHEME: Ivory Record (light/print) ── */
[data-e5-scheme="ivory"] {
  --e5-bg:          #f6f1e7;
  --e5-bg-tonal:    #ede5d5;
  --e5-surface:     #e8dfcc;
  --e5-text:        #1a1714;
  --e5-text-muted:  #6b5e54;
  --e5-gold:        #b08a31;
  --e5-gold-light:  #c9a64a;
  --e5-metal:       #8b7e65;
  --e5-leaf:        #3d6b4a;
  --e5-danger:      #7a1518;
  --e5-danger-light:#a84040;
}

/* ── SCHEME: Obsidian & Gold Leaf (dark alt) ── */
[data-e5-scheme="obsidian"] {
  --e5-bg:          #0a0a0a;
  --e5-bg-tonal:    #141414;
  --e5-surface:     #1c1c1c;
  --e5-text:        #e0d5b8;
  --e5-text-muted:  #6b6050;
  --e5-gold:        #d6a84b;
  --e5-gold-light:  #ecd9a4;
  --e5-metal:       #8b7e65;
}

/* ── SCHEME: Oxblood Royal (editorial) ── */
[data-e5-scheme="oxblood"] {
  --e5-bg:          #1b0a0a;
  --e5-bg-tonal:    #2c1010;
  --e5-surface:     #3a1515;
  --e5-text:        #e8d5c8;
  --e5-text-muted:  #8b7060;
  --e5-gold:        #d6a84b;
  --e5-gold-light:  #ecd9a4;
  --e5-metal:       #7a1518;
}

/* ── MASTER SIGNATURE: Gold-Leaf Gradient Wordmark ── */
.e5-wordmark {
  font-family: var(--e5-font-display);
  font-style: italic;
  background: linear-gradient(135deg, var(--e5-gold) 0%, var(--e5-gold-light) 50%, var(--e5-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── MASTER SIGNATURE: Eyebrow ── */
.e5-eyebrow {
  font-family: var(--e5-font-mono);
  font-size: var(--e5-size-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e5-metal);
}

/* ── MASTER SIGNATURE: Hairline Rule ── */
.e5-rule { border: none; border-top: var(--e5-rule-hairline); margin: var(--e5-space-lg) 0; }
.e5-rule-gold { border: none; border-top: var(--e5-rule-gold); margin: var(--e5-space-lg) 0; }

/* ── MASTER SIGNATURE: Drop Cap ── */
.e5-dropcap p:first-of-type::first-letter {
  float: left;
  font-family: var(--e5-font-display);
  font-size: 4.5rem;
  line-height: 0.8;
  padding-right: 0.5rem;
  padding-top: 0.15rem;
  color: var(--e5-gold);
}

/* ── MASTER SIGNATURE: Headings ── */
.e5-h1, .e5-h2, .e5-h3, .e5-h4 { font-weight: var(--e5-heading-weight); line-height: var(--e5-heading-line-height); margin: 0; }
.e5-h1 { font-size: var(--e5-size-h1); font-family: var(--e5-font-display); }
.e5-h2 { font-size: var(--e5-size-h2); font-family: var(--e5-font-display); }
.e5-h3 { font-size: var(--e5-size-h3); font-family: var(--e5-font-mono); color: var(--e5-metal); letter-spacing: 0.08em; }
.e5-h4 { font-size: var(--e5-size-h4); font-family: var(--e5-font-display); }

/* ── CSS-ONLY E5 SEAL (the round mark) ── */
.e5-seal {
  width: 48px; height: 48px;
  border: 1px solid var(--e5-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--e5-font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--e5-gold);
  flex-shrink: 0;
}
.e5-seal-lg { width: 80px; height: 80px; font-size: 32px; }

/* ── COLOPHON ── */
.e5-colophon {
  font-family: var(--e5-font-mono);
  font-size: 0.75rem;
  color: var(--e5-text-muted);
  margin-top: var(--e5-space-3xl);
  padding-top: var(--e5-space-lg);
  border-top: var(--e5-rule-hairline);
}

/* ── UTILITY ── */
.e5-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ═══════════════════════════════════════════════════════════════
   E5 WEB ESTATE — CANONICAL DESIGN TOKENS (v3.0)
   Brand Bible v1 layer · 2026-09-13
   Provenance: E5 Brand Bible v1 (§3–§7) + design-second-brain skill.
   v2.0 blocks above are unchanged. v3 ADDS: motion, cinematic,
   component, and focus tokens — one source of truth; new pages use
   `e5-` tokens only. The donate page's legacy `vc-` namespace is
   mapped onto these tokens in the rebuild; no parallel namespace ships.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Motion: the honest-motion system (Brand Bible §5) ── */
  --e5-motion-instant: .12s;
  --e5-motion-fast:   .24s;
  --e5-motion-base:   .48s;
  --e5-motion-slow:   .9s;
  --e5-motion-cinema: 1.4s;
  --e5-ease-enter:    cubic-bezier(.16, 1, .3, 1);
  --e5-ease-exit:     cubic-bezier(.7, 0, .84, 0);
  --e5-ease-standard: cubic-bezier(.45, 0, .2, 1);
  --e5-motion-distance-sm: 8px;
  --e5-motion-distance-md: 20px;
  --e5-motion-distance-lg: 48px;
  --e5-entrance-total: .9s;          /* §5.2: entrance choreography ≤ 900ms */
  --e5-entrance-stagger: .12s;       /* staggered ≤ 120ms */

  /* ── Cinematic hero layer (§5.4) ── */
  --e5-cine-canvas-opacity: .84;
  --e5-cine-vignette: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.42) 100%);
  --e5-cine-hero-min: 92vh;
  --e5-cine-hero-min-mobile: 100svh;

  /* ── Radii / shadows / z-scale ── */
  --e5-radius-sm: 6px;
  --e5-radius-md: 12px;
  --e5-radius-lg: 22px;
  --e5-radius-pill: 999px;
  --e5-shadow-lift: 0 18px 50px -18px rgba(0,0,0,.55);
  --e5-shadow-gold: 0 10px 34px -12px rgba(214,168,75,.45);
  --e5-z-canvas: 1;
  --e5-z-content: 2;
  --e5-z-chrome: 50;
  --e5-z-overlay: 100;

  /* ── Components: CTA spine (Bible §7.1) ── */
  --e5-c-cta-primary-bg: var(--e5-gold);
  --e5-c-cta-primary-text: #140f04;
  --e5-c-cta-primary-border: transparent;
  --e5-c-cta-primary-hover-bg: var(--e5-gold-light);
  --e5-c-cta-secondary-bg: transparent;
  --e5-c-cta-secondary-text: var(--e5-text);
  --e5-c-cta-secondary-border: var(--e5-metal);
  --e5-c-cta-secondary-hover-border: var(--e5-gold);
  --e5-c-cta-pad-y: 1rem;
  --e5-c-cta-pad-x: 2rem;
  --e5-c-cta-radius: var(--e5-radius-pill);
  --e5-c-cta-font: var(--e5-font-body);
  --e5-c-cta-weight: 600;
  --e5-c-cta-tracking: .02em;

  /* ── Components: focus (never invisible) ── */
  --e5-c-focus-ring: 0 0 0 3px var(--e5-bg), 0 0 0 6px var(--e5-gold);

  /* ── Components: giving instrument (Bible §7.4) ── */
  --e5-c-tier-bg: var(--e5-surface);
  --e5-c-tier-border: var(--e5-rule-hairline);
  --e5-c-tier-selected-border: var(--e5-rule-gold);
  --e5-c-tier-selected-glow: var(--e5-shadow-gold);
  --e5-c-tier-amount: var(--e5-font-display);
  --e5-c-input-bg: rgba(255,255,255,.04);
  --e5-c-input-border: var(--e5-metal);
  --e5-c-input-text: var(--e5-text);
  --e5-c-badge-bg: var(--e5-gold);
  --e5-c-badge-text: #140f04;

  /* ── Components: proof / trust ── */
  --e5-c-proof-font: var(--e5-font-mono);
  --e5-c-proof-color: var(--e5-text-muted);
  --e5-c-trust-icon: var(--e5-gold);
}

/* ── SCHEME overrides: component tokens follow the scheme ── */
[data-e5-scheme="ivory"] {
  --e5-c-cta-primary-bg: #7a5c14;
  --e5-c-cta-primary-text: #fbf7ec;
  --e5-c-cta-primary-hover-bg: #8f6d1c;
  --e5-c-cta-secondary-text: #1a1714;
  --e5-c-cta-secondary-border: #8b7e65;
  --e5-c-input-bg: rgba(26,23,20,.04);
  --e5-c-input-text: #1a1714;
  --e5-c-badge-bg: #b08a31;
  --e5-c-badge-text: #fbf7ec;
}
[data-e5-scheme="obsidian"] {
  --e5-c-cta-primary-text: #0a0a0a;
  --e5-c-badge-text: #0a0a0a;
}
[data-e5-scheme="oxblood"] {
  --e5-c-cta-primary-text: #1b0a0a;
  --e5-c-badge-text: #1b0a0a;
  --e5-c-tier-bg: #2c1010;
}

/* ── Legacy vc- → e5- mapping (donate page, 2026-09-13 rebuild) ──
   --vc-display → var(--e5-font-display)
   --vc-text (Inter) → var(--e5-font-body)  [IBM Plex Sans, self-hosted]
   --vc-bone / --vc-ink → ivory-scheme e5-bg / e5-text
   --vc-oxblood → oxblood-scheme e5-bg-tonal / e5-surface
   --vc-gold / --vc-gold-2 → var(--e5-gold) / var(--e5-gold-light)
   Do not author new --vc-* tokens. */

/* ── Shared component classes (adopt, don't fork) ── */
.e5-cta-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  font-family: var(--e5-c-cta-font); font-weight: var(--e5-c-cta-weight);
  letter-spacing: var(--e5-c-cta-tracking);
  padding: var(--e5-c-cta-pad-y) var(--e5-c-cta-pad-x);
  border-radius: var(--e5-c-cta-radius);
  background: var(--e5-c-cta-primary-bg); color: var(--e5-c-cta-primary-text);
  border: 1px solid var(--e5-c-cta-primary-border);
  text-decoration: none; cursor: pointer;
  transition: background var(--e5-motion-fast) var(--e5-ease-standard),
              transform var(--e5-motion-fast) var(--e5-ease-standard),
              box-shadow var(--e5-motion-fast) var(--e5-ease-standard);
}
.e5-cta-primary:hover {
  background: var(--e5-c-cta-primary-hover-bg);
  box-shadow: var(--e5-shadow-gold);
  transform: translateY(-1px);
}
.e5-cta-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  font-family: var(--e5-c-cta-font); font-weight: var(--e5-c-cta-weight);
  letter-spacing: var(--e5-c-cta-tracking);
  padding: var(--e5-c-cta-pad-y) var(--e5-c-cta-pad-x);
  border-radius: var(--e5-c-cta-radius);
  background: var(--e5-c-cta-secondary-bg); color: var(--e5-c-cta-secondary-text);
  border: 1px solid var(--e5-c-cta-secondary-border);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--e5-motion-fast) var(--e5-ease-standard),
              transform var(--e5-motion-fast) var(--e5-ease-standard);
}
.e5-cta-secondary:hover {
  border-color: var(--e5-c-cta-secondary-hover-border);
  transform: translateY(-1px);
}
.e5-cta-primary:focus-visible, .e5-cta-secondary:focus-visible,
.e5-tier input:focus-visible + label { box-shadow: var(--e5-c-focus-ring); outline: none; }

.e5-proof {
  font-family: var(--e5-c-proof-font);
  font-size: .8125rem; letter-spacing: .06em;
  color: var(--e5-c-proof-color);
}
.e5-trust-icon { color: var(--e5-c-trust-icon); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .e5-cta-primary, .e5-cta-secondary { transition: none; }
  .e5-cta-primary:hover, .e5-cta-secondary:hover { transform: none; }
}