:root {
  /* Cor — costa mist mais densa (menos “branco hospital”) — tema Atlântico */
  --cor-azul-mar: #0a5270;
  --cor-azul-mar-profundo: #042a38;
  --cor-areia: #d9cfc0;
  --cor-areia-profunda: #b8a48a;
  --cor-espuma: #b9ced6;
  --cor-tinta: #0a1520;
  --cor-tinta-suave: #3d4f5a;
  --cor-papel: #e8eef0;
  --cor-papel-forte: #dce5e9;
  --cor-linha: #b7c5cd;
  --cor-ok: #1b7a4a;
  --cor-alerta: #b8842f;
  --cor-perigo: #b42318;
  --cor-wa: #0f7a6c;

  /* Destaque do H1 no hero (marca fica em --cor-papel) */
  --cor-hero-destaque: #e8c96a;
  --cor-hero-lead: rgba(255, 255, 255, 0.96);
  --hero-titulo-sombra: 0 1px 2px rgba(4, 42, 56, 0.45);

  /* Fundo da página + overlays do hero (redefinidos por tema) */
  --fundo-radial-1: rgba(10, 82, 112, 0.28);
  --fundo-radial-2: rgba(184, 164, 138, 0.35);
  --fundo-grad-ini: #9eb8c4;
  --fundo-grad-meio: #c5d4da;
  --hero-overlay-a: rgba(8, 61, 84, 0.72);
  --hero-overlay-b: rgba(8, 61, 84, 0.28);
  --hero-overlay-c: rgba(8, 61, 84, 0.45);
  --hero-overlay-photo-a: rgba(8, 61, 84, 0.68);
  --hero-overlay-photo-b: rgba(8, 61, 84, 0.22);
  --hero-overlay-photo-c: rgba(8, 61, 84, 0.4);
  --hero-fallback-grad: linear-gradient(145deg, #5f93a8 0%, #8eb6c4 45%, #d2c0a4 100%);

  --espaco-xs: 0.25rem;
  --espaco-sm: 0.5rem;
  --espaco-md: 1rem;
  --espaco-lg: 1.5rem;
  --espaco-xl: 2rem;
  --espaco-2xl: clamp(2.75rem, 6vw, 4.75rem);

  --fonte-corpo: "Source Sans 3", "Source Sans Pro", sans-serif;
  --fonte-display: "Fraunces", Georgia, serif;
  --fonte-hero: "Instrument Serif", "Fraunces", Georgia, serif;

  --raio-sm: 6px;
  --raio-md: 12px;
  --max-conteudo: 72rem;
  --sombra-suave: 0 12px 36px rgba(4, 42, 56, 0.12);
  --sombra-media: 0 20px 52px rgba(4, 42, 56, 0.16);
  --blur-leve: blur(12px);
}

/* Preset Areia — costa clara quente (família Atlântico; sem terracotta/creme brochure) */
.theme-areia {
  --cor-azul-mar: #2a6178;
  --cor-azul-mar-profundo: #0f3848;
  --cor-areia: #e0d5c6;
  --cor-areia-profunda: #c4b39a;
  --cor-espuma: #c5d2ce;
  --cor-tinta: #0e1a20;
  --cor-tinta-suave: #4a5c64;
  --cor-papel: #ebe8e2;
  --cor-papel-forte: #e0dbd2;
  --cor-linha: #c5bfb4;
  --cor-wa: #1a6b5c;
  --cor-hero-destaque: #e6c56e;
  --cor-hero-lead: rgba(255, 252, 248, 0.96);
  --hero-titulo-sombra: 0 1px 2px rgba(15, 56, 72, 0.5);
  --fundo-radial-1: rgba(42, 97, 120, 0.24);
  --fundo-radial-2: rgba(196, 179, 154, 0.36);
  --fundo-grad-ini: #a8b8b4;
  --fundo-grad-meio: #d4cfc4;
  --hero-overlay-a: rgba(15, 56, 72, 0.70);
  --hero-overlay-b: rgba(15, 56, 72, 0.26);
  --hero-overlay-c: rgba(42, 72, 68, 0.42);
  --hero-overlay-photo-a: rgba(15, 56, 72, 0.64);
  --hero-overlay-photo-b: rgba(15, 56, 72, 0.20);
  --hero-overlay-photo-c: rgba(42, 72, 68, 0.38);
  --hero-fallback-grad: linear-gradient(145deg, #6a8f9c 0%, #a8b8a8 45%, #d8cbb8 100%);
  --sombra-suave: 0 12px 36px rgba(15, 56, 72, 0.12);
  --sombra-media: 0 20px 52px rgba(15, 56, 72, 0.16);
}

/* Preset Profundo — atlântico denso / fim de tarde (ouro champagne, sem lima tech) */
.theme-profundo {
  --cor-azul-mar: #0a5c6e;
  --cor-azul-mar-profundo: #021820;
  --cor-areia: #8fa8a0;
  --cor-areia-profunda: #5f7a72;
  --cor-espuma: #6e94a0;
  --cor-tinta: #061018;
  --cor-tinta-suave: #3a5560;
  --cor-papel: #d8e4e8;
  --cor-papel-forte: #c8d8de;
  --cor-linha: #7e99a2;
  --cor-wa: #0f7a6c;
  --cor-hero-destaque: #dcc88a;
  --cor-hero-lead: rgba(235, 248, 252, 0.96);
  --hero-titulo-sombra: 0 1px 2px rgba(2, 24, 32, 0.55);
  --fundo-radial-1: rgba(6, 61, 74, 0.32);
  --fundo-radial-2: rgba(15, 122, 108, 0.18);
  --fundo-grad-ini: #4a6a74;
  --fundo-grad-meio: #7a9aa4;
  --hero-overlay-a: rgba(2, 28, 36, 0.74);
  --hero-overlay-b: rgba(2, 28, 36, 0.28);
  --hero-overlay-c: rgba(2, 28, 36, 0.48);
  --hero-overlay-photo-a: rgba(2, 28, 36, 0.68);
  --hero-overlay-photo-b: rgba(2, 28, 36, 0.22);
  --hero-overlay-photo-c: rgba(2, 28, 36, 0.44);
  --hero-fallback-grad: linear-gradient(145deg, #0a4a58 0%, #3d6e7a 45%, #7a8a78 100%);
  --sombra-suave: 0 12px 36px rgba(2, 24, 32, 0.16);
  --sombra-media: 0 20px 52px rgba(2, 24, 32, 0.22);
}

/* Atlântico explícito (mesmo que :root) — classe no body para consistência */
.theme-atlantico {
  /* herda :root */
}