/* Design Tokens - AntiGravity UI/UX Pro Max Framework - DARK MODE */

:root {
  /* ===== COLOR PALETTE (60-30-10 Rule) - DARK MODE ===== */
  
  /* Background (60%) - True Black */
  --color-bg-primary: #0A0A0A;
  --color-bg-secondary: #141414;
  
  /* Surface (30%) - Deep Charcoal */
  --color-surface: #1A1A1A;
  --color-surface-elevated: #222222;
  
  /* Text Colors */
  --color-text-primary: #FFFFFF;      /* Pure White - Primary text */
  --color-text-secondary: #A3A3A3;    /* Grey - Secondary text */
  --color-text-tertiary: #737373;     /* Darker Grey - Tertiary text */
  
  /* Accent (10%) - Sky Blue */
  --color-accent-primary: #0EA5E9;    /* Sky Blue */
  --color-accent-hover: #38BDF8;      /* Lighter blue for hover */
  --color-accent-active: #0284C7;     /* Darker blue for active */
  
  /* Success/Security - Emerald */
  --color-success: #10B981;
  --color-success-light: #34D399;
  --color-success-dark: #059669;
  
  /* Semantic Colors */
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
  
  /* Glassmorphism - Dark Mode */
  --color-glass-bg: rgba(255, 255, 255, 0.05);
  --color-glass-border: rgba(255, 255, 255, 0.1);
  
  /* Border Colors */
  --color-border: #333333;
  --color-border-light: #404040;
  
  /* ===== SPACING SCALE (8px Grid System) ===== */
  --space-1: 8px;    /* 8px */
  --space-2: 16px;   /* 16px */
  --space-3: 24px;   /* 24px */
  --space-4: 32px;   /* 32px */
  --space-5: 40px;   /* 40px */
  --space-6: 48px;   /* 48px */
  --space-8: 64px;   /* 64px */
  --space-10: 80px;  /* 80px */
  --space-12: 96px;  /* 96px */
  --space-16: 128px; /* 128px */
  
  /* ===== TYPOGRAPHY SCALE (Max 5 sizes) ===== */
  --font-size-xs: 0.875rem;    /* 14px */
  --font-size-sm: 1rem;        /* 16px - Base */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.5rem;      /* 24px */
  --font-size-xl: 2rem;        /* 32px */
  --font-size-2xl: 2.5rem;     /* 40px */
  --font-size-3xl: 3rem;       /* 48px */
  --font-size-4xl: 3.5rem;     /* 56px */
  
  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-code: 'JetBrains Mono', 'Courier New', monospace;
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===== BORDER RADIUS (12-16px range) ===== */
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* ===== SHADOWS (Soft UI Evolution) ===== */
  
  /* Soft Shadows - Dark Mode */
  --shadow-soft-sm: 
    4px 4px 12px rgba(0, 0, 0, 0.5),
    -4px -4px 12px rgba(255, 255, 255, 0.02);
  
  --shadow-soft-md: 
    8px 8px 20px rgba(0, 0, 0, 0.6),
    -8px -8px 20px rgba(255, 255, 255, 0.03);
  
  --shadow-soft-lg: 
    12px 12px 30px rgba(0, 0, 0, 0.7),
    -12px -12px 30px rgba(255, 255, 255, 0.04);
  
  /* Inset Shadows - Dark Mode */
  --shadow-inset-sm: 
    inset 2px 2px 6px rgba(0, 0, 0, 0.5),
    inset -2px -2px 6px rgba(255, 255, 255, 0.02);
  
  --shadow-inset-md: 
    inset 4px 4px 10px rgba(0, 0, 0, 0.6),
    inset -4px -4px 10px rgba(255, 255, 255, 0.03);
  
  /* Elevation Shadows (for hover states) - Dark Mode */
  --shadow-elevated: 
    0 12px 24px -8px rgba(0, 0, 0, 0.8),
    0 4px 8px -4px rgba(14, 165, 233, 0.2);
  
  --shadow-elevated-lg: 
    0 20px 40px -12px rgba(0, 0, 0, 0.9),
    0 8px 16px -6px rgba(14, 165, 233, 0.3);
  
  /* Glassmorphism Shadow - Dark Mode */
  --shadow-glass: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  
  /* Glow Effects */
  --glow-blue: 0 0 20px rgba(14, 165, 233, 0.5);
  --glow-emerald: 0 0 20px rgba(16, 185, 129, 0.5);
  --glow-code: 0 0 30px rgba(59, 130, 246, 0.4);
  
  /* ===== TRANSITIONS (150-300ms, GPU-accelerated) ===== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== Z-INDEX SCALE ===== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  
  /* ===== LAYOUT ===== */
  --container-max-width: 1280px;
  --container-padding: var(--space-4);
  
  /* ===== GLASSMORPHISM ===== */
  --glass-blur: 10px;
  --glass-border-width: 1px;
  
  /* ===== TOUCH TARGETS (Mobile) ===== */
  --touch-target-min: 44px;
  
  /* ===== BREAKPOINTS (for reference in media queries) ===== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* Dark mode support (optional future enhancement) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Keep light theme for now - can be enhanced later */
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-text-primary: #000000;
    --color-bg-primary: #FFFFFF;
  }
}