/* =====================================================================
   BOOOT · DESIGN TOKENS · v2.0.0 · sistema OURO
   Fonte única da verdade do sistema visual BOOOT.

   DECISÃO: D-MARCA-OURO-LARANJA-E-CREME-SAEM-16AGO (dono, 16/ago/2026 ·
   ledger _ESTADO/decisoes-copy.jsonl · contrato
   0_CENTRAL/PEDIDO-FABLE-DESIGN-SYSTEM-BOOOT.md). O acento ÚNICO é o
   OURO #D4921B no degrau 600. O laranja, o creme e a letra antiga
   MORRERAM: peça nova não os usa (os valores mortos estão listados na
   checagem de pureza do verify-tokens.mjs). As peças já aprovadas seguem
   rendendo pelo @import de legado abaixo até cada repintura receber a
   palavra do dono (§8.3 do contrato) · a ponte morre com o §8.3.

   Deploy do Portal segue seguro DURANTE a transição: as páginas do site
   consomem só nomes legados, a ponte os congela nos valores antigos, e o
   build (copyMarca) segue o @import e as fontes por recursão · o site
   renderiza idêntico ao aprovado até cada repintura do §8.3.

   Regra-mãe: o BOOOT é grafite frio e ouro. Ouro é valor conquistado:
   assinatura, número de resultado, UM botão por tela no escuro. Em
   página clara, ouro de preenchimento é PROIBIDO (dono, 16/ago: "em
   páginas brancas ou claras o certo é não ter botão ouro. Ponto final.");
   no claro o ouro vira texto/borda no degrau 800 couro.

   Todo contraste comentado abaixo foi medido (WCAG 2.x) em 16/ago/2026
   com a base declarada ao lado. Número sem base é número sem sentido.

   NÃO editar valores soltos. Mude aqui e o sistema inteiro herda.
   Paridade com tokens.json + tailwind.tokens.js: node verify-tokens.mjs
   ===================================================================== */

@import url("legado-repintura.css");

