/* Axion Lab Color System - Light Theme Foundation
   Expert-validated implementation with user-specified colors */

:root {
  /* === PRIMARY BACKGROUNDS (Updated) === */
  --bg-primary: #F7F8FA;        /* Main background - light specification */
  --bg-secondary: #F7F8FA;       /* Cards/modals - consistent with primary */
  --bg-tertiary: #D6D9DD;        /* Subtle sections, enhanced contrast */
  --bg-accent: #EBEDEF;          /* Highlighted areas */

  /* === VALIDATED BRAND COLOR SYSTEM === */
  /* Deep Blue (#0C1E3F) - Headers, Navigation, Primary Elements */
  --brand-primary: #0C1E3F;
  --brand-primary-50: rgba(12, 30, 63, 0.05);
  --brand-primary-10: rgba(12, 30, 63, 0.1);
  --brand-primary-20: rgba(12, 30, 63, 0.2);
  --brand-primary-30: rgba(12, 30, 63, 0.3);

  /* Secondary Blue (#153E75) - Cards, Hover States, Secondary CTAs */
  --brand-secondary: #153E75;
  --brand-secondary-50: rgba(21, 62, 117, 0.05);
  --brand-secondary-10: rgba(21, 62, 117, 0.1);
  --brand-secondary-20: rgba(21, 62, 117, 0.2);
  --brand-secondary-30: rgba(21, 62, 117, 0.3);

  /* Highlight Blue (#2A6FBA) - Primary Buttons, Links, Active States */
  --brand-accent: #2A6FBA;
  --brand-accent-hover: #1E5A9B;
  --brand-accent-50: rgba(42, 111, 186, 0.05);
  --brand-accent-10: rgba(42, 111, 186, 0.1);
  --brand-accent-20: rgba(42, 111, 186, 0.2);
  --brand-accent-30: rgba(42, 111, 186, 0.3);

  /* Golden Yellow (#D4A017) - Strategic CTAs, User-specified accent */
  --brand-yellow: #D4A017;
  --brand-yellow-hover: #B8891A;
  --brand-yellow-50: rgba(212, 160, 23, 0.05);
  --brand-yellow-10: rgba(212, 160, 23, 0.1);
  --brand-yellow-20: rgba(212, 160, 23, 0.2);
  --brand-yellow-30: rgba(212, 160, 23, 0.3);

  /* === TEXT HIERARCHY FOR LIGHT BACKGROUND === */
  --text-primary: #0C1E3F;       /* Headlines using deep blue */
  --text-secondary: #374151;      /* Body text - WCAG compliant */
  --text-tertiary: #6B7280;      /* Captions, metadata */
  --text-muted: #9CA3AF;         /* Disabled, placeholder text */
  --text-on-dark: #F7F8FA;       /* Text on dark blue backgrounds */

  /* === EXPERT-ENHANCED GLASSMORPHIC SYSTEM === */
  /* Enhanced transparency and visibility for stronger glass effect */
  --glass-bg-primary: rgba(227, 229, 233, 0.65);    /* Increased transparency */
  --glass-bg-secondary: rgba(227, 229, 233, 0.55);  /* More transparent secondary */
  --glass-border: rgba(180, 188, 208, 0.45);        /* More visible borders */
  --glass-shadow: rgba(12, 30, 63, 0.12);           /* Enhanced shadow depth */

  /* === INTERACTIVE STATES === */
  --state-hover: var(--brand-accent-50);
  --state-focus: var(--brand-accent-20);
  --state-active: var(--brand-accent-30);
  --state-disabled: #E8EAF0;

  /* === SEMANTIC COLORS === */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-error: #DC2626;
  --color-info: var(--brand-accent);

  /* === SHADOWS & ELEVATION (Brand-aware) === */
  --shadow-sm: 0 1px 2px 0 var(--glass-shadow);
  --shadow-md: 0 4px 6px -1px var(--glass-shadow);
  --shadow-lg: 0 10px 15px -3px var(--glass-shadow);
  --shadow-xl: 0 20px 25px -5px var(--glass-shadow);
  --shadow-brand: 0 4px 20px var(--brand-accent-20);
  --shadow-yellow: 0 4px 20px var(--brand-yellow-20);

  /* === LEGACY COMPATIBILITY === */
  /* Maintain old variables during transition */
  --legacy-yellow: #ff0;
  --legacy-dark: #111827;
  --axion-yellow: var(--brand-yellow);    /* Bridge old to new */
}

