/* variables.css */
:root {
  /* Fonts */
  --font-heading: 'Poppins', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Colors */
  --primary-color: #0B5ED7;
  --primary-hover: #0a58ca;
  --dark-color: #063970;
  --accent-color: #00CFFF;
  --accent-hover: #00b0d8;
  
  /* System-adapting colors via light-dark() */
  --bg-color: light-dark(#F8FAFC, #080D1A);
  --bg-gradient: light-dark(linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%), linear-gradient(135deg, #080D1A 0%, #020617 100%));
  
  --text-primary: light-dark(#0F172A, #F8FAFC);
  --text-secondary: light-dark(#475569, #94A3B8);
  --text-muted: light-dark(#64748B, #64748B);
  
  --card-bg: light-dark(rgba(255, 255, 255, 0.75), rgba(15, 23, 42, 0.65));
  --card-border: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08));
  --card-shadow: light-dark(0 10px 30px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.3));
  
  --navbar-bg: light-dark(rgba(255, 255, 255, 0.8), rgba(8, 13, 26, 0.8));
  --navbar-border: light-dark(rgba(226, 232, 240, 0.8), rgba(255, 255, 255, 0.05));
  
  --input-bg: light-dark(rgba(255, 255, 255, 0.9), rgba(15, 23, 42, 0.8));
  --input-border: light-dark(#CBD5E1, rgba(255, 255, 255, 0.1));
  --input-focus-border: #0B5ED7;

  /* Spacing & Sizing */
  --container-width: 1320px;
  --content-width: 1200px;
  
  --section-padding: clamp(60px, 8vw, 100px);
  --section-padding-mobile: 40px;
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base configuration targeting light/dark mode triggers */
html {
  color-scheme: light dark;
}

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-body);
}