/* CSS Variables - Design Tokens */

:root {
  /* Primary Colors - Navy Blue (Dominant) */
  --color-primary: #002F5F;
  --color-primary-dark: #001A33;
  --color-primary-light: #004080;

  /* Secondary Colors - Red */
  --color-secondary: #DC143C;
  --color-secondary-dark: #B01030;
  --color-secondary-light: #FF3D5F;

  /* Neutral Colors */
  --color-charcoal: #333333;
  --color-charcoal-light: #4A4A4A;
  --color-grey-light: #F5F5F5;
  --color-grey-medium: #E0E0E0;
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Legacy color names for compatibility */
  --color-gold: var(--color-secondary);
  --color-gold-dark: var(--color-secondary-dark);
  --color-gold-light: var(--color-secondary-light);
  --color-navy: var(--color-primary);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* Layout */
  --navbar-height: 80px;
  --container-max-width: 1200px;

  /* Breakpoints (for JS use) */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1440px;

  /* Performance */
  --will-change-transform: transform;
  --will-change-opacity: opacity;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-normal: 0.01ms;
    --transition-slow: 0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark Mode Theme */
[data-theme="dark"] {
  /* Dark mode backgrounds */
  --color-white: #1a1a2e;
  --color-grey-light: #252542;
  --color-grey-medium: #3a3a5c;

  /* Dark mode text colors */
  --color-charcoal: #e8e8e8;
  --color-charcoal-light: #cccccc;
  --color-black: #ffffff;

  /* Adjusted primary for dark mode */
  --color-primary: #4a7ab8;
  --color-primary-dark: #3a5a88;
  --color-primary-light: #6a9ad8;

  /* Brighter secondary for dark backgrounds */
  --color-secondary: #ff4d6d;
  --color-secondary-dark: #dc3545;
  --color-secondary-light: #ff6b8a;

  /* Enhanced shadows for dark mode */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Smooth transition for theme switching */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}