/* === AUDIENCE-SPECIFIC COLOR THEMES === */

/* SME Theme - Brighter, More Approachable Colors */
:root[data-audience="sme"] {
  /* Primary CTAs and Interactive Elements */
  --theme-primary: var(--brand-accent);       /* #2A6FBA - Bright blue for approachability */
  --theme-secondary: var(--brand-secondary);  /* #153E75 - Medium blue for support */
  --theme-tertiary: var(--brand-primary);     /* #0C1E3F - Deep blue for authority touches */
  --theme-accent: var(--brand-yellow);        /* #D4A017 - Gold for value propositions */
  
  /* Component-specific overrides */
  --cta-primary: var(--brand-accent);         /* Bright blue CTAs */
  --cta-hover: var(--brand-secondary);
  --headline-color: var(--brand-primary);
  --nav-active: var(--brand-accent);
  --card-accent: var(--brand-accent);
  --link-color: var(--brand-accent);
  
  /* Backgrounds with lighter feel */
  --section-bg: rgba(247, 248, 250, 0.95);
  --card-bg: rgba(255, 255, 255, 0.98);
}

/* PE Theme - Deeper, More Sophisticated Colors */
:root[data-audience="pe"] {
  /* Primary CTAs and Interactive Elements */
  --theme-primary: var(--brand-primary);      /* #0C1E3F - Deep blue for authority */
  --theme-secondary: var(--brand-secondary);  /* #153E75 - Medium blue for sophistication */
  --theme-tertiary: var(--brand-accent);      /* #2A6FBA - Bright blue minimal use */
  --theme-accent: var(--brand-yellow);        /* #D4A017 - Gold for exclusivity */
  
  /* Component-specific overrides */
  --cta-primary: var(--brand-primary);        /* Deep blue CTAs */
  --cta-hover: var(--brand-secondary);
  --headline-color: var(--brand-primary);
  --nav-active: var(--brand-primary);
  --card-accent: var(--brand-primary);
  --link-color: var(--brand-secondary);
  
  /* Backgrounds with sophisticated feel */
  --section-bg: rgba(240, 242, 246, 0.98);
  --card-bg: rgba(251, 252, 254, 0.99);
}

/* Default to SME theme for broader appeal */
:root {
  --theme-primary: var(--brand-accent);
  --theme-secondary: var(--brand-secondary);
  --theme-tertiary: var(--brand-primary);
  --theme-accent: var(--brand-yellow);
  --cta-primary: var(--brand-accent);
  --cta-hover: var(--brand-secondary);
  --headline-color: var(--brand-primary);
  --nav-active: var(--brand-accent);
  --card-accent: var(--brand-accent);
  --link-color: var(--brand-accent);
  --section-bg: rgba(247, 248, 250, 0.95);
  --card-bg: rgba(255, 255, 255, 0.98);
}

/* === UTILITY CLASSES FOR NEW COLOR SYSTEM === */
.bg-brand-primary { background-color: var(--brand-primary); }
.bg-brand-secondary { background-color: var(--brand-secondary); }
.bg-brand-accent { background-color: var(--brand-accent); }
.bg-brand-yellow { background-color: var(--brand-yellow); }

.text-brand-primary { color: var(--brand-primary); }
.text-brand-secondary { color: var(--brand-secondary); }
.text-brand-accent { color: var(--brand-accent); }
.text-brand-yellow { color: var(--brand-yellow); }

