/**
 * CreativeCode Visual DNA — CSS Tokens (Mapped from /dna/tokens.json)
 * Restrained High-Contrast Red, Black & White Technical UI System
 */
:root {
  /* Core High-Contrast Palette */
  --void-black: #000000;
  --surface-slate: #0a0a0a;
  --surface-elevated: #121212;
  --surface-recessed: #050505;
  --border-wire: #262626;
  --border-subtle: #1a1a1a;
  --border-active: #ff2424;
  
  /* Primary Typography & Telemetry */
  --mono-white: #ffffff;
  --mono-dim: #a3a3a3;
  --muted-telemetry: #666666;

  /* Vivid Signal Red Accents */
  --signal-red: #ff2424;
  --signal-red-bright: #ff3b3b;
  --signal-red-glow: rgba(255, 36, 36, 0.4);
  --signal-red-dim: rgba(255, 36, 36, 0.12);
  --signal-red-border: rgba(255, 36, 36, 0.5);

  /* Semantic Aliases mapped cleanly to Red / White system */
  --phosphor-green: #ffffff;
  --phosphor-amber: #ff2424;
  --phosphor-cyan: #d4d4d4;

  /* Typography */
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-display: 'VT323', monospace;
  --font-code: 'JetBrains Mono', monospace;
  
  --tracking-tight: -0.04em;
  --tracking-normal: 0.02em;
  --tracking-wide: 0.12em;
  --tracking-ultra: 0.22em;

  /* Geometry & Layout Tokens */
  --border-radius: 4px;
  --border-width: 1px;
  --corner-bracket-size: 4px;
  --grid-unit: 8px;
  --layout-max-width: 1440px;
  --layout-pad-x: 28px;

  /* Textures & CRT Bloom */
  --scanline-pitch: 3px;
  --scanline-opacity: 0.12;
  --chroma-offset: 1.5px;
  --crt-bloom: 6px;
  --glow-green: rgba(255, 255, 255, 0.2);
  --glow-red: rgba(255, 36, 36, 0.35);
  --glow-cyan: rgba(255, 255, 255, 0.15);
  --glow-amber: rgba(255, 36, 36, 0.35);

  /* Functional UI Design System Button Tokens */
  --btn-height-sm: 28px;
  --btn-height-md: 34px;
  --btn-height-lg: 42px;
  --btn-radius: 4px;
  --btn-pad-sm: 0 10px;
  --btn-pad-md: 0 14px;
  --btn-pad-lg: 0 18px;
  --btn-bg-surface: #0a0a0a;
  --btn-bg-hover: #141414;
  --btn-bg-active: #000000;
  --btn-border-default: #262626;
  --btn-border-hover: #ff2424;
}

@media (max-width: 768px) {
  :root {
    --layout-pad-x: 14px;
  }
}

@media (max-width: 480px) {
  :root {
    --layout-pad-x: 10px;
  }
}