/* ============================================================
   PALETA DE CORES — único lugar para alterar as cores do site.

   Usada em todas as páginas (index, obrigado, política) e na cor
   da barra do navegador no celular. O style.css só usa estas
   variáveis; não escreva cores direto nele.

   - O bloco :root é a paleta PRINCIPAL (a que todos veem).
   - Os blocos [data-paleta="..."] são alternativas para comparar:
     abra a página com ?paleta=nome (ex.: /?paleta=verde, /obrigado?paleta=verde;
     combina com as fontes: /?paleta=verde&fonte=outfit).
     Sem o ?paleta= no endereço, volta para a principal.
     Eles só trocam o que é diferente da principal.
   - Para adotar uma alternativa: copie os valores dela para o :root.

   Testar sem publicar: npm run dev → http://localhost:8787 → editar → salvar → F5
   Publicar: npm run deploy

   Imagens têm as cores gravadas e precisam ser trocadas à parte:
   assets/img/favicon.svg (--ink e --accent), apple-touch-icon.png e og-image.jpg.
   ============================================================ */

/* ---------- PRINCIPAL: Terra e mar (#5A3211 #964405 #D68631 #3D717E #10475E #0B2839) ---------- */
:root {
  /* Fundos escuros: topo, chamada final, depoimento */
  --ink: #0B2839;
  --ink-2: #10475E;            /* fundo da moldura da foto no "Sobre mim" */
  --glow: color-mix(in srgb, #3D717E 40%, transparent); /* brilho no canto dos fundos escuros */

  /* Destaque */
  --accent: #D68631;           /* rótulos e números sobre fundo escuro */
  --accent-dark: #964405;      /* rótulos, links e ícones (✓) sobre fundo claro */
  --accent-soft: #FBF1E6;      /* fundo do cartão "É para você se…" e dos ícones */
  --accent-line: #EFD2AE;      /* borda do cartão "É para você se…" */
  --highlight: #D68631;        /* palavra destacada nos títulos ("conhecida", "sua empresa") */
  --focus: #3D717E;            /* contorno de foco (teclado) e borda dos campos/cartões ativos */

  /* Botões */
  --button-bg: #D68631;
  --button-text: #0B2839;
  --button-hover: #964405;
  --button-hover-text: #ffffff;
  --button-dark-bg: #D68631;    /* botão sobre fundo escuro (página de obrigado) */
  --button-dark-text: #0B2839;
  --button-dark-hover: color-mix(in srgb, #D68631 80%, white);

  /* Textos sobre fundo claro */
  --text: #1c2733;
  --text-soft: #3d4a58;        /* parágrafos do "Sobre mim" */
  --muted: #5b6878;            /* textos secundários */
  --placeholder: #8a96a3;      /* "Selecione uma opção", ícone ✕ */

  /* Textos sobre fundo escuro */
  --on-color: #ffffff;         /* títulos brancos */
  --on-dark-soft: #C9D7DE;     /* subtítulos */
  --on-dark-muted: #9DB5C1;    /* legenda abaixo do nome da Aline */

  /* Fundos claros e linhas */
  --bg: #ffffff;               /* fundo da página */
  --bg-alt: #FAF5EF;           /* seções alternadas */
  --surface: #ffffff;          /* cartões, formulário, perguntas */
  --neutral-soft: #eef1f4;     /* fundo do ícone ✕ */
  --line: #e3e8ee;             /* bordas */

  /* Rodapé */
  --footer-bg: #5A3211;
  --footer-text: #E6CFB4;
  --footer-strong: #FFF4E6;    /* nome da marca no rodapé */

  /* Erros do formulário */
  --danger: #d13438;
  --danger-line: #e5484d;
  --danger-bg: #fff5f5;
}

/* ---------- ?paleta=verde-azulado  (#063940 #195E63 #3E838C #8EBDB6 #ECE1C3) ---------- */
:root[data-paleta="verde-azulado"] {
  --ink: #063940;
  --ink-2: #195E63;
  --glow: color-mix(in srgb, #3E838C 45%, transparent);
  --accent: #8EBDB6;
  --accent-dark: #195E63;
  --accent-soft: #EAF3F1;
  --accent-line: #C6DFDB;
  --highlight: #ECE1C3;
  --focus: #3E838C;
  --button-bg: #195E63;
  --button-text: #ffffff;
  --button-hover: #063940;
  --button-hover-text: #ECE1C3;
  --button-dark-bg: #ECE1C3;
  --button-dark-text: #063940;
  --button-dark-hover: #8EBDB6;
  --on-dark-soft: #CFE1DE;
  --on-dark-muted: #A9CBC6;
  --bg-alt: #F8F4EA;
  --footer-bg: #032A30;
  --footer-text: #A9CBC6;
  --footer-strong: #ECE1C3;
}

/* ---------- ?paleta=por-do-sol  (#031C30 #5A3546 #B5485F #FC6747 #FA8D3B) ---------- */
:root[data-paleta="por-do-sol"] {
  --ink: #031C30;
  --ink-2: #5A3546;
  --glow: color-mix(in srgb, #B5485F 30%, transparent);
  --accent: #FC6747;
  --accent-dark: #B5485F;
  --accent-soft: #FFF0EB;
  --accent-line: #FCD2C7;
  --highlight: #FA8D3B;
  --focus: #FC6747;
  --button-bg: #FC6747;
  --button-text: #031C30;
  --button-hover: #B5485F;
  --button-hover-text: #ffffff;
  --button-dark-bg: #FC6747;
  --button-dark-text: #031C30;
  --button-dark-hover: #FA8D3B;
  --on-dark-soft: #c3cfdb;
  --on-dark-muted: #9fb0c1;
  --bg-alt: #f5f7fa;
  --footer-bg: #021220;
  --footer-text: #8fa1b3;
  --footer-strong: #dbe4ec;
}

/* ---------- ?paleta=verde  (paleta original) ---------- */
:root[data-paleta="verde"] {
  --ink: #0d1b2a;
  --ink-2: #14263a;
  --glow: color-mix(in srgb, #2fbf8f 18%, transparent);
  --accent: #2fbf8f;
  --accent-dark: #1f9a72;
  --accent-soft: #e6f6f0;
  --accent-line: #bfe8d8;
  --highlight: #2fbf8f;
  --focus: #2fbf8f;
  --button-bg: #2fbf8f;
  --button-text: #06241a;
  --button-hover: #1f9a72;
  --button-hover-text: #ffffff;
  --button-dark-bg: #2fbf8f;
  --button-dark-text: #06241a;
  --button-dark-hover: #1f9a72;
  --on-dark-soft: #c3cfdb;
  --on-dark-muted: #9fb0c1;
  --bg-alt: #f5f7fa;
  --footer-bg: #08131f;
  --footer-text: #8fa1b3;
  --footer-strong: #dbe4ec;
}