/* ============================================================================
   Centertron — Design System Tokens (locked)
   Generated from /app/design_guidelines.json (iter99 — "Operating Intelligence")
   This file is the SINGLE SOURCE OF TRUTH for all colors, type, spacing,
   radius, motion and component primitives. Do not hardcode hex anywhere else.
   Loaded BEFORE cinematic.css (legacy remap layer) and Tailwind.
============================================================================ */

:root{
  /* ─────────────── COLOR SCALES ─────────────── */
  /* Obsidian — backgrounds, surfaces, depth */
  --cx-obs-950:#020203;
  --cx-obs-900:#050608;
  --cx-obs-800:#090B0F;
  --cx-obs-700:#0F1117;
  --cx-obs-600:#161923;

  /* Amber — primary identity, gold accent, "operating" energy */
  --cx-amber-dark:#B37700;
  --cx-amber-base:#F5A623;
  --cx-amber-glow:#FFC107;
  --cx-amber-light:#FFD54F;
  --cx-amber-subtle:#FFECB3;

  /* Crimson — alert / critical / anomaly (NEW vocabulary) */
  --cx-crimson-subtle:#4D0612;
  --cx-crimson-dark:#9B0C23;
  --cx-crimson-base:#C8102E;
  --cx-crimson-bright:#F01437;
  --cx-crimson-glow:#FF1744;

  /* Cyan — live telemetry, real-time data */
  --cx-cyan-deep:#00B8D4;
  --cx-cyan-base:#00E5FF;
  --cx-cyan-light:#84FFFF;

  /* Neutrals */
  --cx-n-100:#FFFFFF;
  --cx-n-200:#F1F5F9;
  --cx-n-300:#CBD5E1;
  --cx-n-400:#94A3B8;
  --cx-n-500:#64748B;
  --cx-n-600:#475569;
  --cx-n-700:#334155;
  --cx-n-800:#1E293B;

  /* ─────────────── SEMANTIC TOKENS ─────────────── */
  --cx-bg:#020203;
  --cx-bg-elevated:#050608;
  --cx-bg-surface:#090B0F;
  --cx-bg-overlay:rgba(2,2,3,.78);
  --cx-border:#0F1117;
  --cx-border-strong:#161923;
  --cx-border-accent:rgba(245,166,35,.30);

  --cx-text:#FFFFFF;
  --cx-text-muted:#94A3B8;
  --cx-text-subtle:#64748B;
  --cx-text-faint:#475569;

  --cx-accent:#F5A623;
  --cx-accent-strong:#FFC107;
  --cx-accent-soft:rgba(245,166,35,.10);

  --cx-alert:#C8102E;
  --cx-alert-strong:#F01437;
  --cx-alert-soft:rgba(200,16,46,.10);

  --cx-telemetry:#00E5FF;
  --cx-telemetry-soft:rgba(0,229,255,.12);

  --cx-success:#10B981; /* sparing use; mostly for "deployment healthy" */

  /* ─────────────── TYPOGRAPHY ─────────────── */
  --cx-font-display:"Geist","Söhne Breit","NB Architekt","Söhne",Inter,system-ui,sans-serif;
  --cx-font-sans:"Geist","Söhne",Inter,system-ui,sans-serif;
  --cx-font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* ─────────────── SPACING (4px base, 12 stops) ─────────────── */
  --cx-s-0:0;
  --cx-s-1:4px;
  --cx-s-2:8px;
  --cx-s-3:12px;
  --cx-s-4:16px;
  --cx-s-5:20px;
  --cx-s-6:24px;
  --cx-s-8:32px;
  --cx-s-10:40px;
  --cx-s-12:48px;
  --cx-s-16:64px;
  --cx-s-20:80px;
  --cx-s-24:96px;

  /* ─────────────── RADIUS ─────────────── */
  --cx-r-0:0;
  --cx-r-1:4px;
  --cx-r-2:8px;
  --cx-r-3:12px;
  --cx-r-4:16px;
  --cx-r-5:20px;
  --cx-r-full:9999px;

  /* ─────────────── MOTION ─────────────── */
  --cx-d-instant:80ms;
  --cx-d-snap:180ms;
  --cx-d-slide:280ms;
  --cx-d-settle:420ms;
  --cx-d-cinematic:800ms;

  --cx-e-snap:cubic-bezier(.2,0,.2,1);
  --cx-e-settle:cubic-bezier(.16,1,.3,1);
  --cx-e-slide:cubic-bezier(.4,0,.2,1);
  --cx-e-out:cubic-bezier(0,0,.2,1);

  /* ─────────────── SHADOWS / GLOWS ─────────────── */
  --cx-glow-amber:0 0 0 1px rgba(245,166,35,.25), 0 18px 60px -12px rgba(245,166,35,.30);
  --cx-glow-amber-soft:0 8px 30px -8px rgba(245,166,35,.18);
  --cx-glow-crimson:0 0 0 1px rgba(240,20,55,.30), 0 16px 50px -12px rgba(240,20,55,.32);
  --cx-glow-cyan:0 0 24px -4px rgba(0,229,255,.30);
  --cx-shadow-card:0 24px 60px -20px rgba(0,0,0,.7), 0 1px 0 0 rgba(255,255,255,.03) inset;

  /* ─────────────── LAYOUT ─────────────── */
  --cx-prose-max:680px;
  --cx-content-max:1280px;
  --cx-wide-max:1600px;
}

