:root {
    color-scheme: light dark;

    /* Cores - tema claro (padrao) */
    --color-bg: #ffffff;
    --color-bg-alt: #f4f6f8;
    --color-surface: #ffffff;
    --color-border: #e2e5e9;
    --color-text: #1a1d21;
    --color-text-muted: #5c6570;
    --color-primary: #00316d;
    --color-primary-rgb: 0, 49, 109;
    --color-primary-hover: #002550;
    --color-primary-contrast: #ffffff;
    --color-accent: #ed7a1d;
    --color-success: #1c7c3f;
    --color-danger: #c62828;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

    --container-max: 1200px;
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* Dark mode automatico (preferencia do sistema) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #14171a;
        --color-bg-alt: #1b1f23;
        --color-surface: #1f2328;
        --color-border: #2c3137;
        --color-text: #eceef0;
        --color-text-muted: #9aa4ae;
        --color-primary: #00316d;
        --color-primary-rgb: 0, 49, 109;
        --color-primary-hover: #1a4d8f;
        --color-primary-contrast: #ffffff;
        --color-accent: #5ab2f2;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    }
}

/* Dark mode manual (toggle via JS, sobrepoe a preferencia do sistema) */
:root[data-theme="dark"] {
    --color-bg: #14171a;
    --color-bg-alt: #1b1f23;
    --color-surface: #1f2328;
    --color-border: #2c3137;
    --color-text: #eceef0;
    --color-text-muted: #9aa4ae;
    --color-primary: #00316d;
    --color-primary-rgb: 0, 49, 109;
    --color-primary-hover: #1a4d8f;
    --color-primary-contrast: #ffffff;
    --color-accent: #5ab2f2;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
    --color-bg: #ffffff;
    --color-bg-alt: #f4f6f8;
    --color-surface: #ffffff;
    --color-border: #e2e5e9;
    --color-text: #1a1d21;
    --color-text-muted: #5c6570;
    --color-primary: #00316d;
    --color-primary-rgb: 0, 49, 109;
    --color-primary-hover: #002550;
    --color-primary-contrast: #ffffff;
    --color-accent: #ed7a1d;
}