/* Tema claro (fatia 2b da vitrine, 21/10/2026). Só redefine tokens: as regras continuam em css/home.css.
   Vale só nas páginas com <html class="tema-claro"> (hoje: a home). O rodapé (css/footer.css) não usa estes
   tokens e fica escuro. Os valores-base vêm do mock aprovado (CLARO_CSS em
   .cycle/work/vitrine-perfeita/mocks/gerar.py). A legibilidade é medida por scripts/contraste-render.mjs. */
html.tema-claro {
  /* a base */
  --ceu: oklch(97% 0.012 85);            /* papel */
  --ceu-2: oklch(100% 0 0);              /* cartão */
  --osso: oklch(20% 0.03 295);           /* tinta */
  --osso-70: oklch(20% 0.03 295 / .76);
  --fio: oklch(20% 0.03 295 / .14);
  --gold: oklch(52% 0.13 60);            /* dourado fechado, para dar contraste no papel */
  --azul: oklch(46% 0.14 240);
  --fogo: oklch(52% 0.19 42);            /* fogo mais fundo: o rótulo e o branco do botão passam a ler */
  --magenta: oklch(48% 0.21 356);

  /* os tokens da fase 1 (css/home.css), mesmo papel, valor claro */
  --h-fundo-01: oklch(97% 0.012 85 / .94);     /* .topo */
  --h-fundo-02: oklch(97% 0.012 85 / .86);
  --h-sombra-03: oklch(50% 0.22 356 / .35);
  --h-sombra-04: oklch(52% 0.13 60 / .6);
  --h-texto-05: #fff;                            /* texto do botão sobre o degradê */
  --h-sombra-06: oklch(50% 0.22 356 / .25);
  --h-sombra-07: oklch(100% 0 0 / .28);
  --h-fundo-08: oklch(100% 0 0 / .3);
  --h-sombra-09: oklch(50% 0.22 356 / .35);
  --h-fundo-10: oklch(97% 0.012 85 / .97);     /* véu do hero: papel à esquerda, foto à direita */
  --h-fundo-11: oklch(97% 0.012 85 / .85);
  --h-fundo-12: oklch(20% 0.03 295 / .04);
  --h-fundo-13: oklch(97% 0.012 85);           /* legenda da galeria: papel cheio embaixo */
  --h-fundo-14: oklch(97% 0.012 85 / .6);
  --h-fundo-15: oklch(97% 0.012 85 / .9);
  --h-linha-16: oklch(52% 0.13 60 / .45);
  --h-fundo-17: oklch(97% 0.012 85 / .84);     /* cartões de porta: papel por cima da foto */
  --h-fundo-18: oklch(97% 0.012 85 / .92);
  --h-fundo-19: oklch(50% 0.22 356 / .1);
  --h-texto-20: #fff;                            /* selo vip: branco sobre o degradê de botão */
  --h-texto-21: oklch(20% 0.03 295 / .76);
  --h-linha-22: oklch(20% 0.03 295 / .14);
  --h-texto-23: oklch(52% 0.13 60);
  --h-linha-24: oklch(20% 0.03 295 / .18);
  --h-texto-25: #fff;                            /* botão do WhatsApp: branco sobre o fogo fundo */
  --h-fundo-26: oklch(100% 0 0);
  --h-texto-27: oklch(45% 0.15 145);
  --h-fundo-28: oklch(97% 0.012 85 / .98);
  --h-fundo-29: oklch(97% 0.012 85 / .85);
  --h-fundo-30: oklch(97% 0.012 85 / .2);
  --h-fundo-31: oklch(97% 0.012 85 / .9);
  color-scheme: light;
}
html.tema-claro body { background: var(--ceu); color: var(--osso); }

/* A primeira tela do mock claro (m4-home-*-claro): a foto do Gui à direita no computador, em cima no celular,
   e o texto em papel liso. Só a home tem .hero com a classe tema-claro. */
html.tema-claro .hero { align-items: center; }
html.tema-claro .hero__arte { left: 44%; }
html.tema-claro .hero__arte picture { display: block; height: 100%; }
html.tema-claro .hero__arte img { object-position: 50% 25%; transform: none; }
html.tema-claro .hero__veu { background: linear-gradient(90deg, var(--ceu) 0%, transparent 34%), linear-gradient(0deg, var(--ceu) 0%, transparent 28%); }
html.tema-claro .hero__conteudo { max-width: min(44rem, 50%); }
html.tema-claro .hero__selo { letter-spacing: .18em; }
html.tema-claro .hero__linha { margin-top: 1.1rem; max-width: 30rem; font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.3; }
html.tema-claro .hero__sub { margin-top: 1rem; }
html.tema-claro .fala__form { background: var(--ceu); }
html.tema-claro .galeria__grade figcaption { background: var(--h-fundo-13); padding-top: .8rem; }
@media (max-width: 700px) {
  /* a primeira tela ocupa a tela toda, como no mock: a tira de credenciais não sobe para baixo dos botões fixos */
  html.tema-claro .hero { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 100svh; }
  html.tema-claro .hero__arte { position: relative; inset: auto; height: min(34vh, 19rem); margin-top: 3.6rem; }
  html.tema-claro .hero__selo-longo { display: none; }
  html.tema-claro .hero__arte img { object-position: 50% 22%; }
  html.tema-claro .hero__arte { overflow: hidden; }
  html.tema-claro .hero__veu { inset: 0 0 -2px 0; background: linear-gradient(0deg, var(--ceu) 14%, transparent 48%); }  /* -2px: a borda da foto não aparece como fio */
  html.tema-claro .hero__conteudo { max-width: none; margin-top: -2.6rem; padding: 0 1.25rem 3rem; }
  /* no celular o mock tem um botão só: o segundo cairia atrás da barra de cookies */
  html.tema-claro .hero .fala__form { display: none; }
  html.tema-claro .hero__conteudo h1 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }
  html.tema-claro .hero__linha { margin-top: .7rem; font-size: 1.2rem; }
  html.tema-claro .hero__sub { margin: .8rem 0 1.2rem; }
}

/* no claro o --osso-70 já é translúcido; a opacity .75 destas regras de home.css somava por cima e a legenda
   da fonte e a data de atualização ficavam em 4,25:1 (achado do verificador da fatia 2b, 21/10) */
html.tema-claro .dado__fonte, html.tema-claro .objecoes__data { opacity: 1; }