/* ============================================
   CASHVIEW — TOKENS

   Light/dark via [data-theme] no <html> (anti-FOUC em App.razor, sincronizado
   com o MudThemeProvider em MainLayout.ToggleTheme).

   A paleta da aplicação vive em Components/Layout/CashViewTheme.cs
   (--mud-palette-*). Aqui ficam só os tokens que o CSS próprio consome.

   DIREÇÃO: claro e arejado. Tela cinza-clarissima, cartão BRANCO, e o que
   separa um do outro é o degrau de luminância mais um fio de borda — não
   caixa desenhada. Cinza neutro, sem viés azul: cinza azulado (slate) puxa
   a tela pro "app escuro de dev", e o pedido é o contrario disso.
   ============================================ */

:root,
[data-theme="light"] {
    /* Marca — laranja, igual nos dois temas. Destaque PONTUAL: botão de ação,
       item ativo do menu, anel de foco, barra de gráfico. Não é cor de
       superfície, não é cor de número. */
    --cv-accent: #f97316;

    /* Preenchimento do estado ativo: o laranja a 10%, não o laranja cheio.
       Seleção se marca por tinta suave + texto na cor, não por bloco chapado. */
    --cv-accent-soft: rgba(249, 115, 22, 0.10);

    /* Base pintada no body (app.css) */
    --sl-bg: #f5f5f7;
    --sl-text: #1d1d1f;

    /* Fio de separação. Borda de cartão não precisa ser vista — precisa ser
       percebida. 7% de preto é o que sobra depois que você para de olhar. */
    --cv-hairline: rgba(0, 0, 0, 0.07);

    /* Sombra de cartão: um fio de profundidade, não uma sombra. O que dá
       hierarquia aqui é o branco do cartão contra o cinza da tela. */
    --cv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03);

    /* Sobreposição de verdade (menu, diálogo, popover) — aí sim sombra. */
    --cv-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);

    /* Raios. Cartão mais redondo que controle: é o que separa "superfície" de
       "coisa que se clica" sem precisar de borda mais forte. */
    --cv-radius-card: 12px;
    --cv-radius-control: 10px;
    --cv-radius-chip: 8px;

    /* ── Espelho de --mud-palette-* para markup PRÓPRIO ─────────────────────
       Os mesmos valores da paleta em CashViewTheme.cs, repetidos aqui de
       propósito. Motivo: --mud-palette-* só existe depois que o
       MudThemeProvider renderiza, e ele lê o tema salvo em OnAfterRender —
       markup próprio que dependa dele pisca no tema errado no primeiro
       paint. Estes seguem o data-theme que o anti-FOUC (App.razor) crava no
       <html> antes de qualquer render.

       Quem usa componente Mud continua usando --mud-palette-*. Estes são para
       o CSS de página (o Login é todo <input> nativo, sem componente Mud).
       Mudou lá, muda aqui. */
    --cv-surface: #ffffff;
    --cv-text-secondary: #6e6e73;
    --cv-field-border: #d8d8de;
    --cv-accent-hover: #ea580c;
    --cv-error: #d70015;
}

/* Dark neutro (cinza, não slate). Base quase preta, superfície um degrau
   acima, e nada de brilho de fundo: o que separa camada de camada é
   luminância e fio de borda, que continua legível em tela ruim e projetor. */
[data-theme="dark"] {
    --sl-bg: #161618;
    --sl-text: #f5f5f7;

    --cv-accent-soft: rgba(249, 115, 22, 0.16);
    --cv-hairline: rgba(255, 255, 255, 0.09);
    --cv-shadow-card: none;
    --cv-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);

    --cv-surface: #1f1f21;
    --cv-text-secondary: #a1a1a6;
    --cv-field-border: #48484a;
    /* No escuro o hover CLAREIA — escurecer sobre fundo preto não se vê. */
    --cv-accent-hover: #fb923c;
    --cv-error: #ff453a;
}

[data-theme="dark"] body {
    background-color: var(--sl-bg);
}