/* Butterfly · tema das páginas públicas (13/09/2026)

   UM lugar para as cores da landing e das páginas legais. Ninguém mais escreve cor literal:
   o template, o landing.js, o legal.js e as folhas usam var(--cor-*), e o portão
   (scripts/verificar.mjs) reprova cor solta fora daqui.

   CLARO: os valores do handoff da landing (09/09); cada token nasceu de uma cor que já
   estava na página, então tons vizinhos (#6B7079, #6E7276, #6E7278) seguem separados para o
   claro não mudar um pixel. Uma exceção (14/09): o contorno do campo #C9CCD2 dava 1,56:1 no
   papel, abaixo dos 3:1 de contorno de controle; sobe a #8C9098, o mesmo cinza frio.
   MARGEM (15/09, X21): o que passava no limite ganha folga. O contorno do campo vai a #868A92
   (3,11:1 no papel era raspando) e o Consumo, que é kicker de 9px, desce a #A048AB no claro e
   sobe a #CF6BE0 no escuro (4,53:1 no cartão escuro era raspando), no matiz do #C45AD2 do app.
   ESCURO: o escuro QUENTE do handoff da marca (paper/_preview/handoff/butterfly-dark.css),
   o mesmo do Studio (paper-admin/src/app/globals.css). Desde 09/10 (Felipe: "esse preto
   meio desbotado não ficou legal, deixe o preto mesmo") o papel e a folha são #000000; o
   cartão segue #24241F para destacar sobre o preto; texto #EEEEE6, não branco puro (18,2:1
   no papel, abaixo da halação pela cor da tinta, não do fundo). Onde o
   handoff não chegava ao AA sobre o cartão, o tom sobe o mínimo e o portão mede:
   mudo #8A8A84 dava 4,49 no cartão (vai a #96968F), violeta #8F6AF6 como texto dava 4,13
   (texto violeta usa #A88EF8; o #8F6AF6 fica para ponto e régua, 3:1).

   TRÊS ESTADOS, sem flash:
   · sem data-theme: segue o sistema pela media query abaixo, sem depender de JavaScript;
   · data-theme="dark" | "light": a escolha guardada, aplicada por tema.js no <head>, antes
     de o <body> existir. O claro explícito precisa do :not() no bloco do sistema, senão o
     escuro do sistema venceria a escolha.
   Os dois blocos escuros são iguais token a token; o portão confere. */

