/* One Quote — a base que as duas famílias de página dividem
   ==========================================================================

   Este arquivo nasceu de uma medição. A página inicial carregava
   `css/styles.css` inteiro — 155 KB, 878 regras — e usava TREZE delas. Ou
   seja: quem chega pela primeira vez, quase sempre no celular e por um link
   de WhatsApp, baixava a folha de estilo do sistema inteiro para desenhar um
   logotipo e dois botões.

   E não era só peso. `.linha-marca` existe nos dois lugares querendo dizer
   coisas diferentes: no sistema é a linha com caixa de marcar, na vitrine é o
   selo "cliente novo" ao lado de um item. A folha do sistema entrava na
   vitrine e dava `display: flex` e cursor de mão a um selo que não se clica.
   Separar conserta o peso e conserta o selo.

   O que mora AQUI é o que as duas famílias precisam, e só isso:

     os tokens     cor, fonte, raio, sombra — o vocabulário visual inteiro
     o reset       box-sizing, html, body, e o reset de <button>
     a marca       o logotipo, que aparece em toda página das duas famílias
     dois botões   .btn-primary e .btn-secondary

   O que NÃO mora aqui: tudo o que só existe depois de entrar. Isso continua
   em `css/styles.css`, que passa a depender deste arquivo — carregue os dois,
   nesta ordem, ou o sistema fica sem cor nenhuma.

   Quem confere se a divisão continua valendo é a medição, não a intenção:
   abra a página, percorra `document.styleSheets` e conte quantas regras de
   cada folha casam com algum elemento. Foi assim que os treze apareceram. */

