/* theme.css */
:root {
    --bg: #0b1220;
    --panel: #11192a;
    --panel-elevated: #172238;
    --border: #22314e;
    --text: #dbe7ff;
    --muted: #9db2d9;
    --accent: #6aa4ff;
    --accent-2: #7cf7d4;
    --danger: #ff6b6b;
    --warning: #ffcc66;
    --success: #7cf7d4;
    --info: #7ba5ff;
    --color-bg: var(--bg);
    --color-surface: var(--panel);
    --color-surface-alt: var(--panel-elevated);
    --color-border: var(--border);
    --color-primary: var(--accent);
    --color-primary-soft: rgba(106, 164, 255, 0.18);
    --color-secondary: var(--accent-2);
    --color-text: var(--text);
    --color-text-muted: var(--muted);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--danger);
    --color-info: var(--info);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.35);
    --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

:root[data-theme="claro"] {
    --bg: #f6f7ff;
    --panel: #ffffff;
    --panel-elevated: #eef2ff;
    --border: #d4ddff;
    --text: #1c2440;
    --muted: #4a5b8a;
    --accent: #3654ff;
    --accent-2: #0f9fa6;
    --danger: #e65b5b;
    --warning: #f2a540;
    --success: #0f9fa6;
    --info: #3654ff;
    --color-bg: var(--bg);
    --color-surface: var(--panel);
    --color-surface-alt: var(--panel-elevated);
    --color-border: var(--border);
    --color-primary: var(--accent);
    --color-primary-soft: rgba(54, 84, 255, 0.14);
    --color-secondary: var(--accent-2);
    --color-text: var(--text);
    --color-text-muted: var(--muted);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--danger);
    --color-info: var(--info);
}

:root[data-theme="oscuro"] {
    --color-bg: var(--bg);
    --color-surface: var(--panel);
    --color-surface-alt: var(--panel-elevated);
    --color-border: var(--border);
    --color-primary: var(--accent);
    --color-primary-soft: rgba(106, 164, 255, 0.18);
    --color-secondary: var(--accent-2);
    --color-text: var(--text);
    --color-text-muted: var(--muted);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--danger);
    --color-info: var(--info);
}
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
}
h1 {
    font-size: 2rem;
    font-weight: 700;
}
h2 {
    font-size: 1.5rem;
    font-weight: 600;
}
h3 {
    font-size: 1.25rem;
    font-weight: 600;
}
p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge[data-variant="primary"] { background: rgba(79, 70, 229, 0.18); color: var(--color-primary); }
.badge[data-variant="success"] { background: rgba(16, 185, 129, 0.18); color: var(--color-success); }
.badge[data-variant="warning"] { background: rgba(245, 158, 11, 0.18); color: var(--color-warning); }
.badge[data-variant="danger"] { background: rgba(239, 68, 68, 0.18); color: var(--color-danger); }
.badge[data-variant="info"] { background: rgba(59, 130, 246, 0.18); color: var(--color-info); }