/* ===================================================================
   DESIGN TOKENS
   ===================================================================
   Single source of truth for all design tokens (colors, gradients, shadows, etc.)
   Used by both Tailwind @theme and legacy CSS classes.
   
   🔒 DESIGN SYSTEM LOCKED - See DESIGN_SYSTEM.md for complete style guide
   =================================================================== */

:root {
  /* ===================================================================
     PRIMARY BRAND COLORS
     =================================================================== */
  --color-primary: #2C7AA1;           /* Primary rich blue - main CTA */
  --color-primary-dark: #236082;      /* Darkened for hover / active / gradient depth */
  
  /* Success Green (teal-aligned) */
  --color-success: #2CA18E;          /* Deep teal for success states */
  --color-success-dark: #238272;     /* Deeper teal for hover / active */
  
  /* Amber / Warning (warm contrast to cool palette) */
  --color-warning: #D9A12C;          /* Golden amber for highlight / warning */
  --color-warning-dark: #B8872A;     /* Darker amber for hover / strong warning */
  
  /* Danger / Destructive */
  --color-danger: #A12C40;           /* Deep red aligned with palette */
  --color-danger-dark: #832334;      /* Darker red for hover / active */
  
  /* Purple (accent for special emphasis) */
  --color-purple: #2C40A1;           /* Navy-purple from analogous palette */
  --color-purple-dark: #232F7A;      /* Darker navy-purple for hover / active */
  
  /* ===================================================================
     BACKGROUND COLORS
     =================================================================== */
  --color-navy: #1A2B3C;             /* Sidebar background (charcoal-navy) */
  --color-navy-light: #243A4D;       /* Slightly lighter navy, hover/active */
  --color-surface: #F8FAFB;          /* Page background (cool gray-white) */
  --color-panel: #FFFFFF;            /* Cards / panel foreground */
  --color-panel-alt: #EEF4F7;        /* Sub-panel / hover card background (teal-tinted) */
  
  /* ===================================================================
     TEXT COLORS
     =================================================================== */
  --color-text: #1A2B3C;             /* Main headings/body text (matches navy) */
  --color-text-dim: #5A6B7C;         /* Secondary/subtext (mid-gray with blue undertone) */
  --color-text-light: #E8F0F4;       /* Text on dark sidebar */
  --color-stroke: #D4E0E8;           /* Table/grid borders and dividers (cool-tinted) */

  /* ===================================================================
     BORDER RADIUS
     =================================================================== */
  --radius-base: 6px;
  
  /* ===================================================================
     GRADIENTS
     =================================================================== */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
  --gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
  --gradient-panel: linear-gradient(180deg, var(--color-panel) 0%, var(--color-panel-alt) 100%);
}

/* ===================================================================
   DARK MODE OVERRIDES
   =================================================================== */
.dark {
  --color-surface: #1A2B3C;           /* Charcoal navy (matches --color-navy) */
  --color-panel: #243A4D;             /* Slightly lighter navy for cards */
  --color-panel-alt: #142230;         /* Deeper navy for nested panels */
  --color-text: #E8F0F4;              /* Cool off-white (matches --color-text-light) */
  --color-text-dim: #8A9BAC;          /* Muted blue-gray for secondary text */
  --color-stroke: #2E4A5E;            /* Blue-tinted border color */
}