/* ============================================================
   Halvies Design System — Colors & Type
   DEFAULT MODE: cream document (per BRAND_GUIDE §4.1)
   Cream `#F4EFE3` · Dark green `#2E4A3E` · Gold `#D4A574`
   Optional atmospheric (slate-teal) mode via .mode-atmosphere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----------- BRAND PALETTE ----------- */
  /* Mode A — Atmosphere (slate-teal, the dominant brand mode) */
  --halvies-pitch: #0B1418;          /* deepest, hero base */
  --halvies-slate: #14252A;          /* mid-dark surface */
  --halvies-teal-deep: #1F3A3E;      /* elevated dark surface */
  --halvies-teal: #2A4A4F;           /* hover / mid */
  --halvies-mist: #3D6166;           /* muted text on dark */

  /* Mode B — Document (cream) */
  --halvies-cream: #F4EFE3;
  --halvies-cream-deep: #EDE6D5;
  --halvies-off-white: #FFFFFF;

  /* Accents */
  --halvies-gold: #D4A574;
  --halvies-gold-deep: #B5894F;
  --halvies-bronze: #8A5A2C;
  --halvies-forest: #2E4A3E;
  --halvies-forest-deep: #1A2E26;

  /* ----------- DEFAULT MODE = CREAM DOCUMENT ----------- */
  --bg: var(--halvies-cream);
  --bg-elev: var(--halvies-cream-deep);
  --bg-card: var(--halvies-off-white);

  --fg-1: #141613;                         /* ink — primary text */
  --fg-2: #3D443F;                         /* ink-soft — body */
  --fg-3: #8A857B;                         /* ink-mute — meta */

  --accent: var(--halvies-forest);         /* dark green — primary CTAs, italic emphasis */
  --accent-deep: var(--halvies-forest-deep);
  --accent-warm: var(--halvies-gold);      /* gold — highlight underline, dot, "the half" */
  --forest: var(--halvies-forest);
  --gold: var(--halvies-gold);

  --rule: #D5CDBA;
  --rule-soft: rgba(20, 22, 19, 0.06);
  --glass: rgba(20, 22, 19, 0.04);
  --glass-strong: rgba(20, 22, 19, 0.08);

  /* ----------- TYPE FAMILIES ----------- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ----------- TYPE SCALE ----------- */
  --t-display-xl: clamp(52px, 8vw, 128px);
  --t-display-lg: clamp(44px, 6.4vw, 92px);
  --t-display-md: clamp(36px, 5.2vw, 68px);
  --t-display-sm: clamp(28px, 3.4vw, 44px);
  --t-h-md: clamp(22px, 2.2vw, 30px);
  --t-h-sm: clamp(20px, 1.9vw, 26px);
  --t-lede: clamp(17px, 1.4vw, 20px);
  --t-body: 17px;
  --t-body-sm: 15px;
  --t-meta: 13px;
  --t-mono: 11px;
  --t-mono-sm: 10px;

  /* ----------- SPACING / RADII / MOTION ----------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --r-sharp: 2px;
  --r-card: 6px;
  --r-frame: 18px;        /* the Amero outer frame */
  --r-pill: 999px;
  --r-monogram: 14px;

  --ease-warm: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.28s;
  --dur-slow: 0.6s;

}

/* ----------- OPT-IN: atmospheric (dark slate-teal) mode -----------
   Use sparingly — e.g. inverted full-bleed sections, the rare dark
   landing variant. Cream is the brand default. */
.mode-atmosphere {
  --bg: var(--halvies-pitch);
  --bg-elev: var(--halvies-slate);
  --bg-card: var(--halvies-teal-deep);
  --fg-1: var(--halvies-cream);
  --fg-2: rgba(244, 239, 227, 0.72);
  --fg-3: rgba(244, 239, 227, 0.50);
  --accent: var(--halvies-gold);
  --accent-deep: var(--halvies-gold-deep);
  --rule: rgba(244, 239, 227, 0.12);
  --rule-soft: rgba(244, 239, 227, 0.06);
  --glass: rgba(244, 239, 227, 0.08);
  --glass-strong: rgba(244, 239, 227, 0.14);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.h-display, h1.display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 400;
  font-size: var(--t-display-xl);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--fg-1);
}
.h-display em, h1.display em { font-style: italic; color: var(--accent); font-weight: 400; }

.h1, h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  font-size: var(--t-display-md);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.h1 em, h1 em { font-style: italic; color: var(--accent); }

.h2, h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  font-size: var(--t-display-sm);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--fg-1);
}
.h2 em, h2 em { font-style: italic; color: var(--accent); }

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h-md);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--t-lede);
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 60ch;
}
.lede strong { color: var(--fg-1); font-weight: 500; }

p { font-family: var(--font-body); font-size: var(--t-body); color: var(--fg-2); line-height: 1.65; }
p strong { color: var(--fg-1); font-weight: 500; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.section-label .idx { color: var(--accent); font-weight: 500; }

.meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

::selection { background: var(--accent); color: var(--halvies-pitch); }