/* ==========================================================================
   SnowBills - Dark Theme CSS
   Modern Dark Theme with Complete Coverage
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES - DARK THEME
   ========================================================================== */

:root {
  /* Dark Theme Colors */
  --bg-primary: #0f1419;
  --bg-secondary: #1a202c;
  --bg-tertiary: #2d3748;
  --bg-card: #1e2532;
  --bg-hover: #2a3441;
  --bg-active: #323a4a;
  --bg-glass: rgba(30, 37, 50, 0.8);
  --bg-input: #2d3748;
  --bg-modal: #1e2532;
  
  --text-primary: #ffffff;
  --text-secondary: #cbd5e0;
  --text-muted: #a0aec0;
  --text-accent: #81c5f4;
  --text-light: #e2e8f0;
  
  --border-primary: #374151;
  --border-secondary: #4a5568;
  --border-accent: #4299e1;
  --border-light: #2d3748;
  
  /* Brand Colors */
  --color-primary: #4299e1;
  --color-primary-dark: #3182ce;
  --color-primary-light: #63b3ed;
  --color-secondary: #48bb78;
  --color-success: #48bb78;
  --color-warning: #ed8936;
  --color-danger: #f56565;
  --color-info: #4299e1;
  
  /* Semantic Colors */
  --snowflake-blue: #4fc3f7;
  --debt-red: #e53e3e;
  --success-green: #38a169;
  --warning-orange: #dd6b20;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  --gradient-secondary: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  --gradient-danger: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
  --gradient-card: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
  --gradient-modal: linear-gradient(135deg, var(--bg-modal) 0%, var(--bg-card) 100%);
  
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.25), 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(66, 153, 225, 0.3);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
  
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  
  /* Z-Index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-toast: 1050;
  --z-tooltip: 1060;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}