/* ============================================
   Design Tokens - Source of Truth from Figma
   ============================================
   
   This file contains design tokens extracted from Figma design system.
   Tokens are organized by category for maintainability.
   
   Last updated: Based on tmp/design_system/ SVG exports
*/

/* ============================================
   Accessibility Colors (AA-Level)
   ============================================
   These colors meet WCAG AA accessibility standards for text labels.
   Use these for text that appears next to icons or indicators.
*/

/* AA-Level Label Colors (for text labels - accessible) */
.color-label-green {
  color: #0DAB30;
}

.color-label-red {
  color: #B80006;
}

.color-label-orange {
  color: #EA740A;
}

/* ============================================
   Legacy Graph Indicator Colors
   ============================================
   These colors are specifically for graph/chart indicators only.
   Do NOT use for text labels - use AA-level label colors instead.
*/

.color-red {
  color: #EF686F;
}

.color-green {
  color: #44C35F;
}

.color-orange {
  color: #F5841F;
}

/* ============================================
   Brand Colors
   ============================================
   Core brand colors from design system
*/

.color-purple {
  color: #39235D;
}

.color-purple-light {
  color: #67318E;
}

.color-blue {
  color: #4BC1E5;
}

.color-blue-dark {
  color: #016D81;
}

.color-blue-button {
  color: #5696DC;
}

.color-gray {
  color: #626E8E;
}

.color-gray-light {
  color: #818AA6;
}

.color-gray-lighter {
  color: #A1A7BC;
}

.color-gray-lightest {
  color: #C0C5D3;
}

.color-yellow {
  color: #FAE285;
}

/* ============================================
   Background Colors
   ============================================
   Background color utilities
*/

.bg-purple {
  background-color: #39235D;
}

.bg-purple-light {
  background-color: #67318E;
}

.bg-blue {
  background-color: #4BC1E5;
}

.bg-blue-light {
  background-color: #C5D9EE;
}

.bg-blue-lighter {
  background-color: #E2ECF7;
}

.bg-blue-lightest {
  background-color: #EBF1F9;
}

.bg-gray {
  background-color: #626E8E;
}

.bg-gray-light {
  background-color: #818AA6;
}

.bg-gray-lighter {
  background-color: #A1A7BC;
}

.bg-gray-lightest {
  background-color: #C0C5D3;
}

.bg-gray-lightest-2 {
  background-color: #E0E2E9;
}

.bg-gray-lightest-3 {
  background-color: #F3F4F7;
}

.bg-white {
  background-color: #FFFFFF;
}

.bg-blue-button {
  background-color: #5696DC;
}

.bg-purple-dark {
  background-color: #1D0841;
}

/* ============================================
   Border Colors
   ============================================
   Border color utilities
*/

.border-purple {
  border-color: #39235D;
}

.border-blue {
  border-color: #4BC1E5;
}

.border-blue-light {
  border-color: #C5D9EE;
}

.border-gray {
  border-color: #626E8E;
}

.border-gray-light {
  border-color: #818AA6;
}

.border-gray-lighter {
  border-color: #A1A7BC;
}

.border-gray-lightest {
  border-color: #C0C5D3;
}

.border-gray-lightest-2 {
  border-color: #E0E2E9;
}

.border-gray-lightest-4 {
  border-color: #E5E7EB;
}

/* ============================================
   Design Token Variables (CSS Custom Properties)
   ============================================
   These can be used in other CSS files via var()
*/

:root {
  /* Accessibility Colors (AA-Level) */
  --color-label-green: #0DAB30;
  --color-label-red: #B80006;
  --color-label-orange: #EA740A;
  
  /* Legacy Graph Indicator Colors */
  --color-legacy-green: #44C35F;
  --color-legacy-red: #EF686F;
  --color-legacy-orange: #F5841F;
  
  /* Brand Colors */
  --color-purple: #39235D;
  --color-purple-light: #67318E;
  --color-purple-dark: #1D0841;
  --color-blue: #4BC1E5;
  --color-blue-dark: #016D81;
  --color-blue-button: #5696DC;
  
  /* Gray Scale */
  --color-gray: #626E8E;
  --color-gray-light: #818AA6;
  --color-gray-lighter: #A1A7BC;
  --color-gray-lightest: #C0C5D3;
  --color-gray-lightest-2: #E0E2E9;
  --color-gray-lightest-3: #F3F4F7;
  
  /* Background Colors */
  --bg-blue-light: #C5D9EE;
  --bg-blue-lighter: #E2ECF7;
  --bg-blue-lightest: #EBF1F9;
  
  /* Border Colors */
  --border-blue-light: #C5D9EE;
  --border-gray-lightest-2: #E0E2E9;
  --border-gray-lightest-4: #E5E7EB;
  
  /* Navigation Gradient Colors */
  --nav-gradient-start: #95C4F9;
  --nav-gradient-end: #DBECFE;
  
  /* Legacy Colors (for backward compatibility) */
  --blue-base-legacy: #6e9fd5;
  --blue-light-legacy: #8ab4db;
  --blue-dark-legacy: #3e7cb2;
}