/* Brechic Vestindo Memórias — marca base (etapa 1) — tokens.css
   Lilás medido no logo atual (id/logo-atual/brechic-avatar-instagram-2026-11-12.jpg, 12/11/2026): #B95BD5.
   Neutros quentes da referência de moda (05_REFERENCIAS/nichos/moda-feminina.md). designer3, tarefa #96. */

:root {
  /* 1. Marca */
  --bc-lilas: #B95BD5;          /* fundo do logo: só fundo e bloco; texto sobre ele em ameixa (4,38:1) ou branco ≥ 24px (3,8:1) */
  --bc-branco: #FFFFFF;

  /* 2. Apoio */
  --bc-ameixa: #2E1238;         /* texto e fundo escuro (sobre creme 14,98:1) */
  --bc-violeta: #7A2E96;        /* lilás escurecido: link, botão, destaque em texto (branco 7,9:1; sobre creme 7,1:1) */
  --bc-violeta-hover: #8A3BA6;  /* branco 6,45:1 */
  --bc-creme: #F7F2EC;          /* fundo base */
  --bc-papel: #EFE6DC;          /* superfície */
  --bc-tinta-suave: #6B5A70;    /* texto secundário sobre creme (5,68:1) */
  --bc-lilas-claro: #E9D3F2;    /* texto sobre ameixa (11,96:1) */
  --bc-linha: rgba(46, 18, 56, .14);

  /* 3. Papéis */
  --cor-fundo: var(--bc-creme);
  --cor-titulo: var(--bc-ameixa);
  --cor-texto: var(--bc-ameixa);
  --cor-texto-suave: var(--bc-tinta-suave);
  --cor-destaque: var(--bc-violeta);
  --cor-foco: var(--bc-violeta);
  --cor-botao: var(--bc-violeta);
  --cor-botao-texto: var(--bc-branco);

  /* 4. Tipografia (OFL 1.1; arquivos em site/assets/fonts/) */
  --fonte-titulo: "Cormorant Garamond", Garamond, "Times New Roman", serif;  /* a mais próxima do "Brechic" do logo */
  --fonte-texto: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --fs-mega: clamp(4.5rem, 1rem + 16vw, 16rem);
  --fs-display: clamp(2.75rem, 1.2rem + 6vw, 7rem);
  --fs-h2: clamp(2.25rem, 1.2rem + 4vw, 5rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-texto: clamp(1rem, .96rem + .25vw, 1.125rem);
  --fs-pequeno: .875rem;
  --fs-etiqueta: .75rem;
  --tracking-etiqueta: .22em;
  --medida-texto: 58ch;

  /* 5. Espaço (8 pt) e grid */
  --esp-1: .5rem; --esp-2: 1rem; --esp-3: 1.5rem; --esp-4: 2rem;
  --esp-5: 3rem; --esp-6: 4rem; --esp-7: 6rem; --esp-8: 8rem; --esp-9: 10rem;
  --calha: clamp(1rem, 2vw, 2rem);
  --margem: clamp(1.25rem, 5vw, 5rem);
  --largura-max: 90rem;

  /* 6. Forma */
  --raio: 999px;                /* botões em pílula, como a etiqueta de preço */
  --borda: 1px;

  /* 7. Movimento */
  --curva-saida: cubic-bezier(.22, 1, .36, 1);
  --curva-padrao: cubic-bezier(.4, 0, .2, 1);
  --tempo-micro: 160ms;
  --tempo-ui: 300ms;
  --tempo-revelar: 800ms;
  --escalonar: 80ms;
  --zoom-foto: 1.03;

  /* 8. Textura (papel) */
  --grao-opacidade: .05;
}

[data-tema="escuro"] {
  --cor-fundo: var(--bc-ameixa);
  --cor-titulo: var(--bc-branco);
  --cor-texto: var(--bc-lilas-claro);
  --cor-texto-suave: var(--bc-lilas-claro);
  --cor-destaque: var(--bc-lilas-claro);
  --cor-foco: var(--bc-lilas-claro);
  --cor-botao: var(--bc-lilas);
  --cor-botao-texto: var(--bc-ameixa);
  --bc-linha: rgba(233, 211, 242, .2);
}

@media (prefers-reduced-motion: reduce) {
  :root { --tempo-revelar: 1ms; --escalonar: 0ms; --zoom-foto: 1; }
}