/*
 * TOKENS DO SITE DO LAÇOS
 *
 * Cores e fontes: CÓPIA de ~/boomer/infra/criativos/tokens.css (07/09/2026),
 * que por sua vez saiu de frontend-v2/src/styles/{globals,escala,molde}.css.
 * Nada aqui é symlink, import cruzado ou caminho com "..".
 *
 * Estrutura (escala, ritmo, animação): decisões de docs/site-referencia-decisoes.md,
 * medidas na referência ai-social-automation.aura.build. Valores traduzidos pela §8.
 */

@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* --- paleta canônica do Laços (cópia literal do boomer) --- */
  --forest: #102b26;
  --forest-2: #0b211e;
  --green: #174a3c;
  --green-2: #21614f;
  --sage: #9bb8a4;
  --sage-soft: #e4ede5;
  --orange: #f36a21;
  --cream: #fcfaf7;
  --ink: #172521;

  /* --- papéis (tradução §8: quem ocupa o lugar de quê na referência) --- */
  --fundo: var(--forest-2);          /* referência: #050505 */
  --fundo-cartao: var(--forest);     /* referência: #0A0A0A */
  --superficie: rgba(228, 237, 229, 0.05);   /* referência: bg-white/5 — o fundo mais usado */
  --superficie-forte: rgba(228, 237, 229, 0.08);
  --borda: rgba(228, 237, 229, 0.1);         /* referência: border-white/10 */
  --borda-sutil: rgba(228, 237, 229, 0.05);  /* referência: border-white/5 */
  --borda-acento: rgba(243, 106, 33, 0.35);
  --borda-forte: rgba(228, 237, 229, 0.2);       /* referência: hover border-white/20 */
  --superficie-hover: rgba(228, 237, 229, 0.04); /* referência: hover bg-white/[0.04] */
  /* passos fechados do acento (referência: orange-500/10, /20, /30). Antes eram
     18 opacidades soltas: .08 .09 .1 .12 .14 .16 .22 — cada peça com a sua. */
  --acento-10: rgba(243, 106, 33, 0.10);
  --acento-20: rgba(243, 106, 33, 0.20);
  --acento-30: rgba(243, 106, 33, 0.30);
  /* sombra aqui é LUZ, não elevação (§7): a referência usa glow laranja com
     spread negativo em 11 variantes e sombra preta uma vez só. */
  --glow-1: 0 0 40px -10px rgba(243, 106, 33, 0.15);   /* referência: painel do mock */
  --glow-2: 0 0 40px -8px rgba(243, 106, 33, 0.55);    /* botão primário */
  --glow-3: 0 0 56px -6px rgba(243, 106, 33, 0.7);     /* botão primário, hover */

  --texto: var(--cream);                     /* referência: white */
  --texto-2: #c3d4c8;                        /* referência: neutral-300 */
  --texto-3: var(--sage);                    /* referência: neutral-400 */
  --texto-4: #869f92;                        /* referência: neutral-500 */
  --acento: var(--orange);
  --acento-claro: #ff8f52;                   /* referência: orange-400 */

  /* --- tipografia --- */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-ui: "Space Grotesk", "Segoe UI", system-ui, sans-serif;

  /* escala medida na referência §2, com clamp para mobile-primeiro */
  --t-h1: clamp(2.75rem, 1.4rem + 6.2vw, 4.75rem);   /* 44px -> 76px */
  --t-h2: clamp(2rem, 1.3rem + 3.2vw, 3rem);         /* 32px -> 48px */
  --t-h3: clamp(1.375rem, 1.15rem + 1vw, 1.5rem);    /* 22px -> 24px */
  --t-h4: 1.25rem;                                   /* 20px */
  --t-grande: 1.125rem;                              /* 18px */
  --t-corpo: 0.9375rem;                              /* 15px — piso de leitura, ver nota */
  --t-ui: 0.875rem;                                  /* 14px */
  --t-peq: 0.75rem;                                  /* 12px */
  --t-micro: 0.6875rem;                              /* 11px */

  --lh-h1: 1.05;
  --lh-h2: 1.12;
  --lh-corpo: 1.55;
  --track-display: -0.025em;
  /* Rótulo em caixa alta: UM papel, um peso, um tracking. Antes eram 12
     combinações peso/tracking para a mesma coisa. A referência usa tracking
     zero e peso 400 nos kickers; 0.08em/500 é adaptação nossa (Oswald/Space
     Grotesk em 11px fecham sem tracking) — registrada no doc de decisões. */
  --track-rotulo: 0.08em;
  --track-olho: 0.12em;
  --peso-rotulo: 500;

  /* Nota: a referência usa 14px como corpo dominante (45x) e desce a 10px.
     O frontend-v2 (escala.css) impõe piso de 14px no texto que decide.
     Adotamos 15px de corpo e 11px como piso absoluto — nada abaixo disso. */

  /* --- ritmo vertical medido (§3) --- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 40px;
  --secao: clamp(72px, 8vw, 96px);   /* referência: mt-24/mb-24 = 96px; piso 72 para o ritmo do mobile não cair abaixo da faixa */

  /* --- forma --- */
  --raio-cartao: 24px;    /* referência: rounded-3xl */
  --raio-caixa: 16px;
  --raio-controle: 12px;
  --raio-pilula: 999px;   /* referência: rounded-full, 43 ocorrências */

  /* Degraus de largura (CSS não aceita var() em @media — ficam documentados):
       640  (referência: sm)   — conversa e saltos deixam de empilhar
       768  (referência: md)   — grades de 2 e 3 colunas, painel com lateral
       1024 (referência: lg)   — a quebra estrutural: hero 7-5, cascas 2 colunas
       1200 — ÚNICA exceção: a órbita volta a escala 1 quando a coluna cabe 500px */
  --container: 1280px;    /* referência: max-w-7xl */
  --gutter: 24px;
  --gutter-mob: 16px;
  --toque: 44px;          /* alvo mínimo de toque */

  /* --- movimento (§5) --- */
  --curva-entrada: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-entrada: 1s;
  --dur-scroll: 0.8s;
  --dur-hover: 300ms;
}