/* =========================================================
   SEGREDINHO · tokens da identidade visual
   Importe este arquivo antes do CSS do site e do sistema.
   ========================================================= */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores base */
  --sg-berinjela: #2A1033;   /* texto, logo, botões principais */
  --sg-berinjela-80: #4A2A5A;/* texto secundário */
  --sg-tangerina: #FF7A3D;   /* cor de destaque, corpo do Segredinho */
  --sg-tangerina-escura: #E8602B;
  --sg-lilas: #C9B6FF;
  --sg-lilas-claro: #E6DAF5;
  --sg-manteiga: #FFD966;
  --sg-menta: #9BE6C9;
  --sg-pessego: #FFB3A3;
  --sg-creme: #FFF4E6;       /* fundo padrão */
  --sg-creme-borda: #F1E2CC;
  --sg-branco: #FFFFFF;
  --sg-chocolate: #6B3420;

  /* Papéis */
  --cor-fundo: var(--sg-creme);
  --cor-superficie: var(--sg-branco);
  --cor-texto: var(--sg-berinjela);
  --cor-texto-suave: var(--sg-berinjela-80);
  --cor-borda: var(--sg-creme-borda);
  --cor-primaria: var(--sg-berinjela);
  --cor-primaria-texto: var(--sg-creme);
  --cor-destaque: var(--sg-tangerina);
  --cor-sucesso: #1F8A5B;
  --cor-erro: #C8322B;

  /* Tipografia */
  --fonte-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --fonte-texto: "Figtree", system-ui, sans-serif;
  --titulo-xl: clamp(3rem, 8vw, 6.5rem);   /* hero */
  --titulo-l: clamp(2.25rem, 5vw, 3.5rem);
  --titulo-m: clamp(1.6rem, 3vw, 2.25rem);
  --titulo-s: 1.375rem;
  --texto-l: 1.25rem;
  --texto-m: 1.0625rem;
  --texto-s: 0.9375rem;
  --tracking-titulo: -0.035em;

  /* Forma */
  --raio-s: 12px;
  --raio-m: 20px;
  --raio-l: 28px;
  --raio-pill: 999px;
  --borda-forte: 3px solid var(--sg-berinjela);
  --sombra-pop: 4px 4px 0 var(--sg-berinjela);  /* sombra chapada, estilo pop */
  --sombra-suave: 0 10px 30px rgba(42, 16, 51, 0.10);

  /* Espaço */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px; --esp-9: 96px;
}

/* Temas por tipo de evento: aplique data-evento no <body> ou no container do grupo */
[data-evento="amigo-secreto"]   { --evento-fundo: var(--sg-tangerina); --evento-texto: var(--sg-berinjela); --evento-acento: var(--sg-manteiga); }
[data-evento="amigo-chocolate"] { --evento-fundo: var(--sg-chocolate); --evento-texto: var(--sg-creme);     --evento-acento: var(--sg-manteiga); }
[data-evento="amigo-pascoa"]    { --evento-fundo: var(--sg-menta);     --evento-texto: var(--sg-berinjela); --evento-acento: var(--sg-pessego); }
[data-evento="amigo-livro"]     { --evento-fundo: var(--sg-lilas);     --evento-texto: var(--sg-berinjela); --evento-acento: var(--sg-tangerina); }
[data-evento="amigo-vinho"]     { --evento-fundo: #7A1E3A;               --evento-texto: var(--sg-creme);     --evento-acento: var(--sg-pessego); }
[data-evento="amigo-da-onca"]   { --evento-fundo: var(--sg-manteiga);  --evento-texto: var(--sg-berinjela); --evento-acento: var(--sg-tangerina); }
[data-evento="amigo-fit"]       { --evento-fundo: var(--sg-menta);     --evento-texto: var(--sg-berinjela); --evento-acento: var(--sg-lilas); }

/* Modo escuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo: #1A0A20;
    --cor-superficie: var(--sg-berinjela);
    --cor-texto: var(--sg-creme);
    --cor-texto-suave: #C9B6E0;
    --cor-borda: #3D2048;
    --cor-primaria: var(--sg-tangerina);
    --cor-primaria-texto: var(--sg-berinjela);
    --sombra-pop: 4px 4px 0 #000;
  }
}

/* Componentes base sugeridos */
.sg-titulo { font-family: var(--fonte-display); font-weight: 800; letter-spacing: var(--tracking-titulo); line-height: 0.95; }
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px; border-radius: var(--raio-pill);
  background: var(--cor-primaria); color: var(--cor-primaria-texto);
  font-family: var(--fonte-texto); font-weight: 700; font-size: var(--texto-m);
  border: 0; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sg-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-pop); }
.sg-btn--claro { background: var(--sg-branco); color: var(--sg-berinjela); }
.sg-btn--destaque { background: var(--sg-tangerina); color: var(--sg-berinjela); }
.sg-tag { display: inline-flex; padding: 8px 16px; border-radius: var(--raio-pill); font-weight: 700; font-size: var(--texto-s); background: var(--sg-manteiga); color: var(--sg-berinjela); }
.sg-card { background: var(--cor-superficie); border-radius: var(--raio-l); padding: var(--esp-6); }
.sg-borrado { filter: blur(8px); user-select: none; pointer-events: none; }