:root {
  /* ---- OURO · a escala do acento (degrau 600 = a cor da marca) ------ */
  --booot-ouro-100: #F4EAD7;   /* areia · wash */
  --booot-ouro-200: #F3D7A5;   /* trigo · wash */
  --booot-ouro-300: #EEC377;   /* mel */
  --booot-ouro-400: #E9B353;   /* sol */
  --booot-ouro-500: #E6A93C;   /* âmbar · HOVER do ouro */
  --booot-ouro-600: #D4921B;   /* OURO · a cor da marca (7,10 s/ cinza-000 · 6,57 s/ cinza-010) */
  --booot-ouro-700: #AC7616;   /* cobre · PRESSIONADO */
  --booot-ouro-800: #835A11;   /* couro · texto e borda no tema claro (5,70 s/ cinza-900 · 6,11 s/ branco) */
  --booot-ouro-900: #5A3E0C;   /* terra */

  /* ---- NEUTROS · a fundação fria (12 degraus, todos · palavra do dono) */
  --booot-cinza-000: #0E1216;  /* a página escura */
  --booot-cinza-010: #141B1F;  /* o cartão escuro */
  --booot-cinza-100: #1E2429;  /* elevado */
  --booot-cinza-200: #232A2F;  /* flutuante escuro */
  --booot-cinza-300: #2F363C;
  --booot-cinza-400: #40484F;
  --booot-cinza-500: #5C6B7A;  /* texto 2º no claro (5,10 s/ cinza-900) · primária do whitelabel */
  --booot-cinza-550: #7A8087;  /* o cinza do ícone · como TEXTO só >=16px s/ cartão escuro (4,36 s/ 010 · 4,71 s/ 000) */
  --booot-cinza-600: #96A0A6;  /* texto 2º no escuro (6,53 s/ 010) */
  --booot-cinza-700: #BCC2C8;
  --booot-cinza-800: #E2E6E9;
  --booot-cinza-900: #F6F7F8;  /* o claro do sistema (decisão do dono) · texto 1º no escuro (16,23 s/ 010) */

  /* ---- SEMÂNTICAS · 3, não 4 (a 4ª morreu por medição: âmbar = ouro) - */
  /* sobre o cartão escuro 010: erro 5,22 · sucesso 5,24 · info 5,18 (deliberado: mesma leitura) */
  --booot-erro: #EC5D5E;       /* Radix red-10 adotado (aberto, acessível em escuro) */
  --booot-sucesso: #3C9E70;    /* derivado do vermelho */
  --booot-info: #4990D6;       /* derivado do vermelho */

  /* ---- TIPOGRAFIA · Archivo (título) + Inter (texto) ---------------- */
  --fonte-titulo: 'Archivo', 'Inter', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, sans-serif;
  /* largura do Archivo (font-stretch · eixo wdth da variável):
     62% = manchete grande (>=28px: herói, post, número de resultado · cravado pelo dono)
     92% = título de seção e componente (a condensada fecha demais no tamanho pequeno) */
  --largura-display: 62%;
  --largura-titulo: 92%;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;             /* o peso de display do Archivo (o 900 morreu com a letra antiga) */

  --lh-display: 1.05;
  --lh-heading: 1.18;
  --lh-body: 1.6;

  /* tracking: a condensada já é compacta; o aperto forte da letra antiga esmagaria */
  --letra-display: -0.01em;    /* Archivo 62% grande */
  --letra-titulo: -0.02em;     /* Archivo 92% */
  --letra-caps: 0.14em;        /* Inter caps (eyebrow, rótulo) */

  --fs-micro: .75rem;          /* 12px fixo · legenda/rótulo de UI densa */
  --fs-eyebrow: clamp(.75rem, 1vw, .875rem);
  --fs-body: clamp(.9375rem, 1.3vw, 1.0625rem);
  --fs-body-lg: clamp(1.0625rem, 1.5vw, 1.1875rem);
  --fs-card-title: clamp(1.0625rem, 1.45vw, 1.1875rem);  /* título de card (promoção da ANATOMIA-ADOTADA) */
  --fs-h3: clamp(1.25rem, 2.2vw, 1.55rem);
  --fs-h2: clamp(1.6rem, 3.4vw, 2.4rem);
  --fs-display: clamp(2.25rem, 6vw, 3.5rem);
  --fs-hero: clamp(3rem, 8vw, 4.5rem);                   /* manchete do Portal (Archivo 62%) */

  /* ---- A ESCALA DO APP (04/10 · obra/rev-d-design) · UMA escala para tipo, espaço, peso e papel de texto ---------------------------------------
     PADRÃO ADOTADO (não construído): a escala de tipo e de espaço do Tailwind (MIT · tailwindcss.com/docs/font-size · /docs/padding) em grade de 4/8; a hierarquia
     de texto em 2 papéis (principal e secundário) do Radix Themes (MIT · radix-ui.com/themes/docs/theme/typography); contraste por TAMANHO e PESO, nunca por cinza
     (Vercel Geist · Linear). Aqui mora só a cola nos tokens da casa. A régua `stylelint.config.mjs` e o teste `design-escala.test.mjs` impõem.
     TIPO · 6 passos (o 12 é o --fs-micro de cima) e 2 pesos (--fw-regular e --fw-semibold):
       12 micro · legenda, pílula, ponta do trilho         14 sm · apoio, rótulo, controle         16 md · corpo
       20 xl · título de cartão                              24 2xl · número de cartão, título de tela         32 3xl · o número herói (um por tela)
     Piso de leitura: 14 px no texto de apoio, 16 px no corpo. O passo de 18 px MORREU (o título de cartão subiu para 20): cada passo tem UM papel.
     TEXTO · 2 papéis: --texto (principal) e --texto-2 (secundário, AA nos 2 temas). O secundário é APOIO de UMA linha, nunca o corpo de um parágrafo.
     ESPAÇO · grade de 4/8: 4 · 8 · 12 · 16 · 24 · 32 · 48 = --space-1, --space-2, --sh-12 (o degrau 12, declarado no kit), --space-3, --space-4, --space-5, --space-6.
     CARTÃO · 1 raio (--raio-cartao) e 1 sombra (--sombra-cartao). Só CSS (verify-tokens: lista CSS_ONLY, sem espelho no Tailwind). */
  --fs-sm: .875rem;            /* 14px · apoio, rótulo, controle */
  --fs-md: 1rem;               /* 16px · corpo da tela */
  --fs-xl: 1.25rem;            /* 20px · título de cartão */
  --fs-2xl: 1.5rem;            /* 24px · número de cartão, título de tela */
  --fs-3xl: 2rem;              /* 32px · o número herói (um por tela) */
  --fs-tela: var(--fs-2xl);    /* o título da pergunta nas telas de formulário (moldura): 24 no celular, 32 do tablet em diante (bloco abaixo) */
  --lh-snug: 1.3;              /* título de cartão e número */
  --lh-ui: 1.5;                /* texto de apoio e linha de lista */

  /* ---- SPACING (base 8 · sobrevive da v1 · +1 degrau pra UI densa) -- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-9: 7rem;

  /* ---- MEDIDAS DE LEITURA ------------------------------------------- */
  --medida-texto: 68ch;        /* coluna de leitura confortável */
  --medida-form: 560px;        /* form / diálogo */

  /* ---- RAIO · 3 papéis + pílula · aninhado desce um degrau ---------- */
  --raio-controle: .625rem;    /* 10px · botão, campo, chip retangular */
  --raio-cartao: .875rem;      /* 14px · card, painel */
  --raio-flutuante: 1.25rem;   /* 20px · modal, popover, hero container */
  --raio-pill: 999px;

  /* ---- Z-INDEX ------------------------------------------------------ */
  --z-base: 0;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---- MOTION · anima só transform e opacity ------------------------ */
  --motion-fast: 180ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);

  /* ---- FORMA & A11Y ------------------------------------------------- */
  --cut-angle: 62deg;          /* corte diagonal canônico (crescimento) · a assinatura geométrica */
  --focus-offset: 2px;

  /* =====================================================================
     TOKENS SEMÂNTICOS DE TEMA · o default é o ESCURO (a casa da marca).
     O tema claro re-mapeia os MESMOS nomes no bloco .tema-claro abaixo.
     Consuma SEMPRE estes nomes em peça; primitivos são detalhe interno.
     ===================================================================== */

  /* superfícies · elevação por COR no escuro (sombra quase não lê aqui) */
  --pagina: var(--booot-cinza-000);
  --superficie: var(--booot-cinza-010);
  --superficie-2: var(--booot-cinza-100);
  --flutuante: var(--booot-cinza-200);

  /* texto · 1º 16,23 s/ superfície · 2º 6,53 · 3º 4,36 (só >=16px s/ cartão) */
  --texto: var(--booot-cinza-900);
  --texto-2: var(--booot-cinza-600);
  --texto-3: var(--booot-cinza-550);
  /* lead: o parágrafo de abertura ao lado de display. Um degrau abaixo do 1º
     (o quase-branco em massa de texto ficou duro na tela do dono, 16/ago):
     10,47 s/ página 000 · 9,69 s/ cartão 010 (medido 16/ago) */
  --texto-lead: var(--booot-cinza-700);

  --borda: color-mix(in srgb, var(--booot-cinza-900) 8%, transparent);
  --borda-forte: color-mix(in srgb, var(--booot-cinza-900) 16%, transparent);

  /* acento · estados são degraus vizinhos (500 hover · 700 press) */
  --acento: var(--booot-ouro-600);
  --acento-hover: var(--booot-ouro-500);
  --acento-press: var(--booot-ouro-700);
  --acento-texto: var(--booot-ouro-600);      /* 6,57 s/ superfície · 7,10 s/ página */
  --sobre-acento: var(--booot-cinza-000);     /* grafite s/ ouro 7,10 · o CTA branco do escuro é exceção do dono (manual) */

  /* CTA primário · escuro: ouro · claro: grafite (zero ouro de preenchimento no claro) */
  --cta-fundo: var(--booot-ouro-600);
  --cta-texto: var(--booot-cinza-000);
  --cta-hover: var(--booot-ouro-500);
  --cta-press: var(--booot-ouro-700);

  --anel-foco: 2px solid var(--booot-ouro-600);   /* 7,10 s/ página · 6,57 s/ cartão (piso 3,0 UI) */

  /* semânticas como TEXTO (no escuro as cruas passam: 5,22 · 5,24 · 5,18 s/ 010) */
  --erro-texto: var(--booot-erro);
  --sucesso-texto: var(--booot-sucesso);
  --info-texto: var(--booot-info);

  /* formulário */
  --campo-fundo: color-mix(in srgb, var(--booot-cinza-900) 4%, transparent);
  --campo-borda: color-mix(in srgb, var(--booot-cinza-900) 20%, transparent);
  --campo-borda-foco: var(--booot-ouro-600);

  --desabilitado: .45;         /* opacidade de estado desabilitado · sem trocar cor */
  --veu-foto: color-mix(in srgb, var(--booot-cinza-000) 65%, transparent);  /* texto sobre foto · janela 55-75% */

  /* sombra · escuro: só o que flutua tem sombra (elevação é por cor) */
  --sombra-cartao: none;
  --sombra-flutuante: 0 16px 48px hsl(0 0% 0% / .5);

  /* medalhas da escada (bronze · prata · ouro) · 04/10: o degrau conquistado leva a cor do SEU metal, nunca o verde do sucesso. Só reusa a paleta (cobre, cinza, ouro): nenhum hex novo. */
  --medalha-bronze: color-mix(in srgb, var(--booot-ouro-700) 70%, var(--booot-erro));   /* cobre-avermelhado #BF6E2C · se distingue do ouro e do verde */
  --medalha-prata: var(--booot-cinza-600);    /* 6,53 s/ cartão 010 */
  --medalha-ouro: var(--booot-ouro-600);      /* a cor da marca · 6,57 s/ cartão 010 */

  /* gráfico · a métrica-herói é a ÚNICA série ouro (9,69 e 3,18 s/ cartão nas neutras) */
  --serie-1: var(--booot-ouro-600);
  --serie-2: var(--booot-cinza-600);
  --serie-3: var(--booot-cinza-500);
}

