/* =========================================================
   temas.css — Variables de Color: Modo Claro y Oscuro
   ========================================================= */

/* ── MODO OSCURO (default) ────────────────────────────── */
:root,
[data-theme="dark"] {
    --bg-main:        #0F172A;
    --bg-rgb:         15,23,42;
    --card-bg:        #1E293B;
    --surface:        #162032;
    --nav-bg:         rgba(15,23,42,0.9);

    --primary:        #60A5FA;
    --primary-muted:  rgba(96,165,250,0.1);
    --primary-border: rgba(96,165,250,0.25);
    --secondary:      #818CF8;

    --text-main:      #F1F5F9;
    --text-muted:     #94A3B8;
    --border:         #334155;
    --btn-action:     #3B82F6;
}

/* ── MODO CLARO ──────────────────────────────────────── */
[data-theme="light"] {
    --bg-main:        #F5F7FA;
    --bg-rgb:         245,247,250;
    --card-bg:        #FFFFFF;
    --surface:        #F8FAFC;
    --nav-bg:         rgba(255,255,255,0.92);

    --primary:        #3B82F6;
    --primary-muted:  rgba(59,130,246,0.08);
    --primary-border: rgba(59,130,246,0.2);
    --secondary:      #6366F1;

    --text-main:      #1F2937;
    --text-muted:     #6B7280;
    --border:         #E5E7EB;
    --btn-action:     #2563EB;
}

/* ── TRANSICIONES GLOBALES ───────────────────────────── */
body, .app-navbar, .editor-panel, .welcome-card,
.drop-zone, .file-info-card, .info-feature-card,
.tool-btn, .brightness-group, .save-panel,
.dev-profile-bio, .dev-profile-stats, .pf-toast {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── SELECTION ───────────────────────────────────────── */
::selection { background: var(--primary-muted); color: var(--primary); }