/*
 * Tokens de cor do DonaDeSi.
 *
 * Fonte unica das cores do sistema. Nenhum outro arquivo CSS, template ou
 * componente deve escrever uma cor literal (hex/rgb/hsl) fora daqui.
 *
 * O arquivo tem tres camadas, e cada uma so enxerga a de cima:
 *
 *   primitiva (--wine-700: #941944)
 *     -> semantica (--action-primary: var(--wine-700))
 *          -> componente (--button-primary-bg: var(--action-primary))
 *
 * Na pratica isso quer dizer:
 *
 * - componente NUNCA referencia primitiva direto. Se um componente precisa de
 *   uma cor que nao existe na camada semantica, o que falta e um papel
 *   semantico, nao um atalho.
 * - trocar a paleta mexe so na primeira camada; trocar o significado de uma
 *   cor (o que e "perigo", o que e "atacado") mexe so na segunda.
 * - o modo escuro, quando entrar, reescreve so a camada semantica dentro de
 *   um `@media (prefers-color-scheme: dark)`. As outras duas ficam intactas.
 *
 * Proximo passo previsto (issue propria): extrair as primitivas para um
 * donadesi-tokens.json e gerar deste arquivo mais as constantes Python do PDF
 * de catalogo/etiqueta. Nao foi feito agora porque o gerador so se paga
 * quando existir o segundo consumidor -- hoje o CSS e o unico.
 *
 * CONTRASTE (WCAG 2.1 AA, texto normal exige 4.5:1)
 *
 * - --ochre-500 tem 3.01:1 contra branco: NUNCA recebe texto branco. Texto
 *   sobre ocre e sempre --neutral-900 (5.63:1). Quando o ocre for o texto,
 *   usar --ochre-600 (5.07:1 contra branco).
 *
 * - a familia clara de status (--status-*-bg) recebe tinta propria
 *   (--status-*-fg), nunca o --status-* saturado: os dois casos criticos
 *   (rascunho 3.66:1 e pendente 2.66:1) reprovam AA. Ver o grupo de status.
 * - --neutral-400 tem 3.02:1 contra branco: serve para borda e icone
 *   decorativo, nao para texto branco. Texto discreto usa --neutral-600
 *   (5.42:1). Quando --neutral-400 e o fundo (ex.: --badge-neutral-bg), o
 *   texto usa --neutral-900 (5.63:1).
 * - vinho, verde e vermelho passam AA com texto branco.
 */