.border-brand-primary { border-color: var(--brand-primary); }
.border-brand-secondary { border-color: var(--brand-secondary); }
.border-brand-accent { border-color: var(--brand-accent); }
.border-brand-yellow { border-color: var(--brand-yellow); }

/* === EXPERT-VALIDATED GLASSMORPHIC COMPONENTS === */
.glass-card {
  background: var(--glass-bg-primary);
  backdrop-filter: blur(8px);              /* Reduced for light theme */
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}

.glass-nav {
  background: var(--glass-bg-secondary);
  backdrop-filter: blur(12px);             /* Stronger for navigation */
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
}

/* === BUTTON SYSTEM === */
.btn-primary-new {
  background: var(--brand-yellow);
  color: var(--text-on-dark);
  border: none;
  box-shadow: var(--shadow-yellow);
  transition: all 0.3s ease;
}

.btn-primary-new:hover {
  background: var(--brand-yellow-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 30px var(--brand-yellow-30);
}

.btn-secondary-new {
  background: transparent;
  color: var(--brand-accent);
  border: 2px solid var(--brand-accent);
  transition: all 0.3s ease;
}

.btn-secondary-new:hover {
  background: var(--brand-accent);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-brand);
}

/* === CONSOLIDATED COMPONENT UTILITIES === */

/* Button System */
.btn-primary {
  @apply inline-flex items-center gap-x-2 py-3 px-6 font-medium text-sm rounded-full transition-all duration-300 focus:outline-none;
  background-color: var(--brand-accent);
  color: var(--text-on-dark);
  box-shadow: 0 4px 14px var(--brand-accent-20);
}

.btn-primary:hover {
  background-color: var(--brand-accent-hover);
  box-shadow: 0 8px 30px var(--brand-accent-30);
}

.btn-primary-deep {
  @apply inline-flex items-center gap-x-2 py-3 px-6 font-medium text-sm rounded-full transition-all duration-300 focus:outline-none;
  background-color: var(--brand-primary);
  color: var(--text-on-dark);
  box-shadow: 0 4px 14px var(--brand-primary-20);
}

.btn-primary-deep:hover {
  background-color: var(--brand-secondary);
  box-shadow: 0 8px 30px var(--brand-primary-30);
}

.btn-premium {
  @apply inline-flex items-center gap-x-2 py-3 px-6 font-medium text-sm rounded-full transition-all duration-300 focus:outline-none;
  background-color: var(--brand-yellow);
  color: var(--text-on-dark);
  box-shadow: 0 4px 14px var(--brand-yellow-20);
}

.btn-premium:hover {
  background-color: var(--brand-yellow-hover);
  box-shadow: 0 8px 30px var(--brand-yellow-30);
}

.btn-secondary {
  @apply inline-flex items-center gap-x-2 py-3 px-6 font-medium text-sm rounded-full transition-all duration-300 focus:outline-none;
  background: transparent;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
}

.btn-secondary:hover {
  background-color: var(--brand-primary);
  color: var(--text-on-dark);
}

/* Card System */
.card-glass {
  @apply p-8 rounded-2xl backdrop-blur-sm transition-all duration-300;
  background: linear-gradient(to bottom right, var(--glass-bg-primary), rgba(247, 248, 250, 0.4));
  border: 2px solid var(--glass-border);
  box-shadow: 0 4px 20px rgba(12, 30, 63, 0.08);
}

.card-glass:hover {
  @apply -translate-y-1;
  border-color: var(--brand-accent);
  box-shadow: 0 20px 40px var(--brand-accent-15);
}

.card-sme {
  @apply card-glass;
  background: linear-gradient(to bottom right, rgba(42, 111, 186, 0.05), rgba(42, 111, 186, 0.02));
  border-color: rgba(42, 111, 186, 0.2);
}

.card-sme:hover {
  border-color: rgba(42, 111, 186, 0.3);
  box-shadow: 0 8px 30px rgba(42, 111, 186, 0.15);
}

