/* ============================================================
   VOUAR · Design System — tokens.css · v1.2
   Portado de ~/Documents/Interface/tokens.css (fonte da verdade dos
   tokens). Componentes deste arquivo só leem estes nomes — nunca hex
   direto. Todos os pares texto/superfície verificados em WCAG AA
   (>= 4.5), nos dois temas.

   Fontes (Google Fonts): Inter · Fraunces · DM Mono
   ============================================================ */

:root{
  /* ESCALA (base 8px) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* RAIO */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;

  /* TIPOGRAFIA (papéis) */
  --f-ui:'Inter', system-ui, sans-serif;       /* interface — hierarquia por peso */
  --f-serif:'Fraunces', Georgia, serif;        /* voz da marca — só display >=28px */
  --f-mono:'DM Mono', ui-monospace, monospace; /* dado */

  /* ESCALA TIPOGRÁFICA (px — base 15) */
  --fs-2xs:10px;   /* micro: th compacto, meta mínima */
  --fs-xs:11px;    /* rótulos, badges, cabeçalhos de tabela */
  --fs-sm:12px;    /* legendas, metadados, notas */
  --fs-md:13px;    /* corpo secundário, alertas, pills */
  --fs-base:14px;  /* botões, tabelas, UI densa */
  --fs-body:15px;  /* corpo principal, inputs */
  --fs-lg:16px;    /* títulos de card */
  --fs-xl:17px;    /* h2, subtítulos de seção */
  --fs-2xl:24px;   /* h1 contextual */
  --fs-3xl:28px;   /* título de página, preços display */
  --fs-4xl:32px;   /* KPI / totais serif */
  --fs-5xl:40px;   /* números de destaque */
  --fs-display:88px; /* termômetro / hero numérico */

  --lh-tight:1.15;
  --lh-snug:1.3;
  --lh-normal:1.55;
  --lh-relaxed:1.65;

  --fw-normal:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;

  --ls-tight:-0.02em;
  --ls-snug:-0.01em;
  --ls-label:0.12em;
  --ls-badge:0.04em;

  /* SCORE MTX — INVARIANTE (cor = significado, não muda por tema) */
  --mtx-mte:#D97706; --mtx-mts:#E05A44; --mtx-mtg:#4B8EF5; --mtx-mtc:#8B5CF6;

  --focus:0 0 0 3px var(--accent-soft);
}

/* ============ CLARO · creme (PADRÃO) ============ */
[data-theme="light"]{
  --bg:#FBF6EC; --surface:#FFFFFF; --surface-2:#F5F6F9; --input:#FFFFFF;

  --text:#0A1B2E;
  --text-2:#5A6B82;
  --text-3:#607288;

  --accent:#1A52A0;
  --accent-strong:#0F3E7E;
  --on-accent:#FFFFFF;
  --accent-soft:rgba(26,82,160,.30);
  --accent-fill:rgba(26,82,160,.05);

  --gold:#A67C12;
  --gold-ink:#8F6B0F;
  --gold-fill:rgba(166,124,18,.10);

  --success:#006B50;
  --danger:#9B2F20;

  --line:#E7DFCC;
  --line-2:#D8CBB2;

  --shadow:0 10px 30px rgba(10,27,46,.10);
}

/* ============ ESCURO · navy (opção) ============ */
[data-theme="dark"]{
  --bg:#0A1B2E; --surface:#16314D; --surface-2:#1B3A57; --input:#0B2135;

  --text:#D6E8FF;
  --text-2:#9DB2CE;
  --text-3:#90A2B9;

  --accent:#6AA1F7;
  --accent-strong:#82B4F9;
  --on-accent:#06182B;
  --accent-soft:rgba(106,161,247,.32);
  --accent-fill:rgba(106,161,247,.10);

  --gold:#C49A2A;
  --gold-ink:#C49A2A;
  --gold-fill:rgba(196,154,42,.12);

  --success:#4CB292;
  --danger:#E88776;

  --line:rgba(106,161,247,.18);
  --line-2:rgba(106,161,247,.30);

  --shadow:0 12px 34px rgba(0,0,0,.42);
}

:root:not([data-theme]){ color-scheme:light; }

/* ============================================================
   Base — elementos "nus" (CIV usa HTML server-rendered, sem framework
   de componentes). Estilo aqui equivale ao que o Pico.css fazia antes,
   mas lendo só os tokens acima.
   ============================================================ */

*{ box-sizing:border-box; }

body{
  background:var(--bg); color:var(--text);
  font-family:var(--f-ui); font-size:var(--fs-body); line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  transition:background .2s,color .2s;
  margin:0;
}

h1{
  font-family:var(--f-ui); font-weight:var(--fw-extrabold); font-size:var(--fs-2xl);
  letter-spacing:var(--ls-snug); line-height:var(--lh-tight); margin:0 0 var(--space-4);
}

/* Rótulo mono maiúsculo — padrão único para eyebrows, labels de KPI,
   cabeçalhos de seção compactos e metadados de card. */
