/* =====================================================================
   tokens.css — Design tokens do MecHelp OS
   ---------------------------------------------------------------------
   FONTE ÚNICA DA VERDADE do visual. Derivado de
   "MecHelp — Brand Guidelines v1.0 · 2026".

   Por que um arquivo, e não `<style>` no base.html:
     • o base.html tinha a paleta inline — qualquer ajuste de marca exigia
       editar o layout-mestre (e passava por cima do cache do browser a
       cada deploy, junto com o HTML inteiro);
     • token é ATIVO DE MARCA, não de layout. Separado, ele pode ser
       versionado, auditado e (no futuro) SOBRESCRITO POR TENANT sem
       tocar em template — ver bloco "White-label" no fim do arquivo.

   CONVENÇÃO: cores em CANAIS RGB (sem `rgb()`), pra o Tailwind conseguir
   compor opacidade — `rgb(var(--c-ink) / 0.06)`.

   ⚠️ COMPATIBILIDADE: os NOMES de token (--c-mechelp, --c-ink, --c-bg,
   --c-line, --c-panel, --c-muted, --c-novo…) são a API pública consumida
   por ~28k linhas de template via classes Tailwind (`bg-panel`,
   `text-ink`, `border-line`). Esta revisão troca os VALORES para os da
   marca e ACRESCENTA tokens novos (azul institucional, tipografia
   display/mono, motion, 8pt). Nenhum nome foi removido — zero churn de
   template, 100% de alinhamento de marca.
   ===================================================================== */

/* ── 05 · CORES ────────────────────────────────────────────────────────
   Paleta oficial. As constantes `--brand-*` são a marca CRUA (imutável,
   igual ao PDF). Os tokens `--c-*` são os PAPÉIS semânticos que a UI
   consome — e que o dark mode reatribui. Separar "cor" de "papel" é o
   que permite inverter o tema sem `dark:` em cada elemento.            */
:root {
  color-scheme: light;

  /* Marca crua — NÃO consumir direto na UI (use os papéis abaixo). */
  --brand-yellow:      255 199 44;   /* #FFC72C  primária                */
  --brand-yellow-hi:   255 215 90;   /* #FFD75A                          */
  --brand-yellow-lo:   229 168 0;    /* #E5A800                          */
  --brand-blue:        10 31 61;     /* #0A1F3D  primária institucional  */
  --brand-blue-mid:    21 39 74;     /* #15274A                          */
  --brand-blue-hi:     30 58 107;    /* #1E3A6B                          */
  --brand-ink:         10 14 26;     /* #0A0E1A                          */
  --brand-paper:       255 255 255;  /* #FFFFFF                          */
  --brand-cream:       245 239 224;  /* #F5EFE0                          */
  --brand-fog:         232 230 223;  /* #E8E6DF                          */
  --brand-mute:        122 118 112;  /* #7A7670                          */

  /* Papéis — superfícies e texto */
  --c-bg:      var(--brand-cream);   /* fundo da página                  */
  --c-panel:   var(--brand-paper);   /* cards / painéis                  */
  --c-panel-2: 250 249 245;          /* sub-superfície (cream a 25%)     */
  --c-line:    var(--brand-fog);     /* bordas e divisores               */
  --c-ink:     var(--brand-ink);     /* texto principal                  */
  --c-muted:   var(--brand-mute);    /* texto secundário (4.5:1 no paper)*/

  /* Papéis — marca / ação (60% amarelo na hierarquia do guideline) */
  --c-mechelp:       var(--brand-yellow);
  --c-mechelp-hover: var(--brand-yellow-lo);
  --c-mechelp-soft:  var(--brand-cream);      /* chip/nav-ativo/avatar   */
  --c-mechelp-ink:   var(--brand-blue);       /* tinta sobre superf. soft*/
  /* Tinta CONSTANTE sobre amarelo sólido (não vira no dark). O guideline
     aplica o azul profundo sobre o amarelo — e ainda entrega 10.1:1,
     contra 4.9:1 do âmbar-escuro que estava aqui antes. */
  --c-mechelp-on:    var(--brand-blue);

  /* Papéis — azul institucional (25% da hierarquia). NÃO existia como
     token: o painel era 100% amarelo+neutro e a marca perdia a metade
     "séria B2B". Agora é consumível como `bg-brand-blue`/`text-brand-blue`. */
  --c-blue:     var(--brand-blue);
  --c-blue-mid: var(--brand-blue-mid);
  --c-blue-hi:  var(--brand-blue-hi);

  /* ACENTO DE TEXTO — desvio deliberado do guideline, documentado:
     o amarelo #FFC72C sobre paper rende 1.6:1 e é ILEGÍVEL como texto
     (o guideline o especifica como cor de FUNDO/impacto, não de tipo).
     Para texto em superfície neutra usamos o azul institucional, que É
     da marca e entrega 14.6:1. Amarelo segue reservado a fundo/acento. */
  --c-accent: var(--brand-blue);

  /* Semântica de funil — significado, não marca. Realinhados ao azul da
     marca (o `fez_contato` era #3B82F6 genérico do Tailwind). */
  --c-novo:    var(--brand-mute);  /* neutro: ainda não triado           */
  --c-fez:     30 58 107;          /* #1E3A6B blue-hi                    */
  --c-lead:    124 92 168;         /* violeta dessaturado p/ o azul       */
  --c-comprou: 0 131 0;            /* #008300 — mesmo verde do palette.py */
  --c-perdido: 197 48 48;          /* vermelho quente, ≥4.5:1 no paper    */
}

