:root {
  --color-teal: #0b3d4a;
  --color-teal-deep: #072a33;
  --color-cyan: #2bb8c8;
  --color-cyan-soft: #7ed4de;
  --color-bg: #f5f8f9;
  --color-bg-alt: #e8f1f3;
  --color-surface: #ffffff;
  --color-text: #142226;
  --color-text-muted: #5a6d73;
  --color-border: rgba(11, 61, 74, 0.12);
  --color-overlay: rgba(7, 42, 51, 0.55);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --container: 1180px;
  --header-h: 80px;
  --radius: 4px;
  --radius-lg: 12px;
  --shadow: 0 16px 40px rgba(11, 61, 74, 0.1);
  --transition: 0.3s ease;
}

$bp-lg: 1024px;
$bp-md: 768px;
$bp-sm: 480px;