:root {
  /* Cores da marca (ver img/marca.svg).
     `--accent` é o azul exato do logotipo e serve para PREENCHIMENTOS: botões
     com texto branco (4,71:1), barras de gráfico, item ativo do menu.
     `--accent-text` é o mesmo azul um pouco mais fechado, para TEXTO em fundo
     claro — o azul da marca dá 4,07:1 sobre o cinza do fundo e reprovaria no
     mínimo de 4,5 exigido para leitura. */
  --accent: #3d6aeb;
  --accent-text: #2f57d4;
  --accent-hover: #2f57d4;
  --accent-wash: #eaf0ff;
  --accent-wash-2: #dbe5ff;

  /* A mesma cor, em três números, para quem precisa dela COM TRANSPARÊNCIA: o
     anel de foco, o brilho embaixo do botão primário e o do item ativo do
     menu. Os três traziam `rgba(61, 106, 235, ...)` escrito à mão, o que valia
     enquanto a cor era uma só — quando a empresa escolhe a dela (js/cor-da-marca.js),
     um brilho azul embaixo de um botão vermelho é a única parte que não muda.
     Escrita aqui uma vez, ela troca junto com as outras. */
  --accent-rgb: 61, 106, 235;

  /* Quatro degraus de cinza, e todos os quatro passam 4,5:1 sobre as TRÊS
     superfícies do sistema (branco, --surface-2 e --bg). Antes não era assim:
     --faint dava 3,17:1 sobre branco e 2,84:1 sobre o fundo do app, e era cor
     de texto em trinta lugares — rótulo de coluna do quadro, título de seção,
     nota de campo, linha de apoio de indicador. Tudo isso é texto que informa,
     não enfeite, e estava abaixo do mínimo de leitura.
     Escurecer só o --faint não bastava: o tom que passa sobre --bg fica mais
     escuro do que o --muted de antes, e os dois trocariam de lugar. Por isso a
     escala desceu inteira, mantendo o degrau entre um nível e o seguinte. */
  --ink: #1b1e2f;
  --ink-2: #444a5c;
  --muted: #5a6074;
  --faint: #686e82;

  /* O fundo puxa para o azul do logotipo em vez do cinza neutro de antes: é o
     que faz o branco dos cartões parecer branco, e não "o mesmo cinza, só que
     mais claro". */
  --bg: #f3f4fa;
  --surface: #ffffff;
  --surface-2: #f7f8fc;

  /* Três pesos de linha, cada um com um trabalho:
     --card-line  contorna cartões (o degrau que faz o bloco existir sobre o fundo)
     --line       campos de formulário e bordas de controle
     --line-soft  divisórias internas (linhas de tabela), que devem sumir */
  --card-line: #e8eaf2;
  --line: #d5d8e4;
  --line-soft: #eef0f6;

  --ok: #1d7a45;
  --ok-wash: #e6f4ec;
  --warn: #8a5a00;
  --warn-wash: #fbf1de;
  --danger: #b3261e;
  --danger-wash: #fbeceb;

  /* ---- Tons de apoio ----
     Existem para uma coisa só: pintar o quadradinho de ícone que identifica um
     bloco (indicador, atalho de configuração). Nunca pintam texto corrido nem
     fundo de tela. São seis porque seis é o número de blocos que aparecem
     juntos na maior grade do sistema; um sétimo tom seria enfeite.
     O par é sempre <tom> sobre <tom>-wash, todos acima de 4,5:1. */
  --tom-azul: #2f57d4;
  --tom-azul-wash: #e7eeff;
  --tom-violeta: #5b45c4;
  --tom-violeta-wash: #eeeafd;
  --tom-verde: #16704a;
  --tom-verde-wash: #e3f3ea;
  --tom-ambar: #8a5a00;
  --tom-ambar-wash: #fbf0da;
  --tom-rosa: #a92d6e;
  --tom-rosa-wash: #fce9f2;
  --tom-navy: #1b1e2f;
  --tom-navy-wash: #e8eaf2;

  /* ---- A barra de navegação ----
     Azul-marinho da marca, com um degradê de dois passos para o bloco não
     ficar chapado numa tela de 1080 de altura. */
  --nav-bg: #1b1e2f;
  --nav-bg-2: #262b42;
  --nav-ink: #c9cde0;
  --nav-ink-forte: #ffffff;
  --nav-ink-fraco: #a9afc6;
  --nav-hover: rgba(255, 255, 255, 0.07);
  --nav-linha: rgba(255, 255, 255, 0.09);

  /* Presença: verde de "está aqui agora". Só aparece como ponto, nunca como
     texto — por isso pode ser mais vivo que o verde de status. */
  --online: #22c55e;

  /* ---- O que faltava ter nome ----

     Estas quatro nasceram espalhadas como valor literal, e duas delas em
     DUAS versões diferentes fazendo o mesmo trabalho — que é o sintoma de
     valor sem nome: ninguém sabe que já existe, então escreve outro.

     --danger-hover   o vermelho do hover dos dois botões que apagam. Era
                      #8f1e17 no botão de perigo e #98201a no diálogo. Dois
                      tons a um passo um do outro, na mesma ação.
     --alerta-cheio   a pastilha vermelha PREENCHIDA, com número branco
                      dentro: o contador do menu e o do sininho. Era #bf2a2f
                      num e #e5484d no outro — e o segundo dava 3,91:1 com o
                      branco, abaixo do mínimo de leitura. Agora é um só, e
                      ele passa.
     --nav-atencao    o âmbar e o vermelho do sistema são feitos para fundo
     --nav-critico    branco e somem no azul-marinho da barra. Estes são as
                      versões claras dos mesmos avisos, e só existem lá. */
  --danger-hover: #98201a;
  --alerta-cheio: #bf2a2f;
  --nav-atencao: #f5c26b;
  --nav-critico: #ff9ea1;

  /* ---- A escala que acompanha a tela ----

     Estes números não são fixos, e o motivo é o notebook.

     Windows a 150% num monitor de 1920x1080 entrega ao navegador uma janela
     de 1280x546 pontos de CSS — a metade da altura de um monitor de mesa. Uma
     interface desenhada em 1080 de altura chega nesse computador com tudo
     grande demais e com o menu sem caber, o que obriga a rolar a barra
     lateral para achar a primeira aba. E é assim que a maior parte das
     pessoas usa: notebook, com escala do sistema ligada.

     `clamp(mínimo, medida-da-tela, máximo)` resolve sem breakpoint: a
     interface aperta de forma contínua conforme a janela encolhe e volta ao
     tamanho cheio no monitor grande. As medidas de MENU são em `vh` porque o
     que falta ali é altura; as de CONTEÚDO usam `vh` pela mesma razão — numa
     tela baixa, o que rouba a leitura é o respiro vertical, não o lateral. */
  --nav-item-pad: clamp(5px, 0.95vh, 8px);
  --nav-item-fs: clamp(12.3px, 1.6vh, 13px);
  --nav-gap: clamp(1px, 0.25vh, 2px);
  --nav-icone: clamp(15.5px, 2.2vh, 17px);
  --nav-grupo-mt: clamp(6px, 1.35vh, 12px);
  --sidebar-pad: clamp(9px, 1.7vh, 14px);
  --avatar-tam: clamp(28px, 3.6vh, 32px);

  --pad-conteudo: clamp(16px, 2.2vw, 30px);
  --pad-topo: clamp(9px, 1.8vh, 20px);
  --fs-saudacao: clamp(22px, 3.9vh, 30px);
  --fs-stat: clamp(22px, 3.7vh, 28px);
  --pad-cartao: clamp(13px, 2.3vh, 18px);
  --stat-icone: clamp(36px, 5.8vh, 42px);

  /* Os cantos subiram um degrau inteiro (16/12/8 viraram 18/14/10). É a
     mudança que mais muda a cara da tela sem mudar nada de lugar: cartão de
     canto largo lê como bloco leve, e não como célula de formulário. */
  --radius-lg: 18px;
  --radius: 14px;
  --radius-sm: 10px;
  /* Um raio só para botão, em token. Havia três: 10px escrito à mão no
     primário e no secundário, --radius-sm no de perigo e na regra global. */
  --radius-btn: 10px;

  /* O anel de foco, num lugar só: campo, botão e cartão clicável bebem daqui. */
  --anel-foco: 0 0 0 3px rgba(var(--accent-rgb), 0.16);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Quanto tempo cada coisa demora ----

     Havia SEIS durações espalhadas — 0,08, 0,12, 0,16, 0,18, 0,2 e 0,3 — e
     nenhuma delas dizia por que era aquela. Duas telas com o mesmo tipo de
     movimento andavam em ritmos diferentes, e ninguém escrevendo a terceira
     tinha como saber qual copiar.

     São cinco jobs, e cada um tem um nome:

     toque       o afundar do botão no clique. Precisa ser quase instantâneo,
                 ou a mão sente atraso.
     estado      cor, borda e sombra no hover e no foco. O olho lê como
                 resposta, não como animação.
     movimento   o que muda de lugar ou de tamanho: menu que encolhe, cartão
                 que desliza, coisa que aparece.
     longa       a barra que ENCHE. Aqui a demora é a informação: uma barra
                 que salta para o lugar não mostra que está enchendo.
     passeio     o recorte da apresentação de primeiro acesso, que viaja de um
                 alvo a outro. É o único movimento longo do produto, e ele é
                 longo para a pessoa conseguir seguir com o olho.

     Quem pede menos movimento (`prefers-reduced-motion`) continua zerando
     tudo, mais abaixo em css/styles.css. */
  --transicao-toque: 0.08s;
  --transicao-estado: 0.12s;
  --transicao-movimento: 0.18s;
  --transicao-longa: 0.3s;
  --transicao-passeio: 0.38s;

  /* Duas camadas: uma rente ao cartão para definir a base, outra difusa para
     dar profundidade. Só a borda não bastava — é a soma das duas que cria o
     degrau que a gente queria. */
  --shadow: 0 1px 2px rgba(21, 27, 56, 0.03), 0 12px 28px -16px rgba(21, 27, 56, 0.18);
  --shadow-forte: 0 2px 6px rgba(21, 27, 56, 0.05), 0 22px 44px -18px rgba(21, 27, 56, 0.26);
}

