/* Ukari — design tokens.
 *
 * Fonte única de verdade de cor, espaçamento e tipografia. Nenhum produto
 * declara cor própria: é o que impede que o ERP e os Quadros pareçam de duas
 * empresas diferentes.
 *
 * DIREÇÃO — PRETO E BRANCO
 * A marca não tem cor de acento, e isso é uma decisão, não uma economia. Quem
 * vende sistema de gestão para empresa mostra, na tela, o dado do cliente:
 * saldo, prazo, coluna do quadro, etiqueta de status. Se a interface já gasta
 * uma cor consigo mesma, toda cor que aparece depois vira ruído — o vermelho de
 * atraso disputa com o botão, e a etiqueta do cliente disputa com a barra.
 * Deixando a marca em tinta preta, cor passa a significar SÓ uma coisa: algo
 * mudou de estado. O acento da interface é o preto (branco no tema escuro).
 *
 * As três exceções são semânticas — perigo, sucesso, atenção — e existem porque
 * um sistema de gestão precisa dizer "isto está vencido" sem depender de o
 * usuário ler. Elas nunca aparecem em superfície de marca.
 *
 * NOMES
 * A fonte de verdade é `--st-*`. Os `--kv-*` continuam como apelidos porque o
 * `bridge.css`, o `base.html` e os produtos ainda os citam em centenas de
 * lugares; trocar tudo de uma vez é uma migração de nome sem ganho para quem
 * usa o site. Os apelidos saem quando o último `--kv-` sumir do código.
 *
 * CLARO É O PADRÃO
 * Um sistema de gestão é lido em escritório, de dia, muitas vezes projetado
 * numa reunião. O escuro fica como escolha, não como imposição.
 */

:root {
  color-scheme: light dark;

  /* --- Marca ------------------------------------------------------------ */
  /* "Brand" aqui é a ação violeta. Os valores por tema estão mais abaixo,
     junto das superfícies, para que o contraste da ação acompanhe o fundo. */

  /* --- Semânticas ------------------------------------------------------- */
  /* Dessaturadas de propósito: ao lado de uma interface sem cor, um vermelho
     saturado grita. Estes tons passam em contraste 4.5:1 sobre o fundo claro. */
  --st-danger: #a4231b;
  --st-danger-wash: #fbeceb;
  --st-success: #17614a;
  --st-success-wash: #e9f3ef;
  --st-warning: #8a5a00;
  --st-warning-wash: #fdf3e2;

  /* --- Tipografia ------------------------------------------------------- */
  /* Inter Tight só no que é marca e título — o desenho apertado dela é o que dá
     ao nome e às manchetes a densidade da identidade. O corpo do texto fica na
     pilha do sistema: são 44 KB que não valem a pena pagar para desenhar um
     parágrafo que a fonte do aparelho já desenha bem, e o primeiro pixel não
     espera rede nenhuma. */
  --st-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --st-font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --st-font-mono: ui-monospace, "SF Mono", "DM Mono", Menlo, Consolas, monospace;

  --st-text-xs: 0.78rem;
  --st-text-sm: 0.9rem;
  --st-text-base: 1rem;
  --st-text-lg: 1.15rem;
  --st-text-xl: 1.4rem;
  --st-text-2xl: 1.9rem;
  --st-text-3xl: clamp(2.1rem, 5vw, 3.2rem);

  /* --- Estrutura -------------------------------------------------------- */
  /* Raio pequeno: quadro, tabela e linha do tempo — as formas de um sistema de
     gestão — são retângulos. Cantos muito redondos os fazem parecer cartões de
     aplicativo de consumo. */
  --st-radius: 0.5rem;
  --st-radius-lg: 0.75rem;
  --st-border: 1px;
  --st-space: 1rem;
  --st-measure: 68ch;  /* largura máxima de leitura confortável */
}

/* --- Tema claro (padrão) -------------------------------------------------
   Definido em `:root` sem media query para que seja o que aparece quando o
   navegador não expressa preferência — e para que nenhum token exista apenas
   dentro de um bloco condicional. */
