:root {
  /* Nightwire — hacker-terminal void with a single dominant neon (cyan).
     Ported from the "Nightwire" concept artifact: near-monochrome black
     carries structure, cyan is the one interactive/data color (borders,
     links, focus, fills), and magenta/acid/amber are reserved as pure
     semantic accents (glitch decoration, success, in-progress) rather than
     spread across the UI as decoration. Same "one accent" discipline
     Nightshift used, with the accent swapped from citron to cyan. */
  --color-primary: #00e5ff;
  --color-primary-ink: #03151a;
  --color-primary-soft: rgba(0, 229, 255, 0.10);
  --color-primary-strong: #6ff3ff;
  --color-primary-deep: #0a8fa3;

  /* Interactive accent — links, focus rings, thin strokes (same hue as
     primary on purpose: Nightwire runs one neon, not two competing ones) */
  --color-accent: #00e5ff;
  --color-accent-deep: #6ff3ff;
  --color-accent-soft: rgba(0, 229, 255, 0.12);

  /* Primary action is a filled button — see .btn-primary in base.css */
  --color-cta: #00e5ff;
  --color-cta-ink: #03151a;
  --color-cta-hover: #6ff3ff;

  /* Brand band tokens — kept only so existing .site-header / .page-banner /
     .auth-shell rules keep working; mirrors the page/ink tokens rather than
     a separate hue, same as Nightshift. */
  --hero-bg: #050507;
  --hero-bg-deep: #050507;
  --hero-strong: #0b0d12;
  --hero-ink: #e7eaf2;
  --hero-ink-dim: rgba(231, 234, 242, 0.72);
  --hero-eyebrow: #00e5ff;
  --hero-line: rgba(231, 234, 242, 0.14);
  --hero-cta-bg: #00e5ff;
  --hero-cta-ink: #03151a;

  /* Semantic states get their own hues, independent of the decorative
     accent above — acid for success, amber for in-progress/stalled, red
     for critical. These pair with the (pre-existing, hardcoded) tinted
     pill backgrounds in components.css. */
  --color-complete: #c8ff4d;
  --color-in-progress: #ffb020;
  --color-not-started: #565b6b;
  --color-critical: #ff4757;

  --color-page: #050507;
  --color-surface: #0b0d12;
  --color-surface-raised: #12141b;
  --color-border: rgba(231, 234, 242, 0.14);

  --color-ink: #e7eaf2;
  --color-ink-secondary: #b7bbc9;
  --color-ink-muted: #7b8194;

  /* Neutral + accent ramps — prefer a ramp step over an ad-hoc color-mix() */
  --neutral-100: #eef0f5; --neutral-200: #d7dbe3; --neutral-300: #b7bbc9;
  --neutral-400: #9298a8; --neutral-500: #7b8194; --neutral-600: #5b6172;
  --neutral-700: #40465a; --neutral-800: #22242f; --neutral-900: #12141b;

  --accent-100: #e3fbff; --accent-200: #b3f3ff; --accent-300: #7ce9ff;
  --accent-400: #3ddfff; --accent-500: #00e5ff; --accent-600: #00b8cc;
  --accent-700: #068a99; --accent-800: #0a5c66; --accent-900: #0a2f33;

  /* Decorative-only neons — never used for structure or semantic state,
     just the glitch headline and a couple of small accent touches. */
  --color-glitch: #ff2e88;
  --color-glitch-soft: rgba(255, 46, 136, 0.18);

  /* On a dark ground, elevation is a hairline edge plus ambient darkness. */
  --shadow-card: 0 0 0 1px #22242f;
  --shadow-elevated: 0 0 0 1px #40465a, 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-hover: 0 0 0 1px #7b8194, 0 16px 40px rgba(0, 0, 0, 0.65);

  /* Outer glow — uses filter: drop-shadow() at the call site, not
     box-shadow, so it survives clip-path chamfering (box-shadow gets cut
     off at clipped corners; drop-shadow follows the rendered shape). */
  --glow-primary-sm: drop-shadow(0 0 3px rgba(0, 229, 255, 0.5)) drop-shadow(0 0 10px rgba(0, 229, 255, 0.26));
  --glow-primary-lg: drop-shadow(0 0 4px rgba(0, 229, 255, 0.55)) drop-shadow(0 0 22px rgba(0, 229, 255, 0.3));

  --radius-card: 10px;
  --radius-control: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Chamfered-corner clip paths — replace border-radius on cards/buttons/
     inputs; pills, badges, and circular elements (progress rings) stay
     rounded on purpose, chamfering those would break their shape. */
  --chamfer: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --chamfer-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);

  --font-heading: 'Orbitron', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-mono: 'Share Tech Mono', ui-monospace, 'SF Mono', monospace;
  --font-display: var(--font-heading);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --max-width: 1180px;

  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --reveal-distance: 24px;
}