:root {
  /* ── Surfaces ── */
  --fog:    #e3f3f7;
  --anchor: #162428;

  /* ── Brand ── */
  --teal: #188089;

  /* ── Accents ── */
  --amber:     #e87e0e;
  --whatsapp:  #21bd5a;

  /* ── Text ── */
  --text:  var(--anchor);
  --muted: #4b6e75;

  /* ── Borders ── */
  --line-teal: rgba(24, 128, 137, 0.14);
  --line-dark: rgba(22, 36, 40, 0.1);

  /* ── Typography ── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-quiz:    'DM Sans', sans-serif;

  /* ── Radius ── */
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   18px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── Spacing ── */
  --sp-xs:  6px;
  --sp-sm:  14px;
  --sp-md:  22px;
  --sp-lg:  44px;
  --sp-xl:  80px;
  --sp-2xl: 120px;
}