* {
  box-sizing: border-box;
}

/* ---- O anel de foco, para TODO MUNDO ----

   Havia anel de foco, e ele era declarado por lista: `.btn-primary`,
   `.btn-secondary`, `.btn-destrutivo`, `.btn-ghost`, `.link-inline`. Lista é
   um contrato que só vale para quem estava lá no dia em que ela foi escrita —
   e nove controles ficaram de fora dela, entre eles o × que remove uma
   categoria escolhida, o botão de encolher o menu, a sugestão da busca e o
   próprio logotipo. Quem navega por teclado atravessava esses nove sem
   nenhum sinal de onde estava.

   Aqui a regra é ao contrário: todo elemento que receber foco de teclado
   ganha anel, e quem quiser um anel diferente sobrescreve. O padrão passa a
   ser o certo, e o esquecimento passa a ser inofensivo.

   `:focus-visible`, e não `:focus`: o anel aparece para quem navega por
   teclado e não aparece no clique do mouse, que é o comportamento que o
   navegador já sabe distinguir.

   Sem `border-radius` aqui de propósito: mexer no raio de qualquer elemento
   focado faria a forma dele pular no momento do foco. Quem precisa de canto
   arredondado no anel pede por conta própria. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Nas duas superfícies escuras do sistema o azul da marca encosta no
   azul-marinho do fundo (2,9:1) e o anel some justamente onde ele mais
   precisa aparecer — a barra de navegação é o primeiro lugar em que a tecla
   Tab entra. */
