/* VATCareer 2.0 - Aviation Minimalism Theme System */

:root {
  /* Light Theme Variables */
  --color-primary: #1e40af;        /* Deep blue */
  --color-primary-light: #3b82f6;  /* Lighter blue */
  --color-primary-dark: #1e3a8a;   /* Darker blue */
  
  /* Secondary Colors - Neutral Grays */
  --color-secondary: #64748b;      /* Slate gray */
  --color-secondary-light: #94a3b8; /* Light slate */
  --color-secondary-dark: #475569;  /* Dark slate */
  
  /* Background Colors - Clean Whites */
  --color-background: #ffffff;     /* Pure white */
  --color-surface: #f8fafc;        /* Very light gray */
  --color-surface-elevated: #ffffff; /* White for cards */
  
  /* Text Colors - High Contrast */
  --color-text: #0f172a;           /* Very dark blue-gray */
  --color-text-muted: #64748b;     /* Medium gray */
  --color-text-light: #94a3b8;     /* Light gray */
  
  /* Border Colors - Subtle */
  --color-border: #e2e8f0;         /* Light gray */
  --color-border-light: #f1f5f9;   /* Very light gray */
  
  /* Status Colors - Aviation Inspired */
  --color-success: #059669;        /* Aviation green */
  --color-success-light: #10b981;  /* Light green */
  --color-success-dark: #047857;   /* Dark green */
  --color-warning: #d97706;        /* Aviation amber */
  --color-warning-light: #f59e0b;  /* Light amber */
  --color-warning-dark: #b45309;   /* Dark amber */
  --color-error: #dc2626;          /* Aviation red */
  --color-error-light: #fecaca;    /* Light red */
  --color-error-dark: #991b1b;     /* Dark red */
  --color-danger: #dc2626;         /* Aviation red (alias for error) */
  --color-danger-light: #fecaca;   /* Light red (alias for error-light) */
  --color-danger-dark: #991b1b;    /* Dark red (alias for error-dark) */
  --color-info: #0284c7;           /* Aviation blue */
  --color-info-light: #bae6fd;     /* Light blue */
  --color-info-dark: #0369a1;      /* Dark blue */
  
  /* Spacing Scale - 4px base unit */
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */
  
  /* Typography */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  
  /* Font Sizes - Systematic Scale */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --color-primary: #3b82f6;        /* Bright blue */
  --color-primary-light: #60a5fa;  /* Lighter blue */
  --color-primary-dark: #1e40af;   /* Deep blue */
  
  /* Secondary Colors - Blue-Grays */
  --color-secondary: #64748b;      /* Slate gray */
  --color-secondary-light: #94a3b8; /* Light slate */
  --color-secondary-dark: #475569;  /* Dark slate */
  
  /* Background Colors - Dark Navy */
  --color-background: #0f172a;     /* Very dark blue */
  --color-surface: #1e293b;        /* Dark blue-gray */
  --color-surface-elevated: #334155; /* Elevated dark blue */
  
  /* Text Colors - Light Blues */
  --color-text: #f1f5f9;           /* Very light blue-gray */
  --color-text-muted: #94a3b8;     /* Medium blue-gray */
  --color-text-light: #64748b;     /* Darker blue-gray */
  
  /* Border Colors - Dark Blue */
  --color-border: #475569;         /* Medium blue-gray for better visibility */
  --color-border-light: #64748b;   /* Lighter blue-gray */
  
  /* Status Colors - Aviation Dark */
  --color-success: #10b981;        /* Bright green */
  --color-success-light: #34d399;  /* Light green */
  --color-success-dark: #059669;   /* Dark green */
  --color-warning: #f59e0b;        /* Bright amber */
  --color-warning-light: #fbbf24;  /* Light amber */
  --color-warning-dark: #d97706;   /* Dark amber */
  --color-error: #ef4444;          /* Bright red */
  --color-error-light: #fca5a5;    /* Light red */
  --color-error-dark: #dc2626;     /* Dark red */
  --color-danger: #ef4444;         /* Bright red (alias for error) */
  --color-danger-light: #fca5a5;   /* Light red (alias for error-light) */
  --color-danger-dark: #dc2626;    /* Dark red (alias for error-dark) */
  --color-info: #06b6d4;           /* Bright cyan */
  --color-info-light: #67e8f9;     /* Light cyan */
  --color-info-dark: #0891b2;      /* Dark cyan */
  
  /* Dark theme shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);
}

/* Theme-aware body classes */
.theme-light {
  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-dark {
  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Global reset and base styles */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Smooth transitions for theme changes - only applied after initial load */
.theme-transitions,
.theme-transitions *:not(script):not(style):not(link) {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}