/* ==========================================================================
   tokens.css — Fundação de cor, espaço, camada e movimento da Torre.
   Implementa DESIGN.md §2 (arquitetura de tokens), §3 (famílias tipográficas),
   §4 (espaço, toque, breakpoints), §2.6 (scrim), §2.8 (z-index), §2.9 (movimento).

   DUAS CAMADAS, e a fronteira entre elas é a regra que sustenta tudo:

     1. PRIMITIVAS  --g-*   rampas brutas. Existem só para alimentar a camada 2.
                            Componente NUNCA referencia uma primitiva.
     2. SEMÂNTICAS  --tc-*  o único vocabulário que componente usa. Organizadas
                            por papel: surface, border, text, action, state.

   Chaveamento (DESIGN.md §2):
     :root                 primitivas + semânticas do tema ESCURO (default)
     [data-theme="light"]  redefine SOMENTE as semânticas
     [data-env="hml|dev"]  redefine SOMENTE surface/border — tinge, não recolore

   O override de ambiente não toca state/action/text de propósito: vermelho
   precisa continuar significando "atrasado" dentro de homologação (§1.7).

   ESCOPO DESTA ONDA: dataviz (§2.7), [data-surface="tv"] (§5) e print (§6.22)
   NÃO nascem aqui — não há consumidor ainda, e CSS sem consumidor envelhece
   errado (ARQUITETURA.md §2.1). Entram junto da tela que os pedir.

   Primeiro consumidor: o launcher (public/index.html). Nenhuma tela legada
   carrega este arquivo — a migração das existentes é de outra onda (§7).
   ========================================================================== */

