:root {
  --canvas: #f4f4f6;
  --canvas-warm: #f8f8fa;
  --white: #ffffff;
  --panel: #efefef;
  --ink: #171717;
  --mute: #9a9aa0;
  --body: #5c5c63;
  --line: rgba(23, 23, 23, 0.09);
  --line-strong: rgba(23, 23, 23, 0.14);
  --hot: #c45b4a;
  --vault: #6f8f86;
  --focus: #171717;

  --font: "Plus Jakarta Sans", "Segoe UI", sans-serif;

  --header-height: 3.85rem;
  --touch-min: 44px;
  --radius-card: 1.35rem;
  --radius-media: 1.6rem;
  --radius-input: 0.9rem;

  --container: 80rem;
  --container-wide: 86rem;
  --pad-x: clamp(1.15rem, 3.2vw, 2.75rem);
  --section-gap: clamp(3.75rem, 7vw, 6rem);

  --text-hero: clamp(2.55rem, 6.8vw, 4.4rem);
  --text-display: clamp(2.15rem, 5.2vw, 3.65rem);
  --text-h2: clamp(1.85rem, 3.6vw, 2.75rem);
  --text-h3: clamp(1.15rem, 1.6vw, 1.45rem);
  --text-body: 1.0625rem;
  --text-small: 0.8125rem;
  --text-email: clamp(1.55rem, 4.4vw, 3.15rem);

  --shadow-media: 0 22px 48px rgba(23, 23, 23, 0.1);
  --ease: cubic-bezier(0.22, 1, 0.32, 1);
}

@media (max-width: 767px) {
  :root {
    --text-hero: clamp(2rem, 8.6vw, 2.45rem);
    --text-display: clamp(1.65rem, 6.8vw, 2.1rem);
    --text-h2: clamp(1.5rem, 6vw, 1.85rem);
    --section-gap: clamp(2.6rem, 8vw, 3.6rem);
  }
}

html {
  scroll-padding-top: calc(var(--header-height) + 0.75rem);
}