/* Capivarada · tokens (cores, fontes, medidas)
   Tema claro: o fim de tarde na lagoa (o aprovado no conceito 3).
   Tema escuro: a mesma lagoa à noite, com lua no lugar do sol. Os personagens não mudam de cor.
   O tema segue o aparelho (prefers-color-scheme) e pode ser forçado com <html data-theme="dark|light">.
   Fontes: DynaPuff (títulos, respostas, números, botões) e Nunito (texto). Carregar no <head>:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Nunito:wght@400..900&display=swap"> */
:root{
  color-scheme:light;
  --display:"DynaPuff","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Nunito",system-ui,sans-serif;

  /* papel e cartões */
  --papel:#FBF0DE;          /* fundo das telas */
  --cartao:#FFF8EC;         /* cartões, pílulas claras, campos */
  --sombra:#E6CBA2;         /* sombra dura embaixo dos cartões */
  --areia:#F5E3BE;          /* cartão da margem */
  --areia-sombra:#E2C48E;
  --linha:#E9D3B0;          /* contorno de campo, divisória */

  /* texto */
  --cacau:#3B2418;          /* texto principal (e contorno dos desenhos) */
  --cacau-2:#6B4A36;        /* texto secundário, etiquetas */
  --sobre-pri:#FFFFFF;      /* texto no botão principal */

  /* cores de ação */
  --aguape:#6E4A9E;         /* botão principal */
  --aguape-2:#4C3175;       /* sombra do botão principal */
  --aguape-claro:#EFE6F7;   /* seleção, foco */
  --sol:#FFD06A;            /* 1º lugar, destaque */
  --laranja:#F28A1A;
  --laranja-claro:#FFE3BF;  /* pílula de pontos (laranja) */
  --melancia-claro:#FBD9DC; /* pílula de pontos (meia melancia) */
  --pernilongo-claro:#EDE4EF; /* pílula do −1 */
  --pos:#F3E1C2;            /* bolinha de posição */
  --alerta:#A8281C;         /* erro, tempo acabando */
  --alerta-claro:#FBE0DA;
  --ok:#24683F;
  --ok-claro:#DDF0E1;

  /* faixa do entardecer (topo das telas) */
  --faixa:#F8D2AE;
  --faixa-onda:#F6C3AE;

  /* véu de papel atrás do painel que sobe de baixo (sem desfoque, sem pontilhado) */
  --veu:rgba(251,240,222,.86);

  /* moldura (só nas prévias) */
  --moldura:#241712;

  /* cenário dos desenhos (desenhos.js usa estas variáveis, com o claro como reserva) */
  --d-ceu1:#F5BCA8; --d-ceu2:#F7CBAC; --d-ceu3:#F9D8AE; --d-ceu4:#FBE4B6;
  --d-sol-halo:#FDECC0; --d-sol:#FFD06A; --d-sol-borda:#F4AE48;
  --d-nuvem:#FCE5D6; --d-passaro:#9C7189; --d-silhueta:#8E6683;
  --d-morro1:#B58A98; --d-morro2:#9C7189;
  --d-lagoa:#4F8C78; --d-lagoa-claro:#79AC94; --d-lagoa-meio:#6FA58E; --d-risco:#6CA48C; --d-reflexo:#FFE2A2; --d-marola:#A3D2BE;
  --d-capim:#9BBF62; --d-areia:#E8C690; --d-areia-borda:#D3AC6E;
  --d-podio1:#FCE8CB; --d-podio2:#FBE0B8; --d-podio-nuvem:#FFF1DF; --d-podio-morro:#CFA6B2; --d-podio-passaro:#B48AA0;

  /* medidas */
  --r-cartao:18px; --r-campo:16px; --r-pilula:999px;
  --gutter:14px;
}

