:root {
  /* ---- Brand color tokens (strict palette — do not extend) ---- */
  --color-white: #ffffff;
  --color-charcoal: #2e2e2e;
  --color-black: #000000;
  --color-turquoise: #01c7b8;
  --color-turquoise-hover: #04ded0;

  /* Alpha derivatives of the four tokens above — used for scrims, borders,
     focus rings. Not new hues, just transparency of the approved palette. */
  --scrim-black-15: rgba(0, 0, 0, 0.15);
  --scrim-black-30: rgba(0, 0, 0, 0.3);
  --scrim-black-45: rgba(0, 0, 0, 0.45);
  --scrim-black-60: rgba(0, 0, 0, 0.6);
  --scrim-black-78: rgba(0, 0, 0, 0.78);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-14: rgba(255, 255, 255, 0.14);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-85: rgba(255, 255, 255, 0.85);
  --turquoise-25: rgba(1, 199, 184, 0.25);
  --turquoise-45: rgba(1, 199, 184, 0.45);

  /* ---- Typography — DM Sans exclusively, three weights ---- */
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 700;

  --text-eyebrow: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
  --text-h1: clamp(2.25rem, 1.55rem + 3.4vw, 4.5rem);
  --text-display: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
  --text-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --text-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --text-stat: clamp(2.25rem, 1.75rem + 2.2vw, 3.5rem);
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-nav: 0.9375rem;
  --text-button: 0.9375rem;
  --text-counter: 0.8125rem;

  /* ---- Spacing scale (4/8 rhythm) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 650ms;
  --hero-interval: 6000ms;
  --hero-fade: 1100ms;

  /* ---- Layout ---- */
  --header-height: 88px;
  --header-height-mobile: 68px;
  --content-max: 78rem;
  --hero-cut: clamp(28px, 6vw, 90px);

  /* ---- Elevation / z-index ---- */
  --z-header: 50;
  --z-whatsapp-float: 55;
  --z-hero-controls: 20;
  --z-hero-content: 10;
  --z-hero-media: 1;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* Focus ring color. Turquoise reads fine on dark surfaces but fails
     contrast on white (2.1:1) -- light-background sections override this
     to charcoal (13.6:1). See base.css :focus-visible. */
  --focus-color: var(--color-turquoise);
}

@media (max-width: 640px) {
  :root {
    --header-height: var(--header-height-mobile);
  }
}