:root {
  --color-primary: #1f4e8c;
  --color-primary-light: #2d6fc2;
  --color-primary-dark: #163b6b;
  --color-primary-darker: #0f2747;

  --color-secondary: #6b7280;
  --color-secondary-light: #9ca3af;
  --color-secondary-dark: #4b5563;

  --color-accent: #3b82f6;

  --color-bg: #ffffff;
  --color-bg-alt: #f5f6f7;

  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;

  --font-title: "Exo 2", sans-serif;
  --font-body: "Exo 2", "Inter", "Montserrat", sans-serif;

  --font-size-title-lg: 2.5rem;
  --font-size-title-md: 2rem;
  --font-size-title-sm: 1.5rem;

  --font-size-body: 1rem;
  --font-size-small: 0.875rem;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 6px 16px rgba(0, 0, 0, 0.15);

  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-light)
  );
}