:root {
  /* Colors */
  --color-primary: #1260cc;
  --color-primary-hover: #0c4da7;
  --color-primary-light: #e8f1fd;
  --color-accent: #1e88e5;
  --color-accent-glow: rgba(30, 136, 229, 0.4);
  --color-navy: #284775;
  --color-navy-hover: #1c3355;
  --color-dark: #1e293b;
  --color-text-main: #2b3648;
  --color-text-muted: #5e6d82;
  --color-text-light: #8896ab;
  --color-white: #ffffff;
  
  /* Backgrounds */
  --bg-body: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.75);
  --bg-glass-nav: rgba(255, 255, 255, 0.88);
  --bg-pill: rgba(255, 255, 255, 0.92);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #1677ff 0%, #0052d9 100%);
  --grad-navy: linear-gradient(135deg, #2d4e7d 0%, #1c3558 100%);
  --grad-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
  --grad-badge: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 96, 204, 0.12);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.15);
  --shadow-video: 0 25px 60px -12px rgba(18, 50, 95, 0.28);
  --shadow-glow: 0 0 25px rgba(22, 119, 255, 0.45);

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Typography */
  --font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}