/* assets/css/contrast-fix-2025.css */
/* Purpose: Raise text & form control contrast for dark UI (WCAG AA 4.5:1+) */
/* Scope: Safe sitewide, but tuned for Box Breathing page. */

/* ---------- Base text & backgrounds ---------- */
:root {
    --mpl-bg: #0b1220;
    --mpl-surface: #121a29;
    --mpl-panel: #162133;
    --mpl-border: #334155;
    /* slate-600 */
    --mpl-text: #e7eef9;
    /* very light */
    --mpl-muted: #c2cddb;
    /* for help text */
    --mpl-link: #384961;
    /* accessible on dark */
    --mpl-accent: #37485f;
    /* green buttons */
    --mpl-focus: #3B82F7;
    /* focus ring */
}

html,
body {
    color: var(--mpl-text);
    background-color: var(--mpl-bg);
}

/* Links */
a,
a:visited {
    color: var(--mpl-link);
}

a:hover,
a:focus {
    text-decoration: underline;
}

/* Headings and section titles */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--mpl-text);
}

/* “Muted” copy (tips, small notes) */
.muted,
.subtle,
small,
.hint,
.note {
    color: var(--mpl-muted);
}

/* ---------- Panels / cards seen on the setup area ---------- */
.card,
.panel,
.setup,
.ui-panel,
.box,
.bb-setup,
.bb-card {
    background: rgba(22, 33, 51, 0.96);
    /* nearly opaque; fixes low-contrast over backdrop */
    border: 1px solid var(--mpl-border);
    color: var(--mpl-text);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Field labels, control captions */
label,
.field-label,
.control-label {
    color: var(--mpl-text);
}

/* ---------- Form controls ---------- */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="tel"],
select,
textarea {
    color: var(--mpl-text);
    background-color: #1f2937;
    /* slate-900 */
    border: 1px solid var(--mpl-border);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: #111315;
}

/* accessible placeholder */

select option {
    color: var(--mpl-text);
    background-color: #1f2937;
}

/* Disabled controls remain readable */
:disabled,
[disabled] {
    color: #21272f !important;
    background-color: #1f2937 !important;
    border-color: #090c10 !important;
    opacity: 1 !important;
}

/* ---------- Buttons ---------- */
button,
.button,
.btn {
    color: #0b1220;
    /* dark text on green */
    background: var(--mpl-accent);
    border: 1px solid #1f2937;
    /* slightly darker green */
}

button.secondary,
.btn.secondary {
    color: var(--mpl-text);
    background: #1f2937;
    /* gray-800 */
    border: 1px solid var(--mpl-border);
}

/* High-contrast disabled buttons */
button:disabled,
.btn:disabled,
.button[disabled] {
    color: #06090c;
    background: #1f2937;
    border-color: #12171f;
}

/* ---------- Range slider (volume, etc.) ---------- */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 2px;
    background: #1f2937;
    border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--mpl-accent);
    border-radius: 50%;
    border: 1px solid #386092;
}

input[type="range"]::-moz-range-track {
    height: 2px;
    background: #1f2937;
    border: none;
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mpl-accent);
    border: 1px solid #3c6598;
}

/* ---------- Focus states (keyboard) ---------- */
:where(a, button, input, select, textarea, [tabindex]) :focus,
:where(a, button, input, select, textarea, [tabindex]):focus {
    outline: 2px solid var(--mpl-focus);
    outline-offset: 2px;
}

/* ---------- Specific fixes for the Box Breathing setup ---------- */
/* Quick-session bar & dropdown text */
.quick-session,
.quick-session * {
    color: var(--mpl-text);
}

.quick-session select {
    background-color: #1f2937;
    border-color: var(--mpl-border);
}

/* “Voice coach (TTS)”, “Ambience”, “Focus mode” rows */
.settings-row,
.settings-grid,
.controls-row {
    color: var(--mpl-text);
}

.settings-row label,
.settings-grid label {
    color: var(--mpl-text);
}

/* Tip paragraphs inside the panel */
.panel .tip,
.box .tip,
.setup .tip {
    color: var(--mpl-muted);
}

/* Start/Stop buttons always readable */
#startBtn,
.start,
.btn-start {
    color: #0b1220;
    background: var(--mpl-accent);
}

#stopBtn,
.stop,
.btn-stop {
    color: var(--mpl-text);
    background: #8f0167;
    border: 1px solid #67024a;
}

/* Ensure any translucent layer never drops text below AA */
.translucent,
.backdrop-blur,
.frosted {
    background-color: rgba(17, 24, 39, 0.92) !important;
    color: var(--mpl-text) !important;
}

/* Tables or grids used for minute/bpm inputs */
table,
.grid {
    color: var(--mpl-text);
}

/* Ensure helper text inside inputs (e.g., “3 minutes”, “5.5”) is bright */
input,
select,
textarea {
    caret-color: var(--mpl-text);
}