/* Dark — os NEUTROS viram AZUL DA MARCA em vez de cinza-quase-preto.
   O guideline não especifica dark mode; a escolha honesta é construí-lo
   com a paleta institucional (ink → blue → blue-mid) em vez de inventar
   uma escala de cinza fora da marca. Amarelo e semântica permanecem. */
html.dark {
  color-scheme: dark;

  --c-bg:      var(--brand-ink);       /* #0A0E1A                        */
  --c-panel:   var(--brand-blue);      /* #0A1F3D — painel institucional */
  --c-panel-2: var(--brand-blue-mid);  /* #15274A                        */
  --c-line:    var(--brand-blue-hi);   /* #1E3A6B — divisor visível      */
  --c-ink:     var(--brand-cream);     /* texto cream ≈13:1 no painel    */
  --c-muted:   168 164 156;            /* mute clareado → 6.4:1          */

  /* Superfícies âmbar no dark: o "creme" viraria uma ilha clara, então
     vira âmbar translúcido escuro e a tinta vira âmbar vivo. */
  --c-mechelp-soft: 44 37 16;
  --c-mechelp-ink:  var(--brand-yellow-hi);
  --c-accent:       var(--brand-yellow-hi);

  /* Semântica reclareada pro fundo escuro (o azul-hi sumiria no painel). */
  --c-fez:     125 172 255;
  --c-lead:    186 154 232;
  --c-comprou: 74 199 118;
  --c-perdido: 248 128 128;
}

/* ── 07 · GRID — base 8pt ──────────────────────────────────────────────
   Os degraus nomeados do guideline. Expostos como var pra CSS custom e
   registrados no Tailwind (`p-tight`, `gap-section`…) no base.html.     */
:root {
  --mh-space-tight:   32px;  /*  4× */
  --mh-space-default: 64px;  /*  8× */
  --mh-space-section: 96px;  /* 12× */
  --mh-space-hero:   128px;  /* 16× */
  --mh-gutter:        24px;  /* gutter do grid de 12 colunas */
}

/* ── 15 · MOTION ───────────────────────────────────────────────────────
   Três durações, três eases. "Nenhum bounce" é regra do guideline — a
   animação `fade-up` daqui usava cubic-bezier(.21,1.02,.73,1), cujo
   segundo ponto >1 É overshoot (bounce). Substituído pelo ease de
   transição oficial.                                                    */
:root {
  --mh-dur-ui:        240ms;  --mh-ease-ui:        cubic-bezier(.3,.7,.3,1);
  --mh-dur-transition:400ms;  --mh-ease-transition:cubic-bezier(.2,.8,.2,1);
  --mh-dur-narrative: 600ms;  --mh-ease-narrative: cubic-bezier(.7,0,.3,1);
}

/* ── 03 · CONSTRUÇÃO — raio ────────────────────────────────────────────
   O símbolo é construído em grid 100×100 com raio de 22% do lado. Blocos
   que ecoam o símbolo (avatar, tile de ícone) usam esse raio relativo. */
:root { --mh-radius-symbol: 22%; }
.mh-radius-symbol { border-radius: var(--mh-radius-symbol); }

/* ── 06 · TIPOGRAFIA ───────────────────────────────────────────────────
   Archivo 900 (display) / Inter (texto) / JetBrains Mono (dado e label
   técnico). A escala display do guideline com seu tracking negativo. */