:root {
  color-scheme: light;

  /* céu do hero (handoff do hero, 10/2026) */
  --cor-ceu-topo:         #F1EEFB;
  --cor-ceu-meio:         #F5E5F7;
  --tema-ilustracao-opacidade: 1;

  /* chão e superfícies */
  --cor-papel:            #FBFCF7;
  --cor-papel-92:         rgba(251,252,247,0.92);  /* topo fixo e barra de abas do aparelho */
  --cor-papel-94:         rgba(251,252,247,0.94);  /* barra de CTA do celular */
  --cor-papel-0:          rgba(251,252,247,0);     /* esmaecimentos */
  --cor-folha:            #FFFFFF;                 /* chão das páginas legais */
  --cor-cartao:           #FFFFFF;
  --cor-papel-2:          #F1F2F4;
  --cor-regua:            #E3E5E9;
  --cor-campo-borda:      #868A92;                 /* contorno do campo: 3:1 no papel e no cartão (WCAG 1.4.11) */
  --cor-traco:            rgba(22,24,29,0.10);     /* linhas de texto fingido, divisória legal */

  /* texto */
  --cor-tinta:            #000000;
  --cor-grafite:          #33373F;
  --cor-mudo-forte:       #53575E;
  --cor-mudo:             #6B7079;
  --cor-texto-2:          #5B5F66;
  --cor-cena-mudo:        #6E7278;
  --cor-sobre-tinta-mudo: #C9CCD2;                 /* texto secundário sobre a pílula de tinta */

  /* o aparelho do herói (a paleta do app) */
  --cor-aparelho:         #000000;
  --cor-aparelho-aro:     rgba(255,255,255,0.10);
  --cor-app-mudo:         #6E7276;
  --cor-app-regua:        #E9E9E6;
  --cor-app-sobre-tinta:  #FBFBF8;

  /* sinal: violeta, e os acentos de setor do design system (sem arco-íris) */
  --cor-violeta:          #7C5CD6;                 /* ponto, régua lateral */
  --cor-violeta-forte:    #5B43A6;                 /* texto violeta, link, foco */
  --cor-violeta-suave:    #EFEAFB;
  --cor-violeta-10:       rgba(124,92,214,0.10);
  /* chapéu de setor (Brand Book v4): dois grupos, sempre com texto em tinta, sem cor por setor */
  --cor-chapeu-rosado:    #F5E5F7;                 /* consumo, saúde, mídia, varejo */
  --cor-chapeu-lavanda:   #F1EEFB;                 /* os outros setores */
  --cor-sucesso-fundo:    #E4DCF8;                 /* botão depois do convite pedido */
  --cor-sucesso-texto:    #5B43A6;

  /* logos de terceiros (img.logo.dev) */
  --cor-logo-fundo:       #FFFFFF;                 /* chip com logo contido */
  --cor-logo-fundo-2:     #F1F2F4;                 /* chip com logo que cobre o chip */
  --cor-logo-img:         #FFFFFF;                 /* igual nos dois: cobre o monograma */
  --cor-logo-mono:        #53575E;                 /* monograma quando o logo não vem */
  --tema-logo-filtro:     none;

  /* sombra */
  --cor-sombra-06:        rgba(22,24,29,0.06);
  --cor-sombra-10:        rgba(22,24,29,0.10);
  --cor-sombra-14:        rgba(22,24,29,0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --cor-ceu-topo:         #000000;
    --cor-ceu-meio:         #000000;
    --tema-ilustracao-opacidade: 0.32;

    --cor-papel:            #000000;
    --cor-papel-92:         rgba(0,0,0,0.92);
    --cor-papel-94:         rgba(26,26,21,0.94);
    --cor-papel-0:          rgba(26,26,21,0);
    --cor-folha:            #000000;
    --cor-cartao:           #24241F;
    --cor-papel-2:          #2C2C26;
    --cor-regua:            #363630;
    --cor-campo-borda:      #75756E;
    --cor-traco:            rgba(238,238,230,0.12);

    --cor-tinta:            #EEEEE6;
    --cor-grafite:          #CECEC7;
    --cor-mudo-forte:       #A5A59F;
    --cor-mudo:             #96968F;
    --cor-texto-2:          #A5A59F;
    --cor-cena-mudo:        #96968F;
    --cor-sobre-tinta-mudo: #5C5C56;

    --cor-aparelho:         #0D0D0A;
    --cor-aparelho-aro:     rgba(255,255,255,0.16);
    --cor-app-mudo:         #96968F;
    --cor-app-regua:        #363630;
    --cor-app-sobre-tinta:  #1A1A15;

    --cor-violeta:          #8F6AF6;
    --cor-violeta-forte:    #A88EF8;
    --cor-violeta-suave:    #2A2440;
    --cor-violeta-10:       rgba(143,106,246,0.18);
    --cor-chapeu-rosado:    #3A2A3D;
    --cor-chapeu-lavanda:   #2A2440;
    --cor-sucesso-fundo:    #2A2440;
    --cor-sucesso-texto:    #CBBCF3;

    --cor-logo-fundo:       #E8E8E8;
    --cor-logo-fundo-2:     #E8E8E8;
    --cor-logo-img:         #FFFFFF;
    --cor-logo-mono:        #53575E;
    --tema-logo-filtro:     brightness(.91);

    --cor-sombra-06:        rgba(0,0,0,0.24);
    --cor-sombra-10:        rgba(0,0,0,0.36);
    --cor-sombra-14:        rgba(0,0,0,0.48);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

    --cor-ceu-topo:         #000000;
    --cor-ceu-meio:         #000000;
    --tema-ilustracao-opacidade: 0.32;

  --cor-papel:            #000000;
  --cor-papel-92:         rgba(0,0,0,0.92);
  --cor-papel-94:         rgba(26,26,21,0.94);
  --cor-papel-0:          rgba(26,26,21,0);
  --cor-folha:            #000000;
  --cor-cartao:           #24241F;
  --cor-papel-2:          #2C2C26;
  --cor-regua:            #363630;
  --cor-campo-borda:      #75756E;
  --cor-traco:            rgba(238,238,230,0.12);

  --cor-tinta:            #EEEEE6;
  --cor-grafite:          #CECEC7;
  --cor-mudo-forte:       #A5A59F;
  --cor-mudo:             #96968F;
  --cor-texto-2:          #A5A59F;
  --cor-cena-mudo:        #96968F;
  --cor-sobre-tinta-mudo: #5C5C56;

  --cor-aparelho:         #0D0D0A;
  --cor-aparelho-aro:     rgba(255,255,255,0.16);
  --cor-app-mudo:         #96968F;
  --cor-app-regua:        #363630;
  --cor-app-sobre-tinta:  #1A1A15;

  --cor-violeta:          #8F6AF6;
  --cor-violeta-forte:    #A88EF8;
  --cor-violeta-suave:    #2A2440;
  --cor-violeta-10:       rgba(143,106,246,0.18);
  --cor-chapeu-rosado:    #3A2A3D;
  --cor-chapeu-lavanda:   #2A2440;
  --cor-sucesso-fundo:    #2A2440;
  --cor-sucesso-texto:    #CBBCF3;

  --cor-logo-fundo:       #E8E8E8;
  --cor-logo-fundo-2:     #E8E8E8;
  --cor-logo-img:         #FFFFFF;
  --cor-logo-mono:        #53575E;
  --tema-logo-filtro:     brightness(.91);

  --cor-sombra-06:        rgba(0,0,0,0.24);
  --cor-sombra-10:        rgba(0,0,0,0.36);
  --cor-sombra-14:        rgba(0,0,0,0.48);
}

/* Logo de terceiro no escuro: o PNG (quase sempre em fundo branco) passa por brightness(.91),
   que leva o branco a #E8E8E8, a cor do chip; a marca escurece 9% junto e nada vira caixa
   branca estourada. O fundo da imagem segue opaco para cobrir o monograma de reserva (com
   multiply o monograma aparecia por baixo do logo). No claro o filtro é `none`, o inicial. */
img[src^="https://img.logo.dev/"] { filter: var(--tema-logo-filtro); }

/* Placeholder do campo: no claro fica o do navegador, intocado; no escuro o #757575 do Chrome
   daria 3,37:1 sobre o campo, e o mudo dá 5,24:1. opacity 1 porque o Firefox esmaece. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::placeholder { color: var(--cor-mudo); opacity: 1; }
}
:root[data-theme="dark"] ::placeholder { color: var(--cor-mudo); opacity: 1; }

/* Controle de tema (Sistema · Claro · Escuro), montado por tema.js em todo [data-bf-tema].
   Botões de alternância com aria-pressed, como o seletor de idioma; alvo de 30 × 26 px. */
.bf-tema {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cor-regua);
  border-radius: 99px;
  background: var(--cor-cartao);
  vertical-align: middle;
}
.bf-tema__opcao {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--cor-mudo-forte);
  font: inherit;
  cursor: pointer;
}
.bf-tema__opcao svg { display: block; width: 16px; height: 16px; }
.bf-tema__opcao:hover { color: var(--cor-tinta); }
.bf-tema__opcao[aria-pressed="true"] { background: var(--cor-tinta); color: var(--cor-papel); cursor: default; }
.bf-tema__opcao:focus-visible { outline: 2px solid var(--cor-violeta-forte); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .bf-tema__opcao { transition: color .15s ease, background-color .15s ease; }
}

/* A troca manual passa por View Transition (tema.js só a pede sem "reduzir movimento");
   aqui o CSS garante o mesmo se a preferência mudar no meio. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}