/* ============================================================
   COMMAND INTELLIGENCE - CSS VARIABLES & DESIGN TOKENS
   Based on DESIGN.md - Material Design 3 Dark Theme
   ============================================================ */

:root {
  /* ---- Surface Colors ---- */
  --bg-primary:                 #141313;
  --bg-surface:                 #141313;
  --bg-surface-dim:             #141313;
  --bg-surface-bright:          #3a3939;
  --bg-surface-container:       #201f1f;
  --bg-surface-container-low:   #1c1b1b;
  --bg-surface-container-high:  #2a2a2a;
  --bg-surface-container-highest: #353434;
  --bg-surface-container-lowest: #0e0e0e;
  --bg-surface-variant:         #353434;

  /* ---- Text / On-Surface Colors ---- */
  --text-primary:               #e5e2e1;
  --text-on-surface:            #e5e2e1;
  --text-on-surface-variant:    #c4c7c8;
  --text-muted:                 #8e9192;
  --text-on-primary:            #2f3131;
  --text-inverse-surface:       #e5e2e1;
  --text-inverse-on-surface:    #313030;

  /* ---- Accent / Brand Colors ---- */
  --color-accent-red:           #b70013;
  --color-accent-red-light:     #ffb4ac;
  --color-accent-green:         #4caf7d;
  --color-accent-blue:          #5b8dee;
  --color-accent-yellow:        #f5c518;

  /* ---- Border Colors ---- */
  --color-border:               #2d2d2d;
  --color-border-variant:       #444748;
  --color-outline:              #8e9192;

  /* ---- Component Shortcuts ---- */
  --sidebar-width-collapsed:    80px;
  --sidebar-width-expanded:     256px;
  --topbar-height:              48px;
  --footer-height:              32px;

  /* ---- Typography ---- */
  --font-ui:       'Inter', system-ui, sans-serif;
  --font-data:     'JetBrains Mono', 'Courier New', monospace;

  /* ---- Spacing Scale (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* ---- Border Radius ---- */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  6px;
  --radius-xl:  8px;

  /* ---- Transitions ---- */
  --transition-fast:   150ms ease-in-out;
  --transition-base:   200ms ease-in-out;
  --transition-slow:   300ms ease-in-out;

  /* ---- Z-Index ---- */
  --z-dropdown:        100;
  --z-sticky:          200;
  --z-fixed:           300;
  --z-modal-backdrop:  400;
  --z-modal:           500;
  --z-popover:         600;
  --z-tooltip:         700;
}