/* === Color & Design System === */
:root {
  --bg-deep: #05060a;
  --accent: #7afcff;
  --accent-2: #ff7aa2;
  --glass: rgba(5, 6, 10, 0.25);
  --glass-border: rgba(255, 255, 255, 0.1);
  --muted: rgba(255, 255, 255, 0.7);
  --text-primary: #e6eef8;
  --text-secondary: #fff;
  
  /* Service Gradients */
  --grad-portainer: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
  --grad-torrent: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
  --grad-jellyfin: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
  --grad-requests: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
  --grad-radarr: linear-gradient(135deg, #ff512f 0%, #dd2476 100%);
  --grad-sonarr: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  --grad-instagram: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  
  /* Typography */
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Orbitron', sans-serif;
  --font-subtitle: 'Outfit', sans-serif;
  
  /* Spacing & Layout */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 50px;
  
  /* Border Radius */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 24px;
  
  /* Z-Index Stack */
  --z-canvas: -1;
  --z-grain: 1;
  --z-content: 10;
  --z-chat: 1000;
  
  /* Transitions */
  --easing-smooth: cubic-bezier(0.2, 1, 0.3, 1);
  --easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}