.rotulo,
.eyebrow{
  display:block; font-family:var(--f-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-3);
  margin:0 0 var(--space-2);
}

/* Título de subseção — nunca outro <h1> na mesma página (sem hierarquia
   visual nem semântica correta). Usar dentro de .secao. */
h2{
  font-family:var(--f-ui); font-weight:var(--fw-bold); font-size:var(--fs-xl);
  letter-spacing:var(--ls-snug); line-height:var(--lh-snug); margin:0 0 var(--space-4);
  color:var(--text);
}

h3{
  font-family:var(--f-ui); font-weight:var(--fw-semibold); font-size:var(--fs-base);
  line-height:var(--lh-snug); margin:0 0 var(--space-2); color:var(--text);
}

small, .texto-caption{
  font-size:var(--fs-sm); color:var(--text-3); line-height:var(--lh-normal);
}

.texto-secundario{ font-size:var(--fs-md); color:var(--text-2); }
.texto-mono{ font-family:var(--f-mono); }

p{ margin:0 0 var(--space-3); color:var(--text-2); }
p strong{ color:var(--text); font-weight:600; }

a{ color:var(--accent); }
a:hover{ color:var(--accent-strong); }

label{
  display:block; font-family:var(--f-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-3);
  margin:var(--space-4) 0 var(--space-2);
}
form > label:first-child{ margin-top:0; }

input, select{
  width:100%; font-family:var(--f-ui); font-size:var(--fs-body); color:var(--text);
  background:var(--input); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:10px 13px;
}
input:focus, select:focus{
  outline:none; border-color:var(--accent); box-shadow:var(--focus);
}
select{ cursor:pointer; }

/* Textarea de sugestão editável (chips + campo livre) — tamanho travado,
   não redimensionável pelo usuário, alto o bastante pro placeholder
   completo nunca cortar no meio da frase. */
.textarea-sugestao{
  width:100%; font-family:var(--f-ui); font-size:var(--fs-body); color:var(--text);
  background:var(--input); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:10px 13px; line-height:1.5;
  resize:none; min-height:110px;
}
.textarea-sugestao:focus{
  outline:none; border-color:var(--accent); box-shadow:var(--focus);
}

/* Grupo de checkboxes (campos multiselect) — reseta o label eyebrow
   (DM Mono maiúsculo) que faz sentido pro rótulo do campo, mas não pro
   texto de cada opção selecionável. Cada opção é um cartão clicável
   (não o checkbox nativo do navegador, que destoa do resto do tema) —
   o quadrado é desenhado via appearance:none + ::after, e a linha
   inteira destaca quando marcada. */
.opcoes-multiselect{ display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-2); }
.opcao-checkbox{
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--f-ui); font-size:var(--fs-base); font-weight:var(--fw-normal);
  letter-spacing:normal; text-transform:none; color:var(--text);
  margin:0; cursor:pointer;
  padding:10px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface-2); transition:.15s;
}
.opcao-checkbox:hover{ border-color:var(--accent); }
.opcao-checkbox:has(input:checked){
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.opcao-checkbox input[type="checkbox"]{
  appearance:none; width:18px; height:18px; flex-shrink:0;
  border:1.5px solid var(--text-3); border-radius:4px;
  background:var(--input); cursor:pointer; position:relative;
}
.opcao-checkbox input[type="checkbox"]:checked{
  background:var(--accent); border-color:var(--accent);
}
.opcao-checkbox input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:5px; top:1px;
  width:5px; height:9px; border:solid var(--on-accent);
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
.opcao-checkbox input[type="checkbox"]:focus-visible{ outline:none; box-shadow:var(--focus); }

/* Cartão — contém formulários curtos (login, cadastro, passos de wizard)
   em vez de deixar os campos soltos ocupando a largura inteira da página.
   .cartao-estreito trava numa largura de leitura confortável pra formulário
   de coluna única — é isso que resolve "campos grandes demais": o problema
   nunca foi o campo, era o container sem limite. */
.cartao{
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:var(--space-8);
  box-shadow:var(--shadow);
}
.cartao-estreito{ max-width:400px; margin:var(--space-6) auto 0; }

/* Divisor de seção — mesma estrutura do sistema oficial (padding + linha),
   pra separar blocos dentro de uma página sem precisar de outro <h1>. */
.secao{
  margin-top:var(--space-8); padding-top:var(--space-8);
  border-top:1px solid var(--line);
}

button, .botao{
  font-family:var(--f-ui); font-weight:var(--fw-semibold); font-size:var(--fs-base);
  padding:10px 18px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; transition:.15s;
  background:var(--accent); color:var(--on-accent);
  display:inline-block; text-decoration:none;
}
form > button[type="submit"],
form > .botao[type="submit"],
form > button.botao,
.cartao form > button:last-of-type,
.form-canonical > .botao {
  margin-top: var(--space-6);
}
.campo-cidade button,
.tabela-planos-wrap button,
.cidades-multiplas button,
.opcoes-multiselect + button {
  margin-top: var(--space-3);
}
.nota-campo {
  font-size: var(--fs-sm); color: var(--text-3); margin: var(--space-1) 0 0;
}
button:hover, .botao:hover{ background:var(--accent-strong); }
button:focus-visible, .botao:focus-visible{ outline:none; box-shadow:var(--focus); }

.botao-perigo{
  background:transparent; color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 45%, transparent);
}
.botao-perigo:hover{ background:color-mix(in srgb, var(--danger) 12%, transparent); }

