:root {
  /* =========================================================
     TACTICAL DESIGN SYSTEM — Surface Hierarchy
     ========================================================= */
  --t-surface: #0A0B09;
  --t-surface-low: #12140f;
  --t-surface-container: #3A4133;
  --t-surface-high: #282a2d;
  --t-surface-highest: #333538;
  --t-surface-bright: #3f4438;
  --t-surface-lowest: #060704;
  --t-surface-variant: #1e2023;

  /* =========================================================
     Accent & Text
     ========================================================= */
  --t-primary: #4B5342;
  --t-primary-bright: #4B5342;
  --t-primary-rgb: 75, 83, 66;
  --t-on-primary: #E1E3DC;
  --t-primary-container: #3A4133;
  --t-on-primary-cont: #E1E3DC;
  --t-secondary: #BFC4B7;
  --t-secondary-container: #2C3127;
  --t-on-secondary: #E1E3DC;
  --t-on-surface: #E1E3DC;
  --t-on-surface-muted: #B9BCB1;
  --t-on-surface-variant: #B9BCB1;
  --t-highlight: #F2F4F0;
  --t-on-background: #E1E3DC;
  --t-outline: #2C3127;
  --t-outline-variant: #2C3127;

  /* =========================================================
     State Colors
     ========================================================= */
  --t-error: #ffb4ab;
  --t-error-container: #93000a;
  --t-success: #10b981;
  --t-success-rgb: 16, 185, 129;
  --t-warning: #f59e0b;
  --t-warning-rgb: 245, 158, 11;

  /* =========================================================
     Semantic aliases (legacy compatibility)
     ========================================================= */
  --primary-color: var(--t-primary);
  --primary-hover: var(--t-primary-container);
  --bg-body: var(--t-surface);
  --bg-card: var(--t-surface-container);
  --bg-sidebar: var(--t-surface-low);
  --bg-light: var(--t-surface-high);
  --text-main: var(--t-on-surface);
  --text-muted: var(--t-on-surface-muted);
  --text-light: var(--t-on-surface);
  --border-light: rgba(44, 49, 39, 0.3);
  --border-hover: rgba(44, 49, 39, 0.6);
  --border-focused: var(--t-primary);
  --secondary-color: var(--t-primary);
  --accent-color: var(--t-primary);
  --brand-green: var(--t-primary);
  --surface-color: var(--t-surface-container);
  --surface-hover: var(--t-surface-high);
  --border-color: rgba(62, 73, 73, 0.3);
  --danger-color: #c0392b;
  --danger-hover: #a03025;
  --success-bg: rgba(var(--t-success-rgb), 0.1);
  --success-text: var(--t-success);
  --success-border: var(--t-success);
  --warning-bg: rgba(var(--t-warning-rgb), 0.1);
  --warning-text: var(--t-warning);
  --warning-border: var(--t-warning);
  --info-bg: rgba(var(--t-primary-rgb), 0.08);
  --info-text: var(--t-primary);
  --info-border: var(--t-primary);
  --danger-bg: rgba(255, 180, 171, 0.1);
  --danger-text: var(--t-error);
  --danger-border: var(--t-error-container);
  --neutral-bg: var(--t-surface-high);
  --neutral-text: var(--t-on-surface-muted);
  --font-headline: var(--font-family-heading);
  --t-border: var(--t-outline-variant);

  /* === Legacy aliases === */
  --text-color: var(--t-on-surface);
  --text-secondary: var(--t-on-surface-muted);
  --gray-50: var(--t-surface-variant);
  --gray-100: var(--t-surface-high);
  --gray-300: var(--t-outline);
  --gray-400: var(--t-on-surface-muted);
  --success-color: var(--t-success);

  /* =========================================================
     Typography
     ========================================================= */
  --font-family-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-family-body: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;

  --font-size-xs: 0.6875rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;

  /* =========================================================
     Elevation Shadows
     ========================================================= */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6);
  --shadow: var(--shadow-md);
  --shadow-hover: var(--shadow-lg);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.4);

  /* =========================================================
     Borders
     ========================================================= */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --border-radius: var(--radius-sm);

  /* =========================================================
     Layout
     ========================================================= */
  --container-width: 1680px;
  --navbar-height: 72px;

  /* =========================================================
     Transitions
     ========================================================= */
  --transition: all 0.2s ease-in-out;
  --transition-fast: all 0.15s ease;
  --transition-spring: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* =========================================================
     Icon sizes
     ========================================================= */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* =========================================================
     Breakpoints (documentation tokens)
     ========================================================= */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* =========================================================
     Spacing Scale (4px base)
     ========================================================= */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* =========================================================
     Radius Scale (additions — sm/md/lg/xl already defined above)
     ========================================================= */
  --radius-xs: 2px;
  --radius-pill: 999px;

  /* =========================================================
     Fluid Type Ramp
     ========================================================= */
  --fs-h1: clamp(2rem, 4vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
  --fs-body: 0.95rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.75rem;

  /* =========================================================
     Focus Ring
     ========================================================= */
  --focus-ring: 0 0 0 3px rgba(var(--t-primary-rgb), 0.45);
}