@media (min-width: 640px) { :root { --fs-tela: var(--fs-3xl); } }

/* =====================================================================
   TEMA CLARO · a página é o #F6F7F8 do dono, o cartão é branco puro.
   Ouro de preenchimento NÃO existe aqui (ouro cru mede 2,47 s/ cinza-900
   e reprova até como indicador); o acento vira couro 800 em texto/borda
   e o CTA vira grafite.
   ===================================================================== */
.tema-claro {
  --pagina: var(--booot-cinza-900);
  --superficie: #FFFFFF;
  --superficie-2: #FFFFFF;
  --flutuante: #FFFFFF;

  /* texto · 1º 17,53 s/ página (18,80 s/ branco) · 2º 5,10 · 3º 8,67 */
  --texto: var(--booot-cinza-000);
  --texto-2: var(--booot-cinza-500);
  --texto-3: var(--booot-cinza-400);
  --texto-lead: var(--booot-cinza-300);   /* 11,42 s/ página 900 · 12,25 s/ branco (medido 16/ago) */

  --borda: color-mix(in srgb, var(--booot-cinza-000) 12%, transparent);
  --borda-forte: color-mix(in srgb, var(--booot-cinza-000) 20%, transparent);

  /* ⚠️ O `--acento` TAMBÉM desce pro couro aqui, e este bloco vivia sem ele.
     O cabeçalho deste arquivo já mandava ("no claro o ouro vira texto/borda no degrau
     800 couro"), mas só `--acento-texto` tinha sido remapeado: `--acento` continuava
     valendo o ouro 600 do :root e vazava ouro CRU pro tema claro por toda porta que
     usa o token de PREENCHIMENTO -- o selo "✓ SELECIONADO" do /checkout, a borda da
     aba Pix do /reserva, o disco de confirmação do /obrigado, o ponto "agora" da
     linha do tempo do /panorama, o anel de progresso do /cadastro. Um token que não
     muda com o tema é a família inteira de defeito da repintura numa linha só.
     Preenchimento de ouro segue PROIBIDO no claro (palavra do dono): quem preenche
     com `--acento` e leva TEXTO em cima (selo, badge) perde o fundo e vira
     texto+borda na sua própria regra `.tema-claro`; couro como texto/borda/ícone e
     como fundo de wash (14%) é o que este degrau autoriza. */
  --medalha-bronze: color-mix(in srgb, var(--booot-ouro-800) 70%, var(--booot-erro));   /* cobre escuro #A35B28 */
  --medalha-prata: var(--booot-cinza-500);    /* 5,10 s/ página 900 */
  --medalha-ouro: var(--booot-ouro-800);      /* couro: no claro o ouro vira couro (ouro cru não passa) */
  --acento: var(--booot-ouro-800);            /* couro · 5,70 s/ página · 6,11 s/ branco */
  --acento-texto: var(--booot-ouro-800);      /* couro · 5,70 s/ página · 6,11 s/ branco */

  /* CTA claro = grafite (hover/press sobem degraus da escada de cinza) */
  --cta-fundo: var(--booot-cinza-000);
  --cta-texto: #FFFFFF;                       /* 18,80 s/ o fundo grafite do botão */
  --cta-hover: var(--booot-cinza-100);
  --cta-press: var(--booot-cinza-200);

  --anel-foco: 2px solid var(--booot-ouro-800);   /* 5,70 s/ página (piso 3,0 UI) */

  /* semânticas como texto corrido: mistura 70% cor + 30% grafite (medido: 5,32 · 5,23 · 5,29 s/ página) */
  --erro-texto: color-mix(in srgb, var(--booot-erro) 70%, var(--booot-cinza-000));
  --sucesso-texto: color-mix(in srgb, var(--booot-sucesso) 70%, var(--booot-cinza-000));
  --info-texto: color-mix(in srgb, var(--booot-info) 70%, var(--booot-cinza-000));

  --campo-fundo: #FFFFFF;
  --campo-borda: color-mix(in srgb, var(--booot-cinza-000) 45%, transparent);  /* 3,04 s/ branco (piso 3,0) */
  --campo-borda-foco: var(--booot-ouro-800);

  /* claro: elevação é por sombra discreta + borda (cartão branco s/ página quase-branca) */
  --sombra-cartao: 0 1px 2px hsl(210 20% 10% / .06), 0 4px 16px hsl(210 20% 10% / .06);
  --sombra-flutuante: 0 16px 48px hsl(210 20% 10% / .18);

  /* a métrica-herói também desce um degrau: `--serie-1` ficava no ouro 600 e as barras
     do /panorama e do /reuniao saíam em ouro cru sobre branco (2,47) */
  --serie-1: var(--booot-ouro-800);           /* 6,11 s/ branco */
  --serie-2: var(--booot-cinza-500);          /* 5,47 s/ branco */
  --serie-3: var(--booot-cinza-300);
}

