:root {
  --color-paper: #f4f1ea;
  --color-surface: #ffffff;
  --color-graphite: #16181b;
  --color-graphite-soft: #1f2226;
  --color-steel: #5c6168;
  --color-line: #d8d2c6;
  --color-line-strong: #c4bcae;
  --color-copper: #e56e00;
  --color-copper-hover: #c85e00;
  --color-copper-text: #8a3c00;
  --color-cta: #c24f00;
  --color-cta-hover: #9a3f00;
  --color-whatsapp: #0e7368;
  --color-whatsapp-hover: #0b5c54;
  --color-text: #1c1e21;
  --color-text-invert: #f4f1ea;
  --color-muted: #5c6168;
  --color-danger: #9b2c2c;
  --color-success: #1f6b4a;
  --color-overlay: rgba(16, 17, 19, 0.62);
  --color-overlay-strong: rgba(16, 17, 19, 0.78);

  --font-display: "Outfit", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;

  --lh-tight: 1.2;
  --lh-body: 1.6;

  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;

  --radius-sm: 6px;
  --radius-md: 12px;

  --shadow-soft: 0 10px 28px rgba(22, 24, 27, 0.06);
  --shadow-none: none;

  --container: 72rem;
  --header-h: 4.5rem;
  --bar-h: 4.25rem;

  --z-header: 40;
  --z-overlay: 50;
  --z-lightbox: 60;
  --z-bar: 45;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;
  --dur-slow: 250ms;

  --focus: 0 0 0 2px var(--color-paper), 0 0 0 5px var(--color-copper);
}

@media (max-width: 719px) {
  :root {
    --text-3xl: 1.75rem;
    --text-4xl: 1.85rem;
    --header-h: 4rem;
  }
}