/* =========================
   🌙 DARK TOGGLE
========================= */

.dark-toggle {
    margin-left: 10px;
    border: 1px solid rgba(148,163,184,0.3);
    background: rgba(2,6,23,0.6);
    color: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    transition: 0.2s;
}

.dark-toggle:hover {
    background: rgba(59,130,246,0.2);
}

/* =========================
   ☀️ LIGHT MODE
========================= */

body.light-mode {
    --bg-0: #f8fafc;
    --bg-1: #ffffff;
    --bg-2: #f1f5f9;

    --card: rgba(255,255,255,0.9);

    --text: #0f172a;
    --text-soft: #334155;
    --text-muted: #64748b;

    background: #f1f5f9;
    color: #0f172a;
}

/* Cards heller */
body.light-mode .scan-card,
body.light-mode .quiz-card,
body.light-mode .hero-card {
    background: #ffffff;
    border-color: rgba(148,163,184,0.3);
}

/* Buttons bleiben nice */
body.light-mode .btn-primary,
body.light-mode .quiz-start-btn {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
}