:root {
  /* Brand Colors - matching Legacy IoT catalog dark tech theme */
  --color-primary: #00C8FF;       /* Cyan accent */
  --color-primary-dark: #00A3D9;
  --color-primary-light: #33D4FF;
  --color-accent: #00E676;        /* Green accent from catalog */
  --color-accent-orange: #FF6D00; /* Orange accent */
  --color-accent-magenta: #E040FB;/* Magenta/purple accent */
  --color-accent-yellow: #FFD600; /* Yellow accent */
  --color-accent-red: #FF5252;    /* Red accent */

  /* Dark backgrounds - from catalog */
  --color-bg-dark: #0A0E1A;
  --color-bg-dark-2: #0D1225;
  --color-bg-dark-3: #111730;
  --color-bg-card: rgba(13, 18, 37, 0.8);
  --color-bg-card-hover: rgba(0, 200, 255, 0.05);

  /* Text */
  --color-text: rgba(255,255,255,0.85);
  --color-text-muted: rgba(255,255,255,0.55);
  --color-text-bright: #FFFFFF;

  /* Borders */
  --color-border: rgba(0, 200, 255, 0.15);
  --color-border-hover: rgba(0, 200, 255, 0.4);

  /* Gradients */
  --gradient-hero: linear-gradient(160deg, #040810 0%, #0A1628 40%, #0D1225 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-card-top: linear-gradient(180deg, rgba(0,200,255,0.08) 0%, transparent 100%);
  --gradient-glow: radial-gradient(ellipse at 50% 50%, rgba(0,200,255,0.12) 0%, transparent 60%);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing */
  --section-padding: 100px 0;
  --container-width: 1200px;
  --container-padding: 0 24px;

  /* Borders */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow-glow: 0 0 30px rgba(0,200,255,0.15);
  --shadow-glow-green: 0 0 30px rgba(0,230,118,0.15);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.3);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}