/* ---------------------------------------------------------------------------
   Ascom Suite — tokens do sistema. FONTE DA VERDADE de cor, forma, elevação e
   movimento. Mudar a marca = mudar aqui, num lugar só.

   Disciplina e paleta clara herdadas do tokens.css da SUSi (que se declara fonte
   da verdade pelo mesmo motivo). A mecânica de personalização e o conjunto
   escuro vêm do Lupagram.

   ATENCAO: CLARO É O PADRÃO — decisão do dono em 04/08/2026, incluindo a tela de login.
   O escuro existe como TEMA ALTERNATIVO (`data-tema="escuro"`), não como base.
   Ver DESIGN-SYSTEM.md §1.1.

   REGRA: hexadecimal só aparece NESTE arquivo. Em qualquer outro, cor é var(--…).
   É isso que faz a personalização por pessoa funcionar sem caçar valor solto.
--------------------------------------------------------------------------- */

/* Inter, auto-hospedada. NÃO vem do Google Fonts: a tela de login não aceita
   terceiro no caminho (ARQUITETURA.md §6.6), e sem SRI não há como conferir o
   que chega. A SUSi usa Roboto do CDN porque é site público de leitura —
   critério diferente. Roboto não existe local no workspace; a Inter já existe,
   licenciada, no Pyxtemis (fonts/LICENCAS.md), e um arquivo variável de 48 KB
   cobre todos os pesos. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fontes/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Superfícies claras — escala Material 3 da SUSi --- */
  --fundo: #fdfcff; /* md-surface */
  --fundo-2: #f6f8fc; /* md-surface-container-low */
  --painel: #ffffff;
  --painel-2: #f0f4f9; /* md-surface-container */
  --painel-3: #e9eef6; /* md-surface-container-high — campos */
  --texto: #1b1b1f; /* md-on-surface */
  --texto-suave: #44474e; /* md-on-surface-variant */
  --apagado: #74777f; /* md-outline */
  --linha: #c4c6d0; /* md-outline-variant */

  /* --- Cor de destaque: trocável pela pessoa. Tiffany é a cor institucional,
         estabelecida pela SUSi. No claro vale o tom LEGÍVEL (#0a807b), não o
         vivo (#0abab5) — o vivo é da marca, e como texto não se lê. --- */
  --destaque-rgb: 10, 128, 123;
  --destaque: rgb(var(--destaque-rgb));
  --destaque-vivo: #0abab5; /* só para o fundo e a marca, nunca para texto */

  /* --- O QUE SE ESCREVE EM CIMA DO DESTAQUE E DO PERIGO (F3.5) --------------
     Existe porque o `hub.css` tinha oito `#fff` fixos, contra a regra três
     linhas acima — e não era purismo: eram os oito lugares em que o FUNDO
     acompanha o tema e a COR DO TEXTO não.

     ATENCAO: no tema escuro isso não era "contraste baixo", era branco sobre
     quase branco. Medido (WCAG 2.1, texto normal exige 4,5:1):

       .botao, escuro + verde     branco sobre #9af3cd    1,31:1
       .conta-pedidos, escuro     branco sobre #ffd8dc    1,30:1
       .botao, escuro + azul      branco sobre #6eb4ff    2,18:1
       .botao, escuro + tiffany   branco sobre #0abab5    2,41:1

     No tema CLARO todos passavam, entre 4,8 e 6,3:1 — e é por isso que ninguém
     viu: o claro é o padrão, e o defeito mora inteiro no tema alternativo.

     Com o tom escuro do bloco abaixo, os quatro destaques passam entre 7,6:1 e
     14,5:1. O RGB vem junto porque a barra de edição precisa dele para as
     bordas e os fundos translúcidos que ficam sobre a mesma cor. */
  --sobre-destaque-rgb: 255, 255, 255;
  --sobre-destaque: rgb(var(--sobre-destaque-rgb));
  --sobre-perigo: #ffffff;

  /* --- Semânticos --- */
  --ok: #0f6b48; --ok-fundo: rgba(20, 150, 105, .13);
  --info: #155a9e; --info-fundo: rgba(40, 130, 220, .12);
  --aviso: #7a5600; --aviso-fundo: rgba(230, 160, 20, .17);
  --perigo: #a01722; --perigo-fundo: rgba(220, 60, 72, .12);

  /* Trilha FM — as cores das FASES de uma checklist (antes, durante, depois,
     fechamento). Não são cores de situação (§12): dizem "em que momento", nunca
     "está bem" ou "está mal". O -rgb serve às tintas de fundo. Contraste de texto
     sobre --painel medido na fm.navegador (>= 4,5:1). */
  --fase-antes: #1d4ed8; --fase-antes-rgb: 29, 78, 216;
  --fase-durante: #b4410b; --fase-durante-rgb: 180, 65, 11;
  --fase-depois: #6d28d9; --fase-depois-rgb: 109, 40, 217;
  --fase-fechamento: #0f766e; --fase-fechamento-rgb: 15, 118, 110;
  --neutro-fundo: rgba(0, 0, 0, .05);
  --neutro-texto: #33474d;

  /* --- Forma — escala da SUSi --- */
  --raio-xs: 4px;
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 28px;
  --raio-total: 999px;

  /* --- Elevação — da SUSi --- */
  --elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .06);
  --elev-2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .08);
  --elev-3: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .10);
  --sombra-painel: 0 18px 50px rgba(20, 45, 50, .12);

  /* --- Movimento -----------------------------------------------------------
     Eram "uma curva, uma duração" (DESIGN-SYSTEM §1). Passaram a ser três e
     duas em 04/08/2026, quando o painel ganhou ARRASTAR e TAMBOR — e a razão
     não é gosto: transição de estado (uma cor, uma sombra) e DESLOCAMENTO DE
     OBJETO NO ESPAÇO são movimentos diferentes. Um cartão atravessando 600px
     em 180ms não é rápido, é teleporte com borrão.

     A disciplina se mantém porque cada token tem UM trabalho declarado, e é
     proibido inventar um sexto valor dentro de um componente. --- */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur: 180ms; /* PADRÃO: estado (cor, sombra, opacidade) */
  --dur-curta: 110ms; /* resposta tátil: pressionar, pegar */
  --dur-media: 240ms; /* objeto atravessando espaço: FLIP e encaixe */

  /* Passa um fio além e volta. É o que o olho lê como "encaixou", em vez de
     "parou". Mais que 1.06 vira brinquedo; menos, não se percebe. */
  --ease-encaixe: cubic-bezier(.2, .9, .25, 1.06);

  /* --- Tambor (F1m) --------------------------------------------------------
     Os itens estão de fato mais longe no eixo Z, e a DIVISÃO DE PERSPECTIVA do
     navegador encolhe o que está longe. O raio do cilindro não é token: sai do
     espaçamento real da pista, para o arco casar com a rolagem sem emenda.

     ATENCAO: A perspectiva sozinha NÃO chega a 3× — medido: com o arco casado à
     rolagem ela satura perto de 1,6×. Por isso `--tambor-razao` é o que MANDA no
     tamanho, e a perspectiva entra como parcela dele. A conta está no hub.js. */
  --tambor-perspectiva: 620px;
  --tambor-passo: 20; /* graus por item. Sem unidade: o calc() põe */
  --tambor-face: .55; /* fração do ângulo que a FACE gira — ver hub.js */

  /* Quantas vezes o do MEIO é maior que o da PONTA, e onde fica a ponta.
     Estes dois são a ESPECIFICAÇÃO do desenho: o que estiver aqui é o que a
     régua mede na tela. Não há segundo realce somando por fora — havia um
     (`--tambor-foco`) e ele saiu justamente porque fazia a razão medida
     divergir da razão escrita. */
  --tambor-razao: 3; /* o do meio é 3× o da ponta */
  --tambor-ponta: 2; /* "a ponta" é o item a dois passos do centro */

  /* Largura de LAYOUT do item; o do meio é o único que fica em 1,0, então este
     é o tamanho dele na tela. O TAMBOR É O ELEMENTO PRINCIPAL DO PAINEL — pedido
     do dono em 04/08/2026 —, e é este número que faz isso valer.

     380px não é chute — é o maior valor MEDIDO em que os cinco itens visíveis
     cabem inteiros numa tela de 1280, depois de descontar as duas setas.

     ATENCAO: a conta de papel erra aqui, e erra para menos. A ponta está girada
     22°, e a perspectiva deixa a CAIXA dela mais larga que o nominal (164px
     medidos, contra 133 de largura/3). Em 400px as pontas nasciam 19px para
     fora da pista dos dois lados. O número acima saiu da régua, não da fórmula. */
  --tambor-largura: 380px;
  --tambor-vao: 14px; /* precisa ser token: o vão entra na conta do meio */
  /* O palco acompanha a faixa (1138) mais as duas setas (78). Sem teto, as setas
     iriam para as bordas da tela, longe do tambor que comandam. */
  --tambor-palco: 76rem;

  --fonte: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --largura-max: 1280px;
}

