/* =============================================================================
   variables.css - All global CSS variables for Story Manager
   
   ⚠️ SINGLE SOURCE OF TRUTH - DO NOT DUPLICATE VARIABLES IN OTHER FILES
   
   This file defines all CSS custom properties (variables) used across the
   application. All other CSS files should reference these variables using
   var(--variable-name) syntax.
   
   Exception: accessibility.css overrides variables in media queries for
   high contrast mode and reduced motion - this is intentional.
   
   Updated for WCAG 2.2 color contrast compliance
   ============================================================================= */
:root {
  /* Brand Colors - WCAG 2.2 AA compliant */
  --brand-blue: #005fcc;
  --brand-blue-hover: #004aad;
  --brand-green: #28a745;
  --brand-green-hover: #218838;
  
  /* Text Colors - WCAG 2.2 AA compliant */
  --text-dark: #212529; /* 4.5:1+ contrast on white */
  --text-muted: #6c757d; /* Updated from #495057 for better contrast - 4.5:1+ on white */
  --text-muted-dark: #495057; /* For use on light gray backgrounds */
  --text-light: #ffffff; /* For use on dark backgrounds */
  
  /* Background Colors */
  --bg-light-gray: #f8f9fa;
  --bg-lighter-gray: #eef2f5;
  --bg-white: #ffffff;
  
  /* Focus and Accessibility */
  --focus-outline: #005fcc;
  --focus-outline-width: 3px;
  --focus-outline-offset: 2px;
  
  /* Font size variables */
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.25rem;
  --font-size-heading: 1.5rem;
  --font-size-title: 1.125rem;
  --font-size-subtitle: 1rem;
  --font-size-icon: 1em;
  
  /* Panel scaling variables */
  --panel-scale: 1;
  --panel-min-width: 180px;
  --panel-max-width: 400px;
  --panel-min-height: 200px;
  --panel-font-scale: 1;
  --panel-padding-scale: 1;
  --panel-gap-scale: 1;
  
  /* Minimum sizes for accessibility */
  --min-font-size: 0.75rem;
  --min-button-size: 32px;
  --min-touch-target: 44px;
  
  /* WCAG 2.2 Compliant Color Combinations */
  /* Light Theme */
  --text-on-white: #212529; /* 4.5:1+ contrast */
  --text-on-light-gray: #495057; /* 4.5:1+ contrast on #f8f9fa */
  --text-on-card: #212529; /* 4.5:1+ contrast on white cards */
  
  /* Dark Theme */
  --text-on-dark: #ffffff; /* 4.5:1+ contrast on dark backgrounds */
  --text-muted-on-dark: #b8c2cc; /* 4.5:1+ contrast on dark backgrounds */
  
  /* Status Colors - WCAG 2.2 AA compliant */
  --success-text: #155724; /* 4.5:1+ contrast on #d4edda */
  --success-bg: #d4edda;
  --warning-text: #856404; /* 4.5:1+ contrast on #fff3cd */
  --warning-bg: #fff3cd;
  --danger-text: #721c24; /* 4.5:1+ contrast on #f8d7da */
  --danger-bg: #f8d7da;
  --info-text: #0c5460; /* 4.5:1+ contrast on #d1ecf1 */
  --info-bg: #d1ecf1;
}