:root {
  /* ---------- Brand ---------- */
  --brand-deep:    #0B1E3F;
  --brand-ink:     #071530;
  --brand-slate:   #2A3B5E;
  --brand-mist:    #5B6B8C;

  /* ---------- Surfaces ---------- */
  --bg-soft:       #F6F7FB;
  --bg-pale:       #EEF1F8;
  --surface:       #FFFFFF;

  /* ---------- Accent ---------- */
  --accent-gold:   #E8B83B;
  --accent-gold-d: #B5891E;
  --accent-soft:   #FBF2D6;

  /* ---------- Functional ---------- */
  --ok:            #2EA475;
  --err:           #D94545;
  --border:        rgba(11, 30, 63, 0.08);
  --border-strong: rgba(11, 30, 63, 0.16);

  /* ---------- Glass ---------- */
  --glass-fill:    rgba(255, 255, 255, 0.62);
  --glass-border:  rgba(255, 255, 255, 0.88);
  --glass-blur:    20px;

  /* ---------- Typography ---------- */
  --font-display: "Bricolage Grotesque", ui-serif, Georgia, serif;
  --font-body:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:    13px;
  --fs-sm:    15px;
  --fs-base:  18px;
  --fs-lg:    clamp(19px, 1.25vw, 22px);
  --fs-xl:    clamp(22px, 1.6vw, 28px);
  --fs-2xl:   clamp(28px, 2.4vw, 38px);
  --fs-3xl:   clamp(34px, 4vw, 54px);
  --fs-4xl:   clamp(48px, 8vw, 96px);
  --fs-5xl:   clamp(80px, 14vw, 180px);

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

  --container: 1200px;
  --container-px: clamp(24px, 5vw, 40px);
  --section-py: clamp(80px, 11vw, 160px);

  /* ---------- Radius ---------- */
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 1px 2px rgba(7, 21, 48, 0.06);
  --shadow-md: 0 8px 24px rgba(7, 21, 48, 0.08);
  --shadow-lg: 0 24px 60px rgba(7, 21, 48, 0.14);
  --shadow-xl: 0 40px 100px -20px rgba(7, 21, 48, 0.22);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.5, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.6s;
  --dur-slow: 0.9s;
  --stagger:  0.08s;
}

html { font-size: 18px; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--brand-ink);
  background: var(--bg-soft);
  font-weight: 400;
}

.display { font-family: var(--font-display); line-height: 1.03; letter-spacing: -0.02em; }
.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-xs);
  font-weight: 500;
}