.card-pe {
  @apply card-glass;
  background: linear-gradient(to bottom right, rgba(12, 30, 63, 0.05), rgba(12, 30, 63, 0.02));
  border-color: rgba(12, 30, 63, 0.2);
}

.card-pe:hover {
  border-color: rgba(12, 30, 63, 0.3);
  box-shadow: 0 8px 30px rgba(12, 30, 63, 0.15);
}

.card-featured {
  @apply card-glass hover:-translate-y-2 hover:scale-105;
}

/* Section Badge System */
.section-badge {
  @apply inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6 backdrop-blur-sm;
  background-color: var(--glass-bg-primary);
  border: 1px solid var(--glass-border);
}

.section-badge-dot {
  @apply w-2 h-2 rounded-full animate-pulse;
  background-color: var(--brand-accent);
}

.section-badge-text {
  @apply text-xs uppercase tracking-wider font-medium;
  color: var(--brand-accent);
}

/* Typography System */
.hero-title {
  @apply font-bold text-4xl md:text-5xl lg:text-6xl leading-tight tracking-tight mb-6;
  color: var(--brand-primary);
}

.section-title {
  @apply font-bold text-3xl md:text-4xl lg:text-5xl leading-tight tracking-tight mb-6;
  color: var(--brand-primary);
}

.page-title {
  @apply font-bold text-2xl md:text-3xl lg:text-4xl leading-tight tracking-tight mb-4;
  color: var(--brand-primary);
}

.card-title {
  @apply text-xl md:text-2xl font-semibold mb-4 transition-colors duration-300;
  color: var(--brand-primary);
}

.card-title:hover {
  color: var(--brand-accent);
}

/* Icon Container System */
.icon-container {
  @apply flex items-center justify-center w-16 h-16 rounded-2xl mb-6;
  background: linear-gradient(135deg, var(--brand-accent-10), var(--brand-accent-20));
  border: 2px solid var(--brand-accent-30);
}

.icon-container-sme {
  background: linear-gradient(135deg, rgba(42, 111, 186, 0.1), rgba(42, 111, 186, 0.2));
  border: 2px solid rgba(42, 111, 186, 0.3);
}

.icon-container-pe {
  background: linear-gradient(135deg, rgba(12, 30, 63, 0.1), rgba(12, 30, 63, 0.2));
  border: 2px solid rgba(12, 30, 63, 0.3);
}

/* === HEADER NAVIGATION STYLES === */
/* Clean CSS-only navigation without JavaScript hover effects */
.nav-link {
  color: var(--brand-primary, #0C1E3F);
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--brand-accent, #2A6FBA);
}

.nav-link-active {
  color: var(--brand-accent, #2A6FBA);
  transition: color 0.2s ease;
}

.nav-link-active:hover {
  color: var(--brand-accent, #2A6FBA);
}

/* Language Switcher Styles */
.lang-switcher-btn {
  border-color: var(--glass-border, rgba(180, 188, 208, 0.45));
  color: var(--brand-primary, #0C1E3F);
  background-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-switcher-btn:hover {
  background-color: var(--glass-bg-secondary, rgba(227, 229, 233, 0.55));
  color: var(--brand-accent, #2A6FBA);
}

.lang-option {
  color: var(--brand-primary, #0C1E3F);
  background-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-option:hover {
  color: var(--brand-accent, #2A6FBA);
  background-color: rgba(42, 111, 186, 0.1);
}

.lang-option-active {
  color: var(--brand-accent, #2A6FBA);
  background-color: rgba(42, 111, 186, 0.1);
}

.lang-option-active:hover {
  color: var(--brand-accent, #2A6FBA);
  background-color: rgba(42, 111, 186, 0.1);
}

/* === ACCESSIBILITY ENHANCEMENTS === */
@media (prefers-contrast: high) {
  :root {
    --glass-bg-primary: rgba(227, 229, 233, 0.95);
    --glass-border: rgba(12, 30, 63, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary-new,
  .btn-secondary-new {
    transition: none;
  }
  
  .btn-primary-new:hover {
    transform: none;
  }
}