:root {
  /* Primary Colors */
  --color-primary: #1CB0F6;
  --color-primary-dark: #0899DB;
  --color-primary-light: #7DD3FC;

  /* Secondary Colors */
  --color-green: #58CC02;
  --color-green-dark: #46A302;
  --color-green-light: #89E219;

  /* Accent Colors */
  --color-orange: #FF9600;
  --color-orange-dark: #E08600;
  --color-purple: #CE82FF;
  --color-purple-dark: #B55EF0;
  --color-pink: #FF4B9D;
  --color-pink-dark: #E03A85;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-gray-50: #F7F7F7;
  --color-gray-100: #EFEFEF;
  --color-gray-200: #E0E0E0;
  --color-gray-300: #C4C4C4;
  --color-gray-400: #9E9E9E;
  --color-gray-500: #777777;
  --color-gray-600: #555555;
  --color-gray-700: #3A3A3A;
  --color-gray-800: #232323;
  --color-gray-900: #131313;
  --color-black: #0A0A0A;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #1CB0F6 0%, #58CC02 50%, #CE82FF 100%);
  --gradient-cta: linear-gradient(135deg, #FF9600 0%, #FF4B9D 100%);
  --gradient-cta-hover: linear-gradient(135deg, #E08600 0%, #E03A85 100%);
  --gradient-card: linear-gradient(180deg, rgba(28, 176, 246, 0.05) 0%, rgba(206, 130, 255, 0.05) 100%);

  /* Spacing (8px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-index scale */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* Container */
  --container-max: 1200px;
  --container-padding: var(--space-5);

  /* Header */
  --header-height: 72px;
}