/* ============================================================================
   PLATAFORMA · os tokens do app logado (go.booot.com.br/app) · D-PLATAFORMA-COPIA-O-STCHAT-07SET
   O dono (07/09/2026): "o objetivo é ficar mais próximo ao STChat possível, para garantir consistência
   nas 2 plataformas". Valores MEDIDOS ao vivo em crm.booot.com.br (getComputedStyle, claro e escuro) e
   registrados em _MARCA/whitelabel/refs-stchat/ANATOMIA-MEDIDA.md. O escopo é o documento que carrega a
   casca (.sh-app · app/shell.html) ou a tela de entrar (.en-caixa · entrar.html): o Portal e o resto da casa NÃO mudam. Só os SEMÂNTICOS (CSS-only)
   são revalorados aqui; os primitivos (cinza-*, ouro-*) seguem os mesmos: o verify-tokens exige paridade
   css/json/tw dos valores do `:root` base (ele LÊ O BASE e ignora este bloco), então o que o app revalora abaixo
   (raio, passo de espaço, texto de 11 px, número de KPI, transição de 150 ms) é o valor MEDIDO no CRM e vale só
   onde há `.sh-app`/`.en-caixa` (fatia 1 de D-APP-COPIA-O-DESIGN-SYSTEM-DO-CRM-CLARO-E-ESCURO-PARAMETRIZADO-E-TESTADO-CLICANDO-07OUT,
   valores em _work/design-crm/INVENTARIO.md §3 e §5). A primária do whitelabel é o
   cinza-500 (D-WHITELABEL-CORES-OURO-16AGO); o ouro fica só no símbolo e na pill do plano.
   ============================================================================ */
