/**
 * BizDMP Design System - Theme Variables
 * Centralized design tokens for consistent styling across the application
 *
 * Usage: var(--variable-name)
 * Example: color: var(--color-primary);
 */

:root {
  /* ============================================
     🎨 CONSOLIDATED DESIGN SYSTEM (v2.0)
     Exactly 45 core variables for complete design system
     ============================================ */

  /* ------------------------------------------
     CORE COLORS (6 semantic colors)
     ------------------------------------------ */
  --color-primary: #667eea;
  --color-primary-dark: #764ba2;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ------------------------------------------
     OPACITY LEVELS (8 levels)
     Use with rgba for all color variations
     Example: rgba(255, 255, 255, var(--opacity-light))
     ------------------------------------------ */
  --opacity-subtle: 0.05;
  --opacity-light: 0.1;
  --opacity-medium: 0.2;
  --opacity-strong: 0.4;
  --opacity-heavy: 0.6;
  --opacity-solid: 0.8;
  --opacity-near-full: 0.9;
  --opacity-full: 1;

  /* ------------------------------------------
     TYPOGRAPHY SIZES (8 levels)
     ------------------------------------------ */
  --font-xs: 0.75rem;       /* 12px */
  --font-sm: 0.875rem;      /* 14px */
  --font-base: 1rem;        /* 16px */
  --font-lg: 1.125rem;       /* 18px */
  --font-xl: 1.25rem;       /* 20px */
  --font-2xl: 1.5rem;       /* 24px */
  --font-3xl: 1.875rem;      /* 30px */
  --font-4xl: 2.25rem;      /* 36px */

  /* ------------------------------------------
     TYPOGRAPHY WEIGHTS (4 levels)
     ------------------------------------------ */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ------------------------------------------
     FONT FAMILIES
     ------------------------------------------ */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Monaco', 'Courier New', Consolas, monospace;

  /* ------------------------------------------
     SPACING (8 levels)
     T-shirt sizing for consistency
     ------------------------------------------ */
  --space-xs: 0.25rem;      /* 4px */
  --space-sm: 0.5rem;       /* 8px */
  --space-md: 1rem;         /* 16px */
  --space-lg: 1.5rem;       /* 24px */
  --space-xl: 2rem;         /* 32px */
  --space-2xl: 2.5rem;      /* 40px */
  --space-3xl: 3rem;        /* 48px */
  --space-4xl: 4rem;        /* 64px */

  /* ------------------------------------------
     BORDER RADIUS (7 levels)
     ------------------------------------------ */
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.625rem;    /* 10px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-3xl: 1.5rem;       /* 24px */
  --radius-full: 50%;

  /* ------------------------------------------
     GRADIENTS (4 essential)
     ------------------------------------------ */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --gradient-success: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  --gradient-educational: linear-gradient(135deg, #10b981 0%, #34d399 100%);

  /* ------------------------------------------
     EXTENDED DESIGN TOKENS
     Derived from core colors for specific UI needs
     ------------------------------------------ */

  /* Plain colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;

  /* Primary shades (opacity-based from --color-primary: #667eea) */
  --color-primary-light: rgba(102, 126, 234, 0.2);
  --color-primary-300: rgba(102, 126, 234, 0.3);
  --color-primary-400: rgba(102, 126, 234, 0.4);

  /* Error shades (from --color-error: #ef4444) */
  --color-error-light: rgba(239, 68, 68, 0.2);
  --color-error-50: rgba(239, 68, 68, 0.05);
  --color-error-400: rgba(239, 68, 68, 0.4);
  --color-error-red-30: rgba(239, 68, 68, 0.3);

  /* Success shades (from --color-success: #10b981) */
  --color-success-light: rgba(16, 185, 129, 0.2);
  --color-success-alt: #34d399;
  --color-success-10: rgba(16, 185, 129, 0.1);
  --color-success-50: rgba(16, 185, 129, 0.05);
  --color-success-95: rgba(16, 185, 129, 0.95);
  --color-success-300: rgba(16, 185, 129, 0.3);
  --color-success-400: rgba(16, 185, 129, 0.4);

  /* Warning shades (from --color-warning: #f59e0b) */
  --color-warning-light: rgba(245, 158, 11, 0.2);
  --color-warning-alt: #fbbf24;
  --color-warning-30: rgba(245, 158, 11, 0.3);
  --color-warning-90: rgba(245, 158, 11, 0.9);
  --color-warning-600: #d97706;

  /* Info shades (from --color-info: #3b82f6) */
  --color-info-20: rgba(59, 130, 246, 0.2);
  --color-info-30: rgba(59, 130, 246, 0.3);
  --color-info-40: rgba(59, 130, 246, 0.4);
  --color-info-50: rgba(59, 130, 246, 0.5);
  --color-info-80: rgba(59, 130, 246, 0.8);
  --color-info-95: rgba(59, 130, 246, 0.95);
  --color-info-cyan: #06b6d4;

  /* Rose/Pink family */
  --color-rose-20: rgba(244, 63, 94, 0.2);
  --color-rose-40: rgba(244, 63, 94, 0.4);
  --color-rose-50: rgba(244, 63, 94, 0.05);
  --color-rose-80: rgba(244, 63, 94, 0.8);
  --color-rose-500: #f43f5e;

  /* Cyan */
  --color-cyan-60: rgba(6, 182, 212, 0.6);

  /* Extended typography */
  --font-5xl: 3rem;
  --font-6xl: 3.75rem;
  --font-ultra: 800;

  /* Line height */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* Transitions */
  --transition-base: all 0.2s ease;

  /* Extended gradients */
  --gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-motivational: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --gradient-inspirational: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  --gradient-primary-alt: linear-gradient(135deg, #667eea 0%, #6366f1 100%);
  --gradient-ocean: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
  --gradient-sunset: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  --gradient-rose: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
  --gradient-pink: linear-gradient(135deg, #ec4899 0%, #d946ef 100%);
  --gradient-pastel: linear-gradient(135deg, #a78bfa 0%, #f0abfc 100%);

}

/* ============================================
   THEME VARIANTS
   ============================================ */

/* Dark Theme (Default) */
[data-theme="dark"],
:root {
  /* Text colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.8);
  --color-text-tertiary: rgba(255, 255, 255, 0.6);
  --color-text-inverse: #1a202c;

  /* Background hierarchy */
  --color-bg-primary: #0f0f23;
  --color-bg-secondary: #16213e;
  --color-bg-tertiary: #1a1a2e;
  --color-bg-elevated: #1a202c;

  /* Glassmorphic overlays (semi-transparent backgrounds) */
  --color-glass-subtle: rgba(255, 255, 255, 0.05);
  --color-glass-light: rgba(255, 255, 255, 0.1);
  --color-glass-medium: rgba(255, 255, 255, 0.2);

  /* Dark overlays */
  --color-overlay-subtle: rgba(0, 0, 0, 0.2);
  --color-overlay-medium: rgba(0, 0, 0, 0.4);
  --color-overlay-strong: rgba(0, 0, 0, 0.6);

  /* Borders */
  --color-border-subtle: rgba(255, 255, 255, 0.05);
  --color-border-light: rgba(255, 255, 255, 0.1);
  --color-border-medium: rgba(255, 255, 255, 0.2);
  --color-border-strong: rgba(255, 255, 255, 0.4);

  /* Box Shadows - Elevation (depth/lift effect) */
  --shadow-sm: 0 var(--space-xs) var(--space-md) rgba(0, 0, 0, 0.2);
  --shadow-md: 0 var(--space-sm) var(--space-lg) rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 var(--space-sm) var(--space-xl) rgba(0, 0, 0, var(--opacity-strong));
  --shadow-xl: 0 var(--space-md) var(--space-3xl) rgba(0, 0, 0, var(--opacity-strong));

  /* Box Shadows - Colored Glows (focus/hover/status indicators) */
  --shadow-glow-primary: 0 0 var(--space-lg) rgba(102, 126, 234, var(--opacity-strong));
  --shadow-glow-success: 0 0 var(--space-sm) var(--color-success);
  --shadow-glow-error: 0 0 var(--space-sm) var(--color-error);
  --shadow-glow-warning: 0 var(--space-md) var(--space-3xl) rgba(255, 165, 0, var(--opacity-light));
  --shadow-outline-white: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Light Theme Override */
[data-theme="light"] {
  /* Invert dark backgrounds to light */
  --color-dark-900: #f7fafc;
  --color-dark-800: #ffffff;
  --color-dark-700: #e2e8f0;
  --gradient-dark: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 100%);

  /* Text colors inverted */
  --color-text-primary: #1a202c;
  --color-text-secondary: #4a5568;
  --color-text-tertiary: #718096;
  --color-text-inverse: #ffffff;

  /* Background hierarchy */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f7fafc;
  --color-bg-tertiary: #e2e8f0;
  --color-bg-elevated: #ffffff;

  /* Glassmorphic overlays (white cards on light grey background) */
  --color-glass-subtle: rgba(255, 255, 255, 0.5);
  --color-glass-light: rgba(255, 255, 255, 0.7);
  --color-glass-medium: rgba(255, 255, 255, 0.9);

  /* Light overlays (for modals/dropdowns) */
  --color-overlay-subtle: rgba(0, 0, 0, 0.08);
  --color-overlay-medium: rgba(0, 0, 0, 0.15);
  --color-overlay-strong: rgba(0, 0, 0, 0.3);

  /* Borders (inverted - use dark borders in light mode) */
  --color-border-subtle: rgba(0, 0, 0, 0.08);
  --color-border-light: rgba(0, 0, 0, 0.15);
  --color-border-medium: rgba(0, 0, 0, 0.2);
  --color-border-strong: rgba(0, 0, 0, 0.3);

  /* Box Shadows - Elevation (lighter in light mode) */
  --shadow-sm: 0 var(--space-xs) var(--space-md) rgba(0, 0, 0, 0.1);
  --shadow-md: 0 var(--space-sm) var(--space-lg) rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 var(--space-sm) var(--space-xl) rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 var(--space-md) var(--space-3xl) rgba(0, 0, 0, 0.2);

  /* Box Shadows - Colored Glows (same in both modes) */
  --shadow-glow-primary: 0 0 var(--space-lg) rgba(102, 126, 234, var(--opacity-medium));
  --shadow-glow-success: 0 0 var(--space-sm) var(--color-success);
  --shadow-glow-error: 0 0 var(--space-sm) var(--color-error);
  --shadow-glow-warning: 0 var(--space-md) var(--space-3xl) rgba(255, 165, 0, var(--opacity-light));
  --shadow-outline-white: 0 0 0 2px rgba(0, 0, 0, 0.15);

  /* Adjust opacity variants for light mode */
  --color-white-10: rgba(0, 0, 0, 0.1);
  --color-white-20: rgba(0, 0, 0, 0.18);
  --color-white-30: rgba(0, 0, 0, 0.25);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-30: rgba(0, 0, 0, 0.3);
}

/* High Contrast Theme (Accessibility) */
[data-theme="high-contrast"] {
  /* Maximum contrast */
  --color-dark-900: #000000;
  --color-dark-800: #000000;
  --color-dark-700: #000000;

  /* Pure white text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #ffffff;
  --color-text-tertiary: #ffffff;
  --color-text-inverse: #000000;

  /* Background hierarchy */
  --color-bg-primary: #000000;
  --color-bg-secondary: #000000;
  --color-bg-tertiary: #1a1a1a;
  --color-bg-elevated: #0a0a0a;

  /* Enhanced primary for visibility */
  --color-primary-500: #ffffff;
  --color-primary-600: #cccccc;
  --gradient-primary: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);

  /* Stronger borders */
  --color-white-10: rgba(255, 255, 255, 0.2);
  --color-white-20: rgba(255, 255, 255, 0.3);
  --color-white-30: rgba(255, 255, 255, 0.4);

  /* Box Shadows - Enhanced visibility for high contrast */
  --shadow-sm: 0 var(--space-xs) var(--space-md) rgba(255, 255, 255, 0.15);
  --shadow-md: 0 var(--space-sm) var(--space-lg) rgba(255, 255, 255, 0.2);
  --shadow-lg: 0 var(--space-sm) var(--space-xl) rgba(255, 255, 255, 0.25);
  --shadow-xl: 0 var(--space-md) var(--space-3xl) rgba(255, 255, 255, 0.3);

  /* Box Shadows - Colored Glows */
  --shadow-glow-primary: 0 0 var(--space-lg) rgba(255, 255, 255, 0.5);
  --shadow-glow-success: 0 0 var(--space-sm) #ffffff;
  --shadow-glow-error: 0 0 var(--space-sm) #ffffff;
  --shadow-glow-warning: 0 var(--space-md) var(--space-3xl) rgba(255, 255, 255, 0.3);
  --shadow-outline-white: 0 0 0 2px rgba(255, 255, 255, 0.5);
}