/* Tema escuro — o conjunto do Lupagram, agora como ALTERNATIVA. */
:root[data-tema="escuro"] {
  --fundo: #061316;
  --fundo-2: #0b2228;
  --painel: #0f2930;
  --painel-2: #102f37;
  --painel-3: #14383f;
  --texto: #f4fbfb;
  --texto-suave: #cde0df;
  --apagado: #9fb5b9;
  --linha: rgba(255, 255, 255, .12);
  --destaque-rgb: 10, 186, 181;
  --ok: #a8ffd8; --ok-fundo: rgba(69, 208, 162, .14);
  --info: #c7eaff; --info-fundo: rgba(85, 184, 255, .13);
  --aviso: #ffe5a2; --aviso-fundo: rgba(244, 200, 75, .15);
  --perigo: #ffd8dc; --perigo-fundo: rgba(255, 90, 103, .18);
  --fase-antes: #9cc3ff; --fase-antes-rgb: 156, 195, 255;
  --fase-durante: #ffb98a; --fase-durante-rgb: 255, 185, 138;
  --fase-depois: #cdb8ff; --fase-depois-rgb: 205, 184, 255;
  --fase-fechamento: #7fe3d6; --fase-fechamento-rgb: 127, 227, 214;
  --neutro-fundo: rgba(255, 255, 255, .08);
  --neutro-texto: #cdd9d7;
  --sombra-painel: 0 24px 80px rgba(0, 0, 0, .38);

  /* No escuro, as cores de destaque e de perigo são CLARAS — foi a escolha certa
     para elas serem legíveis como TEXTO sobre o fundo escuro. A consequência é
     que, quando viram FUNDO, o que se escreve em cima tem de ser escuro. É o
     mesmo tom do `--fundo` deste tema, cravado aqui para não depender de ele
     nunca mudar. */
  --sobre-destaque-rgb: 6, 19, 22;
  --sobre-perigo: #061316;
}

/* Cor de destaque escolhida pela pessoa. Cada uma tem par claro/escuro porque a
   mesma cor não serve aos dois: no claro, o tom vivo vira texto ilegível. */
:root[data-destaque="tiffany"] { --destaque-rgb: 10, 128, 123; }
:root[data-destaque="verde"] { --destaque-rgb: 15, 122, 86; }
:root[data-destaque="rosa"] { --destaque-rgb: 176, 37, 114; }
:root[data-destaque="azul"] { --destaque-rgb: 31, 111, 208; }

:root[data-tema="escuro"][data-destaque="tiffany"] { --destaque-rgb: 10, 186, 181; }
:root[data-tema="escuro"][data-destaque="verde"] { --destaque-rgb: 154, 243, 205; }
:root[data-tema="escuro"][data-destaque="rosa"] { --destaque-rgb: 245, 120, 205; }
:root[data-tema="escuro"][data-destaque="azul"] { --destaque-rgb: 110, 180, 255; }

/* Foco visível é requisito de acessibilidade, não enfeite. Nunca `outline:none`
   sem substituto. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(var(--destaque-rgb), .7);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}