/* --- Design Tokens (Modern Unified Color Scheme) --- */
:root {
  /* Primary Palette - Brand Colors */
  --primary-900: #383E54;
  --primary-700: #2D3748;
  --primary-500: #4A5568;
  --primary-100: #EDF2F7;

  /* Accent Palette - Unified Teal (Complete Scale) */
  --accent-700: #005F8A;
  --accent-600: #0077B6;
  --accent-500: #0096C7;
  --accent-400: #00B4D8;
  --accent-300: #48CAE4;
  --accent-200: #90E0EF;
  --accent-100: #CAF0F8;
  --accent-50: #E0F7FA;

  /* Neutral Palette - Enhanced Contrast Gray Scale
     Adjusted for better visibility of borders/dividers against white backgrounds */
  --neutral-900: #111827;
  --neutral-800: #1F2937;
  --neutral-700: #374151;
  --neutral-600: #4B5563;
  --neutral-500: #6B7280;
  --neutral-400: #8891A0;
  --neutral-300: #B0B8C4;
  --neutral-200: #D1D5DB;
  --neutral-100: #F1F5F9;
  --neutral-50: #FFFFFF;

  /* Priority Colors - Semantic Status Indicators
     Design Decision: Colors map to urgency/attention levels:
     - High (Red): Critical, requires immediate attention
     - Medium (Amber): Moderate priority, review soon
     - Standard (Green): Active/on-track, proceeding normally
     - Low (Blue): Informational, lower urgency
     - None (Gray): Inactive, archived, or no priority assigned
  */
  --priority-high: #DC2626;
  --priority-high-bg: #FEE2E2;
  --priority-high-text: #B91C1C;
  --priority-high-marker: #DC2626;

  /* Medium Priority - Amber (new tier for moderate urgency) */
  --priority-medium: #F59E0B;
  --priority-medium-bg: #FEF3C7;
  --priority-medium-text: #B45309;
  --priority-medium-marker: #F59E0B;

  /* Standard/Normal - Green indicates "on track" or "active" status */
  --priority-normal: #10B981;
  --priority-normal-bg: #D1FAE5;
  --priority-normal-text: #047857;
  --priority-normal-marker: #10B981;
  /* Semantic alias for clarity */
  --priority-standard: var(--priority-normal);
  --priority-standard-bg: var(--priority-normal-bg);
  --priority-standard-text: var(--priority-normal-text);

  --priority-low: #3B82F6;
  --priority-low-bg: #DBEAFE;
  --priority-low-text: #1D4ED8;
  --priority-low-marker: #3B82F6;

  --priority-none: #9CA3AF;
  --priority-none-bg: #F3F4F6;
  --priority-none-text: #6B7280;
  --priority-none-marker: #9CA3AF;

  --priority-null-bg: #F9FAFB;
  --priority-null-text: #9CA3AF;
  --priority-null-border: #E5E7EB;
  --priority-null-marker: #D1D5DB;

  /* Warning Colors - Caution/Attention States */
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --warning-text: #B45309;
  --warning-border: #FCD34D;

  /* Semantic Colors */
  --color-star: #FFC107;
  --color-star-empty: var(--neutral-300);

  /* Spacing Scale (4px base unit) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Semantic Spacing Aliases */
  --spacing-section: var(--space-8);      /* 32px - Major section separation */
  --spacing-subsection: var(--space-6);   /* 24px - Subsection separation */
  --spacing-element: var(--space-4);      /* 16px - Element spacing */
  --spacing-tight: var(--space-2);        /* 8px - Tight spacing */
  --spacing-micro: var(--space-1);        /* 4px - Micro spacing */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Typography Scale */
  --font-size-2xs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 32px;
  --font-size-5xl: 36px;
  --font-size-6xl: 40px;
  --font-size-7xl: 48px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Interactive States */
  --state-hover-bg: #F7FAFC;
  --state-active-bg: var(--accent-600);
  --state-focus-ring: 0 0 0 3px rgba(0, 119, 182, 0.2);
  --state-focus-ring-accent: 0 0 0 3px rgba(0, 150, 199, 0.3);
  --state-disabled: #CBD5E0;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.15);

  /* Overlays */
  --overlay-bg: rgba(0, 0, 0, 0.5);
}