/* ===================================================================
   NUDERA — tokens
   Fonte da verdade: FUNNELS-BRAND/NUDERA/en/store.css (home + PDP EN).
   Não inventar valor aqui. Todo componente lê daqui, nada de hex solto.
   =================================================================== */
:root{
  /* ---------- superfícies ---------- */
  --bg:#FFFBF8;
  --surface:#FFFFFF;
  --blush:#F8E9E3;
  --blush-soft:#FCF3EF;
  --blush-line:#EFD6CC;
  --paper:#F6EEE2;

  /* ---------- texto ---------- */
  --plum:#3B2632;
  --plum-soft:#5E4552;
  --muted:#7D6873;
  --sepia:#5A4034;

  /* ---------- acento: único do sistema ---------- */
  --terra:#C0705A;
  --terra-dark:#A65B47;
  --star:#E8836B;

  /* ---------- confirmação: nunca decorativa ---------- */
  --sage:#6F8A6B;
  --sage-soft:#EEF3EC;

  /* ---------- variantes de TEXTO ----------
     As cores de marca acima servem para superfícies, barras, ícones e números
     grandes. Como TEXTO elas reprovam no WCAG AA sobre fundo claro:
       terra #C0705A sobre --bg = 3.58:1   (mínimo 4.5:1)
       sage  #6F8A6B sobre --bg = 3.69:1
     Sempre que a cor carregar texto, use os tokens abaixo.
       --terra-text sobre --bg = 4.85:1
       --sage-text  sobre --bg = 4.98:1                                   */
  --terra-text:#A65B47;
  --sage-text:#5C7458;

  /* borda que COMUNICA estado. --blush-line dá 1.39:1 e some para quem
     enxerga pouco; serve de divisor, não de sinal. */
  --line-strong:#D9B5A6;

  /* ---------- superfícies de câmera ---------- */
  --cam-bg:#14100F;
  --cam-line:#2B2321;
  --cam-text:#E0D5D0;
  --cam-ok:#8FB98A;
  --scrim:rgba(18,14,13,.5);

  /* ---------- tipografia ----------
     Figtree carrega tudo. Fraunces entra só em número, ênfase e voz editorial.
     Headline é sempre Figtree 800.

     RÉGUA DE TAMANHO — mulher de 40 a 65 anos, à noite, sem óculos de leitura.
     Nada funcional abaixo de 12px. Nada de leitura abaixo de 15px.        */
  --sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Fraunces',Georgia,serif;

  /* A escala inteira multiplica por --tscale. A primeira pergunta do quiz
     é justamente o tamanho do texto: ela escolhe, vê mudar na hora, e o app
     inteiro obedece. Para quem lê sem óculos isso vale mais que qualquer
     refinamento de layout. */
  --tscale:1;
  --fs-micro:calc(12px * var(--tscale));  /* caixa alta com tracking — piso */
  --fs-meta: calc(13px * var(--tscale));  /* apoio, legenda, contagem */
  --fs-body: calc(15px * var(--tscale));  /* corpo e qualquer instrução */
  --fs-lead: calc(16px * var(--tscale));  /* campo (abaixo disso o iOS dá zoom) */
  --fs-title:calc(17px * var(--tscale));  /* título de card */
  --fs-num:  calc(22px * var(--tscale));
  --fs-num-lg:calc(28px * var(--tscale));

  /* ---------- espaço, forma, movimento ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:26px;
  --radius:20px;
  --radius-sm:12px;
  --radius-pill:99px;
  --shadow:0 10px 30px -12px rgba(59,38,50,.18);
  --tap:44px;        /* alvo mínimo de toque — dedo com sérum */
  --ease:.2s cubic-bezier(.4,0,.2,1);
}

/* escolhido na primeira pergunta do quiz */
:root[data-size="l"] { --tscale:1.13; }
:root[data-size="xl"]{ --tscale:1.27; }

/* ===================================================================
   Modo escuro. O sérum é noturno e a tela de captura é preta por
   natureza — sair de um branco quente para o preto da câmera, num
   banheiro às 23h, ofusca. Aqui a paleta acompanha o horário do produto.
   Segue o sistema; data-theme permite sobrescrever.
   Contrastes conferidos sobre --bg #1C1319:
     --plum #F4E9E6 = 15.3:1 · --muted #A08E97 = 5.9:1
     --terra-text #D08A73 = 6.5:1 · --sage-text #8FB98A = 8.2:1
   =================================================================== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1C1319;
    --surface:#251A22;
    --blush:#33232C;
    --blush-soft:#2B1E26;
    --blush-line:#3E2C37;
    --paper:#2A1F1B;

    --plum:#F4E9E6;
    --plum-soft:#D4C0C6;
    --muted:#A08E97;
    --sepia:#D9C4B4;

    --terra-text:#D08A73;
    --sage-text:#8FB98A;
    --line-strong:#57414C;
    --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#1C1319; --surface:#251A22; --blush:#33232C; --blush-soft:#2B1E26;
  --blush-line:#3E2C37; --paper:#2A1F1B;
  --plum:#F4E9E6; --plum-soft:#D4C0C6; --muted:#A08E97; --sepia:#D9C4B4;
  --terra-text:#D08A73; --sage-text:#8FB98A; --line-strong:#57414C;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
}