/* ─── Basis: donkere modus (standaard) ──────────────────────────────── */
body {
    background-color: #0f172a;
    color: #f1f5f9;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

header {
    background-color: #1e293b;
    border-bottom: 1px solid #334155;
}

.card {
    background-color: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

footer {
    border-top: 1px solid #334155;
    color: #64748b;
}

kbd {
    background-color: #334155;
    color: #cbd5e1;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* ─── Lichte modus ────────────────────────────────────────────────── */
body:not(.dark) {
    background-color: #f1f5f9;
    color: #0f172a;
}

body:not(.dark) header {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

body:not(.dark) .card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}

body:not(.dark) footer {
    border-top: 1px solid #e2e8f0;
    color: #94a3b8;
}

body:not(.dark) kbd {
    background-color: #e2e8f0;
    color: #475569;
}

/* Subteksten lichter in lichte modus */
body:not(.dark) .text-gray-400,
body:not(.dark) .text-gray-500 {
    color: #64748b !important;
}

body:not(.dark) .text-gray-600 {
    color: #94a3b8 !important;
}

/* ─── Kopieer knop ───────────────────────────────────────────────── */
#copyBtn {
    background-color: #4f46e5;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 150ms ease;
}
#copyBtn:hover {
    background-color: #4338ca;
}

/* ─── Dark mode knop ─────────────────────────────────────────────── */
#darkBtn {
    background-color: #334155;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 150ms ease;
}
#darkBtn:hover {
    background-color: #475569;
}

body:not(.dark) #darkBtn {
    background-color: #e2e8f0;
}
body:not(.dark) #darkBtn:hover {
    background-color: #cbd5e1;
}

/* ─── IP adres display ───────────────────────────────────────────── */
#ipDisplay {
    cursor: pointer;
    color: #f1f5f9;
    transition: color 150ms ease;
}
#ipDisplay:hover {
    color: #6366f1;
}

body:not(.dark) #ipDisplay {
    color: #0f172a;
}

/* ─── Toast animatie ─────────────────────────────────────────────── */
#copyToast {
    transition: opacity 300ms ease;
}

/* ─── CTA bladwijzer blok ────────────────────────────────────────── */
.cta-bladwijzer {
    border: 1px solid rgba(99, 102, 241, 0.35);
    background-color: rgba(99, 102, 241, 0.08);
    border-radius: 1rem;
    padding: 1.25rem;
    text-align: center;
}

body:not(.dark) .cta-bladwijzer {
    background-color: rgba(99, 102, 241, 0.06);
}

/* ─── Kaart subtitels ────────────────────────────────────────────── */
.card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin-bottom: 0.75rem;
}

body:not(.dark) .card-label {
    color: #94a3b8;
}

/* ─── PWA standalone ─────────────────────────────────────────────── */
@media (display-mode: standalone) {
    header {
        padding-top: env(safe-area-inset-top, 1rem);
    }
}