/**
 * Design System Variables
 * Professional Financial Sector Color Palette and Design Tokens
 * Based on existing landing.css color system
 */

:root {
  /* Primary Colors - Professional Financial Green */
  --primary-green: #4a7c59;
  --primary-green-dark: #3d6849;
  --primary-green-light: #5a8c69;
  --primary-green-subtle: rgba(74, 124, 89, 0.1);
  
  /* Secondary Colors - Accent Colors */
  --secondary-orange: #f59e0b;
  --secondary-orange-dark: #d97706;
  --secondary-orange-subtle: rgba(245, 158, 11, 0.1);
  --secondary-purple: #8b5cf6;
  --secondary-blue: #3b82f6;
  --secondary-red: #ef4444;
  
  /* Text Colors - Professional Hierarchy */
  --text-primary: #1f2937;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  --text-white: #ffffff;
  
  /* Background Colors - Clean and Professional */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-dark: #1f2937;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Border Colors - Subtle and Clean */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-focus: var(--primary-green);
  --border-error: var(--secondary-red);
  --border-success: var(--primary-green);
  
  /* Status Colors - Clear Visual Feedback */
  --status-success: var(--primary-green);
  --status-warning: var(--secondary-orange);
  --status-error: var(--secondary-red);
  --status-info: var(--secondary-blue);
  --status-neutral: var(--text-muted);
  
  /* Shadow System - Professional Depth */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px rgba(74, 124, 89, 0.1);
  
  /* Border Radius - Modern and Consistent */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Spacing System - Compact Financial Sector Design */
  --space-xs: 0.125rem;  /* 2px - Ultra compact */
  --space-sm: 0.25rem;   /* 4px - Minimal spacing */
  --space-md: 0.5rem;    /* 8px - Standard spacing */
  --space-lg: 0.75rem;   /* 12px - Medium spacing */
  --space-xl: 1rem;      /* 16px - Large spacing */
  --space-2xl: 1.25rem;  /* 20px - Extra large */
  --space-3xl: 1.5rem;   /* 24px - Section spacing */
  --space-4xl: 2rem;     /* 32px - Major sections */
  --space-5xl: 2.5rem;   /* 40px - Page sections */
  
  /* Typography Scale - Financial Sector Professional */
  --font-size-xs: 0.6875rem;  /* 11px - Dense data */
  --font-size-sm: 0.75rem;    /* 12px - Standard body */
  --font-size-base: 0.8125rem; /* 13px - Primary text */
  --font-size-lg: 0.875rem;   /* 14px - Headings */
  --font-size-xl: 1rem;       /* 16px - Large headings */
  --font-size-2xl: 1.125rem;  /* 18px - Section titles */
  --font-size-3xl: 1.25rem;   /* 20px - Page titles */
  --font-size-4xl: 1.5rem;    /* 24px - Main titles */
  
  /* Navigation Typography - Preserve Landing Page Sizes */
  --nav-font-size-base: 1rem;     /* 16px - Navigation links (original size) */
  --nav-font-size-brand: 1.25rem; /* 20px - Brand text (original size) */
  --nav-font-size-dropdown: 0.9375rem; /* 15px - Dropdown items */
  
  /* Font Weights - Clear Hierarchy */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights - Optimal Readability */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  
  /* Font Families - Professional Typography */
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  
  /* Z-Index Scale - Proper Layering */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  
  /* Transition System - Smooth and Professional */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* Component Sizes - Compact Financial Interface */
  --button-height-sm: 28px;
  --button-height-md: 32px;
  --button-height-lg: 36px;
  --input-height-sm: 28px;
  --input-height-md: 32px;
  --input-height-lg: 36px;
  
  /* Breakpoints - Responsive Design */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* Component Variable Aliases for CSS Files */
  /* These aliases ensure component CSS files work with the correct variable names */
  
  /* Color System - Primary Colors */
  --color-primary-400: var(--primary-green-light);
  --color-primary-500: var(--primary-green);
  --color-primary-600: var(--primary-green-dark);
  
  /* Color System - Secondary Colors */
  --color-orange-500: var(--secondary-orange);
  --color-orange-600: var(--secondary-orange-dark);
  --color-orange-100: var(--secondary-orange-subtle);
  
  /* Color System - Status Colors */
  --color-success-500: var(--status-success);
  --color-warning-500: var(--status-warning);
  --color-error-500: var(--status-error);
  --color-info-500: var(--status-info);
  
  /* Color System - Text Colors */
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-light: var(--text-light);
  --color-text-inverse: var(--text-white);
  
  /* Color System - Background Colors */
  --color-bg-primary: var(--bg-primary);
  --color-bg-secondary: var(--bg-secondary);
  --color-bg-tertiary: var(--bg-tertiary);
  
  /* Color System - Border Colors */
  --color-border-primary: var(--border-primary);
  --color-border-secondary: var(--border-secondary);
  
  /* Spacing System - Numbered Scale */
  --spacing-1: var(--space-xs);    /* 4px */
  --spacing-2: var(--space-sm);    /* 8px */
  --spacing-3: var(--space-md);    /* 12px */
  --spacing-4: var(--space-lg);    /* 16px */
  --spacing-5: var(--space-xl);    /* 20px */
  --spacing-6: var(--space-2xl);   /* 24px */
  --spacing-8: var(--space-3xl);   /* 32px */
  --spacing-10: var(--space-4xl);  /* 40px */
  --spacing-12: var(--space-5xl);  /* 48px */
  
  /* Legacy spacing aliases for backward compatibility */
  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
  --spacing-2xl: var(--space-2xl);
  --spacing-3xl: var(--space-3xl);
  --spacing-4xl: var(--space-4xl);
  --spacing-5xl: var(--space-5xl);
  
  /* Legacy border aliases */
  --border-radius: var(--radius-md);
  --border-radius-sm: var(--radius-sm);
  --border-radius-lg: var(--radius-lg);
  --border-radius-xl: var(--radius-xl);
  
  /* Legacy color aliases for backward compatibility */
  --color-primary: var(--primary-green);
  --color-primary-dark: var(--primary-green-dark);
  --color-primary-light: var(--primary-green-light);
  --color-secondary: var(--secondary-orange);
  --color-secondary-dark: var(--secondary-orange-dark);
  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-error: var(--status-error);
  --color-info: var(--status-info);
  
  /* Legacy background aliases */
  --color-background-light: var(--bg-secondary);
  --color-background-hover: var(--bg-tertiary);
  --color-border-light: var(--border-primary);
}

/* Dark Mode Support (Future Enhancement - not yet implemented) */
/* Intentionally disabled: dark mode overrides are not yet supported.
   Enabling this block causes unintended dark backgrounds for users
   whose OS/browser is set to dark mode. Re-enable when dark mode
   is fully designed and implemented across all modules. */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-muted: #9ca3af;
    --text-light: #6b7280;
    
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    
    --border-primary: #374151;
    --border-secondary: #4b5563;
  }
}
*/

/* High Contrast Mode Support (Accessibility) */
@media (prefers-contrast: high) {
  :root {
    --border-primary: #000000;
    --text-muted: var(--text-primary);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  }
}

/* Reduced Motion Support (Accessibility) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
  }
}