:root {
  /* Canvas & Panel Colors */
  --bg: #F4F7F9;
  --panel: #FFFFFF;
  --panel-alt: #EBF1F5;
  --ink: #0B1B28;
  --mute: #4E6173;
  --line: #D0DBE5;
  --line-light: #E2EAF0;
  --band: #0A1622;
  --band-card: #112233;

  /* 4 Quadrant Chromatic Signature */
  --orange: #ff8300; /* Networking (Aruba CX, FortiSwitch, Cisco) */
  --green: #01a982;  /* Servers & Storage (HPE ProLiant, Dell, Lenovo, MSA) */
  --red: #ee2e24;    /* Cybersecurity (FortiGate Firewalls, Security Fabric) */
  --blue: #028bc1;   /* Workstations & Power (Lenovo, Dell, APC UPS, Microsoft) */

  /* Typography: Montserrat Variants Exclusively */
  --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --d: var(--font-family);
  --b: var(--font-family);

  /* Tactile Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Crisp Architectural Shadows */
  --shadow-xs: 0 1px 2px rgba(11, 27, 40, 0.04);
  --shadow-sm: 0 2px 6px rgba(11, 27, 40, 0.05), 0 1px 2px rgba(11, 27, 40, 0.03);
  --shadow-md: 0 6px 18px rgba(11, 27, 40, 0.06), 0 2px 6px rgba(11, 27, 40, 0.03);
  --shadow-lg: 0 16px 36px rgba(11, 27, 40, 0.09), 0 4px 12px rgba(11, 27, 40, 0.04);

  /* Apple & Emil Kowalski Responsive Physics Easing */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07121B;
    --panel: #0D1D2B;
    --panel-alt: #122637;
    --ink: #ECF2F7;
    --mute: #9BB0C1;
    --line: #1F364B;
    --line-light: #162838;
    --band: #050E16;
    --band-card: #0A1A28;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --bg: #07121B;
  --panel: #0D1D2B;
  --panel-alt: #122637;
  --ink: #ECF2F7;
  --mute: #9BB0C1;
  --line: #1F364B;
  --line-light: #162838;
  --band: #050E16;
  --band-card: #0A1A28;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.4);
}