/* Guia visual do TomZap — Fase A (21/10/2026). Carregado por último no index.html.
   Antes: 310 cores, 59 sombras, 12 raios e 20 tamanhos de letra diferentes, e a fonte Inter pedida mas nunca carregada
   (cada computador mostrava uma fonte). Aqui ficam o padrão para todo código novo (--tz-*) e o tema claro antigo
   (--blue, --ink, --muted...) apontando para ele. Referência visual: docs/guia-visual.html.

   Regras para telas novas:
   - Cores: só pelos tokens abaixo (nada de #hex solto). Azul (--tz-primary) é para a ação principal e o que está ativo.
   - Letra: 12, 13, 14, 16, 20 ou 24 px; pesos 400 (texto), 500 (rótulo) e 600 (título, destaque). Nada abaixo de 12 px.
   - Cantos: 8 px (campos, botões, selos quadrados), 12 px (cartões, janelas) ou pílula. Sombra só no que fica por cima.
   - Espaço: múltiplos de 4 (4, 8, 12, 16, 24, 32). */

/* Inter (licença OFL, assets/fonts/LICENSE-Inter.txt). Os pesos 600 a 900 usam o seminegrito: o sistema tinha
   negrito 800 em centenas de regras; assim nada fica pesado, sem mexer regra por regra. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 450; font-display: swap; src: url('/assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 451 550; font-display: swap; src: url('/assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 551 1000; font-display: swap; src: url('/assets/fonts/inter-600.woff2') format('woff2'); }

:root {
  /* marca */
  --tz-primary: #0b6bff;
  --tz-primary-hover: #0058e6;
  --tz-primary-soft: #e8f1ff;
  --tz-primary-ink: #0049b8;
  /* neutros (do fundo ao texto) */
  --tz-n0: #ffffff;
  --tz-n25: #fbfcfd;
  --tz-n50: #f6f8fa;
  --tz-n100: #eef1f5;
  --tz-n200: #e2e7ee;
  --tz-n300: #cdd5df;
  --tz-n400: #9aa6b5;
  --tz-n500: #6b7789;
  --tz-n600: #535e70;
  --tz-n700: #3a4454;
  --tz-n800: #262e3b;
  --tz-n900: #161c27;
  /* situação: cor forte (texto, ícone) e fundo suave */
  --tz-success: #15803d;  --tz-success-soft: #e7f6ec;
  --tz-warning: #b45309;  --tz-warning-soft: #fef3e2;
  --tz-warning-bar: #f5a524; /* amarelo para faixas e pontos (o --tz-warning é para texto) */
  --tz-danger: #dc2626;   --tz-danger-soft: #fdeaea;
  --tz-info: var(--tz-primary); --tz-info-soft: var(--tz-primary-soft);
  /* forma */
  --tz-r-sm: 8px;
  --tz-r-md: 12px;
  --tz-r-pill: 999px;
  /* Contornos por função: superfície, divisória e controle. */
  --tz-outline-container: var(--tz-n300);
  --tz-outline-divider: var(--tz-n200);
  --tz-outline-control: var(--tz-n300);
  --tz-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --tz-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);
  /* espaço */
  --tz-s1: 4px; --tz-s2: 8px; --tz-s3: 12px; --tz-s4: 16px; --tz-s5: 24px; --tz-s6: 32px;
  /* letra */
  --tz-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tz-t-xs: 12px; --tz-t-sm: 13px; --tz-t-md: 14px; --tz-t-lg: 16px; --tz-t-xl: 20px; --tz-t-2xl: 24px;
}

/* Tema claro (padrão) com a paleta nova: fundo neutro em vez de azulado, texto e cinza com contraste de leitura,
   linhas mais suaves e sombra discreta (os cartões pareciam flutuar). Grafite e Coral continuam como estavam. */
body[data-theme="ocean"], body:not([data-theme]) {
  --bg: var(--tz-n50);
  --surface: var(--tz-n0);
  --panel: var(--tz-n50);
  --line: var(--tz-outline-control);
  --ink: var(--tz-n900);
  --muted: var(--tz-n600);
  --blue: var(--tz-primary);
  --blue2: var(--tz-primary-soft);
  --green: var(--tz-success);
  --green2: var(--tz-success-soft);
  --amber: var(--tz-warning);
  --amber2: var(--tz-warning-soft);
  --shadow: var(--tz-shadow-sm);
}

/* As telas antigas ainda usam --blue/--green/--amber. Mantém essas cores ligadas
   ao mesmo significado dos tokens novos nos temas Coral e Grafite. */
body[data-theme="coral"], body[data-theme="graphite"] {
  --line: var(--tz-outline-control);
  --blue: var(--tz-primary);
  --blue2: var(--tz-primary-soft);
  --green: var(--tz-success);
  --green2: var(--tz-success-soft);
  --amber: var(--tz-warning);
  --amber2: var(--tz-warning-soft);
}

/* Neutros de contorno próprios do Grafite para manter separação sem brilho excessivo. */
body[data-theme="graphite"] {
  --tz-outline-container: #435069;
  --tz-outline-divider: #384357;
  --tz-outline-control: #435069;
}

body {
  font-family: var(--tz-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }

/* Campos de seleção iguais em todas as telas (23/10/2026): a seta do sistema operacional mudava de computador para
   computador e destoava dos campos redondos. A seta é imagem de fundo; !important porque as regras antigas usam o
   atalho "background", que apagaria a imagem. Lista com várias opções à vista (multiple/size) fica como está. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7789' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 10px 6px !important;
  cursor: pointer;
}
select:not([multiple]):not([size]):disabled { cursor: default; opacity: .6; }
body[data-theme="graphite"] select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b1bdcf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}