/* ══════════════════════════════════════════════════════════════
   YMCA LINK Design System — Color Tokens
   Source: YUSA brand guidance / Foundations > Color
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */

  /* Green */
  --ymca-green-050: #2DD4A8;
  --ymca-green-100: #0EB88A;
  --ymca-green-500: #047857;

  /* Red */
  --ymca-red-050: #F15922;
  --ymca-red-100: #ED1C24;
  --ymca-red-500: #A92B31;

  /* Orange */
  --ymca-orange-050: #FCAF17;
  --ymca-orange-100: #F47920;
  --ymca-orange-500: #DD5828;

  /* Blue */
  --ymca-blue-050: #00AEEF;
  --ymca-blue-100: #0089D9;
  --ymca-blue-500: #0060AF;

  /* Purple */
  --ymca-purple-050: #C6168D;
  --ymca-purple-100: #92278F;
  --ymca-purple-500: #5C2E91;

  /* ── Neutrals (13-step scale) ── */
  --ymca-white:    #FFFFFF;
  --ymca-gray-025: #F9F9FA;
  --ymca-gray-050: #F2F2F2;
  --ymca-gray-100: #E7E7E7;
  --ymca-gray-200: #DADADA;
  --ymca-gray-300: #CCCCCC;
  --ymca-gray-400: #B0B1B2;
  --ymca-gray-500: #A0A2A3;
  --ymca-gray-600: #8D8F90;
  --ymca-gray-700: #76787A;
  --ymca-gray-800: #636466;
  --ymca-gray-900: #4A4A4A;
  --ymca-black:    #231F20;

  /* ── Extended Green scale for accents ── */
  --ymca-green-600: #065F46;
  --ymca-green-700: #064E3B;
  --ymca-green-50:  #ECFDF5;

  /* ── Semantic Aliases (Blue + Purple accent for OEA) ── */
  --primary-color:         var(--ymca-blue-050);
  --primary-color-dark:    var(--ymca-blue-100);
  --primary-color-darkest: var(--ymca-blue-500);
  --secondary-color:       var(--ymca-purple-100);

  /* Header / chrome — deep blue */
  --chrome-bg:       #0060AF;
  --chrome-bg-light: #0089D9;
  --chrome-accent:   var(--ymca-blue-050);

  /* Status */
  --color-success:     var(--ymca-green-100);
  --color-success-bg:  #ECFDF5;
  --color-success-border: #A7F3D0;
  --color-warning:     var(--ymca-orange-050);
  --color-warning-bg:  #FFFBEB;
  --color-warning-border: #FDE68A;
  --color-error:       var(--ymca-red-100);
  --color-error-bg:    #FEF2F2;
  --color-error-border: #FECACA;
  --color-info:        var(--ymca-blue-050);
  --color-info-bg:     #EFF6FF;
  --color-info-border: #BFDBFE;

  /* Text */
  --text-primary:   #111827;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --text-on-dark:   var(--ymca-white);

  /* Surfaces — slightly cooler than before */
  --surface-bg:     var(--ymca-white);
  --surface-subtle: #F9FAFB;
  --surface-muted:  #F3F4F6;
  --border-color:   #E5E7EB;
  --border-light:   #F3F4F6;

  /* Shadows — layered for depth */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-md:  0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:  0 4px 8px rgba(0,0,0,0.04), 0 16px 40px rgba(0,0,0,0.10);
  --shadow-hover: 0 2px 4px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.12);

  /* Radius tokens */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

/* ── Color Set Overrides (data-attribute switching) ── */

/* Set 1: Red + Orange */
[data-color-set="1"] {
  --primary-color:         var(--ymca-red-100);
  --primary-color-dark:    var(--ymca-red-500);
  --primary-color-darkest: var(--ymca-red-500);
  --secondary-color:       var(--ymca-orange-100);
}

/* Set 2: Green + Blue (Default for OEA) */
[data-color-set="2"] {
  --primary-color:         var(--ymca-green-050);
  --primary-color-dark:    var(--ymca-green-100);
  --primary-color-darkest: var(--ymca-green-500);
  --secondary-color:       var(--ymca-blue-100);
}

/* Set 3: Orange + Green */
[data-color-set="3"] {
  --primary-color:         var(--ymca-orange-050);
  --primary-color-dark:    var(--ymca-orange-100);
  --primary-color-darkest: var(--ymca-orange-500);
  --secondary-color:       var(--ymca-green-100);
}

/* Set 4: Blue + Purple */
[data-color-set="4"] {
  --primary-color:         var(--ymca-blue-050);
  --primary-color-dark:    var(--ymca-blue-100);
  --primary-color-darkest: var(--ymca-blue-500);
  --secondary-color:       var(--ymca-purple-100);
}

/* Set 5: Purple + Red */
[data-color-set="5"] {
  --primary-color:         var(--ymca-purple-050);
  --primary-color-dark:    var(--ymca-purple-100);
  --primary-color-darkest: var(--ymca-purple-500);
  --secondary-color:       var(--ymca-red-100);
}

/* ── Color Palette Selector UI (hidden in production) ── */
.color-palette-selector {
  display: none !important;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--surface-bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 1rem;
  min-width: 200px;
}

.color-palette-selector h3 {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.palette-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.palette-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.palette-option:hover {
  background: var(--surface-subtle);
}

.palette-option.active {
  background: var(--color-info-bg);
  border-color: var(--primary-color);
}

.palette-preview {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.palette-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* Set Previews */
.palette-option[data-set="1"] .palette-preview {
  background: linear-gradient(135deg, var(--ymca-red-100), var(--ymca-orange-100));
}
.palette-option[data-set="2"] .palette-preview {
  background: linear-gradient(135deg, var(--ymca-green-050), var(--ymca-blue-100));
}
.palette-option[data-set="3"] .palette-preview {
  background: linear-gradient(135deg, var(--ymca-orange-050), var(--ymca-green-100));
}
.palette-option[data-set="4"] .palette-preview {
  background: linear-gradient(135deg, var(--ymca-blue-050), var(--ymca-purple-100));
}
.palette-option[data-set="5"] .palette-preview {
  background: linear-gradient(135deg, var(--ymca-purple-050), var(--ymca-red-100));
}