:root {
  /* ── 1. PRIMITIVAS ────────────────────────────────────────────────────────
     Neutros: o número é o L* (CIE lightness, 0 = preto, 100 = branco) do valor,
     arredondado. Não é ordinal inventado — é medida, e é o que permite conferir
     "este cinza é mais claro que aquele?" sem abrir o color picker.
     A rampa é a UNIÃO dos dois temas: o claro usa a ponta de cima, o escuro a
     de baixo. Por isso ela tem 25 passos e nenhum tema usa todos.             */

  --g-n-04:  #0B0E11;   /* header (fixo nos 2 temas) */
  --g-n-05:  #0E1114;
  --g-n-07:  #111519;
  --g-n-10:  #171C22;
  --g-n-12:  #1A2028;   /* quase-preto do tema claro — a 1 ponto por canal do
                           --g-n-13; são papéis de temas opostos (texto claro ×
                           superfície escura) e nunca convivem na mesma tela */
  --g-n-13:  #1B2129;
  --g-n-15:  #1F262F;
  --g-n-17:  #232A32;
  --g-n-24:  #303945;
  --g-n-34:  #46525F;
  --g-n-35:  #4A545F;
  --g-n-39:  #525C68;
  --g-n-49:  #6B7683;
  --g-n-52:  #717D8A;
  --g-n-54:  #78828E;
  --g-n-61:  #8894A1;
  --g-n-67:  #9AA4B0;
  --g-n-71:  #A6B0BC;
  --g-n-74:  #AEB6BF;
  --g-n-84:  #CDD3DB;
  --g-n-92:  #E4E7EB;
  --g-n-94:  #E9EDF2;
  --g-n-95:  #EDF0F3;
  --g-n-96:  #F2F3F5;
  --g-n-98:  #F7F8F9;
  --g-n-100: #FFFFFF;

  /* Neutros AZULADOS — os dois únicos da rampa que carregam hue de propósito:
     é o fundo de "linha/item selecionado", que precisa ler como parente do azul
     de ação sem ser o azul de ação. */
  --g-nb-20: #233042;
  --g-nb-93: #E3EBF7;

  /* Azul de interação (§2.4: ação, seleção, link, foco). */
  --g-blue-35: #1F4AA5;
  --g-blue-40: #2757BC;
  --g-blue-45: #2F63D6;
  --g-blue-55: #4A7BDD;
  --g-blue-60: #5B8DEF;
  --g-blue-66: #729DF2;

  /* Verde de MARCA (§11). Separado do verde de sucesso de propósito: marca e
     estado não podem compartilhar tinta, senão "concluído" e "logo" competem.
     As duas paradas de brilho alimentam o gradiente do símbolo — §11 é
     explícito em que o brilho é parte da marca, não enfeite. */
  --g-brand-30:  #33512A;
  --g-brand-52:  #6B9930;
  --g-brand-56:  #6FA32E;
  --g-brand-66:  #84B93E;
  --g-brand-76:  #A8D16D;

  /* Estados (§2.5) — cada família com o par escuro/claro. */
  --g-green-50:  #1F8A47;
  --g-green-72:  #4FC974;
  --g-teal-45:   #0F7A80;
  --g-teal-64:   #35B3B8;
  --g-amber-48:  #A66B08;
  --g-amber-70:  #E0A63C;
  --g-red-45:    #C43D3D;
  --g-red-56:    #E05252;
  --g-orange-52: #D9541E;
  --g-orange-64: #FF7A45;

  /* ── 2. SEMÂNTICAS — tema ESCURO (default) ─────────────────────────────── */

  /* 2.1 Superfície (DESIGN.md §2.1) */
  --tc-surface-page:     var(--g-n-05);
  --tc-surface-raised:   var(--g-n-10);
  --tc-surface-overlay:  var(--g-n-13);
  --tc-surface-inset:    var(--g-n-07);
  --tc-surface-hover:    var(--g-n-15);
  --tc-surface-selected: var(--g-nb-20);
  --tc-surface-header:   var(--g-n-04);   /* escuro nos 2 temas — decisão §2.1 */

  /* 2.2 Borda (§2.2) */
  --tc-border-subtle:  var(--g-n-17);
  --tc-border-default: var(--g-n-24);
  --tc-border-strong:  var(--g-n-34);
  --tc-border-focus:   var(--g-blue-60);  /* anel de foco = cor de ação */

  /* 2.3 Texto (§2.3) */
  --tc-text-primary:   var(--g-n-94);
  --tc-text-secondary: var(--g-n-71);
  --tc-text-muted:     var(--g-n-52);
  --tc-text-disabled:  var(--g-n-35);
  --tc-text-on-accent: var(--g-n-100);
  --tc-text-on-header: var(--g-n-94);

  /* 2.4 Ação (§2.4) — azul é a cor de interação; verde fica com a marca. */
  --tc-action-primary:        var(--g-blue-60);
  --tc-action-primary-hover:  var(--g-blue-66);
  --tc-action-primary-active: var(--g-blue-55);
  --tc-action-primary-subtle: #5B8DEF26;   /* --g-blue-60 a ~15% */
  --tc-action-danger:         var(--g-red-56);

  /* Marca (§11). --tc-brand é a tinta chapada; as duas paradas abaixo são o
     gradiente do símbolo A2-V e NÃO mudam com o tema — a marca é a mesma nos
     dois, e é o fundo em volta dela que muda. */
  --tc-brand:        var(--g-brand-66);
  --tc-brand-deep:   var(--g-brand-30);
  --tc-brand-gloss:  var(--g-brand-76);
  --tc-brand-shade:  var(--g-brand-52);

  /* 2.5 Estado (§2.5) — trinca -fg / -bg / -border por estado.
     `progress` é TEAL, longe do azul de ação e do verde de sucesso: em tabela
     densa, "o pedido está andando" e "esta linha está selecionada" nunca podem
     ler igual. Os -bg são a cor -fg com alpha, exatamente como o §2.5 escreve
     (26 ≈ 15% no escuro, 1A ≈ 10% no claro); o alpha do -border o §2.5 não fixa,
     e aqui vale o dobro do -bg (4D ≈ 30% / 40 ≈ 25%) — contorno precisa de mais
     presença que preenchimento para ler na mesma intensidade.
     São hex literais e não color-mix(var(...)) de propósito: o valor com alpha
     está escrito assim no DESIGN.md, e color-mix ainda não é seguro no tablet
     antigo do armazém. Hex aqui é permitido — este é o único arquivo onde é. */
  --tc-state-success:         var(--g-green-72);
  --tc-state-success-bg:      #4FC97426;
  --tc-state-success-border:  #4FC9744D;
  --tc-state-progress:        var(--g-teal-64);
  --tc-state-progress-bg:     #35B3B826;
  --tc-state-progress-border: #35B3B84D;
  --tc-state-warning:         var(--g-amber-70);
  --tc-state-warning-bg:      #E0A63C26;
  --tc-state-warning-border:  #E0A63C4D;
  --tc-state-danger:          var(--g-red-56);
  --tc-state-danger-bg:       #E0525226;
  --tc-state-danger-border:   #E052524D;
  --tc-state-urgent:          var(--g-orange-64);
  --tc-state-urgent-bg:       #FF7A4526;
  --tc-state-urgent-border:   #FF7A454D;
  --tc-state-neutral:         var(--g-n-61);
  --tc-state-neutral-bg:      #8894A126;
  --tc-state-neutral-border:  #8894A14D;

  /* 2.6 Scrim do fundo fotográfico (§2.6).
     A foto é desenhada em opacity:1 e quem controla a intensidade é SÓ o véu —
     uma atenuação, um lugar para ajustar. Empilhar opacidade na foto E no véu
     foi o defeito anterior (5% sob 85% ≈ 0,7% de foto: invisível).
     O nível default é `dense`; `hero` e `ambient` estão logo abaixo. */
  --tc-photo-image:      url('login-bg.jpg');
  --tc-scrim-photo-veil: #0E1114F0;   /* 94% */
  --tc-scrim-photo-blur: 1px;
  --tc-scrim-photo-sat:  0.6;
  --tc-scrim-overlay:    #00000099;   /* sob painel/modal/drawer */

  /* 2.8 Camadas (§2.8). Seis níveis, todos token. Nenhum z-index numérico solto
     no CSS: camada nova nasce AQUI, com motivo. Scrim e conteúdo do mesmo
     overlay ficam no mesmo nível (+1 no conteúdo). */
  --tc-z-photo:   0;
  --tc-z-veil:    1;
  --tc-z-app:     2;
  --tc-z-sticky:  10;
  --tc-z-header:  100;
  --tc-z-drawer:  200;
  --tc-z-modal:   300;
  --tc-z-tooltip: 400;
  --tc-z-toast:   500;

  /* 2.9 Movimento (§2.9). Teto de 360ms; nada anima em loop exceto spinner e
     skeleton. Propriedades animáveis: opacity, transform, background-color,
     border-color, color — NUNCA height/width/top/left. */
  --tc-dur-instant: 80ms;
  --tc-dur-fast:    140ms;
  --tc-dur-base:    220ms;
  --tc-dur-slow:    360ms;
  --tc-ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --tc-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --tc-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --tc-ease-emph:   cubic-bezier(0.2, 0, 0, 1.15);   /* único com overshoot */

  /* 3. Famílias tipográficas (§3) — pilha declarada, sem webfont.
     `system-ui` primeiro: o texto de UI passa a ser o tipo nativo de cada
     plataforma (Segoe UI Variable no Windows, Roboto no Android, SF Pro no iOS),
     com os pesos e o hinting certos em cada uma.
     A ESCALA (tamanho/altura/peso) não mora aqui: são classes .tc-type-* em
     type.css, porque um nível tipográfico é quatro valores amarrados e uma
     custom property carrega um só (§2.10). */
  --tc-font-ui:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tc-font-mono:
    ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
    "Droid Sans Mono", "DejaVu Sans Mono", monospace;
  /* Visby CF é a fonte da MARCA, nunca de interface (§3). Os dois pesos vivem
     em assets/fonts/ e são declarados por @font-face no type.css; a pilha de
     sistema fica atrás como rede de segurança, para o wordmark ter forma certa
     mesmo antes de a fonte chegar. */
  --tc-font-brand: "Visby CF", var(--tc-font-ui);

  /* 4. Espaço (§4). Base 4px, 8 passos, nada fora da escala. */
  --tc-space-1: 4px;
  --tc-space-2: 8px;
  --tc-space-3: 12px;
  --tc-space-4: 16px;
  --tc-space-5: 20px;
  --tc-space-6: 24px;
  --tc-space-7: 32px;
  --tc-space-8: 48px;

  /* Alturas fixas (§4) — resolvem a bagunça de 34/36/38/40px na mesma barra. */
  --tc-control-h:    36px;   /* input, select, botão, chip de filtro */
  --tc-control-h-sm: 28px;   /* badge de status, pill de KPI do header */
  --tc-row-h:        44px;   /* linha de tabela densa (2 linhas de texto) */
  --tc-row-h-sm:     36px;   /* linha de tabela simples (1 linha) */
  --tc-header-h:     56px;   /* header do app */

  /* Alvos de toque (§4.1). O alvo cresce sem mudar o desenho: área invisível,
     não componente maior. Ver o bloco @media (pointer: coarse) no fim. */
  --tc-touch-min: 44px;
  --tc-touch-gap: 8px;

  /* Raios (§4) — três, e só três. */
  --tc-radius-control: 4px;
  --tc-radius-surface: 8px;
  --tc-radius-pill:    999px;

  /* Breakpoints (§4.2), nomeados pelo uso real e não por dispositivo.
     Ficam declarados como token porque `@media` NÃO aceita var() — as media
     queries deste projeto repetem os números literais, e é aqui que se confere
     qual é o número certo. Também é daqui que o JS lê o corte, via
     getComputedStyle, em vez de hard-codear 720 em dois lugares. */
  --tc-bp-compact: 720px;    /* < 720  celular, conferência em pé */
  --tc-bp-tablet:  1120px;   /* 720–1119  tablet de armazém */
  --tc-bp-wide:    1920px;   /* ≥ 1920  sala de operação, TV */
}

