/* Variables */
:root {
    /* Colors - Light Theme */
    --color-primary: #0071e3;
    --color-primary-light: #47a1ff;
    --color-primary-dark: #0051a2;
    
    --color-secondary: #86868b;
    --color-secondary-light: #a1a1a6;
    --color-secondary-dark: #1d1d1f;
    
    --color-accent: #ffd60a;
    --color-accent-light: #ffe566;
    --color-accent-dark: #e6b800;
    
    --color-success: #28cd41;
    --color-warning: #ff9f0a;
    --color-error: #ff453a;
    
    --color-gray-100: #f5f5f7;
    --color-gray-200: #e8e8ed;
    --color-gray-300: #d2d2d7;
    --color-gray-400: #a1a1a6;
    --color-gray-500: #86868b;
    --color-gray-600: #6e6e73;
    --color-gray-700: #4d4d53;
    --color-gray-800: #3a3a3c;
    --color-gray-900: #1d1d1f;
    
    --color-background: #ffffff;
    --color-text: #1d1d1f;
    --color-text-light: #86868b;
    --color-border: #d2d2d7;
    --color-card: #ffffff;
    --color-overlay: rgba(255, 255, 255, 0.9);
    
    /* Typography */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    --font-size-xs: 1.2rem;   /* 12px */
    --font-size-sm: 1.4rem;   /* 14px */
    --font-size-md: 1.6rem;   /* 16px */
    --font-size-lg: 1.8rem;   /* 18px */
    --font-size-xl: 2rem;     /* 20px */
    --font-size-2xl: 2.4rem;  /* 24px */
    --font-size-3xl: 3rem;    /* 30px */
    --font-size-4xl: 3.6rem;  /* 36px */
    --font-size-5xl: 4.8rem;  /* 48px */
    --font-size-6xl: 6.4rem;  /* 64px */
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    
    /* Spacing - based on 8px grid */
    --space-1: 0.8rem;    /* 8px */
    --space-2: 1.6rem;    /* 16px */
    --space-3: 2.4rem;    /* 24px */
    --space-4: 3.2rem;    /* 32px */
    --space-5: 4rem;      /* 40px */
    --space-6: 4.8rem;    /* 48px */
    --space-7: 5.6rem;    /* 56px */
    --space-8: 6.4rem;    /* 64px */
    --space-9: 7.2rem;    /* 72px */
    --space-10: 8rem;     /* 80px */
    
    /* Layout */
    --container-width: 120rem;  /* 1200px */
    --container-padding: var(--space-3);
    
    /* Borders & Shadows */
    --border-radius-sm: 0.4rem;    /* 4px */
    --border-radius-md: 0.8rem;    /* 8px */
    --border-radius-lg: 1.6rem;    /* 16px */
    --border-radius-xl: 2.4rem;    /* 24px */
    --border-radius-full: 999rem;  /* rounded full */
    
    --shadow-sm: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
    --shadow-md: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 1rem 1.5rem -0.3rem rgba(0, 0, 0, 0.1);
    
    /* Animation */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index layers */
    --z-negative: -1;
    --z-overlay: 10;
    --z-dropdown: 20;
    --z-sticky: 30;
    --z-fixed: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
    --z-above-all: 9999;
  }
  
  /* Dark Theme Variables */
  [data-theme="dark"] {
    --color-primary: #0a84ff;
    --color-primary-light: #5eb6ff;
    --color-primary-dark: #0060c1;
    
    --color-background: #1d1d1f;
    --color-text: #f5f5f7;
    --color-text-light: #a1a1a6;
    --color-border: #4d4d53;
    --color-card: #2c2c2e;
    --color-overlay: rgba(0, 0, 0, 0.8);
  }