/* ============================================================
   DESIGN TOKENS — Beleza Infinita · 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.
   Tema CLARO OFICIAL: fundo #fffafa, texto #4a0f24,
   primária #c8245a, acento #f05050, vinho #a01e4e.
   ============================================================ */

/* ---------- 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 (paleta oficial, tema claro) ---------- */
  --fundo:#fffafa;
  --superficie:#fbeef3;            /* rosa bem claro, arejado */
  --superficie-elevada:#ffffff;

  --texto-1:#4a0f24;               /* 14.66:1 sobre #fffafa */
  --texto-2:#8a4f61;              /* 6.02:1 sobre #fffafa — texto secundário */
  --texto-3:#6e3a4e;              /* 8.54:1 sobre #fffafa — secundário sobre tinta */

  --borda:#f3dbe3;
  --borda-forte:#e0b7c5;

  /* marca oficial */
  --vinho:#a01e4e;                /* branco sobre: 7.53:1 */
  --rosa:#f05050;                 /* branco sobre: 3.52:1 — SÓ detalhes/links grandes,
                                     nunca texto pequeno sobre claro */
  --acento:var(--rosa);

  /* ação primária — rosa profundo; UMA por contexto */
  --acao-primaria:#c8245a;        /* branco sobre: 5.45:1 */
  --acao-primaria-hover:#a51c48;  /* branco sobre: 7.34:1 */
  --acao-primaria-active:#8c1739; /* branco sobre: ~9.1:1 */
  --acao-primaria-disabled-fundo:#f3dbe3;
  --acao-primaria-disabled-texto:#8a4f61; /* 6.02:1 sobre #fffafa */

  /* ação secundária (fantasma) */
  --acao-secundaria-fundo:#ffffff;
  --acao-secundaria-texto:#4a0f24;
  --acao-secundaria-borda:#e0b7c5;

  /* 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:#3a0e1e;         /* véu do modal em vinho profundo; branco sobre: 13.9:1 */
  --fundo-imagem:#3a0e1e;         /* fundo da foto no modal (vinho profundo) */

  /* foco visível: 14.66:1 sobre #fffafa */
  --foco:#4a0f24;

  /* ---------- 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(74,15,36,.06);
  --sombra-2:0 4px 14px rgba(74,15,36,.10);
  --sombra-3:0 16px 40px rgba(74,15,36,.22);

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

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