/* ═══════════════════════════════════════════
   VLAD ROTBERG · DESIGN FOUNDATIONS
   Brand: Resonance / Building Ecosystems of the Future
   ═══════════════════════════════════════════ */

:root {
  /* ── Brand colors (from STEP03 brandbook) ── */
  --gold:        #D4AF37;
  --gold-deep:   #B89B5E;
  --champagne:   #EACD9A;
  --ivory:       #F2EFE5;
  --cream:       #F5E6C8;

  --forest:      #14251F;
  --deep-green:  #0D1B16;
  --charcoal:    #0A0A0A;
  --black:       #000000;
  --night:       #07090C;

  /* ── Semantic (dark mode default — deep green from brandbook) ── */
  --bg:          #0D1816;
  --bg-elev:     #14251F;
  --bg-soft:     rgba(212,175,55,0.05);
  --fg:          var(--ivory);
  --fg-muted:    rgba(242,239,229,0.62);
  --fg-faint:    rgba(242,239,229,0.36);
  --accent:      var(--gold);
  --accent-soft: rgba(212,175,55,0.18);
  --line:        rgba(212,175,55,0.14);
  --line-strong: rgba(212,175,55,0.32);

  /* ── Type ── */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'Jost', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.18em;
  --tracking-wider: 0.32em;
  --tracking-widest: 0.5em;

  /* ── Spacing scale ── */
  --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;

  /* ── Radii / shadows ── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-glow: 0 0 40px rgba(212,175,55,0.18), 0 0 120px rgba(212,175,55,0.06);
  --shadow-card: 0 20px 60px rgba(0,0,0,0.45);

  /* ── Layout ── */
  --container: 1200px;
  --nav-h: 76px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* Light mode token override */
[data-theme="light"] {
  --bg:          var(--ivory);
  --bg-elev:     #FFFFFF;
  --bg-soft:     rgba(20,37,31,0.04);
  --fg:          var(--forest);
  --fg-muted:    rgba(20,37,31,0.65);
  --fg-faint:    rgba(20,37,31,0.38);
  --accent:      #B89B5E;
  --accent-soft: rgba(184,155,94,0.16);
  --line:        rgba(20,37,31,0.12);
  --line-strong: rgba(20,37,31,0.24);
  --shadow-glow: 0 0 40px rgba(184,155,94,0.22), 0 0 120px rgba(20,37,31,0.05);
  --shadow-card: 0 12px 40px rgba(20,37,31,0.10);
}

/* Density scaling */
[data-density="compact"] { --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px; }
[data-density="spacious"] { --s-7: 64px; --s-8: 96px; --s-9: 144px; --s-10: 192px; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}
::selection { background: var(--accent); color: var(--bg); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* ── Type scale ── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}
.h-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.15;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
  font-weight: 300;
  color: var(--fg-muted);
}
.caps {
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 400;
}

/* ── Layout primitives ── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); }
.section { padding: var(--s-9) 0; position: relative; }
.divider {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: var(--s-4) auto;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 400;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  background: transparent;
  transition: all .35s var(--ease);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn-gold { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn-gold:hover { background: var(--champagne); border-color: var(--champagne); color: var(--charcoal); transform: translateY(-1px); }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { border-color: var(--line); }

/* ── Cards ── */
.card-base {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: var(--s-6);
  transition: border-color .4s, background .4s, transform .4s;
}
.card-base:hover {
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

/* ── Reveal animation ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Resonance symbol container ── */
.resonance-mark { display: inline-block; line-height: 0; }
.resonance-mark svg { width: 100%; height: auto; }

/* ── Utility ── */
.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--fg-muted); }
.italic { font-style: italic; }
.serif { font-family: var(--font-display); }
.flex { display: flex; }
.grid { display: grid; }