/*
 * Tokens base do Design System do Valora (S14-T02).
 *
 * Fonte única: `design_system/design-system.html` (seções 1 "Tipografia" e
 * 2 "Cores, Superfícies e Estados Semânticos" e 7 "Layout e Espaçamento").
 * Não consultar `design_system/refs/orbit/` diretamente (regra do projeto) —
 * todo valor abaixo foi extraído do HTML do próprio Design System.
 *
 * Mecanismo de tema: classe `.dark` na raiz do documento (o próprio Design
 * System documenta `<html class="dark">`, não `prefers-color-scheme`) — o
 * toggle de tema visível no shell (botão "sun"/"moon" no header) é quem
 * alterna essa classe. Isso é decidido pelo template base em S14-T03; este
 * arquivo só declara os dois blocos de tokens (`:root` e `.dark`).
 *
 * IMPORTANTE — tokens "-foreground" sem swatch explícito no Design System:
 * a seção 2.1 do design-system.html documenta com hex explícito apenas
 * --background, --foreground, --card, --popover, --primary, --secondary,
 * --muted, --accent, --destructive, --border, --input, --sidebar,
 * --sidebar-border (+ --ring/--sidebar-foreground/--sidebar-primary/
 * --sidebar-accent/--sidebar-ring em texto, sem swatch). Os tokens de
 * texto pareados (--card-foreground, --popover-foreground,
 * --primary-foreground, --secondary-foreground, --muted-foreground,
 * --accent-foreground, --destructive-foreground e os equivalentes de
 * --sidebar-*) são usados extensivamente nas classes reproduzidas no shell
 * (ex. `bg-primary text-primary-foreground`, `text-muted-foreground`) mas
 * não têm swatch/hex documentado na seção 2.1. Todo valor JÁ documentado
 * bate, quase byte a byte, com a fórmula OKLCH→hex do tema "neutral" padrão
 * do shadcn/ui (mesmo vocabulário de componentes — `data-slot`, sidebar,
 * card etc. — reproduzido literalmente neste Design System), com apenas
 * `--destructive` e `--ring` levemente customizados. Por isso os pares
 * "-foreground" sem swatch abaixo foram completados com o valor padrão
 * dessa mesma fórmula (marcados "inferido" no comentário ao lado) em vez de
 * inventados livremente — sem isso, classes centrais como
 * `text-muted-foreground` (a mais usada no documento inteiro) ficariam sem
 * cor definida. Se o cliente confirmar valores diferentes a partir do CSS
 * compilado real, ajustar apenas os marcados como "inferido".
 *
 * Correção S14-T03: dois dos valores "inferido" do bloco `.dark` estavam
 * incorretos na primeira extração (S14-T02) e foram corrigidos ao
 * reconferir a fórmula OKLCH→hex do tema "neutral" do shadcn/ui contra o
 * hex documentado nesta mesma página para `--ring`/`--sidebar-ring`
 * (`#737373`, que é exatamente `oklch(0.556 0 0)` — o valor de `--ring` no
 * tema padrão):
 *   - `--muted-foreground` (dark): o tema padrão usa `oklch(0.708 0 0)`
 *     para `--muted-foreground` no dark, que é o MESMO valor usado por
 *     `--ring` no LIGHT (`oklch(0.708 0 0)` = `#a1a1a1`, já documentado
 *     nesta página) — não `#a3a3a3` (typo de conversão da extração
 *     anterior). Corrigido para `#a1a1a1`.
 *   - `--destructive-foreground` (dark): o `--destructive` deste Design
 *     System já é explicitamente customizado no dark (`#ff6568`, uma
 *     tonalidade clara/alto-brilho, diferente do `--destructive` do tema
 *     padrão) — texto claro (`#fafafa`) sobre esse vermelho claro teria
 *     contraste ruim. Corrigido para `#171717` (mesmo par escuro usado por
 *     `--primary-foreground`/`--secondary-foreground` no dark), consistente
 *     com os dois templates já escritos manualmente no projeto antes desta
 *     tarefa (`contas/templates/contas/login.html` e
 *     `qualidade/templates/qualidade/_base.html`), que convergiram de forma
 *     independente para o mesmo par de valores (`#a1a1a1` / `#171717`).
 */

