/* =============================================================
   TOKENS — a única fonte de verdade de cor, tipo e medida.
   Nenhum valor de cor deve ser escrito direto em outro arquivo:
   se precisar de uma cor nova, ela nasce aqui.

   São duas paletas convivendo:
     · LANDING  — papel / kraft / lousa (index.html)
     · CHECKOUT — azul / amarelo (checkout.php, obrigado.php, legais)

   Os nomes não colidem, então os dois temas podem ficar no mesmo
   arquivo sem um sobrescrever o outro.
   ============================================================= */
:root{

  /* ==========================================================
     LANDING — papel, kraft e lousa
     ========================================================== */
  --paper:#FFFDF7;
  --kraft:#F7E9CD;
  --kraft-deep:#EBD6AE;
  --ink:#262230;
  --pencil:#6E6879;
  --pencil-soft:#9A93A6;
  --crayon:#E8402A;
  --crayon-deep:#B82A17;
  --board:#17403A;
  --board-2:#0F2F2A;
  --chalk:#F2EFE4;
  --chalk-dim:#AFC2B9;
  --chalk-y:#FFD86E;

  /* acentos dos 6 materiais */
  --rosa:#F0538A;
  --azul:#2F84E0;
  --laranja:#F2913D;
  --verde:#22A961;
  --roxo:#8B5CD6;
  --ciano:#20A7B4;

  --rule:rgba(47,132,224,.13);

  /* Largura máxima do conteúdo. 1120px é o valor do tema azul;
     o tema kraft usava 1060px. */
  --max:1120px;

  /* ==========================================================
     CHECKOUT — azul e amarelo
     ========================================================== */
  --blue:#3478F6;
  --blue-d:#2359C4;
  --yellow:#FFBE30;
  --orange:#FF9F1C;
  --pink:#FF7E9D;
  --green:#55C989;
  --green-d:#23935B;
  --red:#E0483C;

  /* superfícies — trocadas no modo escuro */
  --bg:#FFFFFF;
  --soft:#F7F8FA;
  --tint:#EAF3FF;
  --card:#FFFFFF;
  --text:#272B35;
  --muted:#586074;
  --line:#E1E7F2;

  --band:#FFE9A6;
  --band-text:#272B35;

  --shadow-s:0 4px 14px rgba(39,43,53,.08);
  --shadow:0 12px 32px rgba(39,43,53,.10);
  --shadow-lg:0 22px 50px rgba(52,120,246,.22);

  --radius:14px;
  --radius-lg:22px;
  --radius-xl:28px;

  /* ==========================================================
     TIPOGRAFIA
     ========================================================== */
  --font-body:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-head:"Fredoka","Rubik",sans-serif;
  --font-hand:"Caveat",cursive;
  --font-ui:"Nunito","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* ==========================================================
     IMAGENS DOS MATERIAIS
     Declaradas uma vez e reaproveitadas nas duas páginas.
     ========================================================== */
  --capa-massinha:url(../img/capa-massinha.webp);
  --capa-matematica:url(../img/capa-matematica.webp);
  --capa-sanduiche:url(../img/capa-sanduiche.webp);
  --capa-mercadinho:url(../img/capa-mercadinho.webp);
  --capa-tabuada:url(../img/capa-tabuada.webp);
  --capa-alfabetizacao:url(../img/capa-alfabetizacao.webp);

  --paginas-massinha:url(../img/paginas-massinha.webp);
  --paginas-matematica:url(../img/paginas-matematica.webp);
  --paginas-sanduiche:url(../img/paginas-sanduiche.webp);
  --paginas-mercadinho:url(../img/paginas-mercadinho.webp);
  --paginas-tabuada:url(../img/paginas-tabuada.webp);
  --paginas-alfabetizacao:url(../img/paginas-alfabetizacao.webp);
}

/* =============================================================
   MODO ESCURO — vale no site todo, como no seu CSS original.

   O seletor é o seu: respeita a preferência do sistema, mas um
   data-theme explícito no <html> vence. Para travar o site em
   claro, basta <html data-theme="light">.

   As cores só valem para os tokens de superfície (--bg, --card,
   --text…). O azul, o amarelo e o verde não mudam no escuro — é o
   que mantém a marca reconhecível nos dois modos.
   ============================================================= */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111827;
    --soft:#151D2E;
    --tint:#15213A;
    --card:#1B2740;
    --text:#EEF2FA;
    --muted:#AAB5CB;
    --line:#2A3853;
    --shadow-s:0 4px 14px rgba(0,0,0,.35);
    --shadow:0 12px 32px rgba(0,0,0,.45);
    --shadow-lg:0 22px 50px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"]{
  --bg:#111827;
  --soft:#151D2E;
  --tint:#15213A;
  --card:#1B2740;
  --text:#EEF2FA;
  --muted:#AAB5CB;
  --line:#2A3853;
  --shadow-s:0 4px 14px rgba(0,0,0,.35);
  --shadow:0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:0 22px 50px rgba(0,0,0,.5);
}

/* =============================================================
   PALETA "CREME" — landing, termos, privacidade, contato e obrigado.

   Claro, mas não branco: fundo creme quente (papel de caderno),
   seções alternando entre areia e azul-céu, cartões cor de papel. O
   azul e o amarelo da marca não mudam.

   Ativada por <html data-paleta="creme">. O checkout não tem esse
   atributo e continua com a paleta própria.
   ============================================================= */
:root[data-paleta="creme"]{
  --bg:#FFF8EC;       /* creme — fundo da página */
  --soft:#FCEFD9;     /* areia — seções alternadas (.bg-soft) */
  --tint:#E4EEFF;     /* azul-céu — seções de destaque (.bg-tint, oferta) */
  --card:#FFFDF7;     /* papel — cartões */
  --text:#2A2735;
  --muted:#675F70;    /* cinza quente, lê bem sobre o creme */
  --line:#EEDCBF;     /* bordas cor de papel kraft claro */

  --band:#FFDF7E;     /* faixa amarela mais viva que o creme */
  --band-text:#2A2735;

  --shadow-s:0 4px 14px rgba(120,80,20,.08);
  --shadow:0 12px 32px rgba(120,80,20,.10);
  --shadow-lg:0 22px 50px rgba(52,120,246,.20);

  --slate:#2A2735;
  --slate-mid:#675F70;
}