/* ==========================================================================
   Mariana Claw — tokens.css
   Fundação do sistema visual. ESTE ARQUIVO NÃO ESTILIZA NADA: só define.
   Carregar ANTES de main.css e apps.css:
     <link rel="stylesheet" href="{{BASE}}/css/tokens.css">
     <link rel="stylesheet" href="{{BASE}}/css/main.css">
   Nada vem de fora: a fonte é servida pelo próprio painel.
   ========================================================================== */

/* --- Tipografia -----------------------------------------------------------
   Work Sans variável (SIL OFL 1.1 — OFL.txt vai junto em assets/fonts/).
   Um src só: o .woff2 subset latin, 49 KB, servido pelo próprio painel. O
   .ttf variável de 351 KB foi descartado — era sete vezes o tamanho para o
   mesmo alfabeto, e uma segunda src apontando para arquivo inexistente é um
   404 dormindo na cadeia de fallback. O subset cobre exatamente o alfabeto
   que o painel escreve (latin: U+0000-00FF e companhia, com todo o pt-BR). */
@font-face {
  font-family: "Work Sans";
  src: url("../assets/fonts/WorkSans-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --mc-fonte: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --mc-fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
                   "Liberation Mono", monospace;

  /* Pesos — o caráter do sistema é o contraste entre 500 e 700+ */
  --mc-peso-corpo: 400;
  --mc-peso-rotulo: 500;
  --mc-peso-botao: 600;
  --mc-peso-numero: 745;

  /* Escala tipográfica */
  --mc-t-11: 11px;
  --mc-t-12: 12px;
  --mc-t-13: 13px;
  --mc-t-15: 15px;   /* base */
  --mc-t-18: 18px;
  --mc-t-22: 22px;
  --mc-t-28: 28px;

  --mc-lh-apertada: 1.25;   /* títulos */
  --mc-lh-corpo: 1.55;      /* corpo — painel denso, não landing page */
  --mc-lh-solta: 1.6;       /* textos longos: documentação, tutorial */

  /* Rótulo de seção: 12–13px / 500 / caixa alta / espaçado */
  --mc-tracking-rotulo: .25px;

  /* --- Espaço: múltiplos de 4 ------------------------------------------- */
  --mc-e-1: 4px;
  --mc-e-2: 8px;
  --mc-e-3: 12px;
  --mc-e-4: 16px;
  --mc-e-5: 20px;
  --mc-e-6: 24px;
  --mc-e-8: 32px;
  --mc-e-10: 40px;

  /* --- Raio: três, e só três ------------------------------------------- */
  --mc-raio-cartao: 12px;
  --mc-raio-campo: 10px;
  --mc-raio-pilula: 999px;

  /* --- Sombra: só no que flutua ---------------------------------------- */
  --mc-sombra-menu:  0 6px 20px rgba(20, 15, 46, .12);
  --mc-sombra-modal: 0 18px 48px rgba(20, 15, 46, .22);
  --mc-sombra-gaveta: -12px 0 32px rgba(20, 15, 46, .16);
  --mc-sombra-nenhuma: none;   /* cartão parado: borda, nunca sombra */

  /* --- Medidas de layout ------------------------------------------------ */
  --mc-lado: 236px;   /* o valor que o main.css já usava */
  /* Altura do cabeçalho da tela. Existe como variável porque DUAS coisas precisam
   * do mesmo número: o próprio cabeçalho (que é pegajoso) e tudo que gruda embaixo
   * dele — hoje o cabeçalho de dia do calendário. Com o número escrito à mão nos
   * dois lugares sobrava uma fresta de 2px por onde o conteúdo passava. */
  --mc-cabecalho: 82px;
  --mc-alvo-toque: 44px;
  --mc-borda: 1px;
  --mc-borda-secundario: 2px;   /* contorno do botão secundário */

  /* --- Movimento -------------------------------------------------------- */
  --mc-tempo-rapido: 120ms;
  --mc-tempo-normal: 180ms;
  --mc-tempo-lento: 260ms;
  --mc-curva: cubic-bezier(.2, .6, .3, 1);

  /* ======================================================================
     COR — TEMA CLARO
     Toda cor existe aqui. Nenhuma cor nasce dentro de @media ou de
     [data-tema]: lá só se sobrescreve o que já existe (regra B5).
     ====================================================================== */
  --mc-bg: #F4F5F9;
  --mc-painel: #FFFFFF;
  --mc-fundo2: #EEF0F6;
  --mc-linha: #E4E3EE;
  --mc-texto: #16162E;
  --mc-fraco: #5B5F7A;

  --mc-acento: #D6216F;
  --mc-acento-forte: #B0175A;
  --mc-acento-suave: #FDE9F1;
  --mc-acento-contraste: #FFFFFF;   /* texto sobre fundo de acento */

  --mc-roxo: #6F35CF;
  --mc-roxo-suave: #EFE8FD;
  --mc-tinta: #140F2E;
  --mc-tinta-2: #3E1B63;

  --mc-ok: #12876A;
  --mc-erro: #C42B3F;
  --mc-espera: #B8720A;
  --mc-neutro: #7C819A;

  /* Variantes de TEXTO dos estados.
     Medido sobre --painel (#FFF): #12876A dá 4.47:1 e #B8720A dá 3.85:1 —
     os dois ficam abaixo de AA para texto normal. O selo pode usar a cor
     cheia no ponto/borda, mas a PALAVRA usa a variante abaixo.            */
  --mc-ok-texto: #0F7A5F;      /* 5.28:1 sobre branco */
  --mc-espera-texto: #8F5806;  /* 5.89:1 sobre branco */
  --mc-erro-texto: #C42B3F;    /* 5.58:1 — já passa */
  --mc-neutro-texto: #5B5F7A;

  /* Fundos suaves de estado (faixa, selo, linha de tabela) */
  --mc-ok-suave: #E4F4EF;
  --mc-erro-suave: #FCE9EB;
  --mc-espera-suave: #FBF0DC;
  --mc-neutro-suave: #EEF0F6;

  /* Foco — visível em tudo que recebe teclado (regra B6) */
  --mc-foco: #6F35CF;
  --mc-foco-anel: 0 0 0 3px rgba(111, 53, 207, .32);

  /* --- Tipos de nó do mapa ------------------------------------------------
     Sete categorias precisam de sete cores distinguíveis entre si, e o canvas do
     mapa não lê classe: ele lê estas variáveis com getComputedStyle. Em vez de
     arco-íris, uma varredura ÚNICA de matiz ancorada nos dois acentos da casa —
     do magenta (matiz do --acento) ao índigo, passando pelo roxo (matiz do
     --roxo) —, todas com a MESMA luminosidade e o mesmo croma em oklch. Mesmo
     peso visual: nenhum tipo grita mais alto que outro. "modelo" fica no neutro
     de propósito, porque é o único que não é conteúdo do dono.                */
  --mc-no-pessoa: #AB3276;
  --mc-no-evento: #9C3B96;
  --mc-no-nota: #8745B0;
  --mc-no-assunto: #6B50C2;
  --mc-no-documento: #405EC9;
  --mc-no-memoria: #006BC4;
  --mc-no-modelo: #7C819A;
}

/* --- TEMA ESCURO ----------------------------------------------------------
   Duas entradas para as mesmas declarações:
   1) sem atributo em <html> vale a preferência do sistema;
   2) html[data-tema="escuro"] é a escolha explícita da pessoa.
   html[data-tema="claro"] não precisa de bloco: cai no :root.             */
@media (prefers-color-scheme: dark) {
  html:not([data-tema]) {
    --mc-bg: #0E1026;
    --mc-painel: #171935;
    --mc-fundo2: #1E2143;
    --mc-linha: #2B2F55;
    --mc-texto: #ECECF6;
    --mc-fraco: #9EA3C4;

    --mc-acento: #FF5FA8;
    --mc-acento-forte: #FF87BF;
    --mc-acento-suave: rgba(255, 95, 168, .14);
    --mc-acento-contraste: #240A18;

    --mc-roxo: #A98BFF;
    --mc-roxo-suave: rgba(169, 139, 255, .14);

    --mc-ok: #3DD9A0;
    --mc-erro: #FF7089;
    --mc-espera: #F2B23C;
    --mc-neutro: #8B90B0;

    --mc-ok-texto: #3DD9A0;
    --mc-espera-texto: #F2B23C;
    --mc-erro-texto: #FF7089;
    --mc-neutro-texto: #9EA3C4;

    --mc-ok-suave: rgba(61, 217, 160, .14);
    --mc-erro-suave: rgba(255, 112, 137, .14);
    --mc-espera-suave: rgba(242, 178, 60, .14);
    --mc-neutro-suave: #1E2143;

    --mc-foco: #A98BFF;
    --mc-foco-anel: 0 0 0 3px rgba(169, 139, 255, .40);

    --mc-no-pessoa: #F080B8;
    --mc-no-evento: #DF86D7;
    --mc-no-nota: #C88EF1;
    --mc-no-assunto: #AA98FF;
    --mc-no-documento: #82A5FF;
    --mc-no-memoria: #53B1FF;
    --mc-no-modelo: #8B90B0;

    --mc-sombra-menu:  0 6px 20px rgba(0, 0, 0, .45);
    --mc-sombra-modal: 0 18px 48px rgba(0, 0, 0, .60);
    --mc-sombra-gaveta: -12px 0 32px rgba(0, 0, 0, .50);
  }
}

html[data-tema="escuro"] {
  --mc-bg: #0E1026;
  --mc-painel: #171935;
  --mc-fundo2: #1E2143;
  --mc-linha: #2B2F55;
  --mc-texto: #ECECF6;
  --mc-fraco: #9EA3C4;

  --mc-acento: #FF5FA8;
  --mc-acento-forte: #FF87BF;
  --mc-acento-suave: rgba(255, 95, 168, .14);
  --mc-acento-contraste: #240A18;

  --mc-roxo: #A98BFF;
  --mc-roxo-suave: rgba(169, 139, 255, .14);

  --mc-ok: #3DD9A0;
  --mc-erro: #FF7089;
  --mc-espera: #F2B23C;
  --mc-neutro: #8B90B0;

  --mc-ok-texto: #3DD9A0;
  --mc-espera-texto: #F2B23C;
  --mc-erro-texto: #FF7089;
  --mc-neutro-texto: #9EA3C4;

  --mc-ok-suave: rgba(61, 217, 160, .14);
  --mc-erro-suave: rgba(255, 112, 137, .14);
  --mc-espera-suave: rgba(242, 178, 60, .14);
  --mc-neutro-suave: #1E2143;

  --mc-foco: #A98BFF;
  --mc-foco-anel: 0 0 0 3px rgba(169, 139, 255, .40);

  --mc-no-pessoa: #F080B8;
  --mc-no-evento: #DF86D7;
  --mc-no-nota: #C88EF1;
  --mc-no-assunto: #AA98FF;
  --mc-no-documento: #82A5FF;
  --mc-no-memoria: #53B1FF;
  --mc-no-modelo: #8B90B0;

  --mc-sombra-menu:  0 6px 20px rgba(0, 0, 0, .45);
  --mc-sombra-modal: 0 18px 48px rgba(0, 0, 0, .60);
  --mc-sombra-gaveta: -12px 0 32px rgba(0, 0, 0, .50);
}

/* ==========================================================================
   APELIDOS — camada de compatibilidade
   Mesmo padrão do bloco de apelidos antigos que já existe em main.css
   (--text-dim, --green, --cyan…): o painel tem 2.351 linhas de app.js e a
   maior parte da interface é gerada por template string dentro dos .js.
   Renomear variável de uma vez quebraria tela em silêncio. Então os nomes
   velhos continuam existindo e apontam para o token novo. Migração é por
   tela, nos próximos prompts; quando um nome velho não aparecer mais em
   nenhum grep do panel/, apaga-se a linha daqui.
   ========================================================================== */
:root,
html[data-tema="claro"],
html[data-tema="escuro"] {
  /* nomes curtos do Bloco C — o vocabulário que a documentação usa */
  --bg: var(--mc-bg);
  --painel: var(--mc-painel);
  --fundo2: var(--mc-fundo2);
  --linha: var(--mc-linha);
  --texto: var(--mc-texto);
  --fraco: var(--mc-fraco);
  --acento: var(--mc-acento);
  --acento-forte: var(--mc-acento-forte);
  --acento-suave: var(--mc-acento-suave);
  --roxo: var(--mc-roxo);
  --roxo-suave: var(--mc-roxo-suave);
  --tinta: var(--mc-tinta);
  --tinta-2: var(--mc-tinta-2);
  --ok: var(--mc-ok);
  --erro: var(--mc-erro);
  --espera: var(--mc-espera);
  --neutro: var(--mc-neutro);

  /* As variantes de TEXTO dos estados e o contraste do acento. Faltavam aqui, e
   * essa classe de erro não aparece no console: `color:var(--acento-contraste)`
   * sem definição não é erro, é herança — o rótulo do botão de enviar herdava
   * --texto e virava tinta quase preta sobre magenta (3,68:1 no claro, 2,39:1 no
   * escuro). Cor que existe com prefixo e é citada sem prefixo tem que ter apelido. */
  --acento-contraste: var(--mc-acento-contraste);
  --ok-texto: var(--mc-ok-texto);
  --erro-texto: var(--mc-erro-texto);
  --espera-texto: var(--mc-espera-texto);
  --neutro-texto: var(--mc-neutro-texto);

  /* E os fundos suaves de estado. Mesma armadilha das variantes de texto, com uma
   * agravante: `background:var(--erro-suave)` sem definição não pinta nada e a
   * borda sozinha continua ali, então a tela parece intencional. Era o caso da
   * barra do ditado — "barra inteira pintada" com fundo transparente. */
  --ok-suave: var(--mc-ok-suave);
  --erro-suave: var(--mc-erro-suave);
  --espera-suave: var(--mc-espera-suave);
  --neutro-suave: var(--mc-neutro-suave);

  /* Tipos de nó do mapa: o canvas lê pelo nome curto. */
  --no-pessoa: var(--mc-no-pessoa);
  --no-evento: var(--mc-no-evento);
  --no-nota: var(--mc-no-nota);
  --no-assunto: var(--mc-no-assunto);
  --no-documento: var(--mc-no-documento);
  --no-memoria: var(--mc-no-memoria);
  --no-modelo: var(--mc-no-modelo);

  /* nomes que o JavaScript e o CSS de hoje usam */
  --acento1: var(--mc-acento);          /* era o início do gradiente */
  --acento2: var(--mc-acento);          /* era o fim; agora acento chapado */
  --raio: var(--mc-raio-cartao);
  --sombra: var(--mc-sombra-nenhuma);   /* cartão parado não tem sombra */
  --sombra-flutuante: var(--mc-sombra-menu);
  --lado: var(--mc-lado);
  --foco: var(--mc-foco);

  /* Nomes que estavam sendo CITADOS sem nunca ter sido definidos. Não é
   * preciosismo: `background:var(--fundo)` sem fallback cai para transparente, e
   * era isso que estava acontecendo com o campo de senha da aba Operações, com as
   * buscas do Cérebro e do Mapa e com os campos da Entrevista — campo sem fundo,
   * em silêncio, desde antes desta sessão.
   *   --fundo   → fundo de campo (é o --fundo2 de hoje)
   *   --alerta  → o âmbar de "atenção" (tem fallback #c9922e no CSS; agora vem do tema)
   * Os quatro de baixo são do apps.css, que nasceu com fallback de painel escuro
   * (rgba branco, azul #4a9eff): no tema claro aquilo dava branco sobre branco.
   *   --card    → aponta para --fundo2, e NÃO para --painel: no apps.css ele é a
   *               tinta de bloco de código e de linha de tabela, dentro de um
   *               cartão que já é --painel. Apontar para --painel apagaria a
   *               separação.
   */
  --fundo: var(--mc-fundo2);
  --alerta: var(--mc-espera);
  --muted: var(--mc-fraco);
  --card: var(--mc-fundo2);
  --danger: var(--mc-erro);
  --accent: var(--mc-acento);
}