/* ══════════════════════════════════════════════════════════════════
   HYPERCADE — Shared Stylesheet
   All design tokens, reset, nav, footer, typography, buttons,
   tooltips, and common component styles.
   ══════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  --bg:#ffffff; --bg2:#f8f9fa; --bg3:#f1f3f5;
  --tx:#1a1a1a; --tx2:#6b7280; --tx3:#9ca3af;
  --bd:#e5e7eb; --bd2:#d1d5db;
  --teal-50:#E1F5EE; --teal-200:#9FE1CB; --teal-400:#1D9E75;
  --teal-600:#0F6E56; --teal-800:#085041;
  --coral-50:#FAECE7; --coral-200:#F0997B; --coral-400:#D85A30;
  --coral-600:#993C1D; --coral-700:#712B13; --coral-800:#4A1B0C;
  --purple-50:#EEEDFE; --purple-400:#7F77DD;
  --purple-600:#534AB7; --purple-800:#26215C;
  --amber-50:#FFFBEB; --amber-200:#F0D085; --amber-400:#F59E0B;
  --amber-600:#C2770F; --amber-800:#78350F;
  --sky-50:#E0F2FE; --sky-200:#BAE6FD; --sky-400:#38BDF8;
  --sky-600:#0369A1; --sky-800:#0C4A6E;
  --gold-50:#FEF9EC; --gold-200:#F0D58A; --gold-400:#E8C97A;
  --gold-600:#D4A84B; --gold-800:#78500A;
  --blue-50:#E6F1FB; --blue-400:#378ADD;
  --blue-600:#185FA5; --blue-800:#042C53;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#111113; --bg2:#1a1a1e; --bg3:#222226;
    --tx:#e8e8ec; --tx2:#9ca0a8; --tx3:#6b6f78;
    --bd:#2a2a2e; --bd2:#3a3a3e;
    --teal-50:#0a2e24; --teal-200:#085041; --teal-400:#1D9E75;
    --teal-600:#5DCAA5; --teal-800:#9FE1CB;
    --coral-50:#2a1510; --coral-200:#712B13; --coral-400:#D85A30;
    --coral-600:#F0997B; --coral-700:#993C1D; --coral-800:#F5C4B3;
    --purple-50:#1e1c30; --purple-400:#7F77DD;
    --purple-600:#AFA9EC; --purple-800:#CECBF6;
    --amber-50:#2a1a00; --amber-200:#78350F; --amber-400:#F59E0B;
    --amber-600:#FCD34D; --amber-800:#FFFBEB;
    --sky-50:#071a2a; --sky-200:#0C4A6E; --sky-400:#38BDF8;
    --sky-600:#7DD3FC; --sky-800:#E0F2FE;
    --gold-50:#1a1200; --gold-200:#78500A; --gold-400:#E8C97A;
    --gold-600:#F0D58A; --gold-800:#FEF9EC;
    --blue-50:#0c1a2a; --blue-400:#378ADD;
    --blue-600:#85B7EB; --blue-800:#B5D4F4;
  }
}

/* ── RESET ───────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans', system-ui, -apple-system, sans-serif;
  background:var(--bg); color:var(--tx);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── NAV ─────────────────────────────────────────────────────────── */
nav {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bd);
}
@media (prefers-color-scheme:dark) { nav { background:rgba(17,17,19,0.92); } }
.nav-inner {
  max-width:1080px; margin:0 auto; padding:0 24px;
  height:60px; display:flex; align-items:center;
  justify-content:space-between;
}
.logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--tx);
}
.logo-mark {
  width:30px; height:30px; background:var(--coral-400);
  border-radius:7px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.logo-mark svg { width:16px; height:16px; }
.logo-text {
  font-size:17px; font-weight:600;
  letter-spacing:-0.02em;
}
.logo-text em { color:var(--coral-400); font-style:normal; }
.nav-cta {
  display:inline-flex; align-items:center;
  background:var(--coral-400); color:#fff;
  padding:8px 18px; border-radius:8px;
  font-size:14px; font-weight:500;
  text-decoration:none;
  transition:background 0.15s, transform 0.1s;
}
.nav-cta:hover { background:var(--coral-600); transform:translateY(-1px); }

/* ── SHARED LAYOUT ───────────────────────────────────────────────── */
.section { padding:80px 24px; }
.inner { max-width:1080px; margin:0 auto; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'DM Mono', monospace;
  font-size:11px; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; margin-bottom:24px;
}
.section-label {
  font-family:'DM Mono', monospace;
  font-size:11px; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--tx3); margin-bottom:8px;
}
.section-heading {
  font-size:clamp(26px,3.2vw,36px); font-weight:600;
  letter-spacing:-0.025em; line-height:1.2;
  margin-bottom:12px;
}
.section-body {
  font-size:16px; color:var(--tx2);
  max-width:520px; line-height:1.65; margin-bottom:40px;
}
.mono { font-family:'DM Mono', monospace; }

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center;
  background:var(--coral-400); color:#fff;
  padding:12px 28px; border-radius:10px;
  font-size:15px; font-weight:500;
  text-decoration:none;
  transition:background 0.15s, transform 0.1s;
}
.btn-primary:hover { background:var(--coral-600); transform:translateY(-1px); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--tx2); padding:12px 20px; border-radius:10px;
  font-size:15px; font-weight:400; text-decoration:none;
  border:1px solid var(--bd);
  transition:border-color 0.15s, color 0.15s;
}
.btn-ghost:hover { border-color:var(--bd2); color:var(--tx); }