:root {
  --st-bg: #ffffff;
  --st-bg-sunken: #f4f4f5;
  --st-surface: #ffffff;
  --st-surface-raised: #ffffff;
  --st-line: #e3e3e5;
  --st-line-strong: #bcbcc0;
  --st-ink: #0f0f11;
  --st-ink-muted: #56565c;
  --st-ink-faint: #8a8a92;

  /* A COR DE AÇÃO É UMA LUA À NOITE
     ---------------------------------------------------------------------
     `--st-brand` é o papel de AÇÃO — link, botão, foco, item ativo. A tinta
     do texto é `--st-ink`, e ela continua preta: o que muda aqui é onde se
     clica, não o que se lê.

     Por que violeta, e não a quarta cor qualquer: no mercado de gestão que
     a Ukari disputa, vermelho, amarelo e azul já têm dono. E o símbolo da
     marca já é um corpo em órbita com um satélite — a mesma ideia da logo da
     linguagem Lua, que é literalmente uma lua em índigo. A cor passa a dizer
     o que o desenho já dizia, em vez de ser escolha solta.

     Mais violeta que o índigo do Lua de propósito: puxar para o azul
     encostaria na cor de um concorrente direto.

     O SÍMBOLO CONTINUA SEM COR. A regra da identidade (ver `_moon.html`) é
     que a marca se lê sem depender de matiz, e o logotipo herda `currentColor`
     da tinta. Isto aqui pinta ação; não pinta a marca.

     Todos os pares abaixo passam WCAG AA com folga — o menor é 5,35:1. */
  --st-brand: #3b2f7f;         /* a lua à noite: onde se clica */
  --st-brand-rgb: 59, 47, 127;
  --st-brand-strong: #2c2266;  /* pressão, e texto que precisa pesar */
  --st-brand-soft: #6455a8;    /* segundo nível sobre fundo claro */
  --st-brand-wash: #eeebf9;    /* luar: fundo de destaque */
  --st-on-brand: #ffffff;      /* o que se escreve em cima da ação */

  --st-shadow: 0 1px 2px rgba(15, 15, 17, .05), 0 8px 24px rgba(15, 15, 17, .06);
  --st-grid: rgba(15, 15, 17, .05);
  /* O halo do satélite no logotipo é a cor do fundo: veja `marca.css`. */
  --ukari-halo: var(--st-bg);
}

/* --- Tema escuro ---------------------------------------------------------
   Vale quando o sistema pede escuro E o usuário não escolheu claro
   explicitamente. Sem o `:not([data-bs-theme=light])`, o botão de alternar não
   conseguiria vencer a preferência do sistema.

   A tinta inverte junto com o fundo: no escuro, "a cor da marca" é o branco.
   É por isso que `--st-brand` e `--st-bg` vivem no mesmo bloco. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --st-bg: #0d0d0f;
    --st-bg-sunken: #08080a;
    --st-surface: #151517;
    --st-surface-raised: #1c1c1f;
    --st-line: #2b2b2f;
    --st-line-strong: #45454b;
    --st-ink: #f2f2f3;
    --st-ink-muted: #a5a5ac;
    --st-ink-faint: #78787f;

    /* No escuro a lua sobe: o mesmo violeta em tom claro, com tinta escura
       em cima. É a mesma inversão que a marca já fazia quando a ação era
       preta e virava branca. */
    --st-brand: #a99cf0;
    --st-brand-rgb: 169, 156, 240;
    --st-brand-strong: #c0b6f7;
    --st-brand-soft: #8d7fd8;
    --st-brand-wash: #1d1930;
    --st-on-brand: #14121f;

    --st-danger: #ff9a92;
    --st-danger-wash: #2a1514;
    --st-success: #66d3ad;
    --st-success-wash: #10241d;
    --st-warning: #e8b45c;
    --st-warning-wash: #261c0c;

    --st-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .4);
    --st-grid: rgba(255, 255, 255, .045);
  }
}

/* Escolha explícita do usuário vence os dois lados. Repetido de propósito: um
   tema definido só dentro da media query não conseguiria ser ligado por quem
   está num sistema configurado em claro. */
:root[data-bs-theme="dark"] {
  --st-bg: #0d0d0f;
  --st-bg-sunken: #08080a;
  --st-surface: #151517;
  --st-surface-raised: #1c1c1f;
  --st-line: #2b2b2f;
  --st-line-strong: #45454b;
  --st-ink: #f2f2f3;
  --st-ink-muted: #a5a5ac;
  --st-ink-faint: #78787f;

  /* Repetido de propósito: ver a nota acima do bloco da media query. */
  --st-brand: #a99cf0;
  --st-brand-rgb: 169, 156, 240;
  --st-brand-strong: #c0b6f7;
  --st-brand-soft: #8d7fd8;
  --st-brand-wash: #1d1930;
  --st-on-brand: #14121f;

  --st-danger: #ff9a92;
  --st-danger-wash: #2a1514;
  --st-success: #66d3ad;
  --st-success-wash: #10241d;
  --st-warning: #e8b45c;
  --st-warning-wash: #261c0c;

  --st-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .4);
  --st-grid: rgba(255, 255, 255, .045);
}

/* --- Apelidos do nome antigo ---------------------------------------------
   Um alias por token, sem valor próprio: qualquer valor escrito aqui viraria
   uma segunda paleta viva pela metade. */
