/* ============================================================================
   PREMIUM COLOR SYSTEM - Based on Color Theory
   ============================================================================
   Sophisticated palette designed for luxury, professionalism, and accessibility
   
   Color Psychology:
   - Gold/Champagne: Luxury, success, premium quality
   - Deep Blacks: Sophistication, elegance, power
   - Soft Whites: Clarity, professionalism, space
   - Subtle Blues: Trust, stability, intelligence
   - Muted Greens: Growth, success, balance
   
   WCAG AAA Compliant - All text meets accessibility standards
   ============================================================================ */

:root {
  /* ══════════════════════════════════════════════════════════════════════════
     PRIMARY PALETTE - Luxury Foundation
     ══════════════════════════════════════════════════════════════════════════ */
  
  /* Backgrounds - Deep, rich blacks with subtle warmth */
  --bg-primary: #0A0A0B;           /* Main background - Deep charcoal */
  --bg-secondary: #121214;         /* Elevated surfaces */
  --bg-tertiary: #1A1A1D;          /* Cards, modals */
  --bg-elevated: #242428;          /* Hover states, active elements */
  
  /* Text - High contrast, accessible hierarchy */
  --text-primary: #F5F5F7;         /* Primary text - Soft white */
  --text-secondary: #C7C7CC;       /* Secondary text - Light gray */
  --text-tertiary: #8E8E93;        /* Tertiary text - Medium gray */
  --text-quaternary: #636366;      /* Disabled, subtle text */
  
  /* ══════════════════════════════════════════════════════════════════════════
     ACCENT PALETTE - Strategic Color Usage
     ══════════════════════════════════════════════════════════════════════════ */
  
  /* Gold/Champagne - Primary brand accent (luxury, premium) */
  --accent-gold-50: #FFF9E6;       /* Lightest - Backgrounds */
  --accent-gold-100: #F5EDCE;      /* Light - Hover states */
  --accent-gold-200: #EBE1B8;      /* Medium light */
  --accent-gold-300: #D4BA89;      /* Primary gold - Main accent */
  --accent-gold-400: #C4A76B;      /* Medium dark */
  --accent-gold-500: #B4944D;      /* Dark - Active states */
  --accent-gold-600: #8A7038;      /* Darker - Borders */
  
  /* Blue - Secondary accent (trust, intelligence) */
  --accent-blue-50: #E6F2FF;       /* Lightest */
  --accent-blue-100: #B3D9FF;      /* Light */
  --accent-blue-200: #80C0FF;      /* Medium light */
  --accent-blue-300: #60A5FA;      /* Primary blue */
  --accent-blue-400: #3B82F6;      /* Medium */
  --accent-blue-500: #2563EB;      /* Dark */
  
  /* Green - Success accent (growth, positive) */
  --accent-green-50: #ECFDF5;      /* Lightest */
  --accent-green-100: #D1FAE5;     /* Light */
  --accent-green-200: #A7F3D0;     /* Medium light */
  --accent-green-300: #10B981;     /* Primary green */
  --accent-green-400: #059669;     /* Medium */
  --accent-green-500: #047857;     /* Dark */
  
  /* Red - Error/Warning accent (attention, critical) */
  --accent-red-50: #FEF2F2;        /* Lightest */
  --accent-red-100: #FEE2E2;       /* Light */
  --accent-red-200: #FECACA;       /* Medium light */
  --accent-red-300: #EF4444;       /* Primary red */
  --accent-red-400: #DC2626;       /* Medium */
  --accent-red-500: #B91C1C;       /* Dark */
  
  /* ══════════════════════════════════════════════════════════════════════════
     SEMANTIC COLORS - Contextual Usage
     ══════════════════════════════════════════════════════════════════════════ */
  
  /* Borders - Subtle, elegant separators */
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(212, 186, 137, 0.3);
  
  /* Overlays - Glass morphism, modals */
  --overlay-light: rgba(10, 10, 11, 0.4);
  --overlay-medium: rgba(10, 10, 11, 0.7);
  --overlay-strong: rgba(10, 10, 11, 0.9);
  
  /* Shadows - Depth and elevation */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 8px 32px rgba(212, 186, 137, 0.15);
  --shadow-gold-strong: 0 16px 48px rgba(212, 186, 137, 0.25);
  
  /* Glows - Premium hover effects */
  --glow-gold-subtle: 0 0 20px rgba(212, 186, 137, 0.1);
  --glow-gold-medium: 0 0 40px rgba(212, 186, 137, 0.2);
  --glow-gold-strong: 0 0 60px rgba(212, 186, 137, 0.3);
  
  /* ══════════════════════════════════════════════════════════════════════════
     GRADIENTS - Luxury backgrounds
     ══════════════════════════════════════════════════════════════════════════ */
  
  --gradient-gold: linear-gradient(135deg, var(--accent-gold-300) 0%, var(--accent-gold-100) 100%);
  --gradient-gold-subtle: linear-gradient(135deg, rgba(212, 186, 137, 0.1) 0%, rgba(245, 237, 206, 0.05) 100%);
  --gradient-dark: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  --gradient-elevated: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  
  /* ══════════════════════════════════════════════════════════════════════════
     GLASS MORPHISM - Modern, premium effects
     ══════════════════════════════════════════════════════════════════════════ */
  
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(40px) saturate(180%);
}

