/**
 * Brand Colors - Centralized Color Definitions
 * 
 * This file is the single source of truth for brand colors.
 * Generated from BrandConfig.php - keep in sync!
 * 
 * Each brand has:
 * - Primary accent color
 * - RGB values for rgba() usage
 * - Light/Dark variants
 * - Background tints at different opacities
 */

:root {
  /* ============================================
     BRAND ACCENT COLORS
     ============================================ */

  /* oneSolution - Brand purple-blue (parent/hub) */
  --accent-solution: #5E6AD2;
  --accent-solution-rgb: 94, 106, 210;
  --accent-solution-light: #7B8AE6;
  --accent-solution-dark: #4A55B8;
  --accent-tint-solution: rgba(94, 106, 210, 0.08);
  --accent-tint-solution-hover: rgba(94, 106, 210, 0.12);
  --accent-tint-solution-active: rgba(94, 106, 210, 0.15);

  /* oneLearning - Brand purple-blue */
  --accent-learning: #5E6AD2;
  --accent-learning-rgb: 94, 106, 210;
  --accent-learning-light: #7B8AE6;
  --accent-learning-dark: #4A55B8;
  --accent-tint-learning: rgba(94, 106, 210, 0.08);
  --accent-tint-learning-hover: rgba(94, 106, 210, 0.12);
  --accent-tint-learning-active: rgba(94, 106, 210, 0.15);

  /* onePerformance - Warm amber */
  --accent-performance: #f59e0b;
  --accent-performance-rgb: 245, 158, 11;
  --accent-performance-light: #fbbf24;
  --accent-performance-dark: #d97706;
  --accent-tint-performance: rgba(245, 158, 11, 0.08);
  --accent-tint-performance-hover: rgba(245, 158, 11, 0.12);
  --accent-tint-performance-active: rgba(245, 158, 11, 0.15);

  /* oneTiming - Sky blue */
  --accent-timing: #0ea5e9;
  --accent-timing-rgb: 14, 165, 233;
  --accent-timing-light: #38bdf8;
  --accent-timing-dark: #0284c7;
  --accent-tint-timing: rgba(14, 165, 233, 0.08);
  --accent-tint-timing-hover: rgba(14, 165, 233, 0.12);
  --accent-tint-timing-active: rgba(14, 165, 233, 0.15);

  /* oneDox - Violet */
  --accent-document: #8b5cf6;
  --accent-document-rgb: 139, 92, 246;
  --accent-document-light: #a78bfa;
  --accent-document-dark: #7c3aed;
  --accent-tint-document: rgba(139, 92, 246, 0.10);
  --accent-tint-document-hover: rgba(139, 92, 246, 0.14);
  --accent-tint-document-active: rgba(139, 92, 246, 0.18);

  /* get-2.work - Emerald green */
  --accent-boarding: #10b981;
  --accent-boarding-rgb: 16, 185, 129;
  --accent-boarding-light: #34d399;
  --accent-boarding-dark: #059669;
  --accent-tint-boarding: rgba(16, 185, 129, 0.08);
  --accent-tint-boarding-hover: rgba(16, 185, 129, 0.12);
  --accent-tint-boarding-active: rgba(16, 185, 129, 0.15);

  /* HRSchool - Pink (external) */
  --accent-hrschool: #ec4899;
  --accent-hrschool-rgb: 236, 72, 153;
  --accent-hrschool-light: #f472b6;
  --accent-hrschool-dark: #db2777;
  --accent-tint-hrschool: rgba(236, 72, 153, 0.08);
  --accent-tint-hrschool-hover: rgba(236, 72, 153, 0.12);
  --accent-tint-hrschool-active: rgba(236, 72, 153, 0.15);

  /* ============================================
     PAGE BACKGROUND TINTS
     Subtle gradient backgrounds for each brand
     ============================================ */
  --bg-tint-solution: #f5f3ff;     /* purple-blue */
  --bg-tint-learning: #f5f3ff;     /* purple-blue */
  --bg-tint-performance: #fffbeb;  /* amber */
  --bg-tint-timing: #e0f2fe;       /* sky blue */
  --bg-tint-document: #f3e8ff;     /* violet */
  --bg-tint-boarding: #ecfdf5;     /* emerald */

  /* ============================================
     DYNAMIC CURRENT ACCENT
     Set via PHP: --accent-current: var(--accent-{focus});
     ============================================ */
  --accent-current: var(--accent-solution);
  --accent-current-rgb: var(--accent-solution-rgb);
  --accent-tint-current: var(--accent-tint-solution);
  --bg-tint-current: var(--bg-tint-solution);
}

/* ============================================
   BRAND SWITCHER DROPDOWN STYLES
   Hover and active states for each brand
   ============================================ */

/* --- Solution --- */
.brand-dropdown-item[data-brand-focus="solution"]:hover {
  border-left: 3px solid var(--accent-solution);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="solution"].active {
  background: var(--accent-tint-solution-active);
  border-left: 3px solid var(--accent-solution);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="solution"].active .brand-dropdown-name {
  color: var(--accent-solution);
}

/* --- Learning --- */
.brand-dropdown-item[data-brand-focus="learning"]:hover {
  border-left: 3px solid var(--accent-learning);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="learning"].active {
  background: var(--accent-tint-learning-active);
  border-left: 3px solid var(--accent-learning);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="learning"].active .brand-dropdown-name {
  color: var(--accent-learning);
}

/* --- Performance --- */
.brand-dropdown-item[data-brand-focus="performance"]:hover {
  border-left: 3px solid var(--accent-performance);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="performance"].active {
  background: var(--accent-tint-performance-active);
  border-left: 3px solid var(--accent-performance);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="performance"].active .brand-dropdown-name {
  color: var(--accent-performance);
}

/* --- Timing --- */
.brand-dropdown-item[data-brand-focus="timing"]:hover {
  border-left: 3px solid var(--accent-timing);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="timing"].active {
  background: var(--accent-tint-timing-active);
  border-left: 3px solid var(--accent-timing);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="timing"].active .brand-dropdown-name {
  color: var(--accent-timing);
}

/* --- Document (oneDox) --- */
.brand-dropdown-item[data-brand-focus="document"]:hover {
  border-left: 3px solid var(--accent-document);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="document"].active {
  background: var(--accent-tint-document-active);
  border-left: 3px solid var(--accent-document);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="document"].active .brand-dropdown-name {
  color: var(--accent-document);
}

/* --- Boarding (get-2.work) --- */
.brand-dropdown-item[data-brand-focus="boarding"]:hover {
  border-left: 3px solid var(--accent-boarding);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="boarding"].active {
  background: var(--accent-tint-boarding-active);
  border-left: 3px solid var(--accent-boarding);
  padding-left: calc(var(--space-md) - 3px);
}
.brand-dropdown-item[data-brand-focus="boarding"].active .brand-dropdown-name {
  color: var(--accent-boarding);
}

/* --- HRSchool (external) --- */
.brand-dropdown-hrschool {
  background: linear-gradient(135deg, var(--accent-tint-hrschool) 0%, rgba(236, 72, 153, 0.03) 100%);
}
.brand-dropdown-hrschool .brand-dropdown-name {
  color: var(--accent-hrschool);
  font-weight: var(--font-medium);
}
.brand-dropdown-hrschool .external-icon {
  color: var(--accent-hrschool);
  opacity: 0.6;
}