/* ── TEMA CLARO — redefine SOMENTE as semânticas ─────────────────────────────
   Nenhuma primitiva é tocada: a rampa é a mesma, muda de que ponta cada papel
   pega o valor. O header continua escuro (§2.1) — é traço de identidade, não
   esquecimento. */
[data-theme="light"] {
  --tc-surface-page:     var(--g-n-96);
  --tc-surface-raised:   var(--g-n-100);
  --tc-surface-overlay:  var(--g-n-100);
  --tc-surface-inset:    var(--g-n-98);
  --tc-surface-hover:    var(--g-n-95);
  --tc-surface-selected: var(--g-nb-93);
  --tc-surface-header:   var(--g-n-04);

  --tc-border-subtle:  var(--g-n-92);
  --tc-border-default: var(--g-n-84);
  --tc-border-strong:  var(--g-n-67);
  --tc-border-focus:   var(--g-blue-45);

  --tc-text-primary:   var(--g-n-12);
  --tc-text-secondary: var(--g-n-39);
  --tc-text-muted:     var(--g-n-54);
  --tc-text-disabled:  var(--g-n-74);
  --tc-text-on-accent: var(--g-n-100);
  --tc-text-on-header: var(--g-n-94);

  --tc-action-primary:        var(--g-blue-45);
  --tc-action-primary-hover:  var(--g-blue-40);
  --tc-action-primary-active: var(--g-blue-35);
  --tc-action-primary-subtle: #2F63D61A;   /* --g-blue-45 a ~10% */
  --tc-action-danger:         var(--g-red-45);

  --tc-brand: var(--g-brand-56);

  --tc-state-success:         var(--g-green-50);
  --tc-state-success-bg:      #1F8A471A;
  --tc-state-success-border:  #1F8A4740;
  --tc-state-progress:        var(--g-teal-45);
  --tc-state-progress-bg:     #0F7A801A;
  --tc-state-progress-border: #0F7A8040;
  --tc-state-warning:         var(--g-amber-48);
  --tc-state-warning-bg:      #A66B081A;
  --tc-state-warning-border:  #A66B0840;
  --tc-state-danger:          var(--g-red-45);
  --tc-state-danger-bg:       #C43D3D1A;
  --tc-state-danger-border:   #C43D3D40;
  --tc-state-urgent:          var(--g-orange-52);
  --tc-state-urgent-bg:       #D9541E1A;
  --tc-state-urgent-border:   #D9541E40;
  --tc-state-neutral:         var(--g-n-49);
  --tc-state-neutral-bg:      #6B76831A;
  --tc-state-neutral-border:  #6B768340;

  --tc-scrim-photo-veil: #F2F3F5F5;   /* 96% — texto escuro sobre foto clara é
                                         mais frágil, então mais véu */
  --tc-scrim-photo-blur: 2px;
  --tc-scrim-photo-sat:  0.35;        /* evita o verde da marca tingir o cinza */
  --tc-scrim-overlay:    #1A202859;
}

