:root {
  --color-primary: #1D51A4;
  --color-secondary: #0B8BCC;
  --color-accent: #5BBCE6;
  --color-white: #FFFFFF;
  --color-dark: #0A1628;
  --color-dark-card: #111827;
  --color-gray-text: #6B7280;
  --color-gray-mid: #9CA3AF;
  --color-gray-light: #E5E7EB;
  --color-gray-bg: #F3F4F6;
  --color-green: #22C55E;
  --color-green-dark: #16A34A;

  --font-main: 'Manrope', sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --shadow-glow: 0 0 32px rgba(29,81,164,.25);

  --transition: 0.25s cubic-bezier(.4,0,.2,1);

  --container: 1200px;
  --section-py: 80px;
}

@media (max-width: 768px) {
  :root {
    --section-py: 56px;
  }
}