/* ==========================================================================
   Light Mode — Apex Layer (data-theme="light")
   ========================================================================== */
:root[data-theme="light"] {
  --t-surface: #F2F4F0;
  --t-surface-low: #E8EAE6;
  --t-surface-container: #FFFFFF;
  --t-surface-high: #D8D9D4;
  --t-surface-highest: #CED0CB;
  --t-surface-bright: #FFFFFF;
  --t-surface-lowest: #F7F8F5;
  --t-surface-variant: #DFE1DA;

  --t-primary: #4B5342;
  --t-primary-bright: #4B5342;
  --t-on-primary: #E1E3DC;
  --t-primary-container: #3A4133;
  --t-on-primary-cont: #E1E3DC;
  --t-on-surface: #1B1D19;
  --t-on-surface-muted: #2e3134;
  --t-on-surface-variant: #1B1D19;
  --t-outline: #5a5d61;
  --t-outline-variant: #9a9da1;

  --t-error: #B00020;
  --t-error-container: #FFDAD6;
  --t-success: #059669;
  --t-warning: #D97706;

  --primary-color: var(--t-surface-low);
  --primary-hover: var(--t-surface-high);
  --bg-body: var(--t-surface);
  --bg-card: var(--t-surface-container);
  --bg-sidebar: var(--t-surface-low);
  --bg-light: var(--t-surface-low);
  --text-main: var(--t-on-surface);
  --text-muted: var(--t-on-surface-muted);
  --text-light: var(--t-on-surface);
  --border-light: rgba(80, 84, 88, 0.6);
  --border-hover: rgba(80, 84, 88, 0.85);
  --border-focused: var(--t-primary);
  --secondary-color: var(--t-primary);
  --accent-color: var(--t-primary);
  --brand-green: var(--t-primary);
  --surface-color: var(--t-surface-container);
  --surface-hover: var(--t-surface-high);
  --border-color: rgba(100, 110, 120, 0.7);
  --danger-color: #B00020;
  --danger-hover: #8C001A;
  --success-bg: rgba(5, 150, 105, 0.1);
  --success-text: #059669;
  --success-border: #059669;
  --warning-bg: rgba(217, 119, 6, 0.1);
  --warning-text: #D97706;
  --warning-border: #D97706;
  --info-bg: rgba(0, 120, 160, 0.1);
  --info-text: #005f8a;
  --info-border: #005f8a;
  --danger-bg: rgba(176, 0, 32, 0.08);
  --danger-text: #B00020;
  --danger-border: #B00020;
  --neutral-bg: var(--t-surface-high);
  --neutral-text: var(--t-on-surface-muted);

  /* === Legacy aliases === */
  --text-color: var(--t-on-surface);
  --text-secondary: var(--t-on-surface-muted);
  --gray-50: var(--t-surface-variant);
  --gray-100: var(--t-surface-high);
  --gray-300: var(--t-outline);
  --gray-400: var(--t-on-surface-muted);
  --success-color: var(--t-success);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.18);
  --shadow: var(--shadow-md);
  --shadow-hover: var(--shadow-lg);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Base body styles */
body {
  font-family: var(--font-family-body);
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection */
::selection {
  background: var(--brand-green);
  color: white;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}