/* CSS custom properties — light and dark mode (§10.2) */
:root,
[data-bs-theme="light"] {
    --bg-color:     #ffffff;
    --text-color:   rgba(0, 0, 0, 0.88);
    --panels-color: #f2f2f2;
    --accent-color: #a82ee6;
    --shine-color:  #4595e6;
    --link-color:   #4136d9;
    --border-color: #e0e0e0;
    --input-bg:     rgba(153, 106, 175, 0.08);
}

[data-bs-theme="dark"] {
    --bg-color:     rgba(22, 20, 20, 0.96);
    --text-color:   #ffffff;
    --panels-color: #432d59;
    --accent-color: #a82ee6;
    --shine-color:  #4595e6;
    --link-color:   var(--shine-color);
    --border-color: #3a3a3a;
    --input-bg:     rgba(126, 92, 230, 0.12);
}

/* Bootstrap variable overrides */
[data-bs-theme="dark"] {
    --bs-body-bg:    var(--bg-color);
    --bs-body-color: var(--text-color);
    --bs-link-color: var(--link-color);
}

body { background-color: var(--bg-color); color: var(--text-color); }
a    { color: var(--link-color); }

/* Navbar */
.navbar { background-color: var(--panels-color) !important; border-bottom: 1px solid var(--border-color); }

/* Cards */
.card { background-color: var(--panels-color); border-color: var(--border-color); }

/* Form inputs */
.form-control, .form-select {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Accent button */
.btn-accent { background-color: var(--accent-color); color: #fff; border: none; }
.btn-accent:hover { background-color: #8e25c5; color: #fff; }

/* Honeypot field — hidden from humans, visible to bots */
.website-field { position: absolute; left: -9999px; }

/* Comment indentation */
.comment-indent-1 { margin-left: 20px; }
.comment-indent-2 { margin-left: 40px; }
.comment-indent-3 { margin-left: 60px; }
.comment-indent-4 { margin-left: 80px; }
.comment-indent-5 { margin-left: 100px; }

/* Progress bar accent */
.progress-bar { background-color: var(--accent-color); }

/* Code blocks */
pre { background-color: var(--panels-color); padding: 1rem; border-radius: 4px; overflow-x: auto; }