/* themes.css — Named themes */

/* ── Noir (oscuro, rojo) — DEFAULT ────────────────────────── */
[data-theme="noir"] {
    --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;
    --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
    --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);
}

/* ── Marble (claro, rojo) ─────────────────────────────────── */
[data-theme="marble"] {
    --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, .06), 0 4px 12px rgba(0, 0, 0, .06);
    --shadow-lg: 0 8px 32px rgba(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;
}

/* ── Ember (oscuro, naranja) ──────────────────────────────── */
[data-theme="ember"] {
    --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: #E8762A;
    --accent-dim: rgba(232, 118, 42, 0.12);
    --accent-2: #f0a06a;
    --danger: #ff6b6b;
    --success: #34d399;
    --warning: #fbbf24;
    --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
    --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);
}

/* ── Ocean (oscuro, azul) ─────────────────────────────────── */
[data-theme="ocean"] {
    --bg: #060c14;
    --surface: #0d1520;
    --surface-2: #141d2c;
    --surface-3: #1c2638;
    --ink: #e8f0f8;
    --ink-2: rgba(232, 240, 248, 0.55);
    --ink-3: rgba(232, 240, 248, 0.28);
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.12);
    --accent: #2563EB;
    --accent-dim: rgba(37, 99, 235, 0.15);
    --accent-2: #5b8ef5;
    --danger: #ff6b6b;
    --success: #34d399;
    --warning: #fbbf24;
    --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
    --grid-line: rgba(255, 255, 255, 0.02);
    --nav-bg: rgba(6, 12, 20, 0.95);
    --topbar-bg: rgba(13, 21, 32, 0.85);
    --modal-overlay: rgba(0, 0, 0, 0.65);
    --input-bg: var(--surface-2);
    --input-bg-focus: var(--surface-3);
}

/* ── Forest (oscuro, verde) ───────────────────────────────── */
[data-theme="forest"] {
    --bg: #050e08;
    --surface: #0d1810;
    --surface-2: #142018;
    --surface-3: #1c2c22;
    --ink: #e8f5ec;
    --ink-2: rgba(232, 245, 236, 0.55);
    --ink-3: rgba(232, 245, 236, 0.28);
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.12);
    --accent: #10B981;
    --accent-dim: rgba(16, 185, 129, 0.12);
    --accent-2: #34d399;
    --danger: #ff6b6b;
    --success: #34d399;
    --warning: #fbbf24;
    --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
    --grid-line: rgba(255, 255, 255, 0.02);
    --nav-bg: rgba(5, 14, 8, 0.95);
    --topbar-bg: rgba(13, 24, 16, 0.85);
    --modal-overlay: rgba(0, 0, 0, 0.65);
    --input-bg: var(--surface-2);
    --input-bg-focus: var(--surface-3);
}

/* ── Dusk (oscuro, morado) ────────────────────────────────── */
[data-theme="dusk"] {
    --bg: #08060e;
    --surface: #110e1a;
    --surface-2: #181425;
    --surface-3: #211c32;
    --ink: #ece8f8;
    --ink-2: rgba(236, 232, 248, 0.55);
    --ink-3: rgba(236, 232, 248, 0.28);
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.12);
    --accent: #7C3AED;
    --accent-dim: rgba(124, 58, 237, 0.15);
    --accent-2: #a78bfa;
    --danger: #ff6b6b;
    --success: #34d399;
    --warning: #fbbf24;
    --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
    --grid-line: rgba(255, 255, 255, 0.02);
    --nav-bg: rgba(8, 6, 14, 0.95);
    --topbar-bg: rgba(17, 14, 26, 0.85);
    --modal-overlay: rgba(0, 0, 0, 0.65);
    --input-bg: var(--surface-2);
    --input-bg-focus: var(--surface-3);
}