/* Modo Dark */
[data-mode="dark"] {
    --color-bg: #0f1419;
    --color-surface: #1a1f26;
    --color-surface-2: #232a33;
    --color-surface-elevated: #2a3340;
    --color-border: #2d3742;
    --color-border-strong: #404a57;

    --color-fg: #e5e7eb;
    --color-fg-muted: #9ca3af;
    --color-fg-subtle: #6b7280;
    --color-fg-inverse: #0f1419;

    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-strong);

    --color-success: #22c55e;
    --color-success-bg: rgba(34, 197, 94, 0.12);
    --color-success-subtle: rgba(34, 197, 94, 0.08);
    --color-success-muted: rgba(34, 197, 94, 0.14);
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.12);
    --color-warning-subtle: rgba(245, 158, 11, 0.08);
    --color-warning-muted: rgba(245, 158, 11, 0.14);
    --color-danger: #ef4444;
    --color-danger-bg: rgba(239, 68, 68, 0.12);
    --color-danger-subtle: rgba(239, 68, 68, 0.10);
    --color-danger-muted: rgba(239, 68, 68, 0.16);
    --color-info: #06b6d4;
    --color-info-bg: rgba(6, 182, 212, 0.12);
    --color-info-subtle: rgba(6, 182, 212, 0.08);
    --color-info-muted: rgba(6, 182, 212, 0.14);

    /* Alias */
    --color-surface-alt: var(--color-surface-2);
    --color-text: var(--color-fg);
    --color-text-muted: var(--color-fg-muted);
    --color-text-subtle: var(--color-fg-subtle);

    --color-sidebar-bg: #0a0e13;
    --color-sidebar-fg: #9ca3af;
    --color-sidebar-fg-active: #ffffff;
    --color-sidebar-bg-active: rgba(255, 255, 255, 0.06);

    --color-topbar-bg: #1a1f26;
    --color-topbar-fg: #e5e7eb;
    --color-topbar-border: #2d3742;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
}

/* Auto: respeta preferencia del sistema */
@media (prefers-color-scheme: dark) {
    [data-mode="auto"] {
        --color-bg: #0f1419;
        --color-surface: #1a1f26;
        --color-surface-2: #232a33;
        --color-surface-elevated: #2a3340;
        --color-surface-alt: #232a33;
        --color-border: #2d3742;
        --color-border-strong: #404a57;
        --color-fg: #e5e7eb;
        --color-fg-muted: #9ca3af;
        --color-fg-subtle: #6b7280;
        --color-fg-inverse: #0f1419;
        --color-success-subtle: rgba(34, 197, 94, 0.08);
        --color-warning-subtle: rgba(245, 158, 11, 0.08);
        --color-danger-subtle: rgba(239, 68, 68, 0.10);
        --color-danger-muted: rgba(239, 68, 68, 0.16);
        --color-info-subtle: rgba(6, 182, 212, 0.08);
        --color-sidebar-bg: #0a0e13;
        --color-topbar-bg: #1a1f26;
        --color-topbar-fg: #e5e7eb;
        --color-topbar-border: #2d3742;
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    [data-mode="auto"] {
        --color-bg: #f5f6f8;
        --color-surface: #ffffff;
        --color-surface-2: #f9fafb;
        --color-border: #e5e7eb;
        --color-fg: #1f2937;
        --color-fg-muted: #6b7280;
        --color-sidebar-bg: #ffffff;
        --color-sidebar-fg: #374151;
        --color-sidebar-fg-active: #111827;
        --color-sidebar-bg-active: rgba(0, 0, 0, 0.06);
        --color-topbar-bg: #ffffff;
        --color-topbar-fg: #1f2937;
        --color-topbar-border: #e5e7eb;
    }
}