/* A camada de marca da Bancada — tokens e primitivas, uma só cópia para as duas
   telas (entrar e bancada).

   FONTE ÚNICA: o ativo `marca-calandrini`, em
   /Users/victor.silva/Desktop/construção de Projetos/ativos/marca-calandrini/
   (tokens.json → tokens.css; regras de ferramenta em produto.md). Este arquivo
   traduz os tokens do ativo para os nomes que a Bancada já usa (--claro,
   --tinta, --bronze…). Quando o ativo mudar, é aqui que se atualiza — nunca
   inventar valor novo neste arquivo.

   Substitui a versão de 16/09 (manhã) que seguia docs/design-system-calandrini.md
   com Montserrat, Playfair, #EEEEEF e #AB8F61: aqueles valores vinham de um deck
   e não batem com o moodboard do site, o logo e o site no ar. Ver
   ativos/marca-calandrini/armadilhas.md.

   Servido por GET /publico/{nome}, sem login: a tela de entrar precisa da marca
   antes de haver sessão. */

/* As fontes do sistema, no nosso servidor: a identidade não depende de um
   terceiro estar no ar, e o navegador do escritório não conta a visita ao
   Google. Arquivos variáveis, subset latin. SIL Open Font License 1.1 — o texto
   está ao lado, em OFL-*.txt. */
@font-face{
  font-family:"Inter Tight"; src:url("/publico/inter-tight.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cairo"; src:url("/publico/cairo.woff2") format("woff2");
  font-weight:200 1000; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond"; src:url("/publico/cormorant-garamond-italico.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}

:root{
  color-scheme:light;

  /* Superfícies (produto.md: página azul-acinzentada, área de trabalho branca). */
  --claro:#E7EEF0;           /* plano da página            = --surface-muted */
  --papel:#FFFFFF;           /* card, tabela, formulário    = --surface */
  --papel-2:#F3F6F8;         /* linha sob o ponteiro        = --surface-hover */
  --escuro:#172240;          /* impacto: topo da mesa, tela de entrar. Só aqui;
                                não é tema escuro (ver bloco abaixo) */

  /* Tinta. */
  --navy:#264575;            /* ação: botão, link, pílula ativa = --primary */
  --navy-marca:#2A3357;      /* só ao lado do logo e em papelaria = --brand-navy */
  --navy-forte:#1F3A62;      /* hover da ação                      = --primary-hover */
  --navy-suave:#E3EAF4;      /* fundo de item ativo                = --primary-suave */
  --tinta:#172240;
  --tinta-2:#4A5568;
  --tinta-3:#556277;
  --filete:#D5DCE4;
  --filete-fraco:rgba(23,34,64,.07);
  --borda:rgba(23,34,64,.12);

  /* No escuro (superfície --escuro). */
  --tinta-i:#E7EEF0;
  --tinta-i-2:#B8C2D6;
  --tinta-i-3:#9AA6BF;
  --filete-i:rgba(231,238,240,.20);
  --filete-i-fraco:rgba(231,238,240,.11);

  /* Um acento só. Filete de fechamento, borda do único card em destaque, kicker.
     Nunca texto em claro (2.9:1), nunca botão, nunca status. */
  --bronze:#AF9458;
  --bronze-fraco:rgba(175,148,88,.5);

  /* Estados (sempre com ícone e palavra; cor nunca sozinha). */
  --sucesso:#2E7D5B;  --sucesso-fundo:#E3F1EA;
  --aviso:#8A5F14;    --aviso-fundo:#F5EBD6;
  --alerta:#B0413E;   --alerta-fundo:#F6E3E2;   /* veredito que pesa, erro */
  --info:#2F6396;     --info-fundo:#E1ECF7;
  --alerta-i:#EF8A86;

  /* Geometria de produto: 8px em controle, 16px em card. O raio 36px do deck
     ficou para slide e tela de entrar (--raio-capa). */
  --raio-controle:8px;
  --raio:16px;               /* card */
  --raio-denso:12px;         /* card dentro de outro, ou em grade */
  --raio-capa:24px;          /* cartão "vidro" da tela de entrar */
  --pilula:999px;            /* só tag e chip */
  --sombra:0 1px 2px rgba(23,34,64,.04), 0 8px 24px -20px rgba(23,34,64,.25);
  --conteudo-max:1040px;     /* largura máxima de conteúdo = geometria.conteudo-max */

  --sans:"Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:"Cairo", "Inter Tight", system-ui, sans-serif;
  --serif:"Cormorant Garamond", "Cormorant", Georgia, serif;
  --id:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* Tema escuro (produto.md: obrigatório). Superfícies quase neutras com um toque
   de navy; o navy dos slides não é superfície de UI. Toggle por data-theme na
   raiz vence a preferência do sistema nos dois sentidos. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --claro:#0F1420; --papel:#1B2333; --papel-2:#232D40;
    --navy:#8FB4E6; --navy-forte:#A6C4EC; --navy-suave:#243452;
    --tinta:#E7EEF0; --tinta-2:#B8C2D6; --tinta-3:#97A3BB;
    --filete:#33405A; --filete-fraco:rgba(255,255,255,.08); --borda:rgba(255,255,255,.10);
    --bronze:#C9B27E; --bronze-fraco:rgba(201,178,126,.5);
    --sucesso:#6FC4A0; --sucesso-fundo:#1F3D38;
    --aviso:#E0B264;   --aviso-fundo:#3D3322;
    --alerta:#EF8A86;  --alerta-fundo:#43282E;
    --info:#86ACE0;    --info-fundo:#243756;
    --sombra:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --claro:#0F1420; --papel:#1B2333; --papel-2:#232D40;
  --navy:#8FB4E6; --navy-forte:#A6C4EC; --navy-suave:#243452;
  --tinta:#E7EEF0; --tinta-2:#B8C2D6; --tinta-3:#97A3BB;
  --filete:#33405A; --filete-fraco:rgba(255,255,255,.08); --borda:rgba(255,255,255,.10);
  --bronze:#C9B27E; --bronze-fraco:rgba(201,178,126,.5);
  --sucesso:#6FC4A0; --sucesso-fundo:#1F3D38;
  --aviso:#E0B264;   --aviso-fundo:#3D3322;
  --alerta:#EF8A86;  --alerta-fundo:#43282E;
  --info:#86ACE0;    --info-fundo:#243756;
  --sombra:none;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--claro); color:var(--tinta);
  font-family:var(--sans); font-size:14px; font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Títulos de página em Cairo; só H1 e H2. O resto fica na sans. */
h1, h2{font-family:var(--display); font-weight:600; letter-spacing:-.01em; margin:0}
h3{font-weight:600; font-size:15px; letter-spacing:-.005em; margin:0}

/* Ênfase em produto é peso e cor. A serifa entra só na tela de entrar e em capa
   (.capa): uma palavra, itálica. */
.capa h1 em, .capa .enfase{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:.02em}
h1 em, h2 em, .enfase{font-style:normal; font-weight:700; color:var(--navy)}

/* Sobrelinha: o rótulo pequeno que abre uma seção. */
.sobrelinha{
  font-size:11px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tinta-2); margin:0;
}