/* ---------- tema escuro: a lagoa à noite ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --papel:#1E1712; --cartao:#2D231C; --sombra:#110B08; --areia:#3A2D21; --areia-sombra:#150F0A; --linha:#4A3A2E;
    --cacau:#F6E9D6; --cacau-2:#D2BC9F; --sobre-pri:#FFFFFF;
    --aguape:#7E58B4; --aguape-2:#4A2F72; --aguape-claro:#3A2E4E;
    --laranja-claro:#4D331E; --melancia-claro:#4C2730; --pernilongo-claro:#3B3243; --pos:#4A3A2C;
    --alerta:#FF8A78; --alerta-claro:#4A2620; --ok:#8FD6A6; --ok-claro:#203A2A;
    --faixa:#3A2A52; --faixa-onda:#2E2245;
    --veu:rgba(30,23,18,.88);
    --moldura:#0C0806;
    --d-ceu1:#241B3A; --d-ceu2:#2C2246; --d-ceu3:#352851; --d-ceu4:#40305E;
    --d-sol-halo:#4F3F6E; --d-sol:#F3E6B8; --d-sol-borda:#D9C68E;
    --d-nuvem:#4A3B63; --d-passaro:#8C7AAE; --d-silhueta:#1A1330;
    --d-morro1:#2A2142; --d-morro2:#211A36;
    --d-lagoa:#23514A; --d-lagoa-claro:#356A5F; --d-lagoa-meio:#2F6157; --d-risco:#3D7568; --d-reflexo:#E9DDAE; --d-marola:#5E9C8A;
    --d-capim:#4C6A35; --d-areia:#8C7152; --d-areia-borda:#6E583C;
    --d-podio1:#2B2240; --d-podio2:#33294B; --d-podio-nuvem:#44375C; --d-podio-morro:#3A2D4C; --d-podio-passaro:#8C7AAE;
  }
}
/* no escuro, o pernilongo (que é escuro) ganha um contorno claro para não sumir nas pílulas */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ic-pernilongo{filter:drop-shadow(0 0 .7px #F6E9D6) drop-shadow(0 0 .7px #F6E9D6)} }
:root[data-theme="dark"] .ic-pernilongo{filter:drop-shadow(0 0 .7px #F6E9D6) drop-shadow(0 0 .7px #F6E9D6)}
:root[data-theme="dark"]{
  color-scheme:dark;
  --papel:#1E1712; --cartao:#2D231C; --sombra:#110B08; --areia:#3A2D21; --areia-sombra:#150F0A; --linha:#4A3A2E;
  --cacau:#F6E9D6; --cacau-2:#D2BC9F; --sobre-pri:#FFFFFF;
  --aguape:#7E58B4; --aguape-2:#4A2F72; --aguape-claro:#3A2E4E;
  --laranja-claro:#4D331E; --melancia-claro:#4C2730; --pernilongo-claro:#3B3243; --pos:#4A3A2C;
  --alerta:#FF8A78; --alerta-claro:#4A2620; --ok:#8FD6A6; --ok-claro:#203A2A;
  --faixa:#3A2A52; --faixa-onda:#2E2245;
  --veu:rgba(30,23,18,.88);
  --moldura:#0C0806;
  --d-ceu1:#241B3A; --d-ceu2:#2C2246; --d-ceu3:#352851; --d-ceu4:#40305E;
  --d-sol-halo:#4F3F6E; --d-sol:#F3E6B8; --d-sol-borda:#D9C68E;
  --d-nuvem:#4A3B63; --d-passaro:#8C7AAE; --d-silhueta:#1A1330;
  --d-morro1:#2A2142; --d-morro2:#211A36;
  --d-lagoa:#23514A; --d-lagoa-claro:#356A5F; --d-lagoa-meio:#2F6157; --d-risco:#3D7568; --d-reflexo:#E9DDAE; --d-marola:#5E9C8A;
  --d-capim:#4C6A35; --d-areia:#8C7152; --d-areia-borda:#6E583C;
  --d-podio1:#2B2240; --d-podio2:#33294B; --d-podio-nuvem:#44375C; --d-podio-morro:#3A2D4C; --d-podio-passaro:#8C7AAE;
}