/* ── FOTO POR FRENTE (§6.36) ─────────────────────────────────────────────────
   O Estudo de Estoque tem duas frentes com métodos diferentes, e a foto é o
   que faz a pessoa saber em qual está SEM LER. Um seletor no header resolve
   "onde eu clico"; ele não resolve "em qual frente eu estou" para quem já
   rola a página há dois minutos.

   As duas se opõem por TEMPERATURA DE COR — campo ao pôr do sol contra metal
   azul —, e não por assunto: sob 6px de desfoque e 76% de véu o assunto some,
   a temperatura não. É a mesma lógica do §2.6, aplicada a distinguir contexto
   em vez de a graduar presença. */
/* ── A FRENTE (§6.36) ────────────────────────────────────────────────────────
   O Estudo de Estoque tem duas frentes com métodos diferentes, e a pessoa
   precisa saber em qual está SEM LER. O sinal precisa ser forte e, ao mesmo
   tempo, não pode colidir com o de AMBIENTE — e a primeira tentativa colidiu:
   tingir o header confunde com homologação e produção, porque cor de fundo de
   header JÁ SIGNIFICA ambiente nesta Torre. Usar a mesma dimensão para duas
   coisas destrói um sinal que hoje é confiável.

   A separação que resolve é de CATEGORIA VISUAL, não de território:

     ambiente   cor de FUNDO      (surface, o header, a página)
     frente     cor de ACENTO     (a linha sob as abas, o ativo da chave, o nome)
                + a FOTO de fundo

   Fundo e acento não se confundem nem à distância, e nenhum dos dois precisa
   ceder espaço ao outro.

   A FOTO volta a ser sinal de primeira linha porque ela deixou de ser foto: as
   duas vêm tratadas como fundo — escurecidas, dessaturadas, com fade no topo e
   vinheta —, então o véu não precisa fazer sozinho o trabalho de legibilidade.
   Com `dense` (94%) elas não apareceriam; com o véu declarado abaixo, aparecem
   e continuam sob todo dado, que vive em card opaco. */
