/* =========================
   TOKENS (Apple-like) — v2026-04-12
   =========================

   VOCABULARIO COMPARTILHADO. Extraido do spa.css na Task 1 do P3
   (2026-08-30) para que as paginas publicas possam falar a mesma lingua do
   app sem carregar as 345 KB do spa.css — elas usam uma fracao das regras, e
   o custo em landing nao se paga.

   ORDEM IMPORTA, e nao por estilo: quem consome este arquivo tem de carrega-lo
   ANTES da folha que usa os tokens. No app isso e feito por `boot-head.js`,
   que injeta os dois <link> na ordem tokens.css -> spa.css. Nas paginas
   publicas, o <link> vem antes do <style> inline, de modo que o override da
   pagina (mesma especificidade) vence por ordem de cascata.

   NAO usar @import daqui: @import e cascata serial e adiciona um round-trip
   ao caminho critico.

   NOME NAO E IDENTIDADE. `--type-sm` aqui e 14px; em privacidade.html e
   teleconsulta.html o mesmo nome vale 13px, por override deliberado e
   comentado naqueles arquivos. Trocar token por nome, com busca-e-troca
   global, muda pixel em pagina servida.
*/
/* =========================
   FONTES PROPRIAS (P4/B5, 2026-08-30)
   =========================

   SELF-HOST OBRIGATORIO. A CSP e `font-src 'self' data:`: fonte vinda de
   fonts.gstatic.com seria bloqueada, sem erro visivel alem do fallback.

   OS TRES `-override` SAO O CORACAO DESTA TASK, NAO ENFEITE. Quase todo o
   spa.css roda com `line-height: normal` (o `body` nao declara nenhum), e
   `normal` deriva das metricas verticais da FONTE. Sem override, o Inter
   engorda a linha em ate +7,1% — as 86 views perderiam densidade de uma vez,
   sem erro em lugar nenhum. Com `ascent 95% / descent 24%`, a altura
   de linha bate a do SF Pro nos 11 degraus da escala com erro ZERO, e o
   texto cai no mesmo lugar dentro da linha (medido em 13/14/17/22px).
   Mexer nesses numeros muda a densidade do app inteiro.

   NOME DE ARQUIVO E CONTRATO DE CACHE: `_headers` serve /fonts/* como
   `immutable`. Fonte atualizada entra com NOME NOVO — sobrescrever o arquivo
   deixa o browser servindo a versao velha por ate um ano.

   UMA FAMILIA SO, de proposito (decidido em 2026-08-30, depois de a serif de
   marca entrar e sair no mesmo dia): --font-body e --font-display apontam para
   o Inter. Eles NAO sao mais fontes diferentes como eram com o SF Pro, onde
   Text e Display sao desenhos distintos — o arquivo do Google traz so o eixo
   `wght`, sem `opsz`, entao nao ha variante optica para titulo (medido:
   `font-variation-settings: 'opsz' 14` e `'opsz' 32` rendem largura
   identica). O token --font-display continua existindo porque pagina publica
   o sobrescreve com serif propria (suporte.html) e porque e o ponto de troca
   se um dia entrar fonte de titulo — nao porque hoje ele faca algo.

   Inter: SIL Open Font License 1.1 (subset latin, U+0000-00FF cobre pt-BR).
*/
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root{
  /* Base */
  --bg-main: #ffffff;
  --bg-subtle: #f5f5f7;
  --bg-hover: #f4f4f6;
  --bg-soft: var(--bg-main);

  --border-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --border-muted: color-mix(in srgb, var(--accent) 8%, transparent);
  /* Linha de grade de dados (calendario, tabela): neutra, horizontal mais fraca
     que a vertical. Mistura com transparent, entao sobre um fundo tingido a linha
     sai um tom acima sozinha. Grade nao usa --border-* (accent e marca/acao). */
  --grid-line-h: color-mix(in srgb, var(--text-main) 4.5%, transparent);
  --grid-line-v: color-mix(in srgb, var(--text-main) 9%, transparent);
  /* Coluna de fim de semana: a canvas (agenda-canvas/gen.mjs) sempre a marcou
     com DUAS coisas — fundo proprio e esta vertical mais forte. O app so tinha
     implementado o fundo, que colidia com o de disponibilidade; agora a borda e
     o unico sinal na grade. */
  --grid-line-v-strong: color-mix(in srgb, var(--text-main) 11%, transparent);

  --text-main: #2d2d35;
  --text-muted: #6e6e73;
  --text-faint: #8e8e93;

  /* Tipografia */
  /* A stack do SF Pro fica de fallback: e ela que aparece durante o `swap` e
     em quem nao carregar o woff2. Os -override existem justamente para que
     essa troca nao mova um pixel. */
  --font-body: 'Inter', -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Mesmo Inter do corpo — ver "UMA FAMILIA SO" acima. O fallback mantem o
     "SF Pro Display" porque, se o woff2 nao carregar, a distincao Text/Display
     do sistema ainda vale em titulo. */
  --font-display: 'Inter', -apple-system, "SF Pro Display", BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Escala tipografica: 13 degraus, 9 canonicos e 4 DESENCORAJADOS (Task A11).
     Era 14/8/6 ate 2026-08-30, quando --type-3xl saiu do :root e --type-2xl
     virou canonico — ver a nota do par 21/22 mais abaixo.
     Desencorajado nao e deprecado: os usos existentes ficam, e o valor nao
     muda. E orientacao para codigo NOVO, e `check-tokens.sh` conta os usos de
     cada um contra um baseline — adicionar um a mais faz o guard reportar.
     Medido em 2026-08-30 no escopo que consome este :root (spa.css, views/,
     utils/, db/): os 6 degraus de corpo de texto (2xs..lg) sao 96,5% de 1.013
     usos, e os 4 desencorajados que restaram somam 6. */
  --type-5xs: 8px;      /* DESENCORAJADO (0 usos desde 2026-09-03) -> --type-3xs (10px) */
  --type-4xs: 9px;      /* DESENCORAJADO (1 uso) -> --type-3xs (10px) */
  --type-3xs: 10px;     /* piso legivel: badge, label de grafico, rodape */
  --type-2xs: 12px;
  --type-xs: 13px;
  --type-sm: 14px;      /* o mais usado do sistema (385) */
  --type-md: 15px;
  --type-base: 16px;
  --type-lg: 17px;
  --type-lg-plus: 18px; /* DESENCORAJADO (4 usos) -> --type-lg (17px) */
  --type-xl: 19px;
  /* RESOLVIDO em 2026-08-30: 21px e 22px eram o mesmo tier separados por 1px, e
     o 21 ganhou. --type-2xl e o degrau CANONICO de titulo e saiu dos
     desencorajados; --type-3xl NAO EXISTE MAIS neste :root.
     A medicao encolheu a pergunta antes de responde-la: dos 8 usos, so 5 eram
     titulo. Dois eram glifo (`✓` do empty state, `×` do botao Memed), onde
     font-size dimensiona simbolo e nao define hierarquia; e um era CSS morto
     (.fin-kpi-*, que nenhum markup gerava — a Home usa .home-fin-kpi-*), que
     saiu por delecao. Ficou decidido pelo lado que NAO move o titulo mais
     visto do app: .view-header nao mudou, e modal e login desceram 1px, o que
     de quebra corrigiu a inversao de o titulo de modal (22/800) ser maior que
     o titulo de view (21/700).
     ATENCAO: chamar --type-3xl por `var()` aqui resolve VAZIO e o `font-size`
     inteiro e descartado — o texto herda o tamanho do pai, sem erro no
     console. `check-tokens.sh` falha por si nesse uso, e ele casa TEXTO: ate
     um comentario que escreva a chamada literal e acusado (este aqui foi, e
     por isso esta escrito assim). teleconsulta.html e sw.js declaram um
     --type-3xl PROPRIO (32px) e nao dependem deste. */
  --type-2xl: 21px;     /* titulo: view, modal, login, checkout */
  --type-4xl: 28px;     /* DESENCORAJADO (1 uso) -> sem par na escala; decorativo */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --line-single: 1;
  --line-tight: 1.2;
  --line-title: 1.15;
  --line-cozy: 1.3;
  --line-snug: 1.35;
  --line-compact: 1.45;
  --line-display: 1.08;
  --line-comfy: 1.5;
  --line-balanced: 1.55;
  --line-relaxed: 1.65;
  --line-airy: 1.7;
  --line-field-sm: 22px;
  --line-field-md: 24px;
  --line-field-xl: 32px;
  --line-field-2xl: 36px;
  --line-field-4xl: 44px;
  --line-loose: 1.8;
  --track-ui: 0.06px;
  --track-wide: 0.3px;
  --track-caps: 0.5px;
  --track-uppercase: 0.08em;
  --track-tight-px: -0.08px;
  --track-tighter-px: -0.2px;
  --track-caps-em: 0.04em;
  --track-tight: -0.01em;
  /* Degrau intermediario: tracking e size-specific — texto grande lido com o
     mesmo espacamento do corpo parece solto. O salto -0.01em -> -0.03em era
     abrupto demais para os titulos de 21-22px, que ficavam sem nenhum. */
  --track-tight-lg: -0.02em;
  --track-display: -0.03em;

  /* Accent (lilás) */
  --accent: #6d5e97;
  /* Tinta escura do accent (rotulo de secao aceso e chip de tipo no editor do
     Atendimento, 2026-09-07). Nome herdado do Claude Design; o RAE nao tinha
     "accent escuro" — o hover do primario e por filter. Texto sobre branco:
     7,83:1. Nao usar como fundo. */
  --accent-ink: #574a7d;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-hover: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-muted: color-mix(in srgb, var(--accent) 35%, white);
  --accent-line-soft: color-mix(in srgb, var(--accent) 18%, white);
  --surface-sidebar: color-mix(in srgb, var(--accent) 14%, white);

  /* Status semântico */
  --color-success: #2e7d32;
  --color-error: #c62828;
  --color-warning: #e65100;

  /* Status da Agenda */
  --status-agendado:   #8b7fb5;
  --status-confirmado: #3d9e94;
  --status-atendido:   #2b7da8;
  --status-falta:      #993333;
  --status-cancelado:  #993366;
  --status-evento:     #a0527a;

  /* Radius — nome = valor, como a escala de espacamento. O 6 e o 12 nao
     existiam como token e apareciam 26 e 52 vezes hardcodados: eram buraco
     na escala, nao drift. Raio fora dela e drift: aproxime do degrau
     vizinho. */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-20: 20px;
  --radius-pill: 999px;
  /* Espacamento — nome = valor, grade de 2px. Regra de formacao: passo 2
     abaixo de 20, passo 4 de 20 a 32. Os 12 primeiros degraus cobriam 90,9%
     dos usos reais (medido 2026-08-29); o 28 entrou por ser o unico buraco
     da faixa alta — 16 usos, mais que o proprio 32, e pareado com 24 e 32
     na mesma declaracao. O 22 (12 usos) fica de fora de proposito: seria o
     unico passo 2 acima de 20, e e isso que transforma escala em regua.
     Valor fora da escala e ajuste
     otico deliberado, nao drift: documentar no proprio call site. */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  /* Controles e overlays: contratos compartilhados, extraídos do padrão atual.
     Hit target é a área clicável, independente do tamanho visual do botão.
     Compacto: formulário curto/popover; wide: compositor de texto. */
  --control-hit-size: 44px;
  --overlay-width-compact: 420px;
  --overlay-width-wide: 640px;
  --text-on-accent: #fff;
  --opacity-disabled: 0.45;
  --action-hover-filter: brightness(0.95);
  --border-width: 1px;
  /* Tamanhos semânticos dos ícones do onboarding e mockups. */
  --icon-inline: 16px;
  --icon-action: 18px;
  --icon-header: 20px;
  --focus-ring-color: var(--accent);
  --focus-ring-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 60px;
  --sidebar-mobile-height: 56px;  /* altura da bottom bar no mobile (sem safe-area) */

  /* Escala de z-index — camadas nomeadas (D1, auditoria 2026-06-12).
     Ordem relativa preservada do estado anterior (que funcionava); só nomeada.
     Regra: nunca hardcodar z-index numérico — usar um destes tokens.
     Empilhamento puramente LOCAL dentro de um card/grid (0,1,2,-1) fica como
     número cru de propósito (ex.: grade da agenda com z decrescente por row) —
     não é "camada de UI".
     - sticky: header sticky de conteúdo, menu drop ancorado
     - dropdown: combos e popovers ancorados a um campo na view
     - panel/popover: painel lateral e popovers de view (detalhe financeiro)
     - overlay: camada flutuante alta da view (menu de IA, barra de gravação, login)
     - modal: overlay de modal/chat/Memed/IA (o "fundo" modal)
     - above-modal: popover/dropdown que abre DE DENTRO de um modal (precisa vencer o modal) */
  --z-sticky: 10;
  --z-dropdown: 30;
  --z-sidebar: 100;
  --z-panel: 200;
  --z-popover: 500;
  --z-overlay: 9000;
  --z-overlay-high: 9990;
  --z-overlay-top: 9999;
  --z-modal: 10000;
  --z-above-modal: 10001;
  --z-above-modal-top: 10002;

  /* Elevação — drop shadows neutras (D2, auditoria 2026-06-12). Escala
     conservadora: valores idênticos aos clusters que já se repetiam no CSS, só
     nomeados. Sombras com highlight interno (inset rgba(255,255,255,...) do
     Liquid Glass), focus rings, glows de --accent e sombras direcionais NÃO são
     cobertas aqui — são intencionais e ficam inline (ver CLAUDE.md > UI). */
  /* Vocabulario de superficie. Os quatro abaixo nomeiam padroes que ja estavam
     repetidos literalmente pelo arquivo — o valor nao mudou, ganhou nome.
     Liquid Glass (rest/hover) e o par usado por .btn/.btn-icon/.btn-action;
     os rgba(0,0,0,x) neles sao intencionais (ver CLAUDE.md > UI). */
  --focus-halo: 0 0 0 3px var(--accent-soft);
  --glass-rest: 0 0.5px 1.5px rgba(0,0,0,0.06), inset 0 0.5px 0 rgba(255,255,255,0.5);
  --glass-hover: 0 1px 3px rgba(0,0,0,0.08), inset 0 0.5px 0 rgba(255,255,255,0.6);

  /* Elevacao (P4/B1, 2026-08-30). Nomeados pela CAMADA, nao pelo tamanho: os
     antigos --shadow-sm/md/lg/xl tinham os valores certos e mesmo assim ficaram
     em 18 usos enquanto 53 sombras eram escritas a mao ao lado deles. O nome era
     o problema — `sm/md/lg/xl` nao diz ONDE usar. Os VALORES sao os mesmos:
     raised=sm, hover=md, overlay=lg, modal=xl, inset=field-inset.

     A escala descreve o que o arquivo ja fazia: as 53 sombras de profundidade
     medidas em 2026-08-30 caem em quatro faixas de blur (1-4, 8-12, 16-24, 32+),
     e cada token abaixo e o centro da faixa dele.

     PROFUNDIDADE E MATERIAL SAO COISAS SEPARADAS. --glass-sheen e a linha clara
     que faz a borda superior brilhar; ela COMPOE com um --elev-*, nao substitui:
     `box-shadow: var(--elev-hover), var(--glass-sheen)`. Foi assim que a .subtab
     e o .chat-frame mantiveram o vidro ao entrar na escala — trocar a sombra
     deles por um --elev-* puro apagaria o material (medido no canvas do B1).

     NAO sao elevacao e ficam FORA deste vocabulario: anel (`0 0 0 Npx`, blur
     zero — e borda/foco, tem --focus-halo) e sombra colorida em --accent (é
     ESTADO: arrastando, ativo). Sao 36 das 93 sombras escritas a mao. Colocar
     as duas coisas no mesmo token e como os 6 dialetos do P3 nasceram. */
  --elev-raised: 0 1px 3px rgba(0,0,0,0.08);
  --elev-hover: 0 2px 8px rgba(0,0,0,0.08), 0 0.5px 2px rgba(0,0,0,0.05);
  --elev-overlay: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
  --elev-modal: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --elev-inset: inset 0 1px 3px rgba(0,0,0,0.07), inset 0 0.5px 1px rgba(0,0,0,0.04);
  --glass-sheen: inset 0 0.5px 0 rgba(255,255,255,0.6);

  /* Motion (D5, auditoria 2026-06-12). Durações canônicas iguais às mais usadas
     (0.12s micro-feedback, 0.15s padrão); --curve-decel é a curva-assinatura dos
     modais/popovers. --motion-spin unifica os 4 ritmos de spinner que divergiam. */
  --motion-fast: 0.12s;
  --motion-normal: 0.15s;
  --motion-slow: 0.25s;
  --motion-spin: 0.9s;
  --curve-decel: cubic-bezier(0.32, 0.72, 0, 1);
}