:root {
  /* Primary palette — dark, clean, technical */
  --color-primary: #1a1a1a;      /* Deep black — like matte metal */
  --color-secondary: #333333;    /* Dark gray — like device casing */
  --color-accent: #00bfa5;       /* Teal accent — like a connection indicator */
  --color-background: #f8f9fa;   /* Very light gray — like a standby screen */
  --color-text: #212529;         /* Nearly black text — optimal readability */
  --color-light: #e9ecef;        /* Light background for cards and panels */
  --color-dark: #121212;         /* Ultra-dark for high-contrast elements */

  /* Grays — precise, neutral, no warmth */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;

  /* Tech accents — data-driven highlights */
  --color-performance: #00bfa5;  /* Teal — for performance metrics */
  --color-battery: #ff6b6b;      /* Red — for battery life */
  --color-temperature: #ffcc00;  /* Yellow — for heat readings */
  --color-eco: #4caf50;          /* Green — for energy efficiency */

  /* Fonts — crisp, modern, functional */
  --font-primary: 'Inter', sans-serif;
  --font-heading: 'Roboto Condensed', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Layout */
  --max-width: 1280px;
  --sidebar-width: 280px;
  --border-radius: 8px;          /* Sharp edges — like tech hardware */
  --spacing: 1.5rem;

  /* Shadows — subtle, as if cast by glass */
  --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 16px 32px 0 rgba(0, 0, 0, 0.2);

  /* Transitions — fast, responsive */
  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
}