/* Tunneler — design tokens. Import once at the app root.
   Never hardcode a hex in a component; reference a token. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── surfaces & ink ─────────────────────────────────────────── */
  --void: #0b0b0f;
  --surface: #131419;
  --elevated: #1a1c23;
  --inset: #0e0f13;
  --line: #23262f;
  --line-strong: #313643;
  --ink-strong: #f2f3f5;
  --ink: #c8ccd4;
  --ink-dim: #8a909c;
  --ink-faint: #5b616e;

  /* ── brand: Sodium (warm) ───────────────────────────────────── */
  --amber-300: #ffc089;
  --amber-400: #ffa259;
  --amber-500: #ff8a3d;
  --amber-600: #f26c12;
  --amber-glow: rgba(255, 138, 61, 0.35);

  /* ── accent: Aperture (cool / live / relay) ─────────────────── */
  --cyan-300: #8befe6;
  --cyan-400: #46e0d2;
  --cyan-500: #1fc9be;
  --cyan-glow: rgba(70, 224, 210, 0.3);

  /* ── signals == guardrail decisions ─────────────────────────── */
  --go: #5be38a;
  --go-bg: rgba(91, 227, 138, 0.13);
  --hold: #ffc24b;
  --hold-bg: rgba(255, 194, 75, 0.13);
  --stop: #ff5c5c;
  --stop-bg: rgba(255, 92, 92, 0.13);

  /* semantic aliases for decisions (use these in app logic) */
  --decision-allow: var(--go);
  --decision-approval: var(--hold);
  --decision-draft: var(--hold);
  --decision-block: var(--stop);

  /* ── brand application ──────────────────────────────────────── */
  --brand: var(--amber-400);
  --brand-strong: var(--amber-500);
  --link: var(--amber-300);
  --live: var(--cyan-400);
  --focus: var(--amber-glow);

  /* ── type ───────────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem; /* base */
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-25: 1.5625rem;
  --fs-31: 1.9375rem;
  --fs-39: 2.4375rem;
  --fs-49: 3.0625rem;

  /* ── shape ──────────────────────────────────────────────────── */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-pill: 999px;

  /* ── elevation: glow, not heavy shadow ──────────────────────── */
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.5);
  --glow-amber: 0 0 0 1px rgba(255, 138, 61, 0.4), 0 0 24px var(--amber-glow);
  --glow-cyan: 0 0 0 1px rgba(70, 224, 210, 0.4), 0 0 24px var(--cyan-glow);

  /* ── motion ─────────────────────────────────────────────────── */
  --ease-tunnel: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 600ms;

  /* ── spacing scale (4px base) ───────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --z-nav: 10; --z-overlay: 50; --z-toast: 80;
}

/* ── primitives ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* atmospheric depth: a faint sodium glow up top, like a tunnel mouth */
body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 138, 61, 0.06), transparent 60%),
    var(--void);
}
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.15; color: var(--ink-strong); }
code, kbd, .mono { font-family: var(--font-mono); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--amber-400); }

::selection { background: var(--amber-glow); color: var(--ink-strong); }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--amber-400); border-radius: var(--r-1); }

/* wordmark utility */
.wordmark {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--ink-strong);
}

/* decision badge helper: data-decision="allow|approval_required|draft_only|block" */
.decision { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); font: 500 var(--fs-12)/1 var(--font-mono); text-transform: lowercase; }
.decision[data-decision="allow"]            { background: var(--go-bg);   color: var(--go); }
.decision[data-decision="approval_required"]{ background: var(--hold-bg); color: var(--hold); }
.decision[data-decision="draft_only"]       { background: var(--hold-bg); color: var(--hold); }
.decision[data-decision="block"]            { background: var(--stop-bg); color: var(--stop); }

/* live pulse for relay/armed states */
@keyframes tunnel-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.pulse { animation: tunnel-pulse 1.8s var(--ease-tunnel) infinite; }

/* staggered "travel inward" entrance */
@keyframes tunnel-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.enter { animation: tunnel-in var(--dur-3) var(--ease-tunnel) both; }

@media (prefers-reduced-motion: reduce) {
  .pulse, .enter { animation: none; }
  * { transition: none !important; }
}