/* Ação secundária — quando duas ou mais seções da mesma página têm botão
   de salvar próprio, só a ação mais importante (o passo que de fato
   libera o uso do CIV) fica com o botão sólido; as demais usam este. */
.botao-secundario{
  background:transparent; color:var(--text);
  border-color:var(--line-2);
}
.botao-secundario:hover{ background:var(--surface-2); }

table{ width:100%; border-collapse:collapse; font-size:var(--fs-base); }
th{
  font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-3); text-align:left;
  padding:11px 14px; border-bottom:1px solid var(--line-2);
}
td{ padding:12px 14px; border-bottom:1px solid var(--line); color:var(--text-2); }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:var(--accent-fill); }

/* Feedback — nomes de classe já usados pelos templates do CIV
   (.erro/.sucesso/.aviso), recoloridos com os tokens oficiais em vez
   de hex fixo. Equivalem a .alert.warn/.alert.ok do sistema oficial. */
.erro{
  background:color-mix(in srgb, var(--danger) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  color:var(--danger); padding:13px 16px; border-radius:var(--r-md);
  font-size:var(--fs-md); margin-top:var(--space-3);
}
.sucesso{
  background:color-mix(in srgb, var(--success) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--success) 40%, transparent);
  color:var(--success); padding:13px 16px; border-radius:var(--r-md);
  font-size:var(--fs-md); margin-top:var(--space-3);
}
.aviso{
  background:color-mix(in srgb, var(--mtx-mte) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--mtx-mte) 40%, transparent);
  color:var(--mtx-mte); padding:13px 16px; border-radius:var(--r-md);
  font-size:var(--fs-md); margin-top:var(--space-3);
}

/* Cabeçalho compartilhado (Painel Empresa e Admin) */
header.topo{
  background:var(--surface-2); color:var(--text);
  border-bottom:1px solid var(--line);
  padding:1rem 1.5rem; margin-bottom:var(--space-6);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
header.topo .marca{
  font-family:var(--f-ui); font-weight:var(--fw-extrabold); letter-spacing:.06em;
  text-transform:uppercase; font-size:var(--fs-base); color:var(--text);
}
header.topo nav{ display:flex; align-items:center; gap:1.25rem; }
header.topo nav a{
  color:var(--text-2); text-decoration:none; font-size:var(--fs-base);
}
header.topo nav a:hover{ color:var(--accent); }
header.topo nav button{
  background:transparent; color:var(--text-2); border:none;
  font-weight:var(--fw-normal); font-size:var(--fs-base); padding:0;
}
header.topo nav button:hover{ background:transparent; color:var(--accent); }

/* Menu do Admin em tela estreita — os 9 links + tema + sair não cabem
   numa linha só; abaixo de 840px viram um painel que abre/fecha abaixo
   do cabeçalho, acionado pelo botão de menu (que só aparece nessa faixa). */
.menu-btn-admin{ display:none; }
@media (max-width:840px){
  header.topo{ flex-wrap:wrap; }
  .menu-btn-admin{
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
    width:38px; height:38px; padding:0; color:var(--text); cursor:pointer;
  }
  .menu-btn-admin:hover{ background:var(--surface); }
  header.topo nav{
    display:none; flex-direction:column; align-items:stretch; gap:2px;
    width:100%; order:3; margin-top:1rem; padding-top:1rem;
    border-top:1px solid var(--line);
  }
  header.topo nav.aberta{ display:flex; }
  header.topo nav a, header.topo nav button{
    padding:.65rem .5rem; font-size:var(--fs-base); border-radius:var(--r-sm);
  }
  header.topo nav a:hover, header.topo nav button:hover{ background:var(--surface); }
}

.tema-toggle{
  font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-2);
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-full); padding:6px 14px; cursor:pointer;
  display:flex; align-items:center; gap:8px; transition:.15s;
}
.tema-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.tema-toggle .ponto{
  width:10px; height:10px; border-radius:50%; background:var(--accent);
}

/* Chat do Painel Empresa */
.avatar{
  background:var(--accent); color:var(--on-accent);
}
.linha.usuario .bolha{
  border-color:var(--accent);
}
.linha.civ .bolha{
  background:var(--surface-2); color:var(--text);
}
.chips{ display:flex; gap:0.5rem; flex-wrap:wrap; margin:0.5rem 0 0.75rem; }
.chip{
  background:var(--surface-2); color:var(--text-2);
  border:1px solid var(--accent); border-radius:999px;
  padding:0.35rem 0.8rem; font-size:var(--fs-sm); cursor:pointer;
}

@media(prefers-reduced-motion:reduce){ *{ transition:none!important; } }