.sidebar :focus-visible,
.login-lado :focus-visible {
  outline-color: #ffffff;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A seleção de texto no azul da casa, e não no azul do sistema operacional:
   é o único lugar em que uma cor de fora entrava na tela sem ser chamada. */
::selection {
  background: var(--accent-wash-2);
  color: var(--ink);
}

/* ============ Marca ============
   Símbolo em SVG (img/marca.svg, cores exatas do logotipo) + nome escrito na
   fonte do sistema, com "one" leve e "quote" pesado, como no original. */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.marca-simbolo {
  width: 26px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.marca-nome {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.marca-nome b {
  font-weight: 700;
}

/* A regra global de botão é um RESET, e nada além disso.

   Antes ela pintava de azul e dava forma a qualquer <button> da página. O
   efeito colateral aparecia na tela mais importante do produto: o "Entrar" do
   login é um <button> sem classe, então ele caía aqui e não em .btn-primary —
   e saía com raio 8px em vez de 10, corpo 13,5 em vez de 13, preenchimento
   10px em vez de 9/16 e sem a sombra do primário. A primeira superfície que
   alguém toca era a única que não usava o botão da casa.
   Agora quem quer parecer botão pede .btn-primary. */
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-primary,
.btn-secondary,
.btn-destrutivo {
  width: auto;
  padding: 9px 16px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  font-family: inherit;
  transition: background var(--transicao-estado), box-shadow var(--transicao-estado),
    transform var(--transicao-toque);
}

.btn-primary:active,
.btn-secondary:active,
.btn-destrutivo:active {
  transform: translateY(1px);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-destrutivo:focus-visible,
.btn-ghost:focus-visible,
.link-inline:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(21, 27, 56, 0.1), 0 8px 18px -8px rgba(var(--accent-rgb), 0.85);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 1px 2px rgba(21, 27, 56, 0.1), 0 10px 22px -8px rgba(var(--accent-rgb), 0.95);
}

.btn-primary:disabled {
  background: var(--faint);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

.btn-secondary:hover {
  background: var(--bg);
}