/* Camada 5: tema por tokens. O componente não precisa conhecer o modo ativo. */
:root {
    /* Compatibilidade premium: os componentes antigos passam a seguir o tema sem duplicar regras. */
    --saas-bg-page: var(--ui-page);
    --saas-surface: var(--ui-surface);
    --saas-surface-soft: var(--ui-surface-subtle);
    --saas-surface-muted: var(--ui-surface-muted);
    --saas-text: var(--ui-text);
    --saas-text-muted: var(--ui-text-muted);
    --saas-text-soft: var(--ui-text-soft);
    --saas-primary: var(--ui-brand);
    --saas-primary-strong: var(--ui-brand-strong);
    --saas-primary-soft: var(--ui-brand-soft);
    --saas-border: var(--ui-border);
    --saas-border-soft: var(--ui-surface-muted);
    --saas-shadow-sm: var(--ui-shadow-sm);
    --saas-shadow-lg: var(--ui-shadow-md);
    --saas-radius-sm: var(--ui-radius-sm);
    --saas-radius-md: var(--ui-radius-md);
    --saas-radius-lg: var(--ui-radius-lg);
    --saas-space-2: var(--ui-space-2);
    --saas-space-3: var(--ui-space-3);
    --saas-space-4: var(--ui-space-4);
    --saas-space-5: var(--ui-space-5);
    --saas-space-6: var(--ui-space-6);
    --saas-success-text: var(--ui-success);
    --saas-success-bg: var(--ui-success-soft);
    --saas-warning-text: var(--ui-warning);
    --saas-warning-bg: var(--ui-warning-soft);
    --saas-danger-text: var(--ui-danger);
    --saas-danger-bg: var(--ui-danger-soft);
    --saas-info-text: var(--ui-info);
    --saas-info-bg: var(--ui-info-soft);
}

body[data-theme="dark"] {
    color-scheme: dark;

    --ui-page: #0d1524;
    --ui-surface: #141f31;
    --ui-surface-subtle: #18263a;
    --ui-surface-muted: #213149;
    --ui-surface-raised: #1a2940;
    --ui-text: #edf4fc;
    --ui-text-muted: #adbbcd;
    --ui-text-soft: #8799b1;
    --ui-border: #2d4059;
    --ui-border-strong: #405772;

    --ui-brand: #69b7f0;
    --ui-brand-strong: #b9ddf8;
    --ui-brand-soft: rgba(62, 151, 214, .18);
    --ui-accent: #45d5c2;
    --ui-accent-soft: rgba(45, 212, 191, .14);
    --ui-success: #63d98a;
    --ui-success-soft: rgba(34, 197, 94, .14);
    --ui-warning: #f8c65c;
    --ui-warning-soft: rgba(245, 158, 11, .15);
    --ui-danger: #ff8595;
    --ui-danger-soft: rgba(244, 63, 94, .14);
    --ui-info: #82b6ff;
    --ui-info-soft: rgba(59, 130, 246, .16);

    --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, .22);
    --ui-shadow-sm: 0 .75rem 2rem rgba(0, 0, 0, .24);
    --ui-shadow-md: 0 1.25rem 3rem rgba(0, 0, 0, .34);
    --ui-shadow-focus: 0 0 0 .2rem rgba(105, 183, 240, .22);

    --ba-primary-dark: #8de9dd;
    --ba-warning: var(--ui-warning);
    --ba-success: var(--ui-success);
}

body[data-theme="dark"] .ui-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
}

@media (prefers-contrast: more) {
    :root { --ui-border: var(--ui-text-muted); }
    :where(a, button, input, select, textarea, summary):focus-visible { outline-width: 3px; }
}