/* ── TOOLTIP (shared across diagram pages) ───────────────────────── */
.tooltip {
  display:none; position:fixed;
  background:var(--bg); border:1px solid var(--bd2);
  border-radius:12px; padding:16px 20px;
  max-width:360px; font-size:13px;
  color:var(--tx); z-index:200;
  pointer-events:none; line-height:1.6;
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
}
.tooltip.show { display:block; }
.tt-eyebrow {
  font-family:'DM Mono', monospace;
  font-size:10px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:6px; opacity:0.45;
}
.tt-title {
  font-weight:600; font-size:14px;
  margin-bottom:6px;
}
.tt-body { color:var(--tx2); font-size:13px; }
.tt-detail {
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--bd);
  font-family:'DM Mono', monospace;
  font-size:11px; color:var(--tx3);
  line-height:1.5;
}

/* ── BOTTOM SHEET (mobile tap detail) ────────────────────────────── */
.sheet-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.45); z-index:100;
  opacity:0; pointer-events:none;
  transition:opacity 0.25s ease;
}
.sheet-backdrop.show { opacity:1; pointer-events:auto; }
.bottom-sheet {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--bg); border-radius:20px 20px 0 0;
  padding:0 24px max(40px, env(safe-area-inset-bottom));
  z-index:101; transform:translateY(100%);
  transition:transform 0.32s cubic-bezier(0.32,0.72,0,1);
  max-height:80vh; overflow-y:auto;
}
.bottom-sheet.show { transform:translateY(0); }
.sheet-handle {
  width:36px; height:4px; background:var(--bd2);
  border-radius:2px; margin:14px auto 22px;
}
.sheet-eyebrow {
  font-family:'DM Mono', monospace;
  font-size:10px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  opacity:0.45; margin-bottom:8px;
}
.sheet-title {
  font-weight:700; font-size:19px;
  letter-spacing:-0.025em; margin-bottom:12px; line-height:1.2;
}
.sheet-body {
  color:var(--tx2); font-size:14px; line-height:1.7;
}
.sheet-detail {
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--bd);
  font-family:'DM Mono', monospace;
  font-size:11px; color:var(--tx3); line-height:1.6;
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
footer {
  border-top:1px solid var(--bd);
  padding:20px 24px 40px;
}
.footer-inner {
  max-width:1080px; margin:0 auto;
  display:flex; justify-content:space-between;
  align-items:center;
  font-size:11px; color:var(--tx3);
  font-family:'DM Mono', monospace;
}

/* ── PRODUCT COLOR VARIANTS (used across multiple pages) ─────────── */
.c-teal { background:var(--teal-50); border-left:3px solid var(--teal-600); }
.c-teal .node-title { color:var(--teal-800); }
.c-teal .node-sub { color:var(--teal-600); }
.c-teal .node-icon { background:var(--teal-600); }
.c-teal .node-stat { color:var(--teal-600); }

.c-coral { background:var(--coral-50); border-left:3px solid var(--coral-400); }
.c-coral .node-title { color:var(--coral-800); }
.c-coral .node-sub { color:var(--coral-600); }
.c-coral .node-icon { background:var(--coral-400); }
.c-coral .node-stat { color:var(--coral-400); }

.c-purple { background:var(--purple-50); border-left:3px solid var(--purple-600); }
.c-purple .node-title { color:var(--purple-800); }
.c-purple .node-sub { color:var(--purple-600); }
.c-purple .node-icon { background:var(--purple-600); }
.c-purple .node-stat { color:var(--purple-600); }

.c-blue { background:var(--blue-50); border-left:3px solid var(--blue-600); }
.c-blue .node-title { color:var(--blue-800); }
.c-blue .node-sub { color:var(--blue-600); }
.c-blue .node-icon { background:var(--blue-600); }
.c-blue .node-stat { color:var(--blue-600); }

.c-amber { background:var(--amber-50); border-left:3px solid var(--amber-600); }
.c-amber .node-title { color:var(--amber-800); }
.c-amber .node-sub { color:var(--amber-600); }
.c-amber .node-icon { background:var(--amber-600); }
.c-amber .node-stat { color:var(--amber-600); }

.c-sky { background:var(--sky-50); border-left:3px solid var(--sky-600); }
.c-sky .node-title { color:var(--sky-800); }
.c-sky .node-sub { color:var(--sky-600); }
.c-sky .node-icon { background:var(--sky-600); }
.c-sky .node-stat { color:var(--sky-600); }

/* ── SHARED RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:640px) {
  .footer-inner { flex-direction:column; gap:8px; text-align:center; }
}
@media (max-width:480px) {
  .nav-cta { padding:6px 12px; font-size:13px; }
}