/*
 * Kit de marca do Thalidelidade (direção P10 Plaquinha, escolhida em 13/10/2026). Fonte única dos tokens das PWAs
 * e da landing (`site/tokens.css` é cópia deste arquivo; o teste `kit-site.test.ts` falha se divergirem).
 * Explicação de uma página: docs/design/kit-de-marca.md.
 *
 * Contraste (WCAG 2.1, luminância relativa; AA = 4,5:1 texto normal, 3:1 texto grande):
 *   --cor-texto        #111827 sobre --cor-fundo #EEF1F6 = 15,7:1 · sobre branco = 17,7:1
 *   --cor-texto-suave  #5B6472 sobre #EEF1F6 = 5,3:1 · sobre branco = 6,0:1 · sobre #DDE4EE = 4,7:1
 *   --cor-marca-tinta  #111827 sobre --cor-marca #0EA5E9 = 6,4:1 · sobre #38BDF8 (hover) = 8,3:1
 *   --cor-marca-texto  #0369A1 sobre branco = 5,9:1 · sobre #EEF1F6 = 5,2:1 · sobre #E0F2FE = 5,2:1
 *   --cor-erro         #B91C1C sobre branco = 6,5:1 · sobre #EEF1F6 = 5,7:1
 *   --cor-aviso        #8A5A00 sobre branco = 5,9:1 · sobre #EEF1F6 = 5,2:1
 *   --cor-sucesso      #047857 sobre branco = 5,5:1 · sobre #EEF1F6 = 4,8:1
 *   Proibido: #0EA5E9 como cor de texto (2,8:1 sobre branco) e texto branco sobre #0EA5E9 (2,8:1).
 */
:root {
  /* Marca: um azul-céu só. Texto sobre ele é sempre --cor-marca-tinta. */
  --cor-marca: #0ea5e9;
  --cor-marca-hover: #38bdf8;
  --cor-marca-tinta: #111827;
  --cor-marca-texto: #0369a1;
  --cor-marca-suave: #e0f2fe;
  --cor-marca-vidro: rgba(14, 165, 233, 0.14);

  /* Neutros de estúdio (frios) */
  --cor-fundo: #eef1f6;
  --cor-fundo-2: #dde4ee;
  --cor-superficie: #ffffff;
  --cor-borda: #d5dbe5;
  --cor-texto: #111827;
  --cor-texto-suave: #5b6472;
  --cor-texto-inverso: #ffffff;

  /* Aliases da 1A: as PWAs e o <Estado> já usam estes nomes. */
  --cor-acento: var(--cor-marca);
  --cor-acento-forte: var(--cor-marca-hover);
  --cor-acento-suave: var(--cor-marca-suave);

  /* Estados (sempre acompanhados de texto e ícone; nunca só cor) */
  --cor-erro: #b91c1c;
  --cor-aviso: #8a5a00;
  --cor-sucesso: #047857;

  /* Cor da loja: quem define é o dono (só cor e logo, design §8.7). Default neutro até a loja escolher. */
  --cor-loja: #111827;
  --cor-loja-tinta: #ffffff;

  /* Tipografia: Urbanist 700/800 para título e número, Albert Sans 400/500/600 para texto e interface. */
  --fonte-titulo: 'Urbanist', sans-serif;
  --fonte-texto: 'Albert Sans', sans-serif;
  --texto-xs: 0.8125rem;
  --texto-sm: 0.9375rem;
  --texto-md: 1.0625rem;
  --texto-lg: 1.375rem;
  --texto-xl: 1.75rem;
  --texto-2xl: 2.25rem;
  --texto-3xl: clamp(2.25rem, 4.6vw, 4.25rem);
  --texto-display: clamp(2.75rem, 5.8vw, 5.375rem);
  --peso-normal: 400;
  --peso-medio: 600;
  --peso-forte: 700;
  --peso-display: 800;
  --altura-linha: 1.55;
  --altura-titulo: 1.02;
  --espacamento-titulo: -0.02em;

  /* Espaço */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-6: 1.5rem;
  --espaco-8: 2rem;
  --espaco-12: 3rem;
  --espaco-16: 4rem;

  /* Raio */
  --raio-sm: 10px;
  --raio-md: 18px;
  --raio-lg: 24px;
  --raio-pilula: 999px;

  /* Sombra de estúdio: luz da esquerda, sombra comprida para a direita e para baixo. */
  --sombra-leve: 8px 12px 24px -12px rgba(17, 24, 39, 0.22);
  --sombra-objeto: 18px 26px 40px -18px rgba(17, 24, 39, 0.3), 48px 60px 80px -40px rgba(17, 24, 39, 0.22);

  /* Toque e movimento */
  --alvo-toque: 44px;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}