/* DOIS tokens de acento, e não um, porque ele pinta em dois lugares com fundos
   opostos: dentro do HEADER (escuro nos dois temas — a chave e o nome) e na
   PÁGINA (clara no tema claro — a linha sob as abas). Um token só deixaria a
   linha invisível no tema claro, que é o mesmo tipo de furo que já apareceu
   quando o acento vivia só no header. */
:root[data-frente="industria"] {
  --tc-photo-image:      url('bg-industria.jpg');
  --tc-front-accent-hdr: oklch(0.80 0.13 250);
  --tc-front-accent:     oklch(0.80 0.13 250);
}
:root[data-frente="posvendas"] {
  --tc-photo-image:      url('bg-posvendas.jpg');
  --tc-front-accent-hdr: oklch(0.82 0.15 85);
  --tc-front-accent:     oklch(0.82 0.15 85);
}
/* No claro só o acento DA PÁGINA escurece; o do header fica, porque o header
   continua escuro. */
:root[data-theme="light"][data-frente="industria"] { --tc-front-accent: oklch(0.52 0.16 250); }
:root[data-theme="light"][data-frente="posvendas"] { --tc-front-accent: oklch(0.58 0.14 70);  }

/* O véu das telas COM FRENTE. Mais leve que o `dense` porque a imagem já chega
   pronta; o blur é baixo pelo mesmo motivo — desfocar o que já foi tratado só
   apaga. Vale só onde não há `data-photo` declarado: `ambient` e `hero` têm
   critério próprio (§2.6) e continuam mandando. */
:root[data-frente]:not([data-photo]) {
  --tc-scrim-photo-veil: #0E1114C4;   /* 77% */
  --tc-scrim-photo-blur: 2px;
  --tc-scrim-photo-sat:  0.9;
}
:root[data-theme="light"][data-frente]:not([data-photo]) {
  --tc-scrim-photo-veil: #F2F3F5EB;   /* 92% — foto escura sob texto escuro pede
                                         mais véu, e a aferição do §2.6 manda
                                         subir o véu em vez de mexer na foto. */
  --tc-scrim-photo-blur: 3px;
}

