/* Tokens de design compartilhados (Fase 1 da proposta em docs/propostas-redesign-ui.md).
   Fonte única de verdade para espaçamento, raio, sombra, superfície e cor semântica —
   as páginas devem passar a CONSUMIR estas variáveis em vez de redeclarar tokens locais
   equivalentes no topo de cada *.razor.css. Segue o mesmo padrão de tema claro/escuro já
   usado no projeto (bloco @media prefers-color-scheme + atributo data-theme no <html>). */

:root {
    /* Espaçamento — escala 4/8px */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Raio */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Superfície e texto (tema claro) */
    --surface: #ffffff;
    --surface-soft: #f3f4f6;
    --surface-muted: #f8fafc;
    --border: #eef0f4;
    --text-primary: #111827;
    --text-secondary: #6b7280;

    /* Sombra (tema claro) */
    --shadow-sm: 0 8px 28px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 18px 50px rgba(15, 23, 42, 0.16);

    /* Cor de marca do tenant — já definida em runtime; aqui só documentamos o fallback */
    --accent: var(--primary-color, #2563eb);
    --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));

    /* Cores semânticas + variante "soft" para fundo de badge/chip */
    --success: #0dcf5a;
    --success-soft: color-mix(in srgb, var(--success) 16%, var(--surface));
    --warning: #f2b700;
    --warning-soft: color-mix(in srgb, var(--warning) 18%, var(--surface));
    --danger: #e0293e;
    --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface));
    --info: #2563eb;
    --info-soft: color-mix(in srgb, var(--info) 12%, var(--surface));
    --neutral: #a855f7;
    --neutral-soft: color-mix(in srgb, var(--neutral) 12%, var(--surface));

    /* Densidade de card/tabela — "compacta" alterna estes valores (ver .density-compact) */
    --row-pad-y: var(--space-3);
    --row-pad-x: var(--space-4);
    --card-pad: var(--space-5);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface: #1a2030;
        --surface-soft: #232b40;
        --surface-muted: #171d2c;
        --border: #2a3346;
        --text-primary: #e5e9f0;
        --text-secondary: #94a3b8;
        --shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.45);
    }
}

:root[data-theme="dark"] {
    --surface: #1a2030;
    --surface-soft: #232b40;
    --surface-muted: #171d2c;
    --border: #2a3346;
    --text-primary: #e5e9f0;
    --text-secondary: #94a3b8;
    --shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* Densidade "compacta" — opt-in por classe no container (ex.: listas longas de Inventário
   ou o quadro Kanban do Painel), em vez de duplicar espaçamento por página. */
.density-compact {
    --row-pad-y: var(--space-2);
    --row-pad-x: var(--space-3);
    --card-pad: var(--space-4);
}