/* ═══════════════════════════════════════════════════════════════════
   W18k Office — tokens

   Fonte: W18k_Office_Layout_Padrao.md (§7, layout padrao do sistema
   do Henrique, referencia viva v5-sales-flow.html · 03/08/2026).
   Valores canonicos. Copiar, nunca recriar por aproximacao.
   Nenhum modulo redefine token. Faltou token? Entra aqui e vale para todos.
   ══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light only;
  /* estrutura */
  --navy:        #102870;   /* estrutura e acoes — NUNCA cor de fonte */
  --navy-deep:   #0B1B4C;   /* hover de navy */
  /* azul um pouco mais claro para a acao secundaria ao lado do navy
     (Paulo 14/08/2026). Continua SO como fundo de botao. */
  --navy-2:      #2A4A9E;
  --blue-miami:  #1E3D6E;
  --ink:         #17181A;
  --ink-2:       #5F615E;
  --ink-3:       #8B8D89;
  --ink-soft:    var(--ink-2);   /* legado — usar --ink-2 nos novos */
  --line:        #E8E8E5;
  --line-soft:   #F2F2EF;
  --surface:     #FFFFFF;
  --surface-alt: #FAFAFA;
  /* fundo da pagina — dourado claro (Paulo 15/08/2026). Valor lido da
     referencia dele w18ktotallayout.pages.dev. Vale no sistema inteiro:
     Office (staff) e store (cliente). Painel continua BRANCO: e a diferenca
     entre o plano de fundo e o painel que da o relevo, junto da borda e da
     sombra. Substitui o fundo branco do item 7 das regras. */
  --page:        #FAF6EC;

  /* ouro */
  --gold:        #D3BA8A;   /* ouro da casa — um só (Paulo 137) */
  --gold-light:  #D3BA8A;   /* dourado leve com fonte branca */
  --gold-action: #D3BA8A;        /* botao primario — o mesmo ouro */
  --gold-soft:   #F5EFDD;   /* fundo de estado ativo */
  --gold-faint:  #FBF8F1;   /* dourado quase branco — campo de preenchimento */
  --gold-mist:   #F9F5EA;
  /* BARRA DE BUSCA VOLTOU A SER BRANCA (Paulo 15/08/2026): com a pagina em
     dourado claro (--page), o dourado quase branco da busca sumia no fundo.
     Quem diferencia a barra agora e o branco + a borda dourada. Trocar aqui
     troca em todo modulo — .search-bar e os espelhos (.pr-search, .sa-search,
     .fi-search, .in-search...) apontam para este token. Campo de FORMULARIO
     continua em --gold-faint (regra 15). */
  --search-bg:   #FFFFFF;
  --gold-deep:   #8A7444;   /* texto sobre gold-soft */
  --chrome:      #D3BA8A;   /* topo (bar) — ouro da casa */

  /* semantica */
  --green:       #006039;   /* dinheiro confirmado (Rolex green) */
  --green-soft:  #EAF2EC;   /* fundo de tag positiva */
  /* escala do verde para a fileira de acoes do relatorio (Paulo
     14/08/2026): a acao principal e a mais escura e vai clareando. */
  --green-2:     #1A7A52;
  --green-3:     #3E9A72;
  --red:         #C0492B;   /* SO texto de erro */
  --red-light:   #D0664D;   /* vermelho claro com fonte branca (botao Edit, Paulo 08/2026) */
  --red-soft:    #FAEEEB;   /* fundo de alerta critico */
  --amber:       #8A6412;   /* atencao */
  --amber-soft:  #FCF3DC;   /* fundo de aviso */

  /* acao por modulo (Paulo 14/08/2026) — SO fundo de botao, fonte branca:
     roxo no Finances, laranja no Services. */
  --purple:      #4A2A7A;   /* New Checkout — o mais escuro */
  --purple-2:    #7A55B5;   /* escala do item 54 */
  --purple-3:    #9878CC;
  --orange:      #B4541E;   /* acao do Services */
  --orange-2:    #D9762F;   /* acao secundaria do Services */

  /* reservado */
  --cream:       #FBF6E9;   /* EXCLUSIVO de campo de scan EPC */

  /* layout */
  /* ALTURA UNICA DO CONTROLE DE ACAO (Paulo 30/08/2026): "todos os botoes
     de acao do sistema devem ter a mesma altura e a largura de acordo com
     as instrucoes contidas nele" + "faca os botoes mais finos um pouco".
     40px e a medida dos sistemas de referencia (Material 40, Bootstrap 38,
     Ant/GitHub/Linear 32-36); 46 ficava pesado. A BARRA DE BUSCA usa o
     mesmo token, entao o botao ao lado dela alinha sozinho. A LARGURA
     nunca e fixada — cresce com o rotulo. Micro-controle (lupa, x de
     remover linha) fica fora: nao e botao de acao. */
  --ctl-h:       32px;
  --container:   1560px;
  --radius:      10px;
  --radius-panel: 16px;     /* paineis de conteudo (§2 do padrao) */
  --radius-pill: 999px;

  /* ═══ TIPOGRAFIA (Paulo 07/09/2026 — "SF Pro com numeros tabulares
     em todo o sistema, a partir de agora"; repasse w18k-typography.css
     + w18k-typography-rules.md em docs/w18k-apple-fonts/).
     Tres familias, oito niveis, um tamanho por nivel. Modulo NUNCA
     escreve px de fonte: aponta para estes tokens. Fonte da Apple nao
     entra no repositorio (licenca) — no Mac/iPhone a SF e nativa; no
     Windows/Android cai na Inter (carregada no index) e depois na
     system-ui. */
  --font-text:    -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-display: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  /* NUMERO = A MESMA FONTE DO TEXTO (Paulo 08/09/2026: "que tenha os
     numeros a mesma fonte, a da Apple que escolhemos" + "aumente as
     fontes dos numeros em todo o sistema para ficarem mais
     legiveis"). SF Mono saiu da tela: a 13px ele le menor que o SF
     Pro Text da mesma medida, e era isso que apagava o numero ao
     lado da palavra. O alinhamento de coluna NAO se perde — quem o
     faz e o tabular-nums, que continua no body e no .mono.
     O nome --font-mono fica para os ~100 apontamentos dos modulos
     nao precisarem mudar; --font-num e o nome honesto. */
  --font-num:     var(--font-text);
  --font-mono:    var(--font-num);
  --font:         var(--font-text);   /* legado — usar --font-text nos novos */

  /* escala: um tamanho por nivel, em todo o app; nada intermediario */
  /* RESPIRO ENTRE CAIXAS — um so no sistema (Paulo 08/09/2026: "deixa
     pelo menos o espaco normal entre as caixas, faz disso uma regra").
     E o mesmo 18px que o .form-card ja usava de margin-bottom; agora
     tem nome, e toda grade de caixas aponta para ele — no vao
     horizontal e no vertical. */
  --card-gap:   18px;
  /* e o vao entre LADRILHOS de dentro de um cartao — outra escala,
     tambem com um valor so (a varredura de 08/09 achou 10 num lugar
     e 12 no outro) */
  --tile-gap:   10px;

  --t1-size:    26px;   /* T1 titulo de MODULO (Dashboard, Products...) · Display 600 */
  --t2-size:    20px;   /* T2 titulo de PAGINA INTERNA (detalhe, New/Edit)  · Display 600 */
  /* T3 = 15px desde 07/09/2026 (Paulo: "os subtitulos ficaram muito
     pequenos... o tamanho igual para todos, para que fique mais
     visivel"). Estava em 13 — o MESMO corpo do texto —, entao o
     titulo de caixa nao tinha degrau nenhum e so o peso 600 o
     separava. Regra 9.8 do livro. */
  --t3-size:    15px;   /* T3 titulo de caixa ou secao                       · Text 600 */
  --t4-size:    10px;   /* T4 rotulo em CAIXA ALTA (th, KPI, ficha) · Text 600 · +.08em */
  --value-size: 22px;   /* V  valor em destaque (KPI, preco, total)  · Display 600 · -.01em */
  --body-size:  13px;   /* B  corpo (texto, tabela, campo, botao)    · Text 400/600 */
  --sub-size:   12px;   /* S  sublinha (breadcrumb, data, meta)      · Text 400 */
  /* C — CODIGO (SKU, pedido, certificado). Era 11px em SF Mono: o
     MENOR texto do sistema, e o Paulo ja tinha reclamado duas vezes
     ("o SKU e as fontes em products muito pequeno"). Com a familia
     unica de 08/09 nao ha mais motivo para o degrau — o codigo mede
     o corpo da lista, como manda a lei da fonte unica. */
  --code-size:  13px;   /* C  codigo (SKU, pedido, certificado)      · Text 400 */
  /* D — NUMERO DE DIA da folha de calendario (Paulo 07/09/2026: "o
     calendar leaf era melhor"; o pedido original de 16/08 era "o dia
     de hoje GRANDE como um app"). Nivel DECLARADO da escala, nao um
     px solto: existe UM lugar no sistema com numero de display, e e
     este. Display 600, tracking apertado. */
  --day-size:   64px;
  --label-tracking: 0.08em;
  --display-tracking: -0.01em;

  /* bloco do titulo — igual em toda pagina, o titulo nao se move */
  --title-block-height: 32px;   /* linha do titulo (line-height 32) */
  --sub-block-height:   18px;   /* sublinha, sempre ABAIXO do titulo */
  --title-offset-x:     24px;   /* da borda do conteudo */
  --title-offset-y:     20px;   /* abaixo da barra superior */
}

/* Azul nunca e cor de fonte. --navy so aparece em background de botao.
   Excecao documentada: card do ouro inverte vermelho/verde como superficie
   (sobe = vermelho, cai = verde). Nao reaproveitar essa inversao no Amagold. */