/* ============================================================
   design-tokens.css — Kenki "Clinical Futurism" Design System
   Updated: 2026-03-16 | Nova Design Spec | Stack: Chart.js + ApexCharts + D3.js
   ============================================================ */

:root {
  /* ── Core Palette ─────────────────────────────────────── */
  --teal-400:         #00D4AA;
  --teal-300:         #33DDB9;
  --teal-100:         rgba(0, 212, 170, 0.08);
  --teal-glow:        rgba(0, 212, 170, 0.20);
  --teal-glow-strong: rgba(0, 212, 170, 0.35);

  --blue-400:         #4FACFE;
  --blue-300:         #72BEFF;
  --blue-glow:        rgba(79, 172, 254, 0.18);

  /* Legacy aliases */
  --navy-950: #050810;
  --navy-900: #0A0E1A;
  --navy-800: #111827;
  --navy-700: #1B2A4A;
  --navy-600: #1e3a5f;
  --cyan-400: #4FACFE;
  --cyan-300: #7dc5ff;
  --purple-400: #a78bfa;
  --pink-400:   #f472b6;
  --amber-400:  #fbbf24;
  --red-400:    #f87171;
  --green-400:  #34d399;

  /* ── Background Stack (darkest → lightest surface) ────── */
  --bg-void:          #07090f;
  --bg-primary:       #0A0E1A;
  --bg-card:          #0E1320;
  --bg-card-hover:    #121828;
  --bg-input:         #080C14;
  --bg-overlay:       rgba(7, 9, 15, 0.92);
  --bg-secondary:     var(--navy-800);
  --bg-hover:         rgba(255,255,255,.07);

  /* ── Glass Surfaces ───────────────────────────────────── */
  --glass-bg:         rgba(14, 19, 32, 0.75);
  --glass-bg-light:   rgba(14, 19, 32, 0.55);
  --glass-border:     rgba(255, 255, 255, 0.07);
  --glass-border-teal: rgba(0, 212, 170, 0.18);
  --glass-blur:       blur(20px);

  /* ── Semantic Colors ──────────────────────────────────── */
  --accent-primary:   var(--teal-400);
  --accent-secondary: var(--cyan-400);
  --accent-glow:      rgba(0,212,170,.25);

  /* ── Text Hierarchy ───────────────────────────────────── */
  --text-primary:     #F0F4FF;
  --text-secondary:   #9AA8BF;
  --text-muted:       #5C6880;
  --text-inverse:     #0A0E1A;

  /* ── Status Colors (body diagram + health indicators) ── */
  --status-green:     #22C55E;
  --status-green-bg:  rgba(34, 197, 94, 0.12);
  --status-yellow:    #F59E0B;
  --status-yellow-bg: rgba(245, 158, 11, 0.12);
  --status-orange:    #F97316;
  --status-orange-bg: rgba(249, 115, 22, 0.12);
  --status-red:       #EF4444;
  --status-red-bg:    rgba(239, 68, 68, 0.12);
  --status-grey:      #3A4255;
  --status-grey-bg:   rgba(58, 66, 85, 0.25);

  --danger:   var(--red-400);
  --warning:  var(--amber-400);
  --success:  var(--green-400);
  --info:     var(--cyan-400);

  /* ── Borders & Radii ──────────────────────────────────── */
  --border-default:   rgba(255, 255, 255, 0.07);
  --border-accent:    rgba(0, 212, 170, 0.30);
  --border-focus:     rgba(0, 212, 170, 0.60);
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-pill: 999px;
  --radius-full: 999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:        0 1px 3px rgba(0,0,0,.4);
  --shadow-card:      0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow-teal: 0 0 20px rgba(0, 212, 170, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-glow-blue: 0 0 20px rgba(79, 172, 254, 0.20), 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-glow-cyan: 0 0 20px rgba(79,172,254,.35), 0 0 60px rgba(79,172,254,.12);
  --shadow-glow-red:  0 0 20px rgba(248,113,113,.3);
  --shadow-sheet:     0 -8px 40px rgba(0, 0, 0, 0.6);

  /* ── Spacing Scale ────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  /* Legacy 8-pt grid aliases */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── Typography ───────────────────────────────────────── */
  --font-sans:        'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'Fira Code', 'JetBrains Mono', monospace;
  --text-xs:          0.75rem;
  --text-sm:          0.825rem;
  --text-base:        0.9rem;
  --text-md:          1rem;
  --text-lg:          1.125rem;
  --text-h3:          1.25rem;
  --text-h2:          1.5rem;
  --text-h1:          2rem;
  --text-display:     2.5rem;
  --text-h4:          1.125rem;
  --text-body:        1rem;
  --text-caption:     .6875rem;

  --font-light:   300;
  --font-normal:  400;
  --font-regular: 400;
  --font-medium:  500;
  --font-semibold:600;
  --font-bold:    700;
  --font-black:   800;

  /* ── Touch Targets ────────────────────────────────────── */
  --touch-min:         44px;
  --touch-comfortable: 52px;

  /* ── Animation Timing ─────────────────────────────────── */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:         cubic-bezier(.22,1,.36,1);
  --ease-linear:      linear;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-sheet:   320ms;
  --duration-base:    250ms;
  --duration-slower:  1000ms;

  /* ── Z-index ──────────────────────────────────────────── */
  --z-base:     0;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;
  --z-cursor:   400;
}

/* ── Light Mode Overrides ───────────────────────────────── */
:root[data-theme="light"] {
  --bg-primary:    #f0f4f8;
  --bg-secondary:  #e2eaf4;
  --bg-card:       #ffffff;
  --bg-card-hover: #f5f7fa;
  --bg-input:      rgba(0,0,0,.04);
  --bg-hover:      rgba(0,0,0,.05);

  --glass-bg:      rgba(255,255,255,.7);
  --glass-border:  rgba(0,212,170,.25);

  --text-primary:  #0d1117;
  --text-secondary:#2d3748;
  --text-muted:    #718096;

  --border-default: rgba(0,0,0,.1);
  --shadow-card:    0 4px 24px rgba(0,0,0,.1), 0 1px 0 rgba(0,0,0,.03) inset;
}

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes fadeIn     { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp    { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }
@keyframes slideDown  { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }
@keyframes glowPulse  { 0%,100% { box-shadow:var(--shadow-glow-teal) } 50% { box-shadow:0 0 40px rgba(0,212,170,.6), 0 0 80px rgba(0,212,170,.2) } }
@keyframes heartbeat  { 0%,100% { transform:scale(1) } 14% { transform:scale(1.15) } 28% { transform:scale(1) } 42% { transform:scale(1.08) } 56% { transform:scale(1) } }
@keyframes shimmer    { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }
@keyframes spin       { to { transform:rotate(360deg) } }
@keyframes dataLoad   { from { stroke-dashoffset:283 } to { stroke-dashoffset:0 } }

/* ── Nova Sprint Animations ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes onbStepIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes onbStepInReverse {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes regionPulseGreen {
    0%, 100% { fill-opacity: 0.7; filter: drop-shadow(0 0 4px rgba(34,197,94,0.4)); }
    50%      { fill-opacity: 0.85; filter: drop-shadow(0 0 10px rgba(34,197,94,0.7)); }
  }
  @keyframes regionPulseRed {
    0%, 100% { fill-opacity: 0.6; filter: drop-shadow(0 0 4px rgba(239,68,68,0.4)); }
    50%      { fill-opacity: 0.8; filter: drop-shadow(0 0 12px rgba(239,68,68,0.65)); }
  }
  @keyframes fabIn {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,212,170,0); }
    50%      { box-shadow: 0 0 0 6px rgba(0,212,170,0.15); }
  }
}
.region-healthy { animation: regionPulseGreen 3s ease-in-out infinite; }
.region-danger  { animation: regionPulseRed 2s ease-in-out infinite; }