/* assets/css/variables.css */

:root {
  /* Font Families */
  --font-primary: 'DM Sans', sans-serif;
  
  /* Brand Colors */
  --color-blue: #0082FB;
  --color-blue-dark: #0056B3;
  --color-green: #72C02C;
  --color-green-dark: #518A1D;
  
  /* Gradients */
  --gradient-blue: linear-gradient(135deg, #00C6FF 0%, #0072FF 100%);
  --gradient-green: linear-gradient(135deg, #A2D24B 0%, #72C02C 100%);
  --gradient-brand: linear-gradient(135deg, #0082FB 0%, #72C02C 100%);
  --gradient-brand-hover: linear-gradient(135deg, #0072FF 0%, #518A1D 100%);
  
  /* Shared Layout Constants */
  --header-height: 80px;
  --container-width: 1200px;
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* Dark Theme Colors (Default) */
  --color-bg: #0A0F1D;
  --color-bg-alt: #111827;
  --color-bg-card: rgba(17, 24, 39, 0.7);
  --color-bg-nav: rgba(10, 15, 29, 0.8);
  
  --color-text: #F3F4F6;
  --color-text-muted: #D1D5DB;
  --color-text-light: #9CA3AF;
  --color-text-on-brand: #FFFFFF;
  
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-shadow-hover: rgba(0, 0, 0, 0.5);
  
  --glass-bg: rgba(17, 24, 39, 0.45);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-blur: 15px;
}