/* ============================================
   ALGORA Design System Variables
   508 Compliant - Light Color Scheme
   ============================================ */

:root {
  /* Primary Colors - Lighter teal with proper contrast */
  --color-primary: #0D7377;
  --color-primary-dark: #095456;
  --color-primary-light: #14919B;
  --color-primary-subtle: #E6F4F5;
  
  /* Secondary - Warm coral/orange for CTAs */
  --color-secondary: #D35F2D;
  --color-secondary-dark: #B24A1E;
  --color-secondary-light: #E8855C;
  
  /* Accent - Gold for highlights */
  --color-accent: #B8860B;
  --color-accent-light: #F5E6C8;
  
  /* Neutrals - Higher contrast ratios */
  --color-dark: #1F2937;
  --color-dark-light: #374151;
  --color-gray-900: #1F2937;
  --color-gray-700: #374151;
  --color-gray-600: #4B5563;
  --color-gray-500: #6B7280;
  --color-gray-400: #9CA3AF;
  --color-gray-300: #D1D5DB;
  --color-gray-200: #E5E7EB;
  --color-gray-100: #F3F4F6;
  --color-gray-50: #F9FAFB;
  --color-white: #FFFFFF;
  
  /* Semantic Colors - WCAG AA compliant */
  --color-success: #047857;
  --color-warning: #B45309;
  --color-error: #DC2626;
  --color-info: #0369A1;
  
  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Font Sizes - Fluid typography with minimum sizes for readability */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.075rem + 0.25vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.2rem + 0.25vw, 1.375rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.625rem);
  --text-3xl: clamp(1.875rem, 1.675rem + 1vw, 2rem);
  --text-4xl: clamp(2.25rem, 2rem + 1.25vw, 2.5rem);
  --text-5xl: clamp(2.75rem, 2.25rem + 2.5vw, 3.25rem);
  --text-6xl: clamp(3.25rem, 2.75rem + 2.5vw, 4rem);
  --text-7xl: clamp(3.75rem, 3.25rem + 2.5vw, 4.75rem);
  
  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights - Improved for readability */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  
  /* Container */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Shadows - Softer for light theme */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.2);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-slower: 500ms ease;
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* Focus ring for accessibility */
  --focus-ring: 0 0 0 3px rgba(13, 115, 119, 0.5);
  --focus-ring-offset: 2px;
}