:root {
  /* ------------------------------------------------------------------
   * 1. Primitivas -- a paleta crua. Nomeadas pela cor, nao pelo uso.
   *    Nao consumir diretamente em componente.
   * ------------------------------------------------------------------ */

  /* Vinho: a familia da marca. */
  --wine-800: #72143a;
  --wine-700: #8f1c48;
  --wine-600: #a82a56;
  --wine-100: #faeaf0;

  /* Verde: familia de apoio; --sage-200 e o tom claro da mesma matiz. */
  --green-700: #1f5a48;
  --green-600: #2d735e;
  --sage-200: #c7cad0;
  --sage-100: #e5f3ed;

  /* Ocre: destaque e atencao. */
  --ochre-600: #a86b1d;
  --ochre-500: #c48732;
  --ochre-100: #f9edd8;

  /* Vermelho de erro. Deliberadamente separado do vinho da marca (matiz 5
   * contra 340): se "excluir" e "acao principal" tiverem a mesma cor, o
   * usuario perde a unica pista visual que distingue as duas. */
  --red-600: #c23636;
  --red-100: #fbe8e8;

  /* Neutros. */
  --neutral-0: #ffffff;
  --neutral-50: #f7f8fa;
  --neutral-200: #e3e5e9;
  --neutral-400: #9ca0a9;
  --neutral-500: #777b85;
  --neutral-600: #666a73;
  --neutral-700: #474a52;
  --neutral-900: #222328;

  /* ------------------------------------------------------------------
   * 2. Semanticas -- o papel que a cor cumpre. Padrao: --categoria-papel.
   *    E aqui que se le a intencao do design.
   * ------------------------------------------------------------------ */

  /* Superficie */
  --surface-page: #f5f6f8;
  --surface-raised: var(--neutral-0);
  --surface-sunken: #f2f3f5;
  --surface-inverse: #20171c;

  /* Borda */
  --border-subtle: #ececef;
  --border-default: #dedfe4;
  --border-strong: #c9cbd2;
  --border-focus: var(--wine-700);

  /* Texto */
  --text-primary: #17181b;
  --text-secondary: var(--neutral-700);
  /* --neutral-500 da 4.24:1 contra branco e 3.92:1 contra --surface-page:
   * reprova AA para texto pequeno. O --neutral-600 da 5.42:1 e 5.01:1
   * (DON-163). A loja publica nao herda isto: body.superficie-site declara
   * o proprio --text-muted. */
  --text-muted: var(--neutral-600);
  --text-on-action: var(--neutral-0);
  --text-on-inverse: var(--neutral-0);
  /* O par abafado do anterior, para texto de apoio sobre superficie escura --
   * o --text-muted nao serve la: ele foi escolhido para abafar sobre fundo
   * claro e sobre o escuro desaparece. Nasceu na DON-028, para o titulo de
   * grupo da barra lateral, que rotula sem competir com o item clicavel. */
  --text-on-inverse-muted: #bfb5ba;
  --text-on-highlight: var(--neutral-900);
  --text-link: var(--wine-700);

  /* Acao */
  --action-primary: var(--wine-700);
  --action-primary-hover: var(--wine-800);
  --action-secondary: var(--neutral-900);
  --action-secondary-hover: var(--text-primary);
  --action-danger: var(--red-600);
  --action-disabled: var(--neutral-200);

  /* Feedback de validacao. Separado de --action-danger de proposito:
   * "excluir" (acao destrutiva que o usuario escolhe) e "este campo esta
   * invalido" (resposta do sistema a uma tentativa) sao papeis diferentes,
   * mesmo com o mesmo tom hoje. O dia em que o erro de formulario ganhar tom
   * proprio nao pode arrastar junto a cor do botao de excluir. A categoria ja
   * nasce com o nome que a DON-032 vai reusar para success e warning. */
  --feedback-error-fg: var(--red-600);
  --feedback-error-border: var(--red-600);

  /* Familia completa de feedback (DON-032). A categoria ja tinha sido criada
   * na DON-025 com o comentario acima prevendo isto -- os dois tokens de
   * `error` continuam onde estavam, e o alerta de erro os reusa em vez de
   * declarar um vermelho paralelo.
   *
   * CONTRASTE -- o aviso e o caso perigoso, e o cabecalho deste arquivo ja
   * documenta a armadilha. O ocre e a familia que nao alcanca AA facil:
   * --ochre-600 sobre --ochre-100 da 4.48:1 e REPROVA por um triz. Por isso
   * a tinta do aviso e --neutral-900 (15.01:1), nao um ocre escuro. Quem
   * trocar isto por "um ocre mais bonito" derruba
   * test_par_de_texto_do_componente_atende_contraste_aa. */
  --feedback-success-bg: var(--sage-100);
  --feedback-success-fg: var(--green-700);
  --feedback-success-border: var(--green-600);

  --feedback-error-bg: var(--red-100);

  --feedback-warning-bg: var(--ochre-100);
  --feedback-warning-fg: var(--neutral-900);
  --feedback-warning-border: var(--ochre-500);

  --feedback-info-bg: var(--neutral-50);
  --feedback-info-fg: var(--neutral-700);
  --feedback-info-border: var(--neutral-400);

  /* Carregamento (DON-031). Papel proprio, e nao "cinza claro qualquer": o
   * esqueleto imita a forma do conteudo que ainda nao chegou, e a superficie
   * dele precisa ser distinguivel da superficie da pagina -- se as duas
   * forem o mesmo tom, a tela parece vazia em vez de carregando. O brilho e
   * a faixa que atravessa o esqueleto; sobre fundo claro ele e MAIS claro
   * que a base, nao mais escuro. */
  --feedback-loading-surface: var(--neutral-200);
  --feedback-loading-highlight: var(--neutral-50);
  --feedback-loading-indicator: var(--action-primary);

  /* Acento. Usado em filete, sublinhado e indicador -- nunca como fundo de
   * area grande. O ocre ja existe como cor de selo (--badge-highlight), mas
   * papel de selo nao e papel de indicador de navegacao: um seria arrastado
   * pelo outro na primeira vez que um dos dois mudasse. */
  --accent-default: var(--ochre-500);
  /* Ocre como TINTA de texto grande (>= 18,66px em negrito): o --ochre-500
   * nao chega a 3:1 sobre as superficies claras; o --ochre-600 da 4.06:1
   * sobre --surface-page. Nao serve para texto pequeno (DON-163). */
  --accent-text-grande: var(--ochre-600);

  /* Nivel comercial (varejo, atacado, revendedora) */
  --tier-retail: var(--sage-200);
  --tier-wholesale: var(--green-700);
  --tier-reseller: var(--ochre-500);

  /* Selo */
  --badge-new: var(--green-600);
  --badge-sale: var(--wine-600);
  --badge-highlight: var(--ochre-500);
  --badge-neutral: var(--neutral-400);

  /* Status de fluxo (orcamento, pedido) */
  --status-draft: var(--neutral-500);
  --status-pending: var(--ochre-500);
  --status-approved: var(--green-600);
  --status-rejected: var(--red-600);
  --status-done: var(--green-700);

  /* Superficie clara e tinta de cada status -- o par que a pilula consome.
   * Os --status-* acima sao a cor saturada (ponto, filete, icone) e NAO
   * servem de texto sobre a propria familia clara: --status-draft sobre
   * --status-draft-bg da 3.66:1 e --status-pending sobre --status-pending-bg
   * da 2.66:1, os dois abaixo de AA. Por isso a tinta e token proprio em vez
   * de apelido do saturado -- e por isso trocar --sage-100 amanha nao obriga
   * a mexer na cor do ponto de "aprovado".
   *
   * Razoes medidas (texto normal exige 4.5:1), fixadas por
   * tests/test_static.py: rascunho 6.45 - pendente 15.01 - aprovado 5.15 -
   * recusado 5.44 - concluido 8.91.
   *
   * O pendente leva tinta escura pelo mesmo motivo do --badge-highlight-fg:
   * ocre nao suporta texto claro, e o caminho obvio (--ochre-600 sobre
   * --ochre-100) para em 4.48 -- reprovado por 0.02. */
  --status-draft-bg: var(--neutral-200);
  --status-draft-fg: var(--neutral-700);
  --status-pending-bg: var(--ochre-100);
  --status-pending-fg: var(--neutral-900);
  --status-approved-bg: var(--sage-100);
  --status-approved-fg: var(--green-600);
  --status-rejected-bg: var(--red-100);
  --status-rejected-fg: var(--red-600);
  --status-done-bg: var(--sage-100);
  --status-done-fg: var(--green-700);

  /* Estoque */
  --stock-available: var(--green-600);
  --stock-low: var(--ochre-500);
  --stock-out: var(--red-600);
  --stock-reserved: var(--wine-600);

  /* ------------------------------------------------------------------
   * 3. Componente -- o que o CSS de cada peca consome. So referencia a
   *    camada semantica.
   * ------------------------------------------------------------------ */

  /* Botao */
  --button-primary-bg: var(--action-primary);
  --button-primary-bg-hover: var(--action-primary-hover);
  --button-primary-fg: var(--text-on-action);
  --button-secondary-bg: var(--surface-raised);
  --button-secondary-bg-hover: var(--surface-sunken);
  --button-secondary-fg: var(--text-primary);
  --button-danger-bg: var(--action-danger);
  --button-danger-fg: var(--text-on-action);
  --button-disabled-bg: var(--action-disabled);
  --button-disabled-fg: var(--text-muted);

  /* Cartao */
  --card-bg: var(--surface-raised);
  --card-fg: var(--text-primary);
  --card-border: var(--border-subtle);

  /* Dialogo de confirmacao (DON-079). Reusa a superficie do cartao de
   * proposito: e o mesmo objeto conceitual -- uma superficie elevada sobre a
   * pagina --, e dar cor propria a ele criaria um segundo "branco de cima"
   * que sairia de sincronia no primeiro ajuste de tema.
   *
   * O `--dialogo-veu` e o unico valor novo: e o ::backdrop, e precisa ser uma
   * cor com alfa (nao um token de superficie opaco) para a pagina continuar
   * visivel atras, apagada. Preto com alfa nos dois temas -- no escuro um veu
   * claro faria a pagina PARECER mais acesa atras do dialogo, invertendo a
   * hierarquia que o veu existe para criar. */
  --dialogo-bg: var(--card-bg);
  --dialogo-fg: var(--card-fg);
  --dialogo-border: var(--border-default);
  --dialogo-veu: rgb(0 0 0 / 45%);

  /* Alerta (DON-032). Uma variante por papel, cada uma com fundo, tinta e
   * filete proprios. O filete e mais saturado que a tinta de proposito: ele
   * e a faixa lateral, nao texto, e por isso responde ao criterio de 3:1 de
   * componente de interface em vez dos 4.5:1 de texto. */
  --alerta-sucesso-bg: var(--feedback-success-bg);
  --alerta-sucesso-fg: var(--feedback-success-fg);
  --alerta-sucesso-border: var(--feedback-success-border);

  --alerta-erro-bg: var(--feedback-error-bg);
  --alerta-erro-fg: var(--feedback-error-fg);
  --alerta-erro-border: var(--feedback-error-border);

  --alerta-aviso-bg: var(--feedback-warning-bg);
  --alerta-aviso-fg: var(--feedback-warning-fg);
  --alerta-aviso-border: var(--feedback-warning-border);

  --alerta-info-bg: var(--feedback-info-bg);
  --alerta-info-fg: var(--feedback-info-fg);
  --alerta-info-border: var(--feedback-info-border);

  /* Carregamento -- esqueleto e girador (DON-031).
   *
   * O girador tem duas cores porque so a diferenca entre elas comunica o
   * giro: um anel de cor unica girando e um anel parado. A trilha reusa a
   * superficie do esqueleto, entao os dois estados de carregamento sao a
   * mesma familia visual. */
  --skeleton-bg: var(--feedback-loading-surface);
  --skeleton-highlight: var(--feedback-loading-highlight);
  --spinner-track: var(--feedback-loading-surface);
  --spinner-indicator: var(--feedback-loading-indicator);

  /* Campo de formulario */
  --input-bg: var(--surface-page);
  --input-fg: var(--text-primary);
  --input-border: var(--border-default);
  --input-border-focus: var(--border-focus);
  --input-border-error: var(--feedback-error-border);
  --input-error-fg: var(--feedback-error-fg);
  --input-placeholder: var(--text-muted);

  /* Selo. O -fg do highlight e do neutral apontam para --text-on-highlight,
   * e nao para --text-on-action, porque nenhum dos dois fundos (ocre e
   * neutral-400) alcanca AA com texto branco. */
  --badge-new-bg: var(--badge-new);
  --badge-new-fg: var(--text-on-action);
  --badge-sale-bg: var(--badge-sale);
  --badge-sale-fg: var(--text-on-action);
  --badge-highlight-bg: var(--badge-highlight);
  --badge-highlight-fg: var(--text-on-highlight);
  --badge-neutral-bg: var(--badge-neutral);
  --badge-neutral-fg: var(--text-on-highlight);

  /* Pilula de status. Pass-through por variante, igual ao selo: e ele que
   * permite a pilula trocar de familia de cor sem abrir componentes.css.
   * "pill" e nao "pilula" porque toda a camada de componente deste arquivo e
   * nomeada em ingles (button, card, input, table, sidebar, badge) -- o
   * portugues fica nas classes CSS, que sao o que o autor de template
   * escreve. */
  --pill-draft-bg: var(--status-draft-bg);
  --pill-draft-fg: var(--status-draft-fg);
  --pill-pending-bg: var(--status-pending-bg);
  --pill-pending-fg: var(--status-pending-fg);
  --pill-approved-bg: var(--status-approved-bg);
  --pill-approved-fg: var(--status-approved-fg);
  --pill-rejected-bg: var(--status-rejected-bg);
  --pill-rejected-fg: var(--status-rejected-fg);
  --pill-done-bg: var(--status-done-bg);
  --pill-done-fg: var(--status-done-fg);

  /* Cabecalho do site (DON-026).
   *
   * O fundo e --surface-page, e isso NAO e escolha estetica: o filete que
   * marca a categoria ativa e ocre, e ocre alcanca os 3:1 exigidos de
   * componente de interface apenas sobre branco (3.01). Sobre
   * --surface-raised ele cai para 2.83 e reprova -- o estado ativo deixaria
   * de ser perceptivel para quem enxerga pouco contraste.
   *
   * Os pares -bg/-fg sao explicitos, mesmo com tres deles apontando para a
   * mesma superficie, porque e o que permite ao teste de contraste conferir
   * cada combinacao sozinho. Sem o -bg declarado, o par nao existe para
   * PARES_DE_TEXTO_ATIVOS e a verificacao teria que ser feita a mao. */
  --header-bg: var(--surface-raised);
  --header-fg: var(--text-primary);
  --header-border: var(--border-subtle);
  --header-item-bg: var(--surface-raised);
  --header-item-fg: var(--text-secondary);
  --header-item-active-bg: var(--surface-raised);
  --header-item-active-fg: var(--action-primary);
  --header-indicator: var(--accent-default);
  --header-counter-bg: var(--action-danger);
  --header-counter-fg: var(--text-on-action);

  /* Tabela */
  --table-header-bg: var(--surface-sunken);
  --table-header-fg: var(--text-primary);
  --table-row-border: var(--border-subtle);

  /* Barra lateral do painel. O item em repouso repete o fundo escuro da
   * barra: e o -bg que faz o par entrar na verificacao de contraste, mesmo
   * quando o item nao pinta fundo nenhum. O titulo de grupo e mais claro que
   * o item de proposito -- ele rotula, nao e alvo de clique. */
  --sidebar-bg: var(--surface-inverse);
  --sidebar-fg: var(--text-on-inverse);
  --sidebar-border: var(--border-strong);
  --sidebar-item-bg: var(--surface-inverse);
  --sidebar-item-fg: var(--text-on-inverse);
  --sidebar-item-active-bg: var(--action-primary);
  --sidebar-item-active-fg: var(--text-on-action);
  --sidebar-grupo-bg: var(--surface-inverse);
  --sidebar-grupo-fg: var(--text-on-inverse-muted);

  /* Lado da marca das telas de acesso (DON-163): o tom da barra lateral do
   * painel. Elas sao renderizadas pela base publica, cujo body.superficie-site
   * troca --surface-inverse e --accent-default pelo monocromatico da loja.
   * Declarados aqui no :root, estes tokens guardam os valores do painel: a
   * var() de uma custom property e resolvida no elemento que a declara, e o
   * body herda o valor ja calculado. O tema escuro redefine as bases no mesmo
   * html, entao continua valendo. */
  --acesso-marca-bg: var(--surface-inverse);
  --acesso-marca-fg: var(--text-on-inverse);
  --acesso-marca-fg-suave: var(--text-on-inverse-muted);
  --acesso-marca-acento: var(--accent-default);

  /* Topbar do painel (DON-028). Clara, ao contrario da barra lateral: ela fica
   * colada no conteudo e um segundo bloco escuro no topo esmagaria a tela de
   * trabalho. O contador de nao lidas usa a mesma cor do contador do
   * cabecalho -- o vermelho de acao ali significa "olhe para isto". */
  --topbar-bg: var(--surface-raised);
  --topbar-fg: var(--text-primary);
  --topbar-border: var(--border-subtle);
  --topbar-item-bg: var(--surface-page);
  --topbar-item-fg: var(--text-secondary);
  --topbar-counter-bg: var(--action-danger);
  --topbar-counter-fg: var(--text-on-action);

  /* Rodape (DON-027). Superficie afundada para separar do conteudo sem
   * precisar de borda pesada. O -fg e --text-secondary porque o rodape e
   * navegacao de apoio: ler ali nao pode competir com o conteudo da pagina.
   * O titulo de coluna sobe para --text-primary, que e o que distingue o
   * cabecalho da coluna dos links dela.
   *
   * Cada variante declara o proprio -bg mesmo apontando para a mesma
   * superficie, como o cabecalho ja faz: e assim que o par entra na
   * verificacao de contraste de tests/test_static.py. */
  --footer-bg: var(--surface-sunken);
  --footer-fg: var(--text-secondary);
  --footer-border: var(--border-subtle);
  --footer-titulo-bg: var(--surface-sunken);
  --footer-titulo-fg: var(--text-primary);
  --footer-link-bg: var(--surface-sunken);
  --footer-link-fg: var(--text-link);

  /* Pagina de erro (DON-029). Superficie de pagina normal: um fundo vermelho
   * ou cinza-escuro trataria o erro como alarme, e a maioria deles e um 404 --
   * alguem errou a URL. O codigo grande usa o tom abafado porque ele e
   * decoracao: o titulo e que informa, e o numero e `aria-hidden`. */
  --error-page-bg: var(--surface-page);
  --error-page-fg: var(--text-primary);
  --error-page-texto-bg: var(--surface-page);
  --error-page-texto-fg: var(--text-secondary);
  --error-page-codigo-bg: var(--surface-page);
  --error-page-codigo-fg: var(--text-secondary);

  /* ------------------------------------------------------------------
   * Breakpoints -- a escala responsiva do produto (DON-030).
   *
   * ATENCAO: os valores abaixo NAO sao custom properties, e nao podem ser.
   * `@media (min-width: var(--bp-md))` nao funciona: a media query e
   * avaliada antes de o valor da variavel existir. `@custom-media` resolveria
   * isso, mas exige etapa de build -- e este projeto nao tem uma, por decisao
   * registrada em app/static/js/comportamentos.js. Entao a escala vive aqui
   * como CONTRATO ESCRITO, e quem a faz valer e o teste
   * tests/test_static.py::test_media_query_usa_a_escala_de_breakpoints, que
   * reprova qualquer `@media` de produto com largura fora desta lista.
   *
   *   sm    480px   celular deitado; a partir daqui cabe uma segunda coluna
   *                 estreita ou um par de acoes lado a lado.
   *   md    768px   tablet em pe. E a virada principal do sistema: o menu do
   *                 painel deixa de ser drawer e vira coluna, as categorias
   *                 do site deixam de ser drawer e viram faixa, e os
   *                 containers ganham o padding maior.
   *   lg   1024px   desktop. So largura de container e densidade; nenhuma
   *                 navegacao muda de forma aqui.
   *
   * REGRAS
   *
   * 1. Mobile-first, sempre: so `min-width`. A regra base serve a tela
   *    pequena e a media query acrescenta. `max-width` esta proibido no CSS
   *    de produto -- misturar as duas direcoes cria faixas onde as duas
   *    regras valem, e o defeito so aparece na largura exata da sobreposicao.
   *    playground.css e a unica excecao, e e CSS de desenvolvimento.
   *
   * 2. Tres larguras e o teto, nao o piso. Antes de acrescentar um
   *    breakpoint, tentar `flex-wrap`, `overflow-x: auto` ou
   *    `grid auto-fit minmax()`, que e como o cabecalho, a tabela e o rodape
   *    ja se viram hoje sem nenhuma media query. Breakpoint e para quando a
   *    forma da navegacao muda, nao para quando um espaco aperta.
   * ------------------------------------------------------------------ */

  /* ------------------------------------------------------------------
   * Espacamento -- escala usada pelo CSS estrutural (DON-023: reset,
   * layout-site.css, layout-admin.css) e, da DON-025 em diante, tambem pelo
   * CSS de componente. Duas camadas de proposito: a disciplina de tres
   * camadas deste arquivo e sobre COR, e so ela tem teste de regressao.
   * Espaco nao tem historia de tema nem segundo consumidor, entao
   * componentes.css consome --space-* direto, como layout-site.css ja faz.
   * Inventar --button-padding-inline hoje seria camada sem cliente.
   * ------------------------------------------------------------------ */

  /* Primitiva: escala numerica crua, sem significado de uso. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Semantica: o papel que o espaco cumpre no layout estrutural. */
  --spacing-stack-default: var(--space-4);
  --spacing-container-padding-inline: var(--space-4);
  --spacing-region-gap: var(--space-5);

  /* ------------------------------------------------------------------
   * Raio de borda -- mesma disciplina da escala de espacamento: primitiva
   * numerica crua, semantica pelo papel, sem camada de componente. Entra
   * aqui porque a DON-025 e a primeira issue com seis pecas arredondadas;
   * sem isto o 4px solto de .pular-para-conteudo viraria seis literais.
   * ------------------------------------------------------------------ */

  /* Primitiva: escala numerica crua, sem significado de uso. */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-full: 999px;

  /* Semantica: o papel que a peca cumpre, nao o tamanho do canto. */
  --corner-control: var(--radius-1);
  --corner-surface: var(--radius-2);
  --corner-pill: var(--radius-full);
}

