/*
 * Design tokens (08_UX_DESIGN_SYSTEM.md). Escuro é o padrão; o atributo
 * `data-theme="light"` na raiz troca a paleta — mecanismo igual ao de
 * `whatsapp/theme.js`, tokens novos (paleta N4STi Gestão, não a do WhatsApp).
 */
:root {
    --n4-font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --n4-space-1: 4px;
    --n4-space-2: 8px;
    --n4-space-3: 12px;
    --n4-space-4: 16px;
    --n4-space-5: 24px;
    --n4-space-6: 32px;

    --n4-radius-sm: 6px;
    --n4-radius-md: 10px;
    --n4-radius-lg: 16px;

    --n4-control-height: 38px;
    --n4-sidebar-width: 248px;
    --n4-topbar-height: 60px;

    --n4-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --n4-shadow-md: 0 12px 28px rgba(0, 0, 0, .38);

    --n4-brand: #3b82f6;
    --n4-brand-strong: #2563eb;
    --n4-brand-rgb: 59, 130, 246;

    --n4-bg: #0b0d12;
    --n4-bg-2: #0f131a;
    --n4-surface: #141820;
    --n4-surface-2: #171c26;
    --n4-border: #232938;
    --n4-text: #e7ecf4;
    --n4-text-muted: #9aa4b2;

    --n4-success: #22c55e;
    --n4-warning: #f59e0b;
    --n4-danger: #ef4444;
    --n4-info: #38bdf8;
}

:root[data-theme="light"] {
    --n4-bg: #f4f6fb;
    --n4-bg-2: #eceff5;
    --n4-surface: #ffffff;
    --n4-surface-2: #f7f8fb;
    --n4-border: #dde3ee;
    --n4-text: #1a2233;
    --n4-text-muted: #5b6472;

    --n4-success: #16a34a;
    --n4-warning: #b45309;
    --n4-danger: #dc2626;
    --n4-info: #0284c7;

    --n4-shadow-sm: 0 1px 2px rgba(20, 30, 50, .08);
    --n4-shadow-md: 0 12px 28px rgba(20, 30, 50, .12);
}

html {
    background-color: var(--n4-bg);
}

body {
    background-color: var(--n4-bg);
    color: var(--n4-text);
    font-family: var(--n4-font-sans);
}

a {
    color: var(--n4-brand);
}

::selection {
    background: rgba(var(--n4-brand-rgb), .35);
}