:root {
  --kv-bg: var(--st-bg);
  --kv-bg-sunken: var(--st-bg-sunken);
  --kv-surface: var(--st-surface);
  --kv-surface-raised: var(--st-surface-raised);
  --kv-line: var(--st-line);
  --kv-line-strong: var(--st-line-strong);
  --kv-ink: var(--st-ink);
  --kv-ink-muted: var(--st-ink-muted);
  --kv-ink-faint: var(--st-ink-faint);
  --kv-brand: var(--st-brand);
  --kv-brand-strong: var(--st-brand-strong);
  --kv-brand-soft: var(--st-brand-soft);
  --kv-brand-wash: var(--st-brand-wash);
  --kv-on-brand: var(--st-on-brand);
  --kv-danger: var(--st-danger);
  --kv-danger-wash: var(--st-danger-wash);
  --kv-success: var(--st-success);
  --kv-success-wash: var(--st-success-wash);
  --kv-info: var(--st-ink);
  --kv-shadow: var(--st-shadow);
  --kv-grid: var(--st-grid);
  --kv-font: var(--st-font);
  --kv-font-mono: var(--st-font-mono);
  --kv-text-xs: var(--st-text-xs);
  --kv-text-sm: var(--st-text-sm);
  --kv-text-base: var(--st-text-base);
  --kv-text-lg: var(--st-text-lg);
  --kv-text-xl: var(--st-text-xl);
  --kv-text-2xl: var(--st-text-2xl);
  --kv-text-3xl: var(--st-text-3xl);
  --kv-radius: var(--st-radius);
  --kv-radius-lg: var(--st-radius-lg);
  --kv-border: var(--st-border);
  --kv-space: var(--st-space);
  --kv-measure: var(--st-measure);
}

/* --- Base ---------------------------------------------------------------- */
body {
  background: var(--st-bg);
  color: var(--st-ink);
  font-family: var(--st-font);
  /* A transição existe para que alternar o tema não pisque na cara de quem lê.
     Só cor: animar layout causaria reflow. */
  transition: background-color .18s ease, color .18s ease;
}

/* Títulos e marca na fonte de display. */
h1, h2, h3, .st-display { font-family: var(--st-font-display); letter-spacing: -.03em; }

/* Dado técnico em monoespaçada — identificador, horário, saldo, contagem.
   Quem lê isso está comparando caracteres, não lendo prosa. E `tabular-nums`
   é o que faz uma coluna de valores alinhar na vertical. */
.kv-technical, .st-technical {
  font-family: var(--st-font-mono);
  font-size: .92em;
  font-variant-numeric: tabular-nums;
}

/* Grade de fundo: estrutura visível, não textura decorativa. */
.kv-grid-surface, .st-grid-surface {
  background-image:
    linear-gradient(var(--st-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--st-grid) 1px, transparent 1px);
  background-size: 42px 42px;
}

