:root {
  --costasol-navy-deep: #0c2c48;
  --costasol-navy: #123b60;
  --costasol-turquoise: #168eaa;
  --costasol-turquoise-soft: #dff2f5;
  --costasol-orange: #f39a18;
  --costasol-ink: #17283a;
  --costasol-muted: #5f6f7e;
  --costasol-light: #f3f6f8;
  --costasol-line: #d9e2e7;
  --costasol-white: #ffffff;
  --costasol-error: #a32020;
  --costasol-success: #176b43;

  --costasol-font-sans: "Geist", "Segoe UI", Arial, sans-serif;
  --costasol-text-base: clamp(1rem, 0.25vw + 0.96rem, 1.125rem);
  --costasol-leading-body: 1.65;

  --costasol-container: 1280px;
  --costasol-gutter: 24px;
  --costasol-section-space: clamp(4.5rem, 6vw, 5.875rem);
  --costasol-section-space-mobile: 3.75rem;

  --costasol-radius-control: 8px;
  --costasol-radius-card: 14px;
  --costasol-shadow-card: 0 13px 34px rgba(12, 44, 72, 0.07);
  --costasol-shadow-card-hover: 0 20px 42px rgba(12, 44, 72, 0.12);
  --costasol-shadow-menu: 0 20px 45px rgba(12, 44, 72, 0.16);

  --costasol-focus: 0 0 0 3px rgba(22, 142, 170, 0.18);
  --costasol-transition: 180ms ease;
}

@media (max-width: 1180px) {
  :root {
    --costasol-container: 1080px;
    --costasol-gutter: 20px;
  }
}

@media (max-width: 940px) {
  :root {
    --costasol-gutter: 18px;
    --costasol-section-space: var(--costasol-section-space-mobile);
  }
}

@media (max-width: 520px) {
  :root {
    --costasol-gutter: 14px;
  }
}