/* ════════════════════════════════════════════════════
   tokens.css — NURI Pitch
   Forked from NURI product brand palette.
   Single source of truth for all design tokens.
   ════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Barlow+Condensed:wght@500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600&family=Orbitron:wght@500;700&display=swap');

:root {
  /* ── Backgrounds ──────────────────────────────── */
  --bg:       #05080f;
  --bg1:      #080c17;
  --bg2:      #0c1220;

  /* ── Surfaces ─────────────────────────────────── */
  --surface:  rgba(255,255,255,0.04);
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(255,255,255,0.14);

  /* ── NURI Brand colours ───────────────────────── */
  --blue:       #2979ff;
  --blue-dim:   rgba(41,121,255,0.12);
  --blue-glow:  rgba(41,121,255,0.25);

  /* Clinical green — "vitals stable" signal */
  --green:      #00e676;
  --green-dim:  rgba(0,230,118,0.10);
  --green-glow: rgba(0,230,118,0.20);

  /* Gold — caution / pending */
  --gold:       #c8922a;
  --gold-dim:   rgba(200,146,42,0.12);
  --gold-border:rgba(200,146,42,0.28);

  /* Orange — alert / escalation */
  --orange:     #ff9f43;
  --orange-dim: rgba(255,159,67,0.12);

  /* Cyan — government/public track accent */
  --cyan:       #06b6d4;
  --cyan-dim:   rgba(6,182,212,0.12);

  /* ── Clinical NEWS2 signal colours ───────────────
     Used exclusively in the demo widget.
     Do not use for general UI.                       */
  --vital-stable:   #00e676;
  --vital-caution:  #ff9f43;
  --vital-critical: #ef4444;

  --red:      #ef4444;
  --red-dim:  rgba(239,68,68,0.12);

  /* ── Text ─────────────────────────────────────── */
  --text:   #e8edf5;
  --text2:  #8fa3bc;
  --text3:  #445566;

  /* ── Typography ───────────────────────────────── */
  --sans:  'Barlow', sans-serif;
  --cond:  'Barlow Condensed', sans-serif;
  --mono:  'JetBrains Mono', monospace;

  /* ── Spacing scale ────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Radius scale ─────────────────────────────── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;

  /* ── Transitions ──────────────────────────────── */
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --ease-in:     cubic-bezier(0.4,0,1,1);
  --ease-out:    cubic-bezier(0,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --t-fast:  0.15s;
  --t-base:  0.25s;
  --t-slow:  0.4s;
}

/* ── Base Reset ──────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--bg2); border-radius: 2px; }

/* ── Focus ───────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Keyframe library ────────────────────────────── */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 0.9; transform: translate(-50%,-50%) scale(1.08); }
}
@keyframes tele-blink {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 1; }
}
@keyframes tele-drift {
  0%   { opacity: 0; transform: translateY(6px); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes scan-line {
  0%   { top: -2px; }
  100% { top: 100%; }
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes screen-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-16px); }
}
@keyframes icon-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes cell-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-4px); }
  40%     { transform: translateX(4px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ecg-draw {
  from { stroke-dashoffset: 1200; }
  to   { stroke-dashoffset: 0; }
}
@keyframes vital-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
@keyframes crumb-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}