:root:has(.sh-app, .en-caixa) {
  /* escuro do STChat (204 26% 7% · 204 24% 10% · 204 20% 15% · 200 18% 93% · 204 12% 64% · 204 18% 17%) */
  --pagina: #0D1316;
  --superficie: #131B20;
  --superficie-2: #1F282E;
  --texto: #EAEEF0;
  --texto-2: #98A5AE;
  --texto-3: #84929D;   /* 5,46 s/ a superfície · 5,86 s/ a página · 4,70 s/ a superfície-2 (WCAG 1.4.3, piso 4,5): o #6F7E89 do STChat dava 4,17 s/ a superfície e 3,58 s/ a superfície-2 (medido em 07/10, AUDITORIA B1) */
  --texto-lead: #C4CCD2;
  --borda: color-mix(in srgb, #242D33 70%, transparent);
  --borda-forte: #2E3940;
  --campo-fundo: color-mix(in srgb, #1F282E 40%, transparent);
  --campo-borda: #5C6B75;   /* 3,17 s/ a superfície · 3,40 s/ a página: a borda do campo é o contorno do controle (WCAG 1.4.11, piso 3:1); a do STChat dava 1,2 e o campo sumia (03/10) */
  --campo-borda-foco: var(--booot-cinza-500);
  /* GRAMÁTICA v1 (06/10 · revisão 3 · dono, L068 e L087: "São muitas fontes concorrendo" · "as caixas não estão padronizadas"). O APP tem 4 tamanhos de texto, não 6 (G1): rótulo 14 · corpo 16 · título 20 · número herói 32.
     O 12 (--fs-micro) cai para o 14 e o 24 (--fs-2xl) cai para o 20, o mais perto; o Portal segue com a escala dele (estas linhas só valem onde há `.sh-app`/`.en-caixa`).
     A CAIXA é uma só (G3, a regra mora em app.css); a página é uma coluna centrada de 1120 px (G6): `--pagina-max`. */
  --fs-micro: var(--fs-sm);
  --fs-2xl: var(--fs-xl);
  --pagina-max: 70rem;
  /* CTA = GRAFITE (D-BOTAO-PRINCIPAL-GRAFITE-NO-APP-04OUT · o cinza-500 parecia desabilitado): no escuro o grafite some no fundo, então o mesmo sistema invertido */
  --cta-fundo: var(--booot-cinza-900);
  --cta-texto: var(--booot-cinza-000);
  --cta-hover: var(--booot-cinza-800);
  --cta-press: var(--booot-cinza-700);
  --anel-foco: 2px solid var(--booot-cinza-500);
  --sombra-cartao: none;   /* T17 (revisão 3, 06/10 · dono: "Essas caixas com profundidade... só poluiu mais"): o app é plano, a borda separa o cartão */
  --sombra-flutuante: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  /* A FORMA DO CRM (medida em crm.booot.com.br, 07/10, claro e escuro: os mesmos valores nos dois temas). Fonte: INVENTARIO.md §3 (raio, espaço, movimento) e §2 (texto).
     Formato DTCG (W3C DTCG, designtokens.org/tr/drafts/format, `$type: dimension`): cada linha abaixo é um token de dimensão; nome e valor são o do CRM, o `--raio-*` e o `--motion-*` só trocam o valor do nome que a casa já tinha. */
  --raio-controle: .375rem;      /* 6 px · input, botão retangular, badge (CRM `rounded-md`) */
  --raio-cartao: .75rem;         /* 12 px · card, KPI, painel (CRM `rounded-xl`) */
  --raio-flutuante: .5rem;       /* 8 px · modal e popover: o diálogo do CRM é MENOR que o card */
  --space-xs: .375rem;           /* 6 px · o gap de meta de card e o rótulo colado ao número */
  --space-md: .75rem;            /* 12 px · O PASSO DOMINANTE do CRM entre blocos (15 a 222 usos por tela); é o mesmo degrau do `--sh-12` do kit */
  --fs-meta: .6875rem;           /* 11 px · o metadado padrão do CRM (eixo de gráfico, "vs" do período); só texto de apoio e só com --texto-2 ou mais forte */
  --fs-kpi: 1.5rem;              /* 24 px · o número do KPI (CRM: 24/700); o peso é o --fw-bold */
  --motion-fast: 150ms;          /* a transição única do CRM */
  --motion-base: 150ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
}
:root:has(.sh-app, .en-caixa).tema-claro {
  /* claro do STChat (210 20% 98% · branco · 210 20% 96% · 222 47% 11% · 215 16% 47% · 214 32% 91%) */
  --pagina: #F9FAFB;
  --superficie: #FFFFFF;
  --superficie-2: #F1F5F9;
  --texto: #0F172A;
  --texto-2: #526074;   /* 6,39 s/ branco · 6,12 s/ a página · 5,84 s/ a superfície-2 (WCAG 1.4.3). O #64748B do STChat dava 4,76 · 4,55 · 4,34: reprovava s/ a superfície-2 e não deixava espaço para um 3º degrau MAIS CLARO que ainda passe 4,5:1; o 2º degrau desce 1 tom para a ordem texto > texto-2 > texto-3 valer nos 2 temas (07/10) */
  --texto-3: #5F6E83;   /* 5,19 s/ branco · 4,97 s/ a página · 4,74 s/ a superfície-2 (WCAG 1.4.3, piso 4,5): o #94A3B8 do STChat dava 2,56 s/ branco e 2,45 s/ a página (medido em 07/10, AUDITORIA B1). Mais claro que o --texto-2 (#526074, 6,39) e ainda ≥ 4,5:1 */
  --texto-lead: #334155;
  --borda: color-mix(in srgb, #E1E7EF 70%, transparent);
  --borda-forte: #CBD5E1;
  --campo-fundo: color-mix(in srgb, #F1F5F9 40%, transparent);
  --campo-borda: #8492A6;   /* 3,16 s/ branco · 3,02 s/ a página: o contorno do campo passa o piso 3:1 (WCAG 1.4.11); a do STChat dava 1,4 (03/10) */
  --campo-borda-foco: var(--booot-cinza-500);
  /* CTA = GRAFITE AZULADO (D-BOTAO-PRINCIPAL-GRAFITE-NO-APP-04OUT revista pelo T14 de 05/10): texto branco 17,85:1; hover e press sobem a escada do PRÓPRIO azulado (--texto-lead e a mistura dele), sem hex novo */
  --cta-fundo: var(--texto);     /* T14 (revisão 3, 06/10 · dono: "no tema claro, parece que você usou preto... Não usou o azul, o azulado"): o grafite AZULADO do claro, o mesmo do texto (#0F172A), nunca o quase-preto 000 */
  --cta-texto: #FFFFFF;
  --cta-hover: var(--texto-lead);   /* T14: #334155 · 10,35:1 com o branco */
  --cta-press: color-mix(in srgb, var(--texto-lead) 50%, var(--texto));   /* T14: entre o hover e o fundo, ainda azulado */
  --anel-foco: 2px solid var(--booot-cinza-500);
  --sombra-cartao: none;   /* T17 (revisão 3, 06/10 · dono: "Essas caixas com profundidade... só poluiu mais"): o app é plano, a borda separa o cartão */
  --sombra-flutuante: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}