/* ==========================================================================
   tokens.css — Design System do Grupo CoreTI (Manual de Identidade 2026)
   Camada 1 de 4. Só variáveis. Trocar a marca = mexer só aqui.

   Importado do projeto de design "grupo-coreti-design-system". As fontes de
   marca (NewBlack, Alliance No.2) têm como substitutas Bricolage Grotesque e
   Hanken Grotesk (Google Fonts) — troque pelos arquivos licenciados em produção.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- NEUTROS DA MARCA ---------- */
  --cloud-dancer: #eeece8;   /* fundo claro institucional (nunca #fff em full-bleed) */
  --anthracite:   #27262b;   /* fundo escuro / texto — quase-preto quente */
  --anthracite-2: #1c1b20;   /* anthracite mais fundo (seções e cartões escuros) */

  /* ---------- FAMÍLIAS DE PRODUTO (100 claro · 200 acento · 300 profundo) ---------- */
  --service-100: #0090da;  --service-200: #0050b5;  --service-300: #002677;  /* IT Service (azul) */
  --security-100:#e97722;  --security-200:#dc582a;  --security-300:#963821;  /* IT Security (laranja) */
  --infra-100:   #79be20;  --infra-200:   #47a23f;  --infra-300:   #046a38;  /* Infraestrutura (verde) */
  --bridge-100:  #9678d3;  --bridge-200:  #6538b5;  --bridge-300:  #330072;  /* Data Bridge (roxo) */

  /* ---------- SUPERFÍCIES SEMÂNTICAS ---------- */
  --bg:        var(--cloud-dancer);
  --surface:   #ffffff;
  --surface-2: #f6f4ef;   /* off-cloud levemente tingido */
  --surface-3: #e4e1d9;   /* divisória quente */

  --fg1: var(--anthracite);                                              /* texto principal */
  --fg2: color-mix(in oklab, var(--anthracite) 72%, var(--cloud-dancer)); /* secundário */
  --fg3: color-mix(in oklab, var(--anthracite) 50%, var(--cloud-dancer)); /* terciário */
  --fg-inverse: var(--cloud-dancer);

  --border:        color-mix(in oklab, var(--anthracite) 14%, transparent);
  --border-strong: color-mix(in oklab, var(--anthracite) 28%, transparent);

  /* Sobre fundo escuro */
  --on-dark-1:  var(--cloud-dancer);
  --on-dark-2:  color-mix(in oklab, var(--cloud-dancer) 72%, var(--anthracite));
  --on-dark-3:  color-mix(in oklab, var(--cloud-dancer) 58%, var(--anthracite));
  --border-on-dark: color-mix(in oklab, var(--cloud-dancer) 16%, transparent);

  /* ---------- ASSINATURA: ESPECTRO CORETI ---------- */
  /* O coração multicolor do símbolo: roxo → azul → verde → laranja.
     Usar em MOMENTOS (CTA, filete, palavra em destaque), nunca como papel de parede. */
  --spectrum: linear-gradient(100deg, #6538b5 0%, #0090da 36%, #47a23f 66%, #e97722 100%);
  --spectrum-conic: conic-gradient(from 210deg at 50% 50%, #6538b5, #0090da, #47a23f, #79be20, #e97722, #dc582a, #6538b5);

  /* ---------- ESTADO (derivado das famílias) ---------- */
  --success: var(--infra-200);
  --warning: var(--security-100);
  --danger:  var(--security-300);
  --info:    var(--service-100);

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: 'Bricolage Grotesque', 'NewBlack', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', 'Alliance No.2', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-12: 0.75rem;   --fs-14: 0.875rem;  --fs-16: 1rem;      --fs-18: 1.125rem;
  --fs-20: 1.25rem;   --fs-24: 1.5rem;    --fs-32: 2rem;      --fs-40: 2.5rem;
  --fs-56: 3.5rem;    --fs-72: 4.5rem;    --fs-96: 6rem;

  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-bold: 700; --w-black: 800;

  --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.45; --lh-loose: 1.65;
  --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-caps: 0.14em;

  /* ---------- ESPAÇAMENTO (base 4px) ---------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* ---------- RAIOS ---------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-pill: 999px;

  /* ---------- SOMBRAS (quentes, nunca preto puro) ---------- */
  --shadow-sm: 0 1px 2px rgba(39, 38, 43, 0.06), 0 1px 1px rgba(39, 38, 43, 0.04);
  --shadow-md: 0 6px 18px -8px rgba(39, 38, 43, 0.18), 0 2px 4px rgba(39, 38, 43, 0.06);
  --shadow-lg: 0 24px 48px -24px rgba(39, 38, 43, 0.32), 0 4px 8px rgba(39, 38, 43, 0.06);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--service-200) 30%, transparent);

  /* ---------- MOVIMENTO ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms;

  /* ---------- LAYOUT ---------- */
  --largura-marketing: 1240px;
  --largura-painel: 1440px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur-base: 0s; --dur-slow: 0s; }
}