:root {
  /* ==========================================================================
     COLOR TOKENS (from DESIGN.md)
     ========================================================================== */
  --color-background: #131314;
  --color-surface: #131314;
  --color-surface-dim: #131314;
  --color-surface-bright: #3a393a;
  --color-surface-container-lowest: #0e0e0f;
  --color-surface-container-low: #1c1b1c;
  --color-surface-container: #201f20;
  --color-surface-container-high: #2a2a2b;
  --color-surface-container-highest: #353436;

  /* Text & On-Colors */
  --color-on-surface: #e5e2e3;
  --color-on-surface-variant: #e1bfb5;
  --color-inverse-surface: #e5e2e3;
  --color-inverse-on-surface: #313031;
  --color-outline: #a88a81;
  --color-outline-variant: #59413a;

  /* Primary (Tactical Amber) */
  --color-primary: #ffb59d;
  --color-on-primary: #5d1800;
  --color-primary-container: #f26330;
  --color-on-primary-container: #521400;
  --color-inverse-primary: #ac3400;
  --color-primary-fixed: #ffdbd0;
  --color-primary-fixed-dim: #ffb59d;
  --color-on-primary-fixed: #390b00;
  --color-on-primary-fixed-variant: #842600;

  /* Secondary (Void Violet) */
  --color-secondary: #dcb8ff;
  --color-on-secondary: #480081;
  --color-secondary-container: #7701d0;
  --color-on-secondary-container: #dcb7ff;
  --color-secondary-fixed: #efdbff;
  --color-secondary-fixed-dim: #dcb8ff;
  --color-on-secondary-fixed: #2c0051;
  --color-on-secondary-fixed-variant: #6700b5;

  /* Tertiary */
  --color-tertiary: #96ccff;
  --color-on-tertiary: #003353;
  --color-tertiary-container: #2997e2;
  --color-on-tertiary-container: #002c48;
  --color-tertiary-fixed: #cee5ff;
  --color-tertiary-fixed-dim: #96ccff;
  --color-on-tertiary-fixed: #001d32;
  --color-on-tertiary-fixed-variant: #004a75;

  /* Error */
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;

  /* Tactical custom classes */
  --color-base: #0B0B0C;                     /* Absolute Shadow base background */
  --color-surface-muted: #141416;            /* Matte Charcoal background for panels */
  --color-surface-raised: #1D1D21;           /* Elevated panel overlay */
  --color-text-primary: #F3F4F6;
  --color-text-muted: #9CA3AF;
  --color-amber-hover: #C84315;
  --color-violet-hover: #6A0DAD;
  --color-panel-overlay: rgba(0, 0, 0, 0.85);

  --color-amber-accent: #E05624;             /* Button & Active Amber */
  --color-violet-accent: #8A2BE2;            /* Badges & Accents Violet */

  /* ==========================================================================
     BORDER RADIUS TOKENS
     ========================================================================== */
  --radius-sm: 0.125rem;                     /* 2px - buttons, inputs, tags */
  --radius-default: 0.25rem;                /* 4px - standard widgets */
  --radius-md: 0.375rem;                     /* 6px */
  --radius-lg: 0.5rem;                       /* 8px - content cards/panels */
  --radius-xl: 0.75rem;                      /* 12px - hero containers / wrapper */
  --radius-full: 9999px;

  /* ==========================================================================
     SPACING & GRID TOKENS
     ========================================================================== */
  --grid-base: 4px;
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --section-macro-desktop: 140px;
  --section-macro-mobile: 64px;
  --max-width: 1280px;

  /* ==========================================================================
     TYPOGRAPHY TOKENS
     ========================================================================== */
  --font-family-display: 'Bebas Neue', sans-serif;
  --font-family-body: 'Inter', sans-serif;
}