/* =============================================================================
   TEMA "CHAMPANHE" — metal quente CLARO (tradução da referência HWPO / Linktree)
   -----------------------------------------------------------------------------
   Referência medida: fundo #A39A8F (taupe quente, "colordown"), luminância LIGHT,
   painéis GLASS (fill branco translúcido + blur + hairline clara + sombra curta),
   texto escuro centralizado, selo dourado.

   O metal NÃO é cor chapada: é gradiente (colordown) + reflexo especular +
   micro-granulação. Como o cartão (--card-bg) é a superfície dominante no mobile
   (ele cobre o body::before/::after), a granulação e o brilho do metal são
   embutidos NO PRÓPRIO --card-bg, em camadas.

   Só tokens. Geometria mora no site.css.
   ========================================================================== */
:root[data-theme="champanhe"]{

  /* ---- Superfícies ---------------------------------------------------------
     --bg-rgb = cor REAL do cartão na altura em que a foto do hero termina
     (~12% de um cartão longo). Por isso o gradiente do cartão fica CHAPADO até
     14%: assim o esfumaçado da foto fecha exatamente na cor da superfície.     */
  --page-rgb:182,173,161;               /* taupe da referência (#B6ADA1) */
  --bg-rgb:216,208,196;                 /* champanhe do topo do cartão (#D8D0C4) */

  /* Campo (desktop): taupe quente descendo — o "colordown" da referência. */
  --page-bg:
    linear-gradient(180deg,#B6ADA1 0%,#A9A094 46%,#978F83 100%);

  /* Cartão = a chapa de metal. Camadas, de cima para baixo:
       1. poça de luz difusa (especular largo)
       2. roll-off das bordas (volume da chapa)
       3. colordown champanhe (chapado até 14% p/ o fade da foto fechar)
     A granulação NÃO mora aqui: é o body::after, por cima de tudo. Dentro do
     --card-bg ela clareava o cartão e abria emenda na base da foto. */
  --card-bg:
    radial-gradient(85% 45% at 50% 62%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
    radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 56%, rgba(74,62,46,.07) 100%),
    linear-gradient(180deg,#D8D0C4 0%,#D8D0C4 14%,#D3CABE 56%,#CEC5B8 100%);

  /* Reflexo especular sobre o campo (visível no desktop, ao redor do cartão) */
  --sheen:
    radial-gradient(120% 70% at 50% -12%, rgba(255,255,255,.26), rgba(255,255,255,0) 58%),
    linear-gradient(102deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 62%),
    radial-gradient(120% 55% at 50% 112%, rgba(58,48,36,.18), rgba(58,48,36,0) 62%);
  --grain:.04;

  /* ---- Vidro (GLASS do Linktree: fill branco fosco) ------------------------ */
  --glass-bg:rgba(255,255,255,.45);
  --glass-bg-2:rgba(255,255,255,.62);
  --glass-border:rgba(255,255,255,.72);
  --glass-blur:blur(14px) saturate(1.04);
  --glass-shadow:0 4px 14px -8px rgba(72,60,44,.45);   /* SHADOW_SM */

  --surface:rgba(255,255,255,.45);
  --surface-2:rgba(255,255,255,.62);
  --hairline:rgba(255,255,255,.62);                    /* aresta polida */

  --shadow-card:0 30px 70px -34px rgba(64,53,40,.55);

  /* ---- Texto (escuro, quente — nada de preto puro) -------------------------
     Piores fundos: cartão no fim do gradiente (#CEC5B8, L=.566)
       --text    #1A1712  → 10.5:1
       --text-2  #3E362B  →  7.0:1
       --muted   #5A5144  →  4.6:1
       --muted-2 #6B6152  →  3.6:1                                              */
  --text:#1A1712;
  --text-2:#3E362B;
  --muted:#5A5144;
  --muted-2:#6B6152;
  --on-photo:#fff;

  /* ---- Dourado ------------------------------------------------------------
     Em fundo claro o #C99F4B some (1.3:1). O site.css usa --gold TANTO como
     texto (eyebrow, section-label, links, marcadores) QUANTO como preenchimento
     (CTA, checkbox). Então --gold aqui é o DOURADO ESCURO da paleta do cliente
     (#8A6912, aqui fechado 1 grau) — lê como ouro velho sobre champanhe e ainda
     passa como acento de texto. O brilho (#C99F4B/#F2D17E) fica reservado ao
     selo (imagem) e ao sweep do hover.                                          */
  --gold:#82620F;                       /* fill do CTA + acento de texto (3.3:1) */
  --gold-light:#A87F2B;                 /* hover sobre foto / realce */
  --gold-dark:#5E460A;
  /* claro → principal → escuro, só no HOVER: um sweep metálico discreto */
  --gold-grad:linear-gradient(135deg,#97731B 0%,#82620F 48%,#684D08 100%);
  --gold-ring:rgba(130,98,15,.55);
  --gold-glow:rgba(130,98,15,.40);
  --on-gold:#FBF8F1;                    /* creme sobre o ouro → 5.4:1 */

  /* o CTA aqui é ouro velho (#82620F): o brilho acende, sem clarear demais */
  --shine:#C99F4B;

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

  /* Destaque de texto: o --gold daqui (#82620F) só dá 3,3:1 — reprova AA em 14px.
     O dourado ESCURO passa e mantém a identidade. */
  --accent:#5E460A;
  --accent-hover:#82620F;

  /* ---- Estado (os tons claros do tema escuro somem no claro) --------------- */
  --ok:#0F5525;                         /* 5.2:1 */
  --err:#9A1B1B;                        /* 4.8:1 */
  --wa:#16A34A;

  /* ---- Foto do hero: fundo claro não pede escurecimento ------------------- */
  --hero-filter:brightness(1.03) contrast(1.02) saturate(.96);
}