:root {
  --color-brand: #2a7faa;
  --color-brand-light: #3a95c4;
  --color-brand-dark: #1e5a7d;
  --color-brand-darker: #0b2436;
  --color-text: #374151;
  --color-text-light: #6b7280;
  --color-text-dark: #1f2937;
  --color-text-white: #ffffff;
  --color-text-white-muted: rgba(255, 255, 255, 0.85);
  --color-text-white-dim: rgba(255, 255, 255, 0.7);
  --color-bg: #ffffff;
  --color-bg-alt: #f9fafb;
  --color-bg-hero: var(--color-brand-darker);
  --color-bg-footer: var(--color-brand-darker);
  --color-card-bg: #ffffff;
  --color-card-border: #e5e7eb;
  --color-card-shadow: rgba(0, 0, 0, 0.1);
  --color-card-hover-border: var(--color-brand);
  --color-error: #ef4444;
  --color-border: #e5e7eb;
  --color-border-light: rgba(255, 255, 255, 0.15);
  --color-border-footer: #334155;
  --color-icon-bg: #f1f5f9;
  --color-icon: var(--color-brand);
  --color-accent-light: #93c5fd;
  --color-overlay-dark: rgba(0, 0, 0, 0.5);
  --color-overlay-blur: blur(6px);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --radius: 0.75rem;
  --radius-lg: 1.5rem;
  --radius-full: 999px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

.container {
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .container {
    padding: 0 5rem;
  }
}