/* ══════════════════════════════════════════════════════════════════
   WINE SUPPLY — Design Tokens

   O fundo NÃO é preto neutro nem preto-avermelhado: é o verde-quase-preto
   do vidro de garrafa (matiz 160°, saturação 11%). Motivo: o fundo antigo
   #0F0A09 era matiz 10° — a MESMA família do dourado e do carmim. Tudo na
   página era primo de tudo. Rodando o fundo para o complemento, o creme e
   o dourado esquentam sozinhos, sem ganhar saturação.

   Todo valor que carrega texto foi medido. Os índices estão ao lado.
══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Chão ───────────────────────────────────────────── */
  --void:      #080A09;
  --bg:        #0E1211;
  --surface:   #141917;
  --surface-2: #1C221F;
  --paper:     #F2EDE3;

  /* ── Tinta ──────────────────────────────────────────── */
  /* Índices: no fundo · na superfície-2 */
  --cream:     #EFE9DD;                    /* 15.60 · 13.38 */
  --cream-70:  rgba(239, 233, 221, .74);   /*  8.82 ·  7.91 */
  --cream-45:  rgba(239, 233, 221, .60);   /*  6.13 ·  5.68 */
  --cream-25:  rgba(239, 233, 221, .53);   /*  5.03 ·  4.75 — era .45 = 4.01, REPROVAVA */
  --line:      rgba(239, 233, 221, .14);
  --line-soft: rgba(239, 233, 221, .07);

  /* ── Acentos ────────────────────────────────────────── */
  /* O dourado antigo tinha 74% de saturação e aparecia 91 vezes no CSS.
     Acento usado em tudo não é acento, é fundo. Agora 42% e reservado
     para: preço nenhum, botão de compra, foco. Só. */
  --gold:        #C0A063;   /*  7.59 · 6.51 */
  --gold-bright: #D5BE93;   /* 10.43 · 8.95 — só no hover */
  --gold-ink:    #16100A;   /*  7.59 sobre o dourado (medi #131614 = 7.33, pior) */

  /* Vermelho NUNCA é texto: 3.35:1 reprova. E numa loja de vinho o
     vermelho é o PRODUTO — não pode ser também a cor de "apagar". */
  --crimson:     #B2404C;   /* brilho e filete */
  --crimson-deep:#7E2430;   /* brilho */
  --wine:        #4E1620;   /* brilho */

  --sage:        #8FB89B;   /*  8.53 · 7.32 — "frete grátis", "economize" */
  --danger:      #E27A72;   /*  6.52 · 5.59 */
  --whatsapp:    #25D366;   /* só preenchimento de botão; #06130A por cima = 9.58 */

  --amber:       #C0A063;
  --amber-deep:  #A38A42;
  --rose:        #DED0B4;
  --rose-deep:   #C6B084;

  /* ── Tipo ───────────────────────────────────────────── */
  /* EB Garamond (1500s, via Georg Duffner) — linhagem de comerciante,
     não a serifada da moda. Archivo (Omnibus-Type, Buenos Aires) no corpo. */
  --font-display: 'EB Garamond', 'Gara Fb', Georgia, serif;
  --font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Altura-x medida no arquivo: Garamond .400em, Archivo .526em.
     Garamond é 31,5% menor. Onde os dois se encostam, o serif precisa
     de ×1.315 para PARECER do mesmo tamanho. */
  --gara-adj: 1.315;

  /* Escala modular: duas razões articuladas em 1rem.
     1.125 para texto, 1.333 para display. 25 tamanhos viram 14. */
  --t--4: .624rem;  --t--3: .702rem;  --t--2: .790rem;  --t--1: .889rem;
  --t-0:  1rem;     --t-1:  1.125rem; --t-2:  1.266rem;
  --d-1:  1.688rem; --d-2:  2.25rem;  --d-3:  3rem;     --d-4: 4rem;
  --d-5:  5.33rem;  --d-6:  7.1rem;   --d-7:  9.47rem;  --d-8: 12.63rem;

  /* ── Movimento ──────────────────────────────────────── */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --dur:       .7s;

  /* ── Layout ─────────────────────────────────────────── */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --nav-h:  4.25rem;
  --radius: 14px;

  /* ── Z ──────────────────────────────────────────────── */
  --z-grain:  80;
  --z-nav:    100;
  --z-filter: 95;
  --z-cart:   120;
  --z-detail: 130;
  --z-toast:  200;
}

/* ── Atmosferas por categoria ─────────────────────────────
   Antes cada categoria tinha uma cor de TEXTO própria. Isso dava três
   sistemas de cor concorrendo com o dourado — e o "branco" (#F2CC8F,
   matiz 37°) era funcionalmente o mesmo dourado, enquanto o "espumante"
   era rosa-bebê, a cor mais gerada por IA que existe.

   Agora a atmosfera é só LUZ: fica atrás da garrafa, na cor do líquido.
   Nunca carrega texto, então não tem dívida de contraste — e faz o
   único trabalho que a placa de papel não consegue fazer sozinha.  */
[data-atmo="tinto"] {
  --atmo:      rgba(239, 233, 221, .74);
  --atmo-deep: var(--crimson-deep);
  --atmo-soft: rgba(178, 64, 76, .10);
  --atmo-glow: rgba(126, 36, 48, .45);
}
[data-atmo="branco"] {
  --atmo:      rgba(239, 233, 221, .74);
  --atmo-deep: var(--amber-deep);
  --atmo-soft: rgba(192, 160, 99, .09);
  --atmo-glow: rgba(163, 138, 66, .38);
}
[data-atmo="espumante"] {
  --atmo:      rgba(239, 233, 221, .74);
  --atmo-deep: var(--rose-deep);
  --atmo-soft: rgba(222, 208, 180, .08);
  --atmo-glow: rgba(198, 176, 132, .30);
}