.mh-display-xl { font-family: Archivo, Inter, system-ui, sans-serif; font-weight: 900; font-size: 96px; letter-spacing: -.05em;  line-height: .9;  }
.mh-display-l  { font-family: Archivo, Inter, system-ui, sans-serif; font-weight: 900; font-size: 56px; letter-spacing: -.04em;  line-height: .95; }
.mh-title      { font-family: Archivo, Inter, system-ui, sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.025em; line-height: 1.1; }

/* Label técnico do guideline: mono, caixa alta, tracking largo — é a
   assinatura tipográfica das seções ("05 · CORES", "CASO · AUTO CENTER"). */
.mh-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: rgb(var(--c-muted));
}

/* Títulos herdam o display; tracking sutilmente negativo em todo h1–h3. */
h1, h2, h3 { font-family: Archivo, Inter, system-ui, sans-serif; letter-spacing: -.02em; }
/* Dado é mono e tabular — alinhamento de coluna é requisito, não estética. */
.tnum, table, .tabular-nums { font-variant-numeric: tabular-nums; }
.mh-data { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

::selection { background: rgb(var(--c-mechelp) / .3); color: rgb(var(--brand-blue)); }

/* ── 08 · PADRÕES ──────────────────────────────────────────────────────
   Os quatro padrões como utilitário CSS puro (sem asset). Regra do
   guideline: acento — NUNCA cobrindo o logo.                            */
.mh-pattern-stripes {
  background-image: repeating-linear-gradient(45deg,
    rgb(var(--brand-ink) / .9) 0 14px, rgb(var(--c-mechelp)) 14px 28px);
}
.mh-pattern-dots {
  background-image: radial-gradient(rgb(var(--c-ink) / .18) 1px, transparent 1px);
  background-size: 14px 14px;
}
.mh-pattern-bolt {
  /* Campo de raios — o símbolo em marca d'água sobre superfície de marca. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M26 8 16 26h8l-2 14 10-18h-8z' fill='%230A0E1A' fill-opacity='.07'/%3E%3C/svg%3E");
  background-size: 48px 48px;
}

/* ── 09 · ICONOGRAFIA ──────────────────────────────────────────────────
   Grid 24×24, traço 1.8px, cor única (currentColor). O painel usa
   Font Awesome SOLID (preenchido, bicolor por acaso em alguns glifos) —
   fora do guideline. Esta classe padroniza o alvo enquanto a migração
   pra um set stroke acontece (ver DESIGN_SYSTEM.md, "Pendências").     */
.mh-icon { width: 24px; height: 24px; stroke-width: 1.8; color: currentColor; }

/* ── Acessibilidade e chrome ───────────────────────────────────────────*/
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgb(var(--c-mechelp) / .75);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Elevação no dark: sombra não existe em fundo escuro — usamos realce
   interno + sombra difusa pra manter hierarquia de superfície. */
html.dark .shadow-card { box-shadow: inset 0 1px 0 0 rgb(255 255 255 / .04), 0 1px 2px 0 rgb(0 0 0 / .4); }
html.dark .shadow-soft { box-shadow: inset 0 1px 0 0 rgb(255 255 255 / .06), 0 14px 32px -10px rgb(0 0 0 / .6); }

/* Entrada do conteúdo — só opacidade (transform criaria containing block
   e quebraria os elementos `fixed`, como o drawer de lead). */
main { animation: mh-fade-in var(--mh-dur-transition) var(--mh-ease-transition) both; }
@keyframes mh-fade-in { from { opacity: 0 } to { opacity: 1 } }

html { scrollbar-width: thin; scrollbar-color: rgb(var(--c-line)) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgb(var(--c-line)); border-radius: 999px; border: 2px solid transparent; background-clip: content-box }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-muted)); background-clip: content-box }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── White-label (gancho multi-tenant) ─────────────────────────────────
   O produto é multi-tenant: um dia um tenant vai querer o painel na cor
   dele. Como TODA a UI lê papéis (`--c-*`) e nenhum template tem hex, o
   dia-1 disso é injetar um `<style>` de override no `<head>` com os
   tokens do tenant — sem tocar em template, Tailwind ou CSS.

       :root[data-tenant="acme"] { --c-mechelp: 12 120 220; }

   É o mesmo motivo pelo qual os hex hardcoded que sobraram em template
   (ver DESIGN_SYSTEM.md) são débito real: cada um é um pixel que o
   white-label não alcança. */