@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════════════════
   DARK (default)
══════════════════════════════════════════════ */
:root {
    --bg: #080808;
    --surface: #111111;
    --surface-2: #191919;
    --surface-3: #232323;
    --ink: #f0f0f0;
    --ink-2: rgba(240, 240, 240, 0.55);
    --ink-3: rgba(240, 240, 240, 0.28);
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.12);
    --accent: #CC2020;
    --accent-dim: rgba(204, 32, 32, 0.1);
    --accent-2: #e05555;
    --danger: #ff6b6b;
    --success: #34d399;
    --warning: #fbbf24;
    --radius: 8px;
    --radius-lg: 14px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --font: "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
    --grid-line: rgba(255, 255, 255, 0.022);
    --nav-bg: rgba(13, 13, 13, 0.95);
    --topbar-bg: rgba(17, 17, 17, 0.85);
    --modal-overlay: rgba(0, 0, 0, 0.65);
    --input-bg: var(--surface-2);
    --input-bg-focus: var(--surface-3);
}

/* ══════════════════════════════════════════════
   LIGHT
══════════════════════════════════════════════ */
[data-theme="light"] {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #f0f0f2;
    --surface-3: #e4e4e8;
    --ink: #111111;
    --ink-2: #555555;
    --ink-3: #999999;
    --line: rgba(0, 0, 0, 0.07);
    --line-strong: rgba(0, 0, 0, 0.13);
    --accent: #CC2020;
    --accent-dim: rgba(204, 32, 32, 0.08);
    --accent-2: #e05555;
    --danger: #dc2626;
    --success: #059669;
    --warning: #d97706;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --grid-line: rgba(0, 0, 0, 0.045);
    --nav-bg: rgba(255, 255, 255, 0.95);
    --topbar-bg: rgba(255, 255, 255, 0.9);
    --modal-overlay: rgba(0, 0, 0, 0.35);
    --input-bg: #f0f0f2;
    --input-bg-focus: #fff;
}

/* Auto: solo se aplica si no hay tema explícito (themes.css siempre fija uno) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg: #f5f5f7;
        --surface: #ffffff;
        --surface-2: #f0f0f2;
        --surface-3: #e4e4e8;
        --ink: #111111;
        --ink-2: #555555;
        --ink-3: #999999;
        --line: rgba(0, 0, 0, 0.07);
        --line-strong: rgba(0, 0, 0, 0.13);
        --accent: #CC2020;
        --accent-dim: rgba(204, 32, 32, 0.08);
        --accent-2: #e05555;
        --danger: #dc2626;
        --success: #059669;
        --warning: #d97706;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
        --grid-line: rgba(0, 0, 0, 0.045);
        --nav-bg: rgba(255, 255, 255, 0.95);
        --topbar-bg: rgba(255, 255, 255, 0.9);
        --modal-overlay: rgba(0, 0, 0, 0.35);
        --input-bg: #f0f0f2;
        --input-bg-focus: #fff;
    }
}