:root {
  --paper: #fbf8f3;
  --white: #ffffff;
  --cream: #f3ebdf;
  --cream-deep: #ebe0d0;
  --stone: #ecebe8;
  --stone-deep: #dfddd9;
  --stone-ink: #b5b1aa;
  --espresso: #2a1c14;
  --espresso-soft: #6a5444;
  --char: #140d09;
  --brand: #e7151a;
  --brand-deep: #c21015;

  --whatsapp: #25d366;
  --whatsapp-hover: #1ebe5b;

  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.86);
  --on-dark-line: rgba(255, 255, 255, 0.22);
  --on-dark-line-strong: rgba(255, 255, 255, 0.7);
  --on-dark-hover: rgba(255, 255, 255, 0.1);
  --line: rgba(42, 28, 20, 0.12);
  --hover: rgba(42, 28, 20, 0.05);
  --flag-ring: rgba(20, 13, 9, 0.18);

  --shade-mid: rgba(12, 8, 5, 0.38);

  --shadow-pop: 0 20px 40px -20px rgba(20, 13, 9, 0.4);
  --shadow-float: 0 10px 24px -8px rgba(12, 8, 5, 0.45);

  --radius-sm: 0.625rem;
  --radius-flag: 3px;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --space-section: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --space-section-sm: clamp(3rem, 2rem + 3.5vw, 5rem);
  --header-h: 4.5rem;
}

@media (min-width: 64rem) {
  :root {
    --header-h: 5.5rem;
  }
}