/* ── NÍVEIS DE PRESENÇA DA FOTO (§2.6) ───────────────────────────────────────
   Densidade e presença de marca são inversamente proporcionais, e isso vira
   NÍVEL declarado por `data-photo`, não exceção por tela.

     hero     login                      foto protagonista, sem véu
     ambient  LAUNCHER, estado vazio,    mais foto, mais desfoque: atmosfera
              erro de carga, sem-acesso
     dense    (default) tabela, painel,  foto como textura nas calhas
              dashboard, formulário

   O critério do `ambient` são três condições simultâneas: poucos elementos e
   muito respiro, todo texto sobre superfície opaca ou ≥ 16px, e nenhum número
   operacional lido contra a foto. Se uma cair, a tela é `dense`. */
[data-photo="hero"] {
  --tc-scrim-photo-veil: transparent;
  --tc-scrim-photo-blur: 0px;
  --tc-scrim-photo-sat:  1;
}
[data-photo="ambient"] {
  --tc-scrim-photo-veil: #0E1114C2;   /* 76% */
  --tc-scrim-photo-blur: 6px;
  --tc-scrim-photo-sat:  0.8;
}
/* O claro precisa de MENOS véu que o escuro para a foto ler igual, não de mais.
   A intuição engana: um véu claro sobre foto clara apaga por falta de
   contraste, enquanto o véu escuro sobre a mesma foto ainda deixa a silhueta
   aparecer. Com os 88% originais o equipamento sumia no tema claro enquanto
   aparecia no escuro — os dois temas precisam ter a mesma presença de marca.
   Ajustado em 13/08/2026, sobre o launcher rodando: 80% de véu e um pouco mais
   de saturação, mantendo o blur alto (é atmosfera, não imagem).
   Aferição do §2.6 continua valendo: se o texto secundário mudar de contraste
   conforme o que está atrás, o véu volta a subir 2% — não se mexe na foto. */
[data-theme="light"][data-photo="ambient"] {
  --tc-scrim-photo-veil: #F2F3F5CC;   /* 80% */
  --tc-scrim-photo-blur: 8px;
  --tc-scrim-photo-sat:  0.6;
}

/* ── TINTA DE AMBIENTE (§1.7, §2) ────────────────────────────────────────────
   Redefine EXCLUSIVAMENTE surface/border. State, action e text são imunes: em
   homologação o vermelho de "atrasado" precisa continuar visível dentro do
   vermelho de ambiente, e em desenvolvimento o verde de "no prazo" não pode se
   diluir no verde de ambiente. Era exatamente isso que o re-tingimento antigo
   (paleta inteira) quebrava.

   Croma baixo (C ≤ 0.02) e sempre acompanhado do badge textual HML/DEV no
   header: cor sozinha não pode ser o único sinal de ambiente.

   As LIGHTNESS do bloco escuro são as do DESIGN.md §2.1 tal como escritas; as
   do bloco claro foram derivadas medindo o oklch das superfícies claras do §2.1
   (0.964 page · 0.99 raised · 0.979 inset · 0.954 hover · 0.927/0.865 bordas),
   para a tinta mudar o hue sem mexer na elevação. Hue 25 = homologação,
   hue 150 = desenvolvimento. */