:focus-visible {
  outline: 2px solid var(--st-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   CAMADA DE VITRINE — A COR VOLTOU, E SÓ NAS LANDINGS
   21/08/2026

   O bloco no topo deste arquivo defende preto e branco, e o argumento dele
   continua de pé PARA DENTRO DO PRODUTO: numa tela de gestão, se a interface
   gasta cor consigo mesma, o vermelho de "vencido" passa a disputar com o botão
   e cor deixa de significar estado. As capturas do ERP nesta página provam o
   ponto — o único vermelho ali é "abaixo do mínimo", e ele se lê de longe.

   PARA FORA, o mesmo argumento se inverte. Uma landing não tem estado para
   comunicar; ela tem que dizer, em dois segundos, que existe uma empresa
   inteira por trás. Preto e branco com borda de 1px, no mercado que a Ukari
   disputa, não lê como sóbrio: lê como inacabado, ao lado de Bling, Tiny e
   Conta Azul.

   Por isso a divisão é por SUPERFÍCIE, e não por gosto: os tokens `--st-*`
   continuam servindo a aplicação e mantêm a regra antiga; os `--uk-*` abaixo
   existem só nas páginas públicas.

   A cor de base é a mesma violeta que já era a ação — não é paleta nova, é a
   mesma tinta com mais níveis. Um site que muda de cor para ficar bonito perde
   a marca; este ganhou profundidade da cor que já tinha.
   ========================================================================== */

:root {
  /* --- Rampa da marca ---------------------------------------------------
     Cinco níveis, e não dez: cada nível a mais é uma decisão que alguém vai
     tomar errado. 700 é pressão, 600 é a ação, 500 é o gradiente, 300 é o
     realce sobre escuro, 50 é o fundo de destaque. */
  --uk-violet-700: #241b57;
  --uk-violet-600: #3b2f7f;
  --uk-violet-500: #5442a6;
  --uk-violet-300: #a99cf0;
  --uk-violet-50:  #f2f0fd;

  /* --- Acentos de produto -----------------------------------------------
     Um matiz por produto, para que quatro cartões lado a lado se distingam
     antes de alguém ler o nome. São matizes fechados e de mesma densidade: a
     diferença tem que aparecer na vizinhança, não gritar isolada.

     O ERP fica com a violeta da marca de propósito — é o produto principal, e
     dar a ele a cor da casa é o que impede a grade de parecer quatro empresas
     em vez de quatro produtos de uma. */
  /* Por REFERÊNCIA à rampa, e não pelo hexadecimal: o `--uk-violet-600` sobe
     para #a99cf0 no tema escuro, e o valor fixo não subia junto. O acento do
     ERP ficava em 1,6:1 sobre o papel escuro — o ícone e a seta do cartão
     principal sumiam, e só do ERP, porque os outros três ganharam valor
     escuro próprio logo abaixo. */
  --uk-erp:    var(--uk-violet-600);   /* violeta — a casa */
  --uk-vault:  #1e5aa8;   /* azul — cofre */
  --uk-link:   #0f766e;   /* verde-azulado — links */
  --uk-boards: #a35a09;   /* âmbar — quadros */

  /* --- Gradiente do herói -----------------------------------------------
     Dois pontos, do violeta profundo ao quase-preto arroxeado. Sem terceiro
     ponto e sem matiz emprestado: gradiente de duas cores distantes é o que
     data uma página em dois anos. */
  --uk-gradiente: linear-gradient(152deg, #3b2f7f 0%, #2a2160 42%, #141130 100%);

  /* --- Neutros da vitrine -----------------------------------------------
     Puxados alguns graus para a violeta. Um cinza puro ao lado de uma marca
     colorida lê como cinza de sistema operacional; estes lêem como escolha. */
  --uk-papel:   #ffffff;
  --uk-fundo:   #f7f6fb;
  --uk-linha:   #e6e3f0;
  --uk-tinta:   #16142a;
  --uk-tinta-2: #55516e;
  --uk-tinta-3: #8a86a3;

  /* --- Forma -------------------------------------------------------------
     Bem mais redondo que o `--st-radius` da aplicação, e separado dele de
     propósito: mudar o raio do produto obrigaria a refazer as capturas de tela
     e mexeria na cara do ERP, que não é o que está em questão. */
  --uk-raio:    .875rem;
  --uk-raio-lg: 1.5rem;

  /* --- Profundidade ------------------------------------------------------
     Sombra em duas camadas, com a cor da tinta e não preto puro: sombra preta
     sobre fundo levemente violeta cria uma borda cinza que o olho percebe como
     sujeira. */
  --uk-sombra:  0 1px 2px rgba(22, 20, 42, .04), 0 6px 16px rgba(22, 20, 42, .06);
  --uk-sombra-alta: 0 2px 4px rgba(22, 20, 42, .05), 0 18px 44px rgba(22, 20, 42, .12);
  --uk-sombra-tela: 0 8px 20px rgba(22, 20, 42, .10), 0 40px 80px rgba(22, 20, 42, .16);
}

/* No escuro os neutros invertem e a marca sobe de nível — o violeta 600 não
   tem contraste suficiente sobre fundo escuro, e o 300 tem. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --uk-papel:   #17162a;
    --uk-fundo:   #0e0d1c;
    --uk-linha:   #2a2842;
    --uk-tinta:   #f4f3fb;
    --uk-tinta-2: #b0acc9;
    --uk-tinta-3: #807c9c;
    --uk-violet-600: #a99cf0;
    --uk-violet-700: #c0b6f7;
    --uk-violet-50:  #1f1c38;
    --uk-vault:  #7cb0f0;
    --uk-link:   #4dc4b5;
    --uk-boards: #e0a052;
    --uk-sombra:  0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .35);
    --uk-sombra-alta: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 44px rgba(0, 0, 0, .5);
    --uk-sombra-tela: 0 8px 20px rgba(0, 0, 0, .5), 0 40px 80px rgba(0, 0, 0, .6);
  }
}

:root[data-bs-theme="dark"] {
  --uk-papel:   #17162a;
  --uk-fundo:   #0e0d1c;
  --uk-linha:   #2a2842;
  --uk-tinta:   #f4f3fb;
  --uk-tinta-2: #b0acc9;
  --uk-tinta-3: #807c9c;
  --uk-violet-600: #a99cf0;
  --uk-violet-700: #c0b6f7;
  --uk-violet-50:  #1f1c38;
  --uk-vault:  #7cb0f0;
  --uk-link:   #4dc4b5;
  --uk-boards: #e0a052;
  --uk-sombra:  0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .35);
  --uk-sombra-alta: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 44px rgba(0, 0, 0, .5);
  --uk-sombra-tela: 0 8px 20px rgba(0, 0, 0, .5), 0 40px 80px rgba(0, 0, 0, .6);
}