/* ============================================================
   DESIGN TOKENS — Praticamente Tendência · Camada 4 (Sistema)
   Estende o fibonacci-system.css: REUSA os tokens áureos
   (--fs-*, --fib-*, --olli-red, --olli-ink) via var() e
   acrescenta a camada FUNCIONAL (cores por função, papéis
   tipográficos, espaçamento, raios, sombras, movimento).
   Nada aqui duplica o sistema áureo — só o referencia.
   Identidade OFICIAL: branco, cinza claro e vermelho. Tema claro:
   fundo #ffffff, superfície #f4f4f5, texto #1a1a1a, primária #d61f2c.
   ============================================================ */

/* ---------- Playfair Display (títulos) ---------- */
@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfair-400.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfair-700.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfair-900.ttf") format("truetype");
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  /* ---------- cores por função (branco / cinza claro / vermelho) ---------- */
  --fundo:#ffffff;
  --superficie:#f4f4f5;            /* cinza claro, arejado */
  --superficie-elevada:#ffffff;

  --texto-1:#1a1a1a;               /* ~16.1:1 sobre #ffffff */
  --texto-2:#52525b;              /* ~7.5:1 sobre #ffffff — texto secundário */
  --texto-3:#3f3f46;              /* ~10.4:1 sobre #ffffff — secundário sobre tinta */

  --borda:#e4e4e7;
  --borda-forte:#d4d4d8;

  /* marca oficial */
  --vermelho-marca:#d61f2c;       /* branco sobre: 5.0:1 */
  --vermelho-claro:#f04438;       /* branco sobre: 3.9:1 — SÓ detalhes/links grandes,
                                     nunca texto pequeno sobre claro */
  --acento:var(--vermelho-claro);

  /* ação primária — vermelho; UMA por contexto */
  --acao-primaria:#d61f2c;        /* branco sobre: 5.0:1 */
  --acao-primaria-hover:#b3121f;  /* branco sobre: 6.9:1 */
  --acao-primaria-active:#99101b; /* branco sobre: ~8.3:1 */
  --acao-primaria-disabled-fundo:#e4e4e7;
  --acao-primaria-disabled-texto:#52525b; /* 7.5:1 sobre #ffffff */

  /* ação secundária (fantasma) */
  --acao-secundaria-fundo:#ffffff;
  --acao-secundaria-texto:#1a1a1a;
  --acao-secundaria-borda:#d4d4d8;

  /* feedback / estados */
  --sucesso:#067647;              /* 5.39:1 sobre branco */
  --atencao:#b54708;              /* 4.99:1 sobre branco */
  --erro:#b42318;                 /* 6.93:1 sobre branco */
  --sobre-escuro:#ffffff;         /* texto sobre fundos escuros */
  --fundo-escuro:#141414;         /* véu do modal em preto suave; branco sobre: 18.4:1 */
  --fundo-imagem:#1a1a1a;         /* fundo da foto no modal */

  /* foco visível: 16.1:1 sobre #ffffff */
  --foco:#1a1a1a;

  /* ---------- tipografia: títulos em Playfair, corpo mantém a atual ---------- */
  --fonte-principal:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --fonte-titulo:"Playfair Display",Didot,"Bodoni MT",Georgia,serif;

  --texto-titulo-hero:var(--fs-2xl);
  --texto-titulo-secao:var(--fs-xl);
  --texto-subtitulo:var(--fs-md);
  --texto-corpo:var(--fs-sm);
  --texto-rotulo:var(--fs-sm);
  --texto-auxiliar:var(--fs-xs);

  --lh-titulo:1.08;
  --lh-secao:1.15;
  --lh-corpo:1.6;
  --lh-rotulo:1.4;

  --peso-titulo:900;
  --peso-destaque:700;
  --peso-rotulo:600;
  --peso-corpo:400;

  /* ---------- espaçamento (galeria contemplativa: respiro generoso) ---------- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-12:48px;
  --sp-16:64px;

  /* ---------- raios ---------- */
  --raio-sm:8px;
  --raio-md:12px;
  --raio-lg:16px;
  --raio-pilula:999px;

  /* ---------- sombras por camada ---------- */
  --sombra-1:0 1px 2px rgba(26,26,26,.06);
  --sombra-2:0 4px 14px rgba(26,26,26,.10);
  --sombra-3:0 16px 40px rgba(26,26,26,.22);

  /* ---------- movimento: só funcional, 100–300ms ---------- */
  --dur-1:150ms;
  --dur-2:250ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* ---------- aliases de compatibilidade (sistema anterior) ---------- */
  --vinho:var(--vermelho-marca);
  --rosa:var(--vermelho-claro);
  --vermelho:var(--acao-primaria);
  --vermelho-escuro:var(--acao-primaria-hover);
  --cinza:var(--superficie);
  --texto:var(--texto-1);
  --muted:var(--texto-2);
  --linha:var(--borda);
}