/* =============================================================================
   Tema GRAFITE — gunmetal / aço escovado quente (luminância escura)
   ---------------------------------------------------------------------------
   O preto chapado (#0D0D0D) morreu porque era COR. Metal é SUPERFÍCIE:
   corpo em gradiente + reflexo especular + granulação fina.

   Três cuidados que definem os valores abaixo:
   1) --card-bg é repintado por .card-on-desktop, .results e .footer-clear
      (irmãos). Gradiente vertical forte reiniciaria em cada um e viraria
      faixa. Por isso a rampa é curta (~8 níveis) e o especular é radial
      baixo — some nas emendas.
   2) A foto do hero dissolve em --bg-rgb (cor CHAPADA). Então a superfície
      do cartão na base do hero (~9% da altura) tem que ser exatamente essa
      cor: o especular é centrado abaixo e vale ~0 ali.
   3) Cinza QUENTE (R>G>B, matiz ~28°). Cinza neutro/azulado brigaria com o
      dourado.
   ========================================================================== */
:root[data-theme="grafite"]{

  /* ---- Superfícies ------------------------------------------------------- */
  /* Cor real do cartão na base do hero, já COM a granulação somada.
     É nela que a foto do hero, os banners e o carrossel dissolvem. */
  --bg-rgb:38,35,32;                    /* #262320 */
  --page-rgb:22,20,18;                  /* #161412 — moldura, mais funda que o cartão */

  /* Página: chapa de aço iluminada de cima (fixa na viewport via site.css) */
  --page-bg:
    radial-gradient(125% 85% at 50% 0%,
      #2C2825 0%, #211E1B 38%, #191715 68%, #131211 100%);

  /* Cartão: corpo do metal.
     camada 1 — especular radial, centrado ABAIXO do hero (vale ~0 na base dele)
     camada 2 — rampa curta "colordown" (topo mais claro, pé mais fundo)
     A granulação NÃO mora aqui: é o body::after, por cima de tudo (senão o
     cartão ganha textura e clareia, e abre emenda na base da foto). */
  --card-bg:
    radial-gradient(90% 32% at 50% 52%,
      rgba(255,242,226,.045) 0%, rgba(255,242,226,.014) 45%, rgba(255,242,226,0) 72%),
    linear-gradient(180deg,
      #262320 0%, #242119 0%, #232019 30%, #211E1B 55%, #1E1B18 78%, #1C1A17 100%);

  /* Reflexo especular da página: cúpula de luz + varredura diagonal.
     Só aparece fora do cartão (margens do desktop / respiro do carrossel):
     é o que dá "chapa" ao redor sem sujar o conteúdo. */
  --sheen:
    radial-gradient(110% 60% at 50% -8%, rgba(255,240,220,.10), rgba(255,240,220,0) 58%),
    linear-gradient(112deg,
      rgba(255,240,220,0) 30%, rgba(255,240,220,.05) 46%,
      rgba(255,240,220,.012) 56%, rgba(255,240,220,0) 68%);
  --grain:.03;

  /* ---- Vidro escuro (o GLASS da referência, na luminância escura) --------- */
  --glass-bg:rgba(255,246,232,.055);
  --glass-bg-2:rgba(255,246,232,.085);
  --glass-border:rgba(255,244,228,.10);
  --glass-blur:blur(16px) saturate(1.12);
  --glass-shadow:0 12px 28px -18px rgba(0,0,0,.85);

  --hairline:rgba(255,244,228,.10);
  --shadow-card:0 36px 80px -34px rgba(0,0,0,.9);

  /* ---- Texto (branco/cinzas QUENTES) ------------------------------------- */
  --text:#F5F2ED;                       /* 15.4:1 sobre o cartão */
  --text-2:#CEC7BE;                     /* 10.2:1 */
  --muted:#A69C90;                      /*  6.3:1 */
  --muted-2:#857B70;                    /*  4.1:1 — ainda acima de 3:1 */

  /* ---- Dourado (ACENTO) --------------------------------------------------- */
  --gold:#C99F4B;
  --gold-light:#F2D17E;
  --gold-dark:#8A6912;
  /* Varredura metálica: escuro → principal → brilho → principal → escuro.
     Só entra no HOVER do CTA (e no avatar do modal). */
  --gold-grad:linear-gradient(120deg,
    #8A6912 0%, #C99F4B 34%, #F2D17E 52%, #CFA755 70%, #8A6912 100%);
  --gold-ring:rgba(201,159,75,.38);
  --gold-glow:rgba(201,159,75,.45);
  --on-gold:#14110E;                    /* 7.7:1 sobre o dourado */

  --shine:#F7E3AE;

  /* Selo verificado — dourado metálico (escuro → principal → claro) */
  --seal-a:#8A6912;
  --seal-b:#C99F4B;
  --seal-c:#F2D17E;
  --seal-stroke:#C99F4B;
  --seal-check:#14110E;

  --accent:var(--gold);
  --accent-hover:var(--gold-light);

  /* ---- Estado ------------------------------------------------------------- */
  --ok:#5FD08A;
  --err:#EF8177;

  /* ---- Foto do hero ------------------------------------------------------- */
  /* Um pouco mais funda e menos saturada: encaixa no grafite sem virar poster */
  --hero-filter:brightness(.84) contrast(1.06) saturate(.9);
}