:root {

  --background:        #F6F4F1;
  --surface:           #EDE8E2;
  --card:              #FFFFFF;
  --card-foreground:   #2A2320;
  --popover:           #FFFFFF;

  --foreground:        #2A2320;
  --muted-foreground:  #6B615B;
  /* Escureceu 4 unidades: sobre a superfície #EDE8E2 dava 4,33:1 a 11px, e é
     nela que ficam as legendas do tipo "34 de 43". Agora 4,59 no pior fundo. */
  --faint-foreground:  #71665B;

  --border:            #E7E0D9;
  --border-strong:     #D9CFC5;
  --input:             #E7E0D9;
  --ring:              #D2444C;

  --brand-1:           #C63B52;
  --brand-2:           #D2464C;
  --brand-3:           #DC5050;
  --brand-4:           #E6643C;
  /* As paradas do meio e do fim escureceram, e por isso o degradê deixou de
     derivar de `--brand-3`/`--brand-4`: 39 dos 41 blocos que o usam carregam
     texto branco ou são o próprio texto recortado nele, e com o coral original
     o branco de 12,5px do botão "Iniciar" ficava em 3,36:1. Medido agora:
     5,06 · 4,56 · 4,56 contra branco. `--brand-1..4` seguem intactos para
     quem quer a cor de marca sem texto em cima. */
  --brand-grad:        linear-gradient(100deg, #C63B52 0%, #D83B3B 52%, #D1461B 100%);
  --brand-grad-soft:   linear-gradient(135deg, #FBE6E1, #FBEDE4);

  /* A cor da marca como TEXTO. `--brand-1` puro dá 4,42:1 a 12px sobre o
     pêssego do `--brand-grad-soft`, que é a superfície clara mais lavada do
     sistema. O cálculo usa a parada MAIS ESCURA do pêssego (#FBE6E1), que é a
     que aparece embaixo do texto no cartão "a seguir"; medido: pêssego 4,58 ·
     papel 5,01 · cartão branco 5,50. `--brand-1` fica intacto para gradiente
     e preenchimento. */
  --brand-texto:       #BD374E;

  --primary:           #C0384A;
  --primary-foreground:#FFFFFF;
  --accent-warm:       #E0714C;

  --abc-a: #96325A;
  --abc-b: #B23E55;
  --abc-c: #C8474F;
  --abc-d: #DC5050;
  --abc-e: #E0574A;
  --abc-f: #E35E43;
  --abc-s: #E6643C;

  /* O par legível da rampa, nomeado pelo FUNDO e não pelo tema.
     Medido com a fórmula da WCAG: a rampa acima é DECORATIVA. Como fundo de
     texto branco pequeno, `d` a `s` ficam entre 3,36:1 e 3,96:1; como texto no
     papel, `c` a `s` também não chegam a 4,5:1; e como texto no azul-ardósia,
     `a` dá 2,31:1. As duas pontas se excluem: o vinho serve de cama para
     branco e some no escuro, o coral lê no escuro e é claro demais sob branco.

     Mesma matiz, luminosidade empurrada em HLS até cruzar 4,5:1. Um valor só
     resolve os dois papéis claros — texto no papel e cama de texto branco. */
  --abc-a-no-claro: #96325A;
  --abc-b-no-claro: #B23E55;
  --abc-c-no-claro: #C64048;
  --abc-d-no-claro: #D52C2C;
  --abc-e-no-claro: #D13324;
  --abc-f-no-claro: #CB3B1E;
  --abc-s-no-claro: #C7421A;

  --abc-a-no-escuro: #CB648D;
  --abc-b-no-escuro: #CA677B;
  --abc-c-no-escuro: #D1646B;
  --abc-d-no-escuro: #DE5B5B;
  --abc-e-no-escuro: #E15A4D;
  --abc-f-no-escuro: #E35E43;
  --abc-s-no-escuro: #E6643C;

  /* `-texto` é só o apontador para o conjunto do tema. Quem sabe em que fundo
     está — a seção do método da landing é escura nos dois temas — usa o
     conjunto direto. */
  --abc-a-texto: var(--abc-a-no-claro);
  --abc-b-texto: var(--abc-b-no-claro);
  --abc-c-texto: var(--abc-c-no-claro);
  --abc-d-texto: var(--abc-d-no-claro);
  --abc-e-texto: var(--abc-e-no-claro);
  --abc-f-texto: var(--abc-f-no-claro);
  --abc-s-texto: var(--abc-s-no-claro);


  /* A rampa das fatias do prato, POR POSIÇÃO.

     Vinha do app: a fatia deixou de ter grupo fixo quando a médica passou a
     escrever o nome dela. “Arroz e feijão” não tem cor própria, então quem
     escolhe o tom é a posição no prato, e a identidade fica na legenda, que
     nomeia cada fatia ao lado do seu tom. Cor nunca carrega sozinha.

     🔴 `--gr-4` é #5C3A1E e não o #7A5236 de antes. Conserto de contraste,
     medido no app com o validador de paletas: contra o #A94F3F da fatia 3, o
     marrom antigo dava ΔE 9,0 para visão normal (piso 15) e 3,0 para
     protanopia. Com o novo, 17,1.

     🔴 `--gr-5` e `--gr-6` são NEUTRAS quentes, e não um quinto e sexto tom
     de comida: verde, âmbar, terracota e marrom já ocupam a faixa terrosa, e
     no app nenhum quinto matiz passou o piso contra algum vizinho. Elas só
     existem quando a médica acrescenta fatia, e separam por LUMINOSIDADE,
     que é o canal que nenhuma forma de daltonismo colapsa. */
  --gr-1: #55833F;
  --gr-2: #D9A036;
  --gr-3: #A94F3F;
  --gr-4: #5C3A1E;
  --gr-5: #8A8578;
  --gr-6: #C6C0B2;
  /* Os quatro nomes antigos ficam como APELIDO das quatro primeiras
     posições, que é exatamente o que elas são no prato padrão. A colagem do
     hero e as vitrines leem por nome, e um prato de quatro fatias fixas ali
     continua certo. */
  --gr-verdura: var(--gr-1);
  --gr-carbo:   var(--gr-2);
  --gr-prot:    var(--gr-3);
  --gr-legume:  var(--gr-4);

  --success: #3E8E7E;
  /* Escuro o bastante para 4,5:1 tambem sobre o cinza da linha (#DDDCD9),
     onde o tom anterior (#347668) dava 3,88. */
  --success-text: #2A6155;
  --warning-text: #7E5615;
  --info-text: #275E88;
  --warning: #B87F26;
  --danger:  #B23124;
  /* `--danger-text` nunca havia sido definido, e `.chip.late` era o único dos
     quatro chips que não usava o par `-text`: no escuro caía no `--danger`
     puro e dava 3,38:1 sobre o próprio tingido. */
  --danger-text: #A42D21;
  --info:    #2F6E9E;

  --plum-bg:   #122535;
  --plum-2:    #1B3149;
  --plum-fg:   #EAF0F5;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(42,35,32,.06), 0 1px 1px rgba(42,35,32,.04);
  --shadow-md: 0 10px 30px -12px rgba(42,35,32,.18);
  --shadow-warm: 0 18px 48px -20px rgba(220,80,80,.42);

  --ease-out:     cubic-bezier(.22, 1, .36, 1);
  --ease-in-out:  cubic-bezier(.77, 0, .175, 1);
  --ease-drawer:  cubic-bezier(.32, .72, 0, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Schibsted Grotesk", "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", "Space Mono", ui-monospace, monospace;
  --font-label: "Schibsted Grotesk", system-ui, sans-serif;
}

[data-theme="dark"] {
  --background:        #101F2E;
  --surface:           #17293A;
  --card:              #1D3247;
  --card-foreground:   #EAF0F5;
  --popover:           #1D3247;

  --foreground:        #EAF0F5;
  --muted-foreground:  #A6B7C4;
  --faint-foreground:  #93A4B1;

  --border:            rgba(234,240,245,.11);
  --border-strong:     rgba(234,240,245,.20);
  --input:             rgba(234,240,245,.13);
  --ring:              #E8776F;

  /* No escuro a rampa inverte de lado: a ponta coral já passa e é o vinho que
     desaparece sobre o azul-ardósia (`a` dava 2,31:1). */
  --abc-a-texto: var(--abc-a-no-escuro);
  --abc-b-texto: var(--abc-b-no-escuro);
  --abc-c-texto: var(--abc-c-no-escuro);
  --abc-d-texto: var(--abc-d-no-escuro);
  --abc-e-texto: var(--abc-e-no-escuro);
  --abc-f-texto: var(--abc-f-no-escuro);
  --abc-s-texto: var(--abc-s-no-escuro);

  --brand-grad-soft:   linear-gradient(135deg, rgba(220,80,80,.18), rgba(230,100,60,.14));
  /* No escuro o pior fundo é o pêssego COMPOSTO: `--brand-grad-soft` é
     translúcido lá, e 18% de vermelho sobre o cartão #1D3247 dá rgb(63,55,73),
     onde a coral da primária ficava em 3,92:1. Este clareia até 4,56. */
  --brand-texto:       #EB8A83;
  --primary:           #E8776F;
  --primary-foreground:#0E1B28;

  --success:           #63B4A4;
  --success-text:      #76BDAF;
  --info-text:         #7DB4E2;
  --warning-text:      #E2A94E;
  --warning:           #E2A94E;
  --danger:            #E27366;
  --danger-text:       #E9978D;
  --info:              #6AA6D6;

  /* No escuro a mesma lógica: os três primeiros ficam, o quarto escurece
     para separar do terceiro, e as duas últimas são neutras. */
  --gr-1: #7FB56F;
  --gr-2: #E4B95C;
  --gr-3: #D98973;
  --gr-4: #8F6244;
  --gr-5: #8D949B;
  --gr-6: #565F68;

  --shadow-warm: 0 18px 52px -18px rgba(220,80,80,.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background:#101F2E; --surface:#17293A; --card:#1D3247; --card-foreground:#EAF0F5;
    --popover:#1D3247; --foreground:#EAF0F5; --muted-foreground:#A6B7C4; --faint-foreground:#93A4B1;
    --border:rgba(234,240,245,.11); --border-strong:rgba(234,240,245,.20); --input:rgba(234,240,245,.13);
    --ring:#E8776F; --brand-texto:#EB8A83; --primary:#E8776F; --primary-foreground:#0E1B28;
    --success:#63B4A4; --warning:#E2A94E; --danger:#E27366; --info:#6AA6D6;
    --danger-text:#E9978D;
    --success-text:#76BDAF; --warning-text:#E2A94E; --info-text:#7DB4E2;
    --gr-1:#7FB56F; --gr-2:#E4B95C; --gr-3:#D98973; --gr-4:#8F6244; --gr-5:#8D949B; --gr-6:#565F68;
    --abc-a-texto:var(--abc-a-no-escuro); --abc-b-texto:var(--abc-b-no-escuro);
    --abc-c-texto:var(--abc-c-no-escuro); --abc-d-texto:var(--abc-d-no-escuro);
    --abc-e-texto:var(--abc-e-no-escuro); --abc-f-texto:var(--abc-f-no-escuro);
    --abc-s-texto:var(--abc-s-no-escuro);
    --brand-grad-soft:linear-gradient(135deg, rgba(220,80,80,.18), rgba(230,100,60,.14));
    --shadow-warm:0 18px 52px -18px rgba(220,80,80,.55);
  }
}

.pular { position: absolute; left: 12px; top: -60px; z-index: 999; padding: 10px 16px; border-radius: 10px;
  background: var(--card); color: var(--foreground); border: 1px solid var(--border); font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.4); transition: top var(--dur-1) var(--ease-out); }
.pular:focus { top: 12px; }

/* Faixas escuras nos DOIS temas: o cabeçalho da transparência, a banda ameixa
   da landing e a seção do método. Dentro delas o tema claro escolheria a
   variante ESCURECIDA dos tokens de texto, que é a errada aqui — a marca em
   `#BD374E` sobre o navy dá 2,85:1. Aqui os tokens passam a ser os do fundo
   escuro (medido: 6,33:1 na navy). */
.band-plum,
header.top,
#metodo {
  --brand-texto: #EB8A83;
  --danger-text: #E9978D;
  --success-text: #76BDAF;
  --warning-text: #E2A94E;
  --info-text: #7DB4E2;
  --abc-a-texto: var(--abc-a-no-escuro);
  --abc-b-texto: var(--abc-b-no-escuro);
  --abc-c-texto: var(--abc-c-no-escuro);
  --abc-d-texto: var(--abc-d-no-escuro);
  --abc-e-texto: var(--abc-e-no-escuro);
  --abc-f-texto: var(--abc-f-no-escuro);
  --abc-s-texto: var(--abc-s-no-escuro);
}

[hidden] { display: none !important; }

:root { --rec-bg: #123F66; --rec-fg: #EAF0F5; --rec-fg-2: rgba(234,240,245,.84);
  --rec-fg-3: rgba(234,240,245,.74); --rec-linha: rgba(234,240,245,.2);
  --rec-linha-topo: rgba(234,240,245,.36); --rec-campo: rgba(234,240,245,.1); }
[data-theme="dark"] { --rec-bg: #EAF0F5; --rec-fg: #10202F; --rec-fg-2: rgba(16,32,47,.78);
  --rec-fg-3: rgba(16,32,47,.72); --rec-linha: rgba(16,32,47,.16);
  --rec-linha-topo: rgba(255,255,255,.85); --rec-campo: rgba(16,32,47,.07); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rec-bg: #EAF0F5; --rec-fg: #10202F; --rec-fg-2: rgba(16,32,47,.78);
    --rec-fg-3: rgba(16,32,47,.72); --rec-linha: rgba(16,32,47,.16);
    --rec-linha-topo: rgba(255,255,255,.85); --rec-campo: rgba(16,32,47,.07); }
}