:root {
  /* Tipografia — família única (seção 1). Nenhuma fonte monoespaçada é
     usada na aplicação de referência. O carregamento do arquivo de fonte
     Inter (via @font-face / <link>) é responsabilidade do template base
     (S14-T03); aqui só se declara a pilha de fallback. */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Raio base do Design System (seção 2, ".--radius: .625rem é o raio base
     do design system"). A escala derivada sm/md/lg/xl abaixo segue a
     convenção padrão do shadcn/ui associada a este mesmo kit de
     componentes (mecanismo de derivação, não um valor novo). */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Cores de interface — light (`:root`), seção 2.1 */
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a; /* inferido = --foreground */
  --popover: #ffffff;
  --popover-foreground: #0a0a0a; /* inferido = --foreground */
  --primary: #171717;
  --primary-foreground: #fafafa; /* inferido */
  --secondary: #f5f5f5;
  --secondary-foreground: #171717; /* inferido = --primary */
  --muted: #f5f5f5;
  --muted-foreground: #737373; /* inferido */
  --accent: #f5f5f5;
  --accent-foreground: #171717; /* inferido = --primary */
  --destructive: #e40014;
  --destructive-foreground: #fafafa; /* inferido */
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;

  /* Sidebar (seção 2.1 — valores em texto, sem swatch, mas com hex
     explícito no documento) */
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #171717;
  --sidebar-primary-foreground: #fafafa; /* inferido */
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #171717; /* inferido */
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #a1a1a1;

  /* Dica contextual — ADIÇÃO DO PROJETO, não extraída da referência
     (Design System §2.4, 24/08/2026). Cor de identidade do balão de ajuda
     de `painel/templates/painel/componentes/dica.html`, o único ponto roxo
     da interface. Valor IDÊNTICO em light e dark de propósito: o balão tem
     de ser reconhecido como o mesmo elemento nos dois temas — por isso não
     há contraparte deste par no bloco `.dark` abaixo, e a ausência é
     deliberada, não esquecimento. Texto escuro é requisito de contraste:
     branco sobre #818cf8 dá 2,98:1 (reprova no WCAG AA), #171717 dá
     6,01:1. Escurecer o fundo e clarear o texto andam sempre em par. */
  --dica: #818cf8;
  --dica-foreground: #171717;

  /* Verde da marca — ADIÇÃO DO PROJETO (Design System §2.5, 29/08/2026).
     Cor do item ATIVO do menu lateral, do botão primário e do hover do card
     de loja. O item ativo antes usava `--sidebar-accent`, exatamente a mesma
     cor do hover, o que tornava "selecionado" e "sob o cursor"
     indistinguíveis. Idêntico em light e dark pelo mesmo motivo de `--dica`:
     é identidade, não superfície de tema, e por isso não há contraparte no
     bloco `.dark`.

     O hex É o verde do logo, medido: média dos 12.593 pixels saturados de
     `static/img/valora-marca.png` (o símbolo é um gradiente de #006f60 a
     #3fb351, sem cor chapada — a média é o que o olho integra ao olhar
     para ele).

     A primeira versão desta entrega usou #00875f, um tom da parte ESCURA
     desse mesmo gradiente, para o texto branco passar no WCAG AA (4,53:1
     contra 3,64:1 do verde real). O dono do produto recusou na hora, e com
     razão: o ponto do token é ser a cor da marca, e um verde que não é o do
     logo não cumpre o pedido por melhor que seja o seu contraste. O que
     move, então, é o TEXTO — mesma saída que `--dica` já tinha tomado:
     #171717 sobre #1e995e dá 4,93:1 e passa. Não é hex novo, é o `--primary`
     do tema claro reaproveitado.

     Consequência a lembrar: com texto escuro, o hover tem de CLAREAR (aí o
     contraste sobe para 6,35:1). Escurecer, que seria o instinto, apagaria o
     texto. */
  --marca: #1e995e;
  --marca-foreground: #171717;
  /* Hover do botão primário verde. É um TERCEIRO token, e não uma
     modificação de opacidade (`bg-marca/80`), porque o botão primário
     neutro só pode clarear no hover graças à folga que tem: #171717 sobre
     branco dá 18:1, e perder um pedaço dela não custa nada. O verde não tem
     folga, e o modificador de opacidade mistura com o FUNDO DA PÁGINA, que é
     branco num tema e quase preto no outro — o mesmo `/80` clarearia no
     claro e escureceria no escuro, andando em direções opostas com o texto
     parado. Um tom fixo mais claro sobe o contraste do texto escuro nos dois
     temas de uma vez. */
  --marca-hover: #26af6e;

  /* Séries de gráfico (seção 2.1 — "Chart series") */
  --chart-1: #f05100;
  --chart-2: #009588;
  --chart-3: #104e64;
  --chart-4: #fcbb00;
  --chart-5: #f99c00;

  /* Espaçamento de referência de cartão (seção 0/7 — `--card-spacing:
     --spacing(6)` por padrão, `--spacing(4)` em `data-size="sm"`). A
     escala numérica de espaçamento (`gap-4`, `p-6` etc.) usada em todo o
     Design System já é a escala padrão do Tailwind — não precisa de
     extensão de tema, só é documentada aqui como referência de leitura. */
  --card-spacing: 1.5rem;   /* --spacing(6) */
  --card-spacing-sm: 1rem;  /* --spacing(4) */

  /* Shell (seção 0/7) */
  --sidebar-width: 16rem;
  --sidebar-width-icon: 4rem;
  --header-height: 4rem; /* h-16 */
}

.dark {
  /* Cores de interface — dark (`.dark`), seção 2.1 */
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --card-foreground: #fafafa; /* inferido = --foreground */
  --popover: #171717;
  --popover-foreground: #fafafa; /* inferido = --foreground */
  --primary: #e5e5e5;
  --primary-foreground: #171717; /* inferido */
  --secondary: #262626;
  --secondary-foreground: #fafafa; /* inferido */
  --muted: #262626;
  --muted-foreground: #a1a1a1; /* inferido, ver nota S14-T03 no cabeçalho */
  --accent: #262626;
  --accent-foreground: #fafafa; /* inferido */
  --destructive: #ff6568;
  --destructive-foreground: #171717; /* inferido, ver nota S14-T03 no cabeçalho */
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #737373;

  /* Sidebar (seção 2.1) */
  --sidebar: #171717;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #fafafa; /* inferido */
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #fafafa; /* inferido */
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #737373;

  /* Séries de gráfico — dark (seção 2.1) */
  --chart-1: #1447e6;
  --chart-2: #00bb7f;
  --chart-3: #f99c00;
  --chart-4: #ac4bff;
  --chart-5: #ff2357;
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
}

/* ---------------------------------------------------------------------------
 * `<option>` no tema escuro
 * ---------------------------------------------------------------------------
 * Os `<select>` do painel seguem o Design System e usam `dark:bg-transparent`
 * (o mesmo tratamento dos botões `outline`). Isso funciona para o campo
 * fechado, mas não para a lista aberta: o `<option>` é desenhado pelo sistema
 * operacional, que herda o fundo transparente como **claro**, enquanto a cor
 * do texto continua sendo o `--foreground` do tema escuro — texto quase branco
 * sobre fundo branco, ilegível.
 *
 * A correção é global de propósito: são 15 `<select>` espalhados pelo painel,
 * e resolver campo a campo deixaria o próximo a nascer com o mesmo defeito.
 * Usa `--popover`, o token do Design System para superfície sobreposta, que é
 * exatamente o que a lista de opções é.
 *
 * Em `@layer base`, não solta (18/09/2026): uma regra FORA de camada vence
 * qualquer regra dentro de camada, seja qual for a especificidade — e as
 * utilidades do Tailwind v4 vivem em `@layer utilities`. Solta, esta regra
 * anulava em silêncio toda classe de cor posta num `<option>` (`text-emerald-600`
 * no seletor de loja: a classe estava no HTML, a regra existia no CSS, e a cor
 * calculada continuava a do `--popover-foreground`). Em `base`, ela segue sendo o
 * padrão de todo `<option>` e uma utilidade sobrescreve quando alguém pede.
 */
@layer base {
  select option {
    background-color: var(--popover);
    color: var(--popover-foreground);
  }
}

/* ---------------------------------------------------------------------------
 * Barra de rolagem — padrão global (18/09/2026)
 * ---------------------------------------------------------------------------
 * Fina, com trilho transparente e o polegar em `--ring`, o cinza médio do tema
 * (#a1a1a1 no claro, #737373 no escuro). A barra padrão do Windows desenha um
 * trilho claro que destoa de toda superfície escura (`--card`, `--popover`) —
 * nasceu na lista do seletor de loja e o dono do produto pediu o mesmo visual em
 * toda a aplicação. Documentado em design-system.html §6.9 e
 * docs/design-system.md, "Barra de rolagem".
 *
 * `scrollbar-color` é HERDADA: definida na raiz, vale para a página e para todo
 * `overflow-*` abaixo dela. `scrollbar-width` NÃO é herdada: precisa do `*`.
 * Em `@layer base` pela mesma razão da regra de `<option>` acima — solta, venceria
 * qualquer utilidade que um dia quisesse outra barra num ponto específico.
 */
@layer base {
  :root {
    scrollbar-color: var(--ring) transparent;
  }
  * {
    scrollbar-width: thin;
  }
}

/* ---------------------------------------------------------------------------
 * `<select>` com status colorido (`.select-com-status`)
 * ---------------------------------------------------------------------------
 * O seletor de loja de Recomendações/Revisões mostra a situação da rodada de
 * cada loja, e o dono do produto quer a COR só no status, nunca no nome
 * (18/09/2026). Um `<option>` nativo só tem texto e só aceita cor na linha
 * inteira; o "select customizável" do Chromium (`appearance: base-select`,
 * Chrome/Edge 135+) aceita um `<span>` dentro do `<option>`, e um
 * `<selectedcontent>` que repete a opção escolhida (com a cor) na caixa fechada.
 *
 * Aprimoramento progressivo: sem suporte, o navegador ignora o `<span>` (fica o
 * texto), o `<button>`/`<selectedcontent>` e este bloco — volta a ser a lista
 * nativa de sempre, sem cor. Só tokens já existentes: a lista aberta é um
 * `--popover` (a mesma superfície que a regra acima já dá às opções), e o item
 * sob o mouse ganha `--accent`, o realce das linhas de lista do Design System.
 */
@layer components {
  @supports (appearance: base-select) {
    .select-com-status,
    .select-com-status::picker(select) {
      appearance: base-select;
    }
    .select-com-status::picker(select) {
      margin-top: 0.25rem;
      max-height: 22rem;
      padding: 0.25rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background-color: var(--popover);
      color: var(--popover-foreground);
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      /* O padrão global de barra de rolagem (acima), repetido aqui porque `*`
       * não alcança o pseudo-elemento `::picker(select)`. */
      scrollbar-width: thin;
      scrollbar-color: var(--ring) transparent;
    }
    /* Nome à esquerda, status à direita: o status é o último filho e leva
     * `ml-auto` (componentes/situacao_rodada.html). O mesmo vale dentro da
     * caixa fechada, onde `<selectedcontent>` recebe uma cópia desses filhos. */
    .select-com-status option,
    .select-com-status selectedcontent {
      display: flex;
      align-items: center;
      min-width: 0;
      white-space: nowrap;
    }
    .select-com-status option {
      padding: 0.375rem 0.5rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
    }
    .select-com-status option:hover,
    .select-com-status option:focus-visible {
      background-color: var(--accent);
      color: var(--accent-foreground);
      outline: none;
    }
    .select-com-status option::checkmark {
      display: none;
    }
    /* O triângulo padrão do base-select destoa das setas nativas dos campos
     * vizinhos; menor e apagado, ele não chama mais atenção que elas. */
    .select-com-status::picker-icon {
      margin-inline-start: 0.5rem;
      font-size: 0.625rem;
      color: var(--muted-foreground);
    }
    .select-com-status selectedcontent {
      flex: 1;
      overflow: hidden;
    }
  }
}