.id{font-family:var(--id); font-size:.92em; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

button{font:inherit; cursor:pointer}

/* Foco visível é acessibilidade, não enfeite. */
:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:var(--raio-controle)}

/* ---------------------------------------------------------------- primitivas */

/* Card: superfície branca, borda 1px, sombra quase nula. */
.cartao{
  border:1px solid var(--borda); border-radius:var(--raio);
  background:var(--papel); padding:20px 22px; box-shadow:var(--sombra);
}
.cartao.denso{border-radius:var(--raio-denso); padding:14px 16px}
/* A troca de borda é todo o vocabulário de destaque de container. */
.cartao.destaque{border-color:var(--bronze)}

/* Pílula: item curto e paralelo (tag, filtro). */
.pilula{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  border:1px solid var(--filete); border-radius:var(--pilula);
  background:transparent; color:var(--tinta-2);
  font-size:12px; padding:3px 12px;
}
.pilula[aria-pressed="true"]{border-color:var(--navy); color:var(--navy); background:var(--navy-suave); font-weight:500}

/* Ação principal: navy preenchido, raio de controle. Um por tela. */
.acao{
  border:1px solid var(--navy); background:var(--navy); color:var(--papel);
  border-radius:var(--raio-controle); padding:7px 16px; font-size:13px; font-weight:500;
}
.acao:hover{background:var(--navy-forte); border-color:var(--navy-forte)}
.acao[disabled]{opacity:.5; cursor:default}
.acao.discreta{background:transparent; color:var(--tinta); border-color:var(--filete)}
.acao.discreta:hover{background:var(--papel-2)}
.acao.perigo{background:transparent; color:var(--alerta); border-color:transparent}

/* Campo de formulário. */
.campo{
  font:inherit; color:var(--tinta); background:var(--papel);
  border:1px solid var(--filete); border-radius:var(--raio-controle); padding:7px 10px;
}

/* Estado: cor + ícone + palavra, nunca cor sozinha. */
.estado{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  padding:2px 8px; border-radius:var(--pilula)}
.estado.sucesso{color:var(--sucesso); background:var(--sucesso-fundo)}
.estado.aviso{color:var(--aviso); background:var(--aviso-fundo)}
.estado.alerta{color:var(--alerta); background:var(--alerta-fundo)}
.estado.info{color:var(--info); background:var(--info-fundo)}

/* Filete de fechamento: dourado a 50%. Fica acima do bloco — nunca uma faixa. */
.filete-ouro{border:0; border-top:1px solid var(--bronze-fraco); margin:0}

/* Superfície escura: o topo da mesa e a tela de entrar. Não muda com o tema. */
.escuro{background:var(--escuro); color:var(--tinta-i)}
.escuro h1, .escuro h2{color:var(--tinta-i)}
.escuro .sobrelinha{color:var(--tinta-i-3)}
.escuro .cartao{border-color:var(--filete-i); background:transparent; box-shadow:none}
.escuro .pilula{border-color:var(--filete-i); color:var(--tinta-i-2)}
.escuro .acao{background:#E7EEF0; border-color:#E7EEF0; color:#172240}
.escuro .acao.discreta{background:transparent; color:var(--tinta-i-2); border-color:var(--filete-i)}
.escuro .filete-ouro{border-top-color:rgba(175,148,88,.42)}

/* Tela de entrar e capa: as únicas onde entram foto, vidro e a serifa. */
.capa .vidro{
  background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.6); border-radius:var(--raio-capa); color:#172240;
}

/* A marca. Vem do arquivo (scripts/marca.py), nunca recriada em texto. */
.marca{display:block; height:28px; width:auto}

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