/* Tema escuro: mantem os mesmos papeis semanticos e troca somente as
 * superficies. O atributo e definido antes da primeira pintura nos layouts
 * base; por isso nao ha clarão claro ao abrir o painel em tema escuro. */
html[data-theme="dark"] {
  color-scheme: dark;

  --surface-page: #101114;
  --surface-raised: #181a1f;
  --surface-sunken: #1d1f25;
  --surface-inverse: #171116;
  --border-subtle: #292b31;
  --border-default: #343740;
  --border-strong: #464a55;
  --border-focus: #c85880;
  --text-primary: #f4f1f3;
  --text-secondary: #c7c2c5;
  --text-muted: #918b8f;
  --accent-text-grande: var(--accent-default);
  --text-on-inverse: #ffffff;
  --text-on-inverse-muted: #aaa1a6;
  --text-on-highlight: #17181b;
  --text-link: #d05a84;
  --action-primary: #b53667;
  --action-primary-hover: #ca4677;
  --action-secondary: #f0edf0;
  --action-secondary-hover: #ffffff;
  --action-danger: #c23636;
  --action-disabled: #272a31;
  --feedback-success-bg: #162a23;
  --feedback-success-fg: #7bc4a8;
  --feedback-success-border: #7bc4a8;
  --feedback-error-bg: #30191b;
  --feedback-error-fg: #ef8989;
  --feedback-error-border: #ef8989;
  --feedback-warning-bg: #2d2413;
  --feedback-warning-fg: #f5dfae;
  --feedback-warning-border: #e0b45e;
  --feedback-info-bg: #20232a;
  --feedback-info-fg: #d0d2d8;
  --feedback-info-border: #6f737d;
  --status-draft-bg: #30333b;
  --status-draft-fg: #e2e3e7;
  --status-pending-bg: #2d2413;
  --status-pending-fg: #f5dfae;
  --status-approved-bg: #162a23;
  --status-approved-fg: #7bc4a8;
  --status-rejected-bg: #30191b;
  --status-rejected-fg: #ef8989;
  --status-done-bg: #162a23;
  --status-done-fg: #7bc4a8;
  --pill-draft-bg: var(--status-draft-bg);
  --pill-draft-fg: var(--status-draft-fg);
  --pill-pending-bg: var(--status-pending-bg);
  --pill-pending-fg: var(--status-pending-fg);
  --pill-approved-bg: var(--status-approved-bg);
  --pill-approved-fg: var(--status-approved-fg);
  --pill-rejected-bg: var(--status-rejected-bg);
  --pill-rejected-fg: var(--status-rejected-fg);
  --pill-done-bg: var(--status-done-bg);
  --pill-done-fg: var(--status-done-fg);
  --badge-neutral-bg: #454951;
  --badge-neutral-fg: #fafafa;
  --button-secondary-bg: var(--surface-raised);
  --button-secondary-bg-hover: var(--surface-sunken);
  --button-secondary-fg: var(--text-primary);
  --input-bg: var(--surface-raised);
  --input-fg: var(--text-primary);
  --input-border: var(--border-default);
  --input-placeholder: var(--text-muted);
  --card-bg: var(--surface-raised);
  --card-fg: var(--text-primary);
  --card-border: var(--border-subtle);
  /* O veu segue preto no tema escuro -- ver o comentario na definicao. */
  --dialogo-bg: var(--card-bg);
  --dialogo-fg: var(--card-fg);
  --dialogo-border: var(--border-default);
  --dialogo-veu: rgb(0 0 0 / 60%);
  --table-header-bg: var(--surface-sunken);
  --table-header-fg: var(--text-muted);
  --table-row-border: var(--border-subtle);
  --header-bg: var(--surface-raised);
  --header-fg: var(--text-primary);
  --header-border: var(--border-subtle);
  --header-item-bg: var(--surface-raised);
  --header-item-fg: var(--text-secondary);
  --header-item-active-bg: var(--surface-raised);
  --header-item-active-fg: var(--action-primary);
  --topbar-bg: var(--surface-raised);
  --topbar-fg: var(--text-primary);
  --topbar-border: var(--border-subtle);
  --topbar-item-bg: var(--surface-raised);
  --topbar-item-fg: var(--text-secondary);
  --sidebar-bg: var(--surface-inverse);
  --sidebar-fg: var(--text-on-inverse);
  --sidebar-border: #34303a;
  --sidebar-item-bg: var(--surface-inverse);
  --sidebar-item-fg: #d8cfd3;
  --sidebar-item-active-bg: #33202a;
  --sidebar-item-active-fg: #ffffff;
  --sidebar-grupo-bg: var(--surface-inverse);
  --sidebar-grupo-fg: #9e9298;
}

