:root {
  /* Brand Colors */
  --color-space-cadet: #202B4E;
  --color-space-cadet-dark: #151D36;
  --color-carbon: #565656;
  --color-air-blue: #76A7CB;
  --color-imperial-red: #E54B4B;
  --color-platinum: #DFE0E0;
  
  /* Semantic Colors */
  --color-primary: var(--color-space-cadet);
  --color-primary-hover: #162035;
  --color-secondary: var(--color-air-blue);
  --color-cta: #DC2626;
  --color-cta-hover: #B91C1C;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-error-hover: #DC2626;
  
  /* Text Colors */
  --color-text-primary: var(--color-space-cadet);
  --color-text-secondary: var(--color-carbon);
  --color-text-muted: #6B7280;
  --color-text-inverse: #FFFFFF;
  
  /* Background Colors */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F9FAFB;
  --color-bg-tertiary: var(--color-platinum);
  --color-bg-selected: #e3f2fd;
  --color-bg-error: #FEE2E2;
  --color-bg-error-light: #FEF2F2;
  --color-bg-success: #D1FAE5;
  --color-bg-warning: #FEF3C7;
  --color-bg-info: #DBEAFE;
  
  /* Semantic Text Colors */
  --color-text-success: #065F46;
  --color-text-warning: #92400E;
  --color-text-error: #991B1B;
  --color-text-info: #1E40AF;
  
  /* Border Colors */
  --color-border-default: var(--color-platinum);
  --color-border-focus: var(--color-air-blue);
  
  /* Typography */
  --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* ============================================
     CHART & DATA VISUALIZATION TOKENS
     ============================================ */

  /* Chart color palette - primary data series */
  --chart-color-1: var(--color-space-cadet);
  --chart-color-2: var(--color-air-blue);
  --chart-color-3: var(--color-cta);
  --chart-color-4: #8B5CF6;
  --chart-color-5: #F59E0B;
  --chart-color-6: #10B981;

  /* Chart color palette - with transparency (for area fills) */
  --chart-color-1-alpha: rgba(32, 43, 78, 0.2);
  --chart-color-2-alpha: rgba(118, 167, 203, 0.2);
  --chart-color-3-alpha: rgba(220, 38, 38, 0.2);

  /* Semantic chart colors */
  --chart-positive: var(--color-success);
  --chart-negative: var(--color-error);
  --chart-neutral: var(--color-text-muted);

  /* Score threshold colors (for gauge/score visualizations) */
  --chart-score-excellent: #10B981;
  --chart-score-good: #3B82F6;
  --chart-score-fair: #F59E0B;
  --chart-score-poor: #EF4444;

  /* Chart typography */
  --chart-font-family: var(--font-family);
  --chart-font-size-label: 12px;
  --chart-font-size-title: 14px;
  --chart-font-size-legend: 12px;

  /* Chart grid and axes */
  --chart-grid-color: rgba(0, 0, 0, 0.1);
  --chart-axis-color: var(--color-text-muted);
  --chart-border-width: 2px;

  /* Chart dimensions */
  --chart-min-height: 200px;
  --chart-aspect-ratio-default: 2/1;
  --chart-aspect-ratio-square: 1/1;

  /* ============================================
     RESPONSIVE BREAKPOINTS
     ============================================ */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Container max-widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;
}
