/*
 * Viralize Farm · tokens de design (fonte única pra site e painel).
 * Cores tiradas do logo: "Viralize" magenta/rosa, "Farm" dourado, contorno e fundo
 * roxo escuro, sombra roxo médio. Tema escuro de base roxa.
 * Contraste conferido (WCAG AA) sobre --vf-fundo (#0f0816) e --vf-superficie (#170d22):
 *   texto 17.5:1 · texto-2 11.3:1 · texto-3 7.3:1 · magenta-claro 6.7:1 · ouro 12.1:1
 *   CTA (texto --vf-cta-texto sobre o degradê): 5.0:1 no ponto mais escuro.
 * Não invente cor fora daqui: se faltar, acrescente um token neste arquivo.
 * Uso: <link rel="stylesheet" href="/shared/tokens.css"> (site) ou import no painel.
 */

/* ---------------- Fontes locais (Sora títulos, Inter texto) ---------------- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("./fonts/sora-latin-wght-normal.woff2") format("woff2-variations"), url("./fonts/sora-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("./fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* ---- Roxo (base) ---- */
  --vf-roxo-950: #0f0816;
  --vf-roxo-900: #170d22;
  --vf-roxo-850: #1c1129;
  --vf-roxo-800: #221633;
  --vf-roxo-700: #35294c; /* contorno do logo */
  --vf-roxo-600: #4a3868;
  --vf-roxo-500: #6b4f94; /* sombra do logo */
  --vf-roxo-400: #8f73bb;
  --vf-roxo-300: #b9a7ff;

  /* ---- Magenta / rosa ("Viralize") ---- */
  --vf-magenta-800: #7a1026;
  --vf-magenta-700: #9d152f; /* tom escuro do logo */
  --vf-magenta-600: #c42a5c;
  --vf-magenta-500: #e0356b; /* cor da marca (acentos, ícones, bordas) */
  --vf-magenta-400: #ff5c8f; /* magenta pra TEXTO sobre fundo escuro (AA) */
  --vf-magenta-200: #ffc2d5;

  /* ---- Dourado ("Farm") ---- */
  --vf-ouro-700: #8a5f12;
  --vf-ouro-600: #b8801a;
  --vf-ouro-500: #dda225; /* dourado do logo */
  --vf-ouro-400: #f5c451; /* dourado pra TEXTO sobre fundo escuro (AA) */
  --vf-ouro-200: #fbdfa8; /* brilho do logo */

  /* ---- Semânticas ---- */
  --vf-fundo: var(--vf-roxo-950);
  --vf-superficie: var(--vf-roxo-900);
  --vf-superficie-2: var(--vf-roxo-850);
  --vf-superficie-3: var(--vf-roxo-800);
  --vf-borda: rgba(185, 167, 255, 0.14);
  --vf-borda-forte: rgba(185, 167, 255, 0.28);
  --vf-texto: #f6effa;
  --vf-texto-2: #cdbfdc;
  --vf-texto-3: #a896bf;
  --vf-texto-inverso: #1a0812;
  --vf-link: var(--vf-magenta-400);
  --vf-foco: #ffd166;

  --vf-sucesso: #3ddc97;
  --vf-sucesso-fundo: rgba(61, 220, 151, 0.12);
  --vf-alerta: var(--vf-ouro-400);
  --vf-alerta-fundo: rgba(245, 196, 81, 0.12);
  --vf-erro: #ff6b7d;
  --vf-erro-fundo: rgba(255, 107, 125, 0.12);
  --vf-info: #8ec5ff;
  --vf-info-fundo: rgba(142, 197, 255, 0.12);

  /* ---- Degradês ---- */
  --vf-degrade-cta: linear-gradient(100deg, #ec4f80 0%, #f07a4a 52%, #f5c451 100%);
  --vf-degrade-cta-hover: linear-gradient(100deg, #f2638f 0%, #f38a5c 52%, #f8cf6b 100%);
  --vf-cta-texto: #1a0812;
  --vf-degrade-marca: linear-gradient(135deg, var(--vf-magenta-500) 0%, var(--vf-ouro-500) 100%);
  --vf-degrade-fundo: radial-gradient(1200px 600px at 15% -10%, rgba(224, 53, 107, 0.16), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(221, 162, 37, 0.1), transparent 55%),
    var(--vf-roxo-950);
  --vf-texto-degrade: linear-gradient(90deg, var(--vf-magenta-400), var(--vf-ouro-400));

  /* ---- Tipografia ---- */
  --vf-fonte-titulo: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --vf-fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --vf-fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --vf-fs-xs: 0.75rem; /* 12 */
  --vf-fs-sm: 0.875rem; /* 14 */
  --vf-fs-md: 1rem; /* 16 */
  --vf-fs-lg: 1.125rem; /* 18 */
  --vf-fs-xl: 1.25rem; /* 20 */
  --vf-fs-2xl: 1.5rem; /* 24 */
  --vf-fs-3xl: 1.875rem; /* 30 */
  --vf-fs-4xl: 2.5rem; /* 40 */
  --vf-fs-5xl: clamp(2.5rem, 5vw + 1rem, 4rem); /* herói */

  --vf-peso-normal: 400;
  --vf-peso-medio: 500;
  --vf-peso-semi: 600;
  --vf-peso-forte: 700;
  --vf-peso-extra: 800;

  --vf-altura-linha: 1.55;
  --vf-altura-titulo: 1.15;

  /* ---- Espaçamento (base 4 px) ---- */
  --vf-esp-0: 0;
  --vf-esp-1: 0.25rem; /* 4 */
  --vf-esp-2: 0.5rem; /* 8 */
  --vf-esp-3: 0.75rem; /* 12 */
  --vf-esp-4: 1rem; /* 16 */
  --vf-esp-5: 1.25rem; /* 20 */
  --vf-esp-6: 1.5rem; /* 24 */
  --vf-esp-8: 2rem; /* 32 */
  --vf-esp-10: 2.5rem; /* 40 */
  --vf-esp-12: 3rem; /* 48 */
  --vf-esp-16: 4rem; /* 64 */
  --vf-esp-20: 5rem; /* 80 */
  --vf-esp-24: 6rem; /* 96 */

  /* ---- Raios ---- */
  --vf-raio-sm: 6px;
  --vf-raio-md: 10px;
  --vf-raio-lg: 14px;
  --vf-raio-xl: 20px;
  --vf-raio-2xl: 28px;
  --vf-raio-pilula: 999px;

  /* ---- Sombras ---- */
  --vf-sombra-1: 0 1px 2px rgba(5, 2, 10, 0.5);
  --vf-sombra-2: 0 6px 18px rgba(5, 2, 10, 0.45);
  --vf-sombra-3: 0 18px 48px rgba(5, 2, 10, 0.55);
  --vf-sombra-marca: 0 10px 30px rgba(224, 53, 107, 0.28);
  --vf-sombra-ouro: 0 10px 30px rgba(221, 162, 37, 0.22);
  --vf-anel-foco: 0 0 0 3px rgba(255, 209, 102, 0.55);

  /* ---- Layout ---- */
  --vf-largura-site: 1272px; /* mesma largura do chatgrowing.com.br */
  --vf-largura-texto: 68ch;
  --vf-menu-lateral: 260px;
  --vf-topo-altura: 64px;

  /* ---- Movimento ---- */
  --vf-transicao: 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --vf-transicao-lenta: 320ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Camadas ---- */
  --vf-z-topo: 20;
  --vf-z-menu: 30;
  --vf-z-modal: 50;
  --vf-z-aviso: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --vf-transicao: 0ms linear;
    --vf-transicao-lenta: 0ms linear;
  }
}