/* Loja pública monocromática. O painel conserva seus papéis operacionais.
 * Os aliases de componente são declarados nesta superfície também: uma
 * custom property herdada já foi resolvida no ancestral e não reavalia
 * automaticamente var(--action-primary) quando o body troca a semântica.
 */
body.superficie-site {
  color-scheme: light;
  --surface-page: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f5f5f5;
  --surface-inverse: #171717;
  --border-subtle: #e5e5e5;
  --border-default: #d4d4d4;
  --border-strong: #737373;
  --border-focus: #171717;
  --text-primary: #171717;
  --text-secondary: #525252;
  --text-muted: #666666;
  --text-on-action: #ffffff;
  --text-on-inverse: #ffffff;
  --text-on-inverse-muted: #d4d4d4;
  --text-on-highlight: #171717;
  --text-link: var(--text-primary);
  --action-primary: #171717;
  --action-primary-hover: #333333;
  --action-secondary: #171717;
  --action-secondary-hover: #333333;
  --action-danger: #171717;
  --action-disabled: #e5e5e5;
  --accent-default: var(--text-primary);
  --feedback-error-fg: var(--text-primary);
  --feedback-error-border: var(--border-strong);
  --feedback-error-bg: var(--surface-sunken);
  --feedback-success-fg: var(--text-primary);
  --feedback-success-border: var(--border-strong);
  --feedback-success-bg: var(--surface-sunken);
  --feedback-warning-fg: var(--text-primary);
  --feedback-warning-border: var(--border-strong);
  --feedback-warning-bg: var(--surface-sunken);
  --feedback-info-fg: var(--text-primary);
  --feedback-info-border: var(--border-strong);
  --feedback-info-bg: var(--surface-sunken);
  --feedback-loading-surface: var(--border-subtle);
  --feedback-loading-highlight: var(--surface-raised);
  --feedback-loading-indicator: var(--text-primary);
  --tier-retail: var(--text-primary);
  --tier-wholesale: var(--text-primary);
  --tier-reseller: var(--text-primary);
  --badge-new: var(--text-primary);
  --badge-sale: var(--text-primary);
  --badge-highlight: var(--border-subtle);
  --badge-neutral: var(--border-subtle);
  --stock-available: var(--text-primary);
  --stock-low: var(--text-primary);
  --stock-out: var(--text-primary);
  --stock-reserved: var(--text-primary);
  --status-draft: var(--text-primary);
  --status-pending: var(--text-primary);
  --status-approved: var(--text-primary);
  --status-rejected: var(--text-primary);
  --status-done: var(--text-primary);
  --status-draft-bg: var(--surface-sunken);
  --status-draft-fg: var(--text-primary);
  --status-pending-bg: var(--surface-sunken);
  --status-pending-fg: var(--text-primary);
  --status-approved-bg: var(--surface-sunken);
  --status-approved-fg: var(--text-primary);
  --status-rejected-bg: var(--surface-sunken);
  --status-rejected-fg: var(--text-primary);
  --status-done-bg: var(--surface-sunken);
  --status-done-fg: var(--text-primary);
  --font-display: Georgia, "Times New Roman", serif;

  --button-primary-bg: var(--action-primary);
  --button-primary-bg-hover: var(--action-primary-hover);
  --button-primary-fg: var(--text-on-action);
  --button-secondary-bg: var(--surface-raised);
  --button-secondary-bg-hover: var(--surface-sunken);
  --button-secondary-fg: var(--text-primary);
  --button-danger-bg: var(--action-danger);
  --button-danger-fg: var(--text-on-action);
  --button-disabled-bg: var(--action-disabled);
  --button-disabled-fg: var(--text-muted);
  --card-bg: var(--surface-raised);
  --card-fg: var(--text-primary);
  --card-border: var(--border-subtle);
  --input-bg: var(--surface-raised);
  --input-fg: var(--text-primary);
  --input-border: var(--border-default);
  --input-border-focus: var(--border-focus);
  --input-border-error: var(--feedback-error-border);
  --input-error-fg: var(--feedback-error-fg);
  --input-placeholder: var(--text-muted);
  --header-bg: var(--surface-raised);
  --header-fg: var(--text-primary);
  --header-border: var(--border-subtle);
  --header-item-bg: var(--surface-raised);
  --header-item-fg: var(--text-secondary);
  --header-item-active-bg: var(--surface-raised);
  --header-item-active-fg: var(--text-primary);
  --header-indicator: var(--text-primary);
  --header-counter-bg: var(--text-primary);
  --header-counter-fg: var(--text-on-action);
  --footer-bg: var(--surface-sunken);
  --footer-fg: var(--text-secondary);
  --footer-border: var(--border-subtle);
  --footer-titulo-bg: var(--surface-sunken);
  --footer-titulo-fg: var(--text-primary);
  --footer-link-bg: var(--surface-sunken);
  --footer-link-fg: var(--text-primary);
  --error-page-bg: var(--surface-page);
  --error-page-fg: var(--text-primary);
  --error-page-texto-bg: var(--surface-page);
  --error-page-texto-fg: var(--text-secondary);
  --error-page-codigo-bg: var(--surface-page);
  --error-page-codigo-fg: var(--text-secondary);
  --alerta-sucesso-bg: var(--feedback-success-bg);
  --alerta-sucesso-fg: var(--feedback-success-fg);
  --alerta-sucesso-border: var(--feedback-success-border);
  --alerta-erro-bg: var(--feedback-error-bg);
  --alerta-erro-fg: var(--feedback-error-fg);
  --alerta-erro-border: var(--feedback-error-border);
  --alerta-aviso-bg: var(--feedback-warning-bg);
  --alerta-aviso-fg: var(--feedback-warning-fg);
  --alerta-aviso-border: var(--feedback-warning-border);
  --alerta-info-bg: var(--feedback-info-bg);
  --alerta-info-fg: var(--feedback-info-fg);
  --alerta-info-border: var(--feedback-info-border);
  --skeleton-bg: var(--feedback-loading-surface);
  --skeleton-highlight: var(--feedback-loading-highlight);
  --spinner-track: var(--feedback-loading-surface);
  --spinner-indicator: var(--feedback-loading-indicator);
  --badge-new-bg: var(--badge-new);
  --badge-new-fg: var(--text-on-action);
  --badge-sale-bg: var(--badge-sale);
  --badge-sale-fg: var(--text-on-action);
  --badge-highlight-bg: var(--badge-highlight);
  --badge-highlight-fg: var(--text-on-highlight);
  --badge-neutral-bg: var(--badge-neutral);
  --badge-neutral-fg: var(--text-on-highlight);
  --pill-draft-bg: var(--status-draft-bg);
  --pill-draft-fg: var(--status-draft-fg);
  --pill-pending-bg: var(--status-pending-bg);
  --pill-pending-fg: var(--status-pending-fg);
  --pill-approved-bg: var(--status-approved-bg);
  --pill-approved-fg: var(--status-approved-fg);
  --pill-rejected-bg: var(--status-rejected-bg);
  --pill-rejected-fg: var(--status-rejected-fg);
  --pill-done-bg: var(--status-done-bg);
  --pill-done-fg: var(--status-done-fg);
}

html[data-theme="dark"] body.superficie-site {
  color-scheme: dark;
  --surface-page: #101010;
  --surface-raised: #1c1c1c;
  --surface-sunken: #242424;
  --surface-inverse: #101010;
  --border-subtle: #333333;
  --border-default: #444444;
  --border-strong: #a3a3a3;
  --border-focus: #fafafa;
  --text-primary: #fafafa;
  --text-secondary: #bdbdbd;
  --text-muted: #b0b0b0;
  --text-on-action: #101010;
  --text-on-inverse: #fafafa;
  --text-on-inverse-muted: #bdbdbd;
  --text-on-highlight: #fafafa;
  --action-primary: #fafafa;
  --action-primary-hover: #d4d4d4;
  --action-secondary: #fafafa;
  --action-secondary-hover: #d4d4d4;
  --action-danger: #fafafa;
  --action-disabled: #333333;
}