/* ============================================================================
   GLOBAL TYPOGRAPHIC BASE
============================================================================ */
html, body{
  font-family:var(--cx-font-sans);
  font-feature-settings:"cv11","ss01","ss03";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--cx-bg);
  color:var(--cx-text);
}

/* Tailwind utility classes for the new system. Prefixed `cx-` so they
   never collide with Tailwind defaults. */

/* ── DISPLAY scale ── */
.cx-display-2xl{font-family:var(--cx-font-display);font-size:clamp(3rem,6vw,4.5rem);font-weight:800;letter-spacing:-.04em;line-height:1;text-transform:none}
.cx-display-xl {font-family:var(--cx-font-display);font-size:clamp(2.5rem,4.6vw,3.75rem);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.cx-display-lg {font-family:var(--cx-font-display);font-size:clamp(2rem,3.6vw,3rem);font-weight:700;letter-spacing:-.025em;line-height:1.08}
.cx-display-md {font-family:var(--cx-font-display);font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:600;letter-spacing:-.02em;line-height:1.12}

/* ── HEADINGS ── */
.cx-h1{font-family:var(--cx-font-display);font-size:2.25rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.cx-h2{font-family:var(--cx-font-display);font-size:1.875rem;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.cx-h3{font-family:var(--cx-font-sans);font-size:1.5rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.cx-h4{font-family:var(--cx-font-sans);font-size:1.25rem;font-weight:600;letter-spacing:0;line-height:1.3}

/* ── BODY ── */
.cx-body-lg{font-family:var(--cx-font-sans);font-size:1.125rem;font-weight:400;line-height:1.6;color:var(--cx-text-muted)}
.cx-body   {font-family:var(--cx-font-sans);font-size:1rem;font-weight:400;line-height:1.6;color:var(--cx-text-muted)}
.cx-body-sm{font-family:var(--cx-font-sans);font-size:.875rem;font-weight:400;line-height:1.55;color:var(--cx-text-muted)}
.cx-caption{font-family:var(--cx-font-sans);font-size:.75rem;font-weight:500;letter-spacing:.02em;line-height:1.4;color:var(--cx-text-subtle)}

/* ── MONO (telemetry) ── */
.cx-mono   {font-family:var(--cx-font-mono);font-size:.875rem;font-weight:500;letter-spacing:0;line-height:1.4}
.cx-mono-xs{font-family:var(--cx-font-mono);font-size:.75rem;font-weight:500;letter-spacing:.02em;line-height:1.4}

/* ── EYEBROW (Anduril-style "// LABEL") ── */
.cx-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cx-font-mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--cx-accent);
}
.cx-eyebrow::before{content:"//";color:var(--cx-accent);opacity:.7}
.cx-eyebrow--alert{color:var(--cx-alert-strong)}
.cx-eyebrow--alert::before{color:var(--cx-alert-strong)}
.cx-eyebrow--telemetry{color:var(--cx-telemetry)}
.cx-eyebrow--telemetry::before{color:var(--cx-telemetry)}
.cx-eyebrow--muted{color:var(--cx-text-muted)}
.cx-eyebrow--muted::before{color:var(--cx-text-faint)}

/* ─────────────── ACCENT GRADIENT (amber wordmark / headlines) ─────────────── */
.cx-amber-grad{
  color:transparent;
  background:linear-gradient(135deg,#FFD54F 0%,#F5A623 45%,#B37700 100%);
  -webkit-background-clip:text;background-clip:text;
}
.cx-crimson-grad{
  color:transparent;
  background:linear-gradient(135deg,#FF1744 0%,#C8102E 50%,#9B0C23 100%);
  -webkit-background-clip:text;background-clip:text;
}

/* ─────────────── STATUS PILLS (5 states) ─────────────── */
.cx-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:9999px;border:1px solid transparent;font-family:var(--cx-font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.cx-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.cx-pill--live    {color:var(--cx-telemetry);background:var(--cx-telemetry-soft);border-color:rgba(0,229,255,.30)}
.cx-pill--idle    {color:var(--cx-n-400);background:rgba(148,163,184,.06);border-color:rgba(148,163,184,.18)}
.cx-pill--alert   {color:var(--cx-accent);background:var(--cx-accent-soft);border-color:rgba(245,166,35,.30)}
.cx-pill--critical{color:var(--cx-alert-strong);background:var(--cx-alert-soft);border-color:rgba(240,20,55,.40);animation:cx-pulse-crit 1.8s ease-in-out infinite}
.cx-pill--offline {color:var(--cx-n-500);background:transparent;border-color:rgba(100,116,139,.30)}
.cx-pill--offline::before{box-shadow:none;opacity:.5}
@keyframes cx-pulse-crit{0%,100%{box-shadow:0 0 0 0 rgba(240,20,55,.45)}50%{box-shadow:0 0 0 6px rgba(240,20,55,0)}}

/* ─────────────── COMMAND-MODULE CARD ─────────────── */
.cx-module{
  position:relative;
  background:linear-gradient(180deg,var(--cx-obs-800) 0%,var(--cx-obs-900) 100%);
  border:1px solid var(--cx-border);
  border-radius:var(--cx-r-3);
  padding:var(--cx-s-6) var(--cx-s-6);
  transition:transform var(--cx-d-settle) var(--cx-e-settle),
             border-color var(--cx-d-snap) var(--cx-e-snap),
             box-shadow var(--cx-d-settle) var(--cx-e-settle);
}
.cx-module:hover{
  border-color:var(--cx-border-accent);
  transform:translateY(-2px);
  box-shadow:var(--cx-glow-amber-soft);
}
.cx-module--alert{border-color:rgba(240,20,55,.25)}
.cx-module--alert:hover{box-shadow:var(--cx-glow-crimson)}

/* Dense data card (no hover lift — meant to be read, not poked) */
.cx-dense{
  background:var(--cx-obs-800);
  border:1px solid var(--cx-border);
  border-radius:var(--cx-r-2);
  padding:var(--cx-s-4) var(--cx-s-5);
}

/* ─────────────── TELEMETRY READOUT ─────────────── */
.cx-readout{display:flex;flex-direction:column;gap:4px}
.cx-readout-value{font-family:var(--cx-font-mono);font-weight:700;font-size:1.625rem;line-height:1;color:var(--cx-text);font-variant-numeric:tabular-nums}
.cx-readout-value--telemetry{color:var(--cx-telemetry)}
.cx-readout-value--accent{color:var(--cx-accent)}
.cx-readout-value--alert{color:var(--cx-alert-strong)}
.cx-readout-label{font-family:var(--cx-font-mono);font-size:.625rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cx-text-subtle)}
.cx-readout-delta{font-family:var(--cx-font-mono);font-size:.75rem;color:var(--cx-text-subtle)}
.cx-readout-delta--up{color:var(--cx-success)}
.cx-readout-delta--down{color:var(--cx-alert-strong)}

/* ─────────────── BUTTONS (new primitives) ─────────────── */
.cx-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:var(--cx-r-2);
  font-family:var(--cx-font-sans);font-size:.875rem;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--cx-d-instant) var(--cx-e-snap),
             background var(--cx-d-snap) var(--cx-e-snap),
             border-color var(--cx-d-snap) var(--cx-e-snap),
             box-shadow var(--cx-d-snap) var(--cx-e-snap);
}
.cx-btn:active{transform:translateY(1px)}
.cx-btn--primary{background:var(--cx-accent);color:var(--cx-obs-950);border-color:var(--cx-accent)}
.cx-btn--primary:hover{background:var(--cx-amber-glow);box-shadow:var(--cx-glow-amber-soft)}
.cx-btn--ghost{background:transparent;color:var(--cx-text);border-color:var(--cx-border-strong)}
.cx-btn--ghost:hover{border-color:var(--cx-accent);color:var(--cx-accent)}
.cx-btn--danger{background:var(--cx-alert);color:#fff;border-color:var(--cx-alert)}
.cx-btn--danger:hover{background:var(--cx-alert-strong);box-shadow:var(--cx-glow-crimson)}
.cx-btn--palette{background:var(--cx-obs-800);color:var(--cx-text-muted);border-color:var(--cx-border-strong);font-family:var(--cx-font-mono);font-size:.75rem;letter-spacing:.06em}
.cx-btn--palette:hover{border-color:var(--cx-accent);color:var(--cx-text)}
.cx-btn--palette kbd{font-family:var(--cx-font-mono);font-size:.6875rem;padding:2px 6px;border:1px solid var(--cx-border-strong);border-radius:4px;background:var(--cx-obs-900);color:var(--cx-text-subtle)}

/* ─────────────── HUD FRAME (corner ticks) ─────────────── */
.cx-frame{position:relative;padding:var(--cx-s-6)}
.cx-frame::before,.cx-frame::after,
.cx-frame > .cx-frame-corner-bl,.cx-frame > .cx-frame-corner-br{
  content:"";position:absolute;width:14px;height:14px;
  border:1px solid var(--cx-accent);opacity:.55;pointer-events:none;
}
.cx-frame::before{top:0;left:0;border-right:none;border-bottom:none}
.cx-frame::after{top:0;right:0;border-left:none;border-bottom:none}
.cx-frame > .cx-frame-corner-bl{bottom:0;left:0;border-right:none;border-top:none}
.cx-frame > .cx-frame-corner-br{bottom:0;right:0;border-left:none;border-top:none}

/* ─────────────── HUD SCAN-LINE (reusable as a wrapper) ─────────────── */
.cx-scan::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 2px,rgba(255,255,255,.012) 3px,rgba(255,255,255,0) 4px);
  mix-blend-mode:screen;
}

/* ─────────────── SECTION TRANSITIONS ("HUD screen-switch") ─────────────── */
.cx-screen-enter{opacity:0;transform:translateY(12px) scale(.992);filter:blur(2px)}
.cx-screen-enter-active{opacity:1;transform:translateY(0) scale(1);filter:blur(0);transition:all var(--cx-d-cinematic) var(--cx-e-settle)}
.cx-section-divider{height:1px;background:linear-gradient(90deg,transparent 0%,var(--cx-border-strong) 50%,transparent 100%)}

/* ─────────────── HONEST EMPTY STATE ─────────────── */
.cx-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cx-s-3);
  padding:var(--cx-s-16) var(--cx-s-6);
  border:1px dashed var(--cx-border-strong);border-radius:var(--cx-r-3);
  background:var(--cx-obs-900);text-align:center;
}
.cx-empty-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:9999px;background:var(--cx-accent-soft);color:var(--cx-accent);border:1px solid var(--cx-border-accent)}
.cx-empty-title{font-family:var(--cx-font-display);font-size:1.25rem;font-weight:600;color:var(--cx-text);letter-spacing:-.01em}
.cx-empty-copy{font-family:var(--cx-font-sans);font-size:.875rem;color:var(--cx-text-muted);max-width:380px;line-height:1.55}

/* ─────────────── REDUCED MOTION ─────────────── */
@media (prefers-reduced-motion: reduce){
  .cx-module,.cx-btn,.cx-pill--critical{transition:none !important;animation:none !important}
  .cx-screen-enter,.cx-screen-enter-active{transform:none !important;filter:none !important}
}