/* =============================================================================
   LIF3 · Performance Intelligence Company · tokens v2.0 (2026)
   Fonte: brand book em 7 boards (clientes/lif3/marca/brandbook). Divergências entre
   os boards e as escolhas feitas estão em references/divergencias.md da skill lif3-brand.
   Tema escuro é o padrão (a marca nasce no preto). Tema claro: data-tema="claro".
   ============================================================================= */

:root {
  /* ---- Paleta oficial ------------------------------------------------------ */
  --lif3-black: #0A0A0A;     /* LIF3 Black · base, fundo */
  --lif3-white: #F5F5F5;     /* Signal White · tipografia */
  --lif3-lime: #C6FF00;      /* Electric Lime · destaque, energia, o "3" */
  --lif3-grey: #8A8F98;      /* System Grey · apoio, texto secundário */
  --lif3-graphite: #1E1F23;  /* Deep Graphite · superfície, cards */
  --lif3-steel: #6B7078;     /* Steel · linhas, meta, texto grande secundário */

  /* lime em transparência: brilho, trilhos, fills de dado */
  --lime-06: rgba(198, 255, 0, 0.06);
  --lime-12: rgba(198, 255, 0, 0.12);
  --lime-24: rgba(198, 255, 0, 0.24);
  --lime-40: rgba(198, 255, 0, 0.40);
  --lime-70: rgba(198, 255, 0, 0.70);

  /* ---- Gradientes ---------------------------------------------------------- */
  /* O "3": nasce grafite e acende em lime (medido nos boards). Aplicar por peça. */
  --grad-3: linear-gradient(90deg, #2A2C27 0%, #6E7D39 35%, #C6FF00 72%);
  --grad-3-claro: linear-gradient(90deg, #0A0A0A 0%, #4C6006 40%, #C6FF00 85%);
  /* Fluxo: barra de velocidade dos elementos gráficos (transparente -> lime) */
  --grad-fluxo: linear-gradient(90deg, rgba(198, 255, 0, 0) 0%, rgba(198, 255, 0, 0.55) 55%, #C6FF00 100%);
  --grad-fluxo-v: linear-gradient(0deg, rgba(198, 255, 0, 0) 0%, #C6FF00 100%);
  /* Superfície de painel (board): grafite quase preto */
  --grad-painel: linear-gradient(180deg, #121316 0%, #0A0A0A 100%);

  /* ---- Brilho (só em tela; nunca em PDF) ----------------------------------- */
  --brilho-lime: 0 0 0 1px rgba(198, 255, 0, 0.35), 0 0 28px rgba(198, 255, 0, 0.28);
  --brilho-lime-filtro: drop-shadow(0 0 10px rgba(198, 255, 0, 0.45));
  --brilho-texto: 0 0 18px rgba(198, 255, 0, 0.35);

  /* ---- Tipografia ---------------------------------------------------------- */
  --fonte-display: "Space Grotesk", "Inter", system-ui, sans-serif;  /* títulos, números, assinatura */
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;  /* interface, corpo */

  --fs-display: clamp(3rem, 8vw, 6.5rem);       /* hero: DADOS EM AÇÃO */
  --fs-h1: clamp(2.25rem, 5.2vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: 1.375rem;
  --fs-dado: clamp(2.5rem, 6vw, 4.5rem);        /* +218% */
  --fs-corpo-g: 1.0625rem;
  --fs-corpo: 0.9375rem;
  --fs-legenda: 0.8125rem;
  --fs-rotulo: 0.6875rem;                        /* 01 | INTRODUÇÃO */
  --fs-assinatura: 0.75rem;                      /* PERFORMANCE INTELLIGENCE COMPANY */

  --lh-display: 0.92;
  --lh-titulo: 0.98;
  --lh-corpo: 1.6;
  --ls-display: -0.01em;
  --ls-rotulo: 0.14em;
  --ls-assinatura: 0.40em;                       /* medido no logo: 0.40 em */

  /* ---- Espaço, raio, linha -------------------------------------------------- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --raio-p: 4px;           /* cards técnicos, tags quadradas */
  --raio: 8px;             /* cards, botões */
  --raio-g: 16px;          /* painéis */
  --raio-icone: 22.5%;     /* bloco do ícone de app */
  --raio-pilula: 999px;
  --linha-w: 1px;
  --largura-max: 76rem;
  --corte: 60deg;          /* ângulo dos cortes do logotipo; usar em diagonais e transições */

  /* ---- Movimento (ver motion.md) ------------------------------------------- */
  /* Curvas: as fortes do método de animação (nada inventado, nada com overshoot). */
  --ease-saida: cubic-bezier(0.23, 1, 0.32, 1);    /* entrar e sair de UI, revelar, press */
  --ease-troca: cubic-bezier(0.77, 0, 0.175, 1);   /* mover na tela, desenhar linha, varredura, corte 60° */
  --ease-fluxo: cubic-bezier(0.16, 1, 0.3, 1);     /* easeOutExpo: fluxos do 3, títulos, momentos de marca */
  --t-pressao: 160ms;      /* :active scale(.97) */
  --t-ui: 200ms;           /* hover, cor, tooltip */
  --t-estado: 250ms;       /* troca de estado, modal (teto de UI: 300ms) */
  --t-entrada: 600ms;      /* revelar ao rolar, só em página de marketing */
  --t-cinema: 1100ms;      /* hero, gráfico desenhando, contador */
  --t-assinatura: 2600ms;  /* entrada completa do logo (M01) */
  --escalonar: 50ms;       /* grupos de UI */
  --escalonar-fluxo: 90ms; /* os três movimentos do 3 / linhas de título */

  /* ---- Tema escuro (padrão) ------------------------------------------------- */
  --fundo: var(--lif3-black);
  --fundo-2: #0E0F11;
  --superficie: var(--lif3-graphite);
  --superficie-vidro: rgba(30, 31, 35, 0.72);
  --texto: var(--lif3-white);
  --texto-2: rgba(245, 245, 245, 0.72);
  --texto-3: var(--lif3-grey);          /* 6.1:1 no preto, ok para corpo */
  --texto-4: var(--lif3-steel);         /* 3.97:1, só texto grande, meta, linhas */
  --linha: rgba(245, 245, 245, 0.10);
  --linha-2: rgba(245, 245, 245, 0.06);
  --linha-forte: rgba(245, 245, 245, 0.22);
  --grade: rgba(245, 245, 245, 0.035);
  --acento: var(--lif3-lime);           /* texto/forma em lime: só no escuro */
  --acento-tinta: var(--lif3-black);    /* texto sobre fundo lime */
  --logo-letras: var(--lif3-white);
  color-scheme: dark;
}

[data-tema="claro"] {
  --fundo: var(--lif3-white);
  --fundo-2: #ECECEA;
  --superficie: #FFFFFF;
  --superficie-vidro: rgba(255, 255, 255, 0.78);
  --texto: var(--lif3-black);
  --texto-2: rgba(10, 10, 10, 0.74);
  --texto-3: var(--lif3-steel);         /* 4.57:1 no branco */
  --texto-4: rgba(10, 10, 10, 0.46);
  --linha: rgba(10, 10, 10, 0.12);
  --linha-2: rgba(10, 10, 10, 0.07);
  --linha-forte: rgba(10, 10, 10, 0.28);
  --grade: rgba(10, 10, 10, 0.045);
  --acento: var(--lif3-black);          /* lime NUNCA vira texto no claro (1.09:1) */
  --acento-tinta: var(--lif3-black);
  --logo-letras: var(--lif3-black);
  color-scheme: light;
}

/* ---- Base mínima (opcional) ------------------------------------------------ */
.lif3 {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.lif3 ::selection { background: var(--lif3-lime); color: var(--lif3-black); }

/* Títulos: Space Grotesk Bold, caixa alta, entrelinha curta. A(s) última(s) linha(s) em lime. */
.lif3-display, .lif3-h1, .lif3-h2 {
  font-family: var(--fonte-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  margin: 0;
}
.lif3-display { font-size: var(--fs-display); line-height: var(--lh-display); }
.lif3-h1 { font-size: var(--fs-h1); line-height: var(--lh-titulo); }
.lif3-h2 { font-size: var(--fs-h2); line-height: 1; }
.lif3-h3 { font-family: var(--fonte-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.15; text-transform: uppercase; margin: 0; }
.lif3-acento { color: var(--acento); }
[data-tema="claro"] .lif3-acento { color: var(--lif3-black); background: linear-gradient(transparent 62%, var(--lif3-lime) 62%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* linha de título em bloco: o marca-texto acompanha só o texto, não a largura da linha */
[data-tema="claro"] .linha.lif3-acento { background: none; }
[data-tema="claro"] .linha.lif3-acento > span { background: linear-gradient(transparent 62%, var(--lif3-lime) 62%); }

/* Rótulo de seção: "01 | INTRODUÇÃO" */
.lif3-rotulo {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--fonte-texto); font-weight: 500; font-size: var(--fs-rotulo);
  letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--texto-3);
}
.lif3-rotulo b { font-family: var(--fonte-display); font-weight: 500; color: var(--texto); letter-spacing: 0.04em; }
.lif3-rotulo i { width: 1px; height: 14px; background: var(--linha-forte); display: block; }

/* Assinatura / kicker em tracking aberto: PERFORMANCE INTELLIGENCE COMPANY */
.lif3-assinatura {
  font-family: var(--fonte-display); font-weight: 500; font-size: var(--fs-assinatura);
  letter-spacing: var(--ls-assinatura); text-transform: uppercase; color: var(--texto);
}

/* Número de dado: +218% */
.lif3-dado {
  font-family: var(--fonte-display); font-weight: 700; font-size: var(--fs-dado);
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

/* Painel no estilo dos boards: fundo escuro, borda 1px, rótulo no canto */
.lif3-painel {
  position: relative; background: var(--grad-painel); border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: var(--e-6);
}
[data-tema="claro"] .lif3-painel { background: var(--superficie); }

/* Grade técnica de fundo (linhas finas) */
.lif3-grade {
  background-image:
    linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Botões */
.lif3-botao {
  --b-fundo: var(--lif3-lime); --b-tinta: var(--lif3-black);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 22px; border-radius: var(--raio);
  font-family: var(--fonte-display); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  background: var(--b-fundo); color: var(--b-tinta); border: 1px solid var(--b-fundo); cursor: pointer;
}
.lif3-botao--contorno { --b-fundo: transparent; --b-tinta: var(--texto); border-color: var(--linha-forte); }
[data-tema="claro"] .lif3-botao:not(.lif3-botao--contorno) { --b-fundo: var(--lif3-black); --b-tinta: var(--lif3-white); }

/* Tag / chip */
.lif3-tag {
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-pilula);
  font-size: var(--fs-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--texto-2);
}
.lif3-tag--lime { border-color: var(--lime-40); color: var(--acento); }

/* Barra de fluxo: o traço do 3 (corte 60° à esquerda, ponta redonda à direita) */
.lif3-fluxo {
  display: block; height: 14px; border-radius: 0 999px 999px 0;
  background: var(--grad-fluxo);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* reduzir, não zerar: fades continuam (motion.css), deslocamentos somem */
  :root { --escalonar: 0ms; --escalonar-fluxo: 0ms; }
}