/* altAR — Design System Tokens
 * Ceremonial Editorial direction. Warm, reverent, editorial.
 * Source: altar-design-system/project/colors_and_type.css
 */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Cormorant+Garamond:wght@500;600;700&family=Nunito+Sans:wght@400;600;700&family=Caveat:wght@600&display=swap");

:root {
  color-scheme: light;

  /* ── Core palette ─────────────────────────────────────── */
  --monarch-orange: #e07020;
  --monarch-orange-deep: #b75710;
  --warm-amber: #f5a623;
  --gold: #f3b11f;
  --gold-leaf: #d4af37;
  --deep-marigold: #d4740c;
  --magenta-rose: #c2185b;
  --deep-purple: #4a1a6b;
  --plum: #35143c;
  --twilight-blue: #1a1a3e;
  --sage: #3e7568;
  --teal-accent: #00897b;

  /* ── Paper / surfaces ────────────────────────────────── */
  --cream: #fff8e8;
  --paper: #faf6ed;
  --warm-white: #fffdf5;
  --warm-paper: #fff7ee;

  /* ── Ink (text) ──────────────────────────────────────── */
  --ink: #2d1b1b;
  --ink-muted: #5a4a4a;
  --muted-ink: #6f6468;
  --ink-whisper: #735847;

  /* ── Lines / borders ─────────────────────────────────── */
  --line: rgba(74, 26, 107, 0.16);
  --line-gold: rgba(212, 175, 55, 0.42);
  --line-subtle: rgba(88, 51, 26, 0.12);

  /* ── Semantic foreground ─────────────────────────────── */
  --fg-1: var(--ink);
  --fg-2: var(--ink-muted);
  --fg-3: var(--ink-whisper);
  --fg-on-plum: #fff8e7;
  --fg-on-plum-muted: rgba(255, 248, 231, 0.82);
  --fg-accent: var(--monarch-orange);
  --fg-accent-deep: var(--monarch-orange-deep);
  --fg-danger: #c0392b;
  --fg-warn: #9a4b2f;
  --fg-success: #2f6b5a;

  /* ── Semantic background ─────────────────────────────── */
  --bg-page:
    radial-gradient(circle at top right, rgba(245, 166, 35, 0.16), transparent 26%),
    radial-gradient(circle at 14% 18%, rgba(194, 24, 91, 0.10), transparent 18%),
    linear-gradient(180deg, #fffdf6 0%, #fff6e5 44%, #fff4df 100%);
  --bg-surface: rgba(255, 255, 255, 0.94);
  --bg-surface-strong: rgba(255, 255, 255, 0.98);
  --bg-surface-warm: #fff7ee;
  --bg-plum: linear-gradient(180deg, #1a1a3e 0%, #3d1860 100%);
  --bg-nav: rgba(42, 17, 65, 0.97);
  --bg-cta-warm: linear-gradient(135deg, var(--monarch-orange) 0%, var(--warm-amber) 100%);
  --bg-cta-final: linear-gradient(135deg, #d4740c 0%, #e07020 44%, #f5a623 100%);

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-card: 0 18px 42px rgba(53, 20, 72, 0.12);
  --shadow-card-lg: 0 22px 56px rgba(53, 20, 72, 0.14);
  --shadow-surface: 0 24px 60px rgba(97, 44, 17, 0.14);
  --shadow-lift: 0 12px 30px rgba(42, 16, 59, 0.08);
  --shadow-nav: 0 14px 36px rgba(20, 7, 30, 0.30);
  --shadow-warm-btn: 0 14px 26px rgba(245, 135, 35, 0.44);
  --shadow-focus: 0 0 0 3px rgba(243, 177, 31, 0.20);

  /* ── Radii ───────────────────────────────────────────── */
  --radius-panel: 28px;
  --radius-card: 24px;
  --radius-card-sm: 16px;
  --radius-control: 14px;
  --radius-pill: 999px;

  /* ── Spacing scale ───────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 64px;
  --space-9: 96px;
  --section-gap: clamp(40px, 6vw, 96px);

  /* ── Layout ──────────────────────────────────────────── */
  --shell-width: min(1120px, calc(100% - 32px));
  --shell-width-wide: min(1200px, calc(100% - 24px));

  /* ── Typography families ─────────────────────────────── */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-serif:   "Cormorant Garamond", Georgia, serif;
  --font-body:    "Nunito Sans", "Trebuchet MS", sans-serif;
  --font-hand:    "Caveat", "Segoe Script", cursive;

  /* ── Type scale ──────────────────────────────────────── */
  --fs-hero:    clamp(2.8rem, 7vw, 5.4rem);
  --fs-h1:      clamp(2rem, 4vw, 3.3rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.4rem);
  --fs-h3:      1.5rem;
  --fs-lede:    1.05rem;
  --fs-body:    1rem;
  --fs-small:   0.92rem;
  --fs-micro:   0.8rem;
  --fs-eyebrow: 0.8rem;

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms;
  --t-med: 220ms;
  --t-slow: 500ms;
}

/* ── Base element styles ─────────────────────────────── */
html { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--fg-1);
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: 1.04; font-weight: 600; }
h2 { font-size: var(--fs-h2); line-height: 0.98; font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: 1.15; font-weight: 600; }

.hero-display {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.88;
  letter-spacing: -0.05em;
  font-weight: 400;
}

p { margin: 0 0 1em; line-height: 1.7; color: var(--fg-1); }
.lede { font-size: var(--fs-lede); line-height: 1.7; color: var(--fg-2); max-width: 62ch; text-wrap: pretty; }
small, .small { font-size: var(--fs-small); color: var(--fg-2); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 8px;
}
.handwritten { font-family: var(--font-hand); font-weight: 600; }

a { color: inherit; }
.text-link {
  color: var(--fg-accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--gold-leaf);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.text-link:hover { color: var(--warm-amber); border-color: var(--monarch-orange); }

::selection { background: rgba(245, 166, 35, 0.36); color: var(--ink); }

/* ── Shared utility classes ──────────────────────────── */
.gold-accent { border-left: 4px solid var(--gold-leaf); }
.eyebrow-tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 6px;
}