[data-env="hml"] {
  --tc-surface-page:    oklch(0.16 0.018 25);
  --tc-surface-raised:  oklch(0.21 0.018 25);
  --tc-surface-overlay: oklch(0.23 0.018 25);
  --tc-surface-inset:   oklch(0.17 0.018 25);
  --tc-surface-hover:   oklch(0.25 0.018 25);
  --tc-surface-header:  oklch(0.13 0.02  25);
  --tc-border-subtle:   oklch(0.28 0.02  25);
  --tc-border-default:  oklch(0.34 0.02  25);
}
[data-env="dev"] {
  --tc-surface-page:    oklch(0.16 0.018 150);
  --tc-surface-raised:  oklch(0.21 0.018 150);
  --tc-surface-overlay: oklch(0.23 0.018 150);
  --tc-surface-inset:   oklch(0.17 0.018 150);
  --tc-surface-hover:   oklch(0.25 0.018 150);
  --tc-surface-header:  oklch(0.13 0.02  150);
  --tc-border-subtle:   oklch(0.28 0.02  150);
  --tc-border-default:  oklch(0.34 0.02  150);
}
[data-theme="light"][data-env="hml"] {
  --tc-surface-page:    oklch(0.964 0.018 25);
  --tc-surface-raised:  oklch(0.99  0.014 25);
  --tc-surface-overlay: oklch(0.99  0.014 25);
  --tc-surface-inset:   oklch(0.979 0.016 25);
  --tc-surface-hover:   oklch(0.954 0.018 25);
  --tc-surface-header:  oklch(0.13  0.02  25);
  --tc-border-subtle:   oklch(0.927 0.02  25);
  --tc-border-default:  oklch(0.865 0.02  25);
}
[data-theme="light"][data-env="dev"] {
  --tc-surface-page:    oklch(0.964 0.018 150);
  --tc-surface-raised:  oklch(0.99  0.014 150);
  --tc-surface-overlay: oklch(0.99  0.014 150);
  --tc-surface-inset:   oklch(0.979 0.016 150);
  --tc-surface-hover:   oklch(0.954 0.018 150);
  --tc-surface-header:  oklch(0.13  0.02  150);
  --tc-border-subtle:   oklch(0.927 0.02  150);
  --tc-border-default:  oklch(0.865 0.02  150);
}

/* ── PONTEIRO GROSSO (§4.1) ──────────────────────────────────────────────────
   Tablet no armazém e celular em pé: densidade de mouse e alvo de dedo
   convivem trocando os tokens de altura, não o desenho dos componentes. */
@media (pointer: coarse) {
  :root {
    --tc-control-h:    var(--tc-touch-min);
    --tc-control-h-sm: 36px;
    --tc-row-h:        52px;
  }
}

/* ── PAPEL ───────────────────────────────────────────────────────────────────
   NÃO é o print.css do §6.22 — aquele nasce junto do módulo de rotas de
   separação, que é quem precisa de cabeçalho de folha, repetição de thead e
   caixas de anotação. Aqui está só a NEUTRALIZAÇÃO de tokens que o §6.22 exige
   como base, e que qualquer tela impressa hoje já precisa: fundo branco, tinta
   preta e a camada de foto desligada.

   Quem apaga a foto é o véu (§2.6: a atenuação é única), e o mais simples é não
   desenhar a imagem. O `--tc-photo-image: none` sozinho já resolveria, mas o
   véu branco garante que nenhuma impressora gaste toner com o retângulo. */
@media print {
  :root,
  [data-theme="light"],
  [data-env="hml"],
  [data-env="dev"] {
    --tc-photo-image:      none;
    --tc-scrim-photo-veil: #FFFFFF;
    --tc-scrim-photo-blur: 0px;
    --tc-scrim-overlay:    transparent;

    --tc-surface-page:     #FFFFFF;
    --tc-surface-raised:   #FFFFFF;
    --tc-surface-overlay:  #FFFFFF;
    --tc-surface-inset:    #FFFFFF;
    --tc-surface-hover:    #FFFFFF;
    --tc-surface-header:   #FFFFFF;

    --tc-border-subtle:    #000000;
    --tc-border-default:   #000000;
    --tc-border-strong:    #000000;

    --tc-text-primary:     #000000;
    --tc-text-secondary:   #000000;
    --tc-text-muted:       #000000;
    --tc-text-on-accent:   #000000;
    --tc-text-on-header:   #000000;
  }
}

/* ── MOVIMENTO REDUZIDO (§2.9) ───────────────────────────────────────────────
   Durações a 1ms em vez de `transition: none`: o estado final continua sendo
   aplicado por transição, então nenhum componente que dependa de transitionend
   trava. O feedback vira mudança de estado, sem deslocamento. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tc-dur-instant: 1ms;
    --tc-dur-fast:    1ms;
    --tc-dur-base:    1ms;
    --tc-dur-slow:    1ms;
  }
}