/* =========================================================
   ARGUS — Design tokens
   Dark-first. Extends the existing product palette.
   ========================================================= */

:root {
  /* ---------- Surfaces (neutrals) ---------- */
  --bg-base:      #0f1117;   /* canonical app background */
  --bg-sunken:    #0a0c11;   /* page chrome, header strip on white-paper print */
  --bg-surface:   #1a1d27;   /* canonical cards / panels */
  --bg-raised:    #232734;   /* hover, raised cards, code blocks */
  --bg-overlay:   #2c3142;   /* tooltips, popovers */

  /* ---------- Hairlines & dividers ---------- */
  --line-faint:   rgba(255,255,255,0.06);
  --line-soft:    rgba(255,255,255,0.10);
  --line-medium:  rgba(255,255,255,0.16);
  --line-strong:  rgba(255,255,255,0.28);

  /* ---------- Text ---------- */
  --fg-primary:   #e6e8ef;   /* default body */
  --fg-secondary: #a8aebd;   /* secondary, captions */
  --fg-muted:     #6c7387;   /* metadata, footnotes */
  --fg-faint:     #4a5061;   /* placeholder, watermarks */
  --fg-inverse:   #0f1117;   /* text on warm/light fills */

  /* ---------- Environment (semantic — locked) ---------- */
  --env-dev-50:   #dbeafe;
  --env-dev:      #3b82f6;
  --env-dev-700:  #1d4ed8;
  --env-dev-bg:   rgba(59,130,246,0.10);
  --env-dev-line: rgba(59,130,246,0.32);

  --env-staging-50:   #fef3c7;
  --env-staging:      #f59e0b;
  --env-staging-700:  #b45309;
  --env-staging-bg:   rgba(245,158,11,0.10);
  --env-staging-line: rgba(245,158,11,0.32);

  --env-prod-50:   #d1fae5;
  --env-prod:      #10b981;
  --env-prod-700:  #047857;
  --env-prod-bg:   rgba(16,185,129,0.10);
  --env-prod-line: rgba(16,185,129,0.32);

  /* ---------- Boolean state ---------- */
  --on:           #10b981;   /* matches prod, intentional */
  --on-bg:        rgba(16,185,129,0.12);
  --off:          #ef4444;
  --off-bg:       rgba(239,68,68,0.10);

  /* ---------- Marketing accent (warm, single) ----------
     Distinct from --env-staging: more golden, less orange,
     desaturated. Reserved for hero emphasis, pull-quotes,
     section numerals — never for live status or env. */
  --accent:       #e8b04a;
  --accent-soft:  rgba(232,176,74,0.16);
  --accent-line:  rgba(232,176,74,0.40);
  --accent-deep:  #b8862c;

  /* ---------- Type ---------- */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* Type scale — modular, 1.250 (major third), anchored at 16px.
     Display & headings use mono. Body uses DM Sans. */
  --t-display:    72px;  --lh-display:    1.02; --tr-display:    -0.03em;
  --t-h1:         48px;  --lh-h1:         1.06; --tr-h1:         -0.02em;
  --t-h2:         34px;  --lh-h2:         1.12; --tr-h2:         -0.015em;
  --t-h3:         24px;  --lh-h3:         1.20; --tr-h3:         -0.01em;
  --t-h4:         18px;  --lh-h4:         1.32; --tr-h4:         0;
  --t-body-lg:    18px;  --lh-body-lg:    1.55; --tr-body-lg:    0;
  --t-body:       16px;  --lh-body:       1.55; --tr-body:       0;
  --t-body-sm:    14px;  --lh-body-sm:    1.55; --tr-body-sm:    0;
  --t-caption:    12px;  --lh-caption:    1.40; --tr-caption:    0.04em;
  --t-code:       13px;  --lh-code:       1.55; --tr-code:       0;
  --t-eyebrow:    11px;  --lh-eyebrow:    1.20; --tr-eyebrow:    0.18em;

  /* ---------- Spacing — 4px base ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --s-11: 80px; --s-12: 96px; --s-13: 128px;

  /* ---------- Radii ---------- */
  --r-1: 2px;  --r-2: 4px;  --r-3: 6px;  --r-4: 10px;
  --r-5: 14px; --r-pill: 999px;

  /* ---------- Shadows (used sparingly — operator-grade restraint) ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow-accent: 0 0 0 1px var(--accent-line), 0 8px 32px rgba(232,176,74,0.12);
  --shadow-glow-prod:   0 0 0 1px var(--env-prod-line), 0 0 24px rgba(16,185,129,0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --d-fast: 120ms;
  --d-base: 220ms;
  --d-slow: 480ms;
}

/* ---------- Page reset ---------- */
html, body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Live pulse (used for prod env + connection dot) ---------- */
@keyframes argus-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.argus-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--env-prod);
  animation: argus-pulse 2s ease-out infinite;
  display: inline-block;
}