/* ===========================================================
   88 SURF — Design tokens
   Direção visual (ver CLAUDE.md para detalhe):
   Mar e horizonte de Torres/RS: azul-mar profundo + turquesa de
   água rasa sobre areia clara, com um acento quente (pôr do sol
   nos Molhes) só em detalhes/CTA. Editorial, sóbrio, confiável —
   não "resort de luxo", e sim autoridade local de quem manda no pico.
   =========================================================== */
:root {
  /* Paleta de marca */
  --color-mar: #0b4f6c;
  --color-mar-escuro: #073347;
  --color-turquesa: #1c9099;
  --color-turquesa-clara: #3bb6c7;
  --color-areia: #f2e9d8;
  --color-areia-clara: #f8f2e6;
  --color-branco: #ffffff;
  --color-grafite: #1a1a1a;
  --color-acento: #f2785c;
  --color-acento-escuro: #d85f45;

  /* Papéis semânticos */
  --color-bg: var(--color-areia-clara);
  --color-bg-alt: var(--color-areia);
  --color-bg-escuro: var(--color-mar-escuro);
  --color-text: var(--color-grafite);
  --color-text-sobre-escuro: var(--color-areia-clara);
  --color-text-suave: #4a4a4a;
  --color-borda: rgba(26, 26, 26, 0.12);
  --color-borda-clara: rgba(255, 255, 255, 0.2);

  /* Tipografia */
  --font-title: "Fraunces", "Palatino", "Georgia", serif;
  --font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container-max: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 18px 40px -16px rgba(7, 51, 71, 0.35);
  --shadow-sm: 0 6px 18px -8px rgba(7, 51, 71, 0.25);

  /* Transições */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}