/**
 * 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%);

}

/* ============================================
   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: #718096;
  --color-text-tertiary: #a0aec0;
  --color-text-inverse: #ffffff;

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

  /* Glassmorphic overlays (inverted - use dark colors in light mode) */
  --color-glass-subtle: rgba(0, 0, 0, 0.02);
  --color-glass-light: rgba(0, 0, 0, 0.05);
  --color-glass-medium: rgba(0, 0, 0, 0.1);

  /* Light overlays (for modals/dropdowns) */
  --color-overlay-subtle: rgba(0, 0, 0, 0.05);
  --color-overlay-medium: rgba(0, 0, 0, 0.1);
  --color-overlay-strong: rgba(0, 0, 0, 0.2);

  /* Borders (inverted - use dark borders in light mode) */
  --color-border-subtle: rgba(0, 0, 0, 0.05);
  --color-border-light: rgba(0, 0, 0, 0.1);
  --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.1);

  /* Adjust opacity variants for light mode */
  --color-white-10: rgba(0, 0, 0, 0.05);
  --color-white-20: rgba(0, 0, 0, 0.1);
  --color-white-30: rgba(0, 0, 0, 0.15);
  --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);
}