/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — elonmuskular.com single source of truth
   Inherits from C:\Users\ADMIN\Desktop\protocols-is-iteration\DESIGN_SYSTEM.md
   Loaded once via default.hbs. All templates reference these vars.
   Edits require explicit operator approval + DESIGN_SYSTEM alignment.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── §1 background system ── */
  --bg-top: #0A0E1A;
  --bg-bot: #0C1018;

  /* ── §4 color tokens ── */
  --emerald: #10B981;
  --emerald-bright: #34d399;
  --blue: #3B82F6;
  --violet: #8b5cf6;        /* documentary accent only */
  --amber: #F59E0B;         /* product-context only per §4 */

  --text-high: #f0f0f0;                      /* highest-weight text (§4 default body is #f0f0f0) */
  --text-body: rgba(255, 255, 255, 0.45);    /* §4 body text default .45-.5 — observed on protocols.is .hm-product p */
  --text-reading: rgba(255, 255, 255, 0.72); /* long-form reading prose (manifesto/letters body) */
  --text-meta: rgba(255, 255, 255, 0.3);     /* §4 muted .25-.3 — observed on protocols.is .hm-hero-meta, .hm-product-meta */
  --text-faint: rgba(255, 255, 255, 0.2);    /* footer brand line */
  --text-dim: rgba(255, 255, 255, 0.15);     /* footer links default — observed on protocols.is .hm-footer-links */

  --border: rgba(255, 255, 255, 0.05);
  --border-hi: rgba(255, 255, 255, 0.09);
  --surface: rgba(255, 255, 255, 0.025);
  --surface-elev: rgba(255, 255, 255, 0.035);

  /* Accent rgba helpers for shadow stacks + gradients */
  --emerald-a10: rgba(16, 185, 129, 0.10);
  --emerald-a15: rgba(16, 185, 129, 0.15);
  --emerald-a20: rgba(16, 185, 129, 0.20);
  --emerald-a30: rgba(16, 185, 129, 0.30);
  --emerald-a40: rgba(16, 185, 129, 0.40);
  --emerald-a45: rgba(16, 185, 129, 0.45);
  --blue-a10: rgba(59, 130, 246, 0.10);
  --blue-a25: rgba(59, 130, 246, 0.25);

  /* ── §7 typography ── */
  --font-display: "Space Grotesk", Inter, -apple-system, system-ui, sans-serif;
  --font-body: Inter, -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-serif: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;

  /* §7 scale — size / tracking / line-height */
  --t-display-xl-size: clamp(2.4rem, 5vw, 3.6rem);     /* hero H1 */
  --t-display-xl-weight: 700;
  --t-display-xl-track: -0.035em;
  --t-display-xl-lh: 1.08;

  --t-display-l-size: clamp(3rem, 7vw, 5rem);          /* metric / evidence */
  --t-display-l-weight: 700;
  --t-display-l-track: -0.04em;
  --t-display-l-lh: 1.0;

  --t-display-m-size: clamp(1.6rem, 3.2vw, 2.2rem);    /* section H2 */
  --t-display-m-weight: 700;
  --t-display-m-track: -0.02em;
  --t-display-m-lh: 1.2;

  --t-display-s-size: 17px;                            /* card H4 */
  --t-display-s-weight: 600;
  --t-display-s-track: -0.01em;
  --t-display-s-lh: 1.35;

  --t-body-l-size: 18px;                               /* hero sub */
  --t-body-l-lh: 1.65;
  --t-body-m-size: 15px;                               /* section copy */
  --t-body-m-lh: 1.75;
  --t-body-s-size: 13px;                               /* card caption */
  --t-body-s-lh: 1.6;

  --t-label-size: 11px;                                /* mono label */
  --t-label-track: 0.12em;

  /* ── §8 radii / borders / blurs ── */
  --radius-card: 16px;
  --radius-cta: 12px;
  --radius-pill: 999px;
  --stroke: 1px;
  --blur-card: blur(12px) saturate(120%);
  --blur-nav: blur(24px) saturate(140%);

  /* ── spacing scale (calibrated against protocols.is shipped values) ── */
  --pad-page-top: clamp(140px, 16vh, 200px);   /* page top clear of fixed nav */
  --pad-page-bot: clamp(96px, 12vh, 160px);
  --pad-section: clamp(88px, 10vh, 144px);     /* between-section rhythm */
  --pad-card: 28px 32px;                       /* secondary cards — matches protocols.is .hm-product mobile */
  --pad-card-primary: 44px 40px;               /* primary cards — matches protocols.is .hm-product desktop */
  --gap-section: clamp(64px, 8vw, 96px);

  /* ── specimen-frame corner brackets (§14 brand signature) ── */
  --tick-size: 14px;                           /* card / footer — matches .hm-product-tick / .hm-footer-tick */
  --tick-size-hero: 16px;                      /* hero — matches .hm-hero-tick */
  --tick-inset: 14px;                          /* card / footer inset from corner */
  --tick-inset-hero: 28px;                     /* hero inset */

  /* ── widths ── */
  --w-reading: 680px;      /* manifesto + letters body */
  --w-bio: 640px;          /* about + contact */
  --w-press: 760px;        /* press kit */
  --w-wide: 1100px;        /* home + wide grids */

  /* ── easing ── */
  --ease: ease;
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Global baseline ── */
html, body {
  background: var(--bg-top);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  margin: 0;
}