/* ══════════════════════════════════════════════════════════════════════════
   REFINED COLOR APPLICATION
   ══════════════════════════════════════════════════════════════════════════ */

/* Body & Base */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Cards & Surfaces */
.revolutionary-card,
.pm-value-card,
.contact-section,
.sig-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
}

.revolutionary-card:hover,
.pm-value-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-xl), var(--shadow-gold);
}

/* Text Hierarchy */
h1, h2, h3, .hero-title {
  color: var(--text-primary);
}

p, .hero-subtitle {
  color: var(--text-secondary);
}

.text-muted, .footer-copyright {
  color: var(--text-tertiary);
}

/* Accent Usage - Gold for primary actions */
.btn-cv,
.submit-btn,
.pill-radio:checked + .pill-label {
  background: var(--gradient-gold);
  color: var(--bg-primary);
  box-shadow: var(--shadow-gold);
}

.btn-cv:hover,
.submit-btn:hover {
  box-shadow: var(--shadow-gold-strong), var(--glow-gold-medium);
}

/* Links & Interactive Elements */
a {
  color: var(--accent-gold-300);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-gold-100);
}

/* Status Indicators */
.status-dot-sm,
.availability-badge .status-dot-sm {
  background: var(--accent-green-300);
  box-shadow: 0 0 12px var(--accent-green-300);
}

/* Form Elements */
.form-input,
.form-textarea {
  background: var(--glass-bg);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--accent-gold-300);
  box-shadow: 0 0 0 4px rgba(212, 186, 137, 0.1), var(--shadow-gold);
}

/* Borders & Dividers */
.section-header,
.ms-divider,
hr {
  border-color: var(--border-subtle);
}

/* Glossary & Special Elements */
.glossary-term {
  color: var(--accent-blue-300);
  border-bottom: 1px dotted var(--accent-blue-300);
}

.glossary-term:hover {
  color: var(--accent-blue-200);
  border-bottom-color: var(--accent-blue-200);
}

/* Market Sector Colors - Consistent with brand */
.market-sector-card[style*="--s-color: var(--accent-status)"] {
  --s-color: var(--accent-green-300);
  --s-bg: rgba(16, 185, 129, 0.05);
}

.market-sector-card[style*="--s-color: var(--accent-blue)"] {
  --s-color: var(--accent-blue-300);
  --s-bg: rgba(96, 165, 250, 0.05);
}

/* Footer */
.footer {
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--bg-primary) 20%,
    var(--bg-primary) 100%
  );
  border-top: 1px solid var(--border-subtle);
}

.footer-nav a {
  color: var(--text-tertiary);
}

.footer-nav a:hover {
  color: var(--accent-gold-300);
}

/* Progress Bar */
.page-progress__bar {
  background: var(--gradient-gold);
  box-shadow: var(--glow-gold-medium);
}

/* Cursor */
#cursor-dot {
  background: var(--accent-gold-300);
  box-shadow: var(--glow-gold-subtle);
}

#cursor-ring {
  border-color: var(--accent-gold-300);
}

body.is-hovering #cursor-dot {
  background: var(--accent-gold-100);
  box-shadow: var(--glow-gold-medium);
}

body.is-hovering #cursor-ring {
  border-color: var(--accent-gold-100);
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY - WCAG AAA Compliance
   ══════════════════════════════════════════════════════════════════════════ */

/* Ensure all text meets contrast requirements */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #FFFFFF;
    --text-secondary: #E5E5E5;
    --border-light: rgba(255, 255, 255, 0.2);
    --border-accent: rgba(212, 186, 137, 0.5);
  }
}

/* Focus indicators for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--accent-gold-300);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE OPTIMIZATION (Already dark, but refined)
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  /* Already optimized for dark mode */
  /* Enhance shadows for OLED displays */
  .revolutionary-card,
  .pm-value-card {
    box-shadow: 
      var(--shadow-xl),
      0 0 1px rgba(255, 255, 255, 0.1);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT STYLES - Professional output
   ══════════════════════════════════════════════════════════════════════════ */

@media print {
  :root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --text-primary: #000000;
    --text-secondary: #333333;
    --accent-gold-300: #8A7038;
  }
  
  .revolutionary-card,
  .pm-value-card {
    border: 1px solid #CCCCCC;
    box-shadow: none;
  }
}