/* ═══════════════════════════════════════════════════════════════════════════
   Whisk Takers — high-contrast.css
   Overrides applied when body.high-contrast is set.
   Also respects OS-level forced-colors / prefers-contrast media queries.
   ═══════════════════════════════════════════════════════════════════════════ */

body.high-contrast {
    --color-bg:           #000000;
    --color-surface:      #1a1a1a;
    --color-border:       #ffffff;
    --color-border-focus: #ffff00;
    --color-text:         #ffffff;
    --color-text-muted:   #d1d5db;
    --color-text-subtle:  #9ca3af;
    --color-purple:       #c084fc;
    --color-purple-light: #e9d5ff;
    --color-purple-pale:  #2e1065;
    --color-orange:       #fb923c;
    --color-success:      #4ade80;
    --color-warning:      #fbbf24;
    --color-danger:       #f87171;
}

/* Ensure all text is legible */
body.high-contrast,
body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select,
body.high-contrast button {
    color: var(--color-text);
}

/* Remove color-mix() backgrounds that may not contrast well */
body.high-contrast .card-slot {
    background: var(--color-surface);
}
body.high-contrast .card-category {
    background: #2e1065;
    color: var(--color-purple-light);
}
body.high-contrast .category-checkbox:has(input:checked) {
    background: #2e1065;
    box-shadow: 0 0 0 3px #c084fc;
}

/* Focus ring — yellow for maximum visibility */
body.high-contrast :focus-visible {
    outline: 3px solid #ffff00;
    outline-offset: 3px;
}

/* Buttons */
body.high-contrast .btn--primary {
    background: var(--color-purple-light);
    color: #000000;
    border-color: var(--color-purple-light);
}
body.high-contrast .btn--ghost {
    color: var(--color-text);
    border-color: var(--color-text);
}
body.high-contrast .btn--danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* Form inputs */
body.high-contrast input[type="text"],
body.high-contrast input[type="email"],
body.high-contrast input[type="password"],
body.high-contrast textarea {
    background: #0a0a0a;
    border-color: var(--color-border);
    color: var(--color-text);
}
body.high-contrast input:focus,
body.high-contrast textarea:focus {
    border-color: #ffff00;
}

/* Timer */
body.high-contrast .timer-banner     { background: #1a1a00; border-color: #fbbf24; color: #fbbf24; }
body.high-contrast .timer--danger .timer-banner { border-color: #f87171; color: #f87171; }

/* Cards */
body.high-contrast .card-slot {
    border-width: 3px;
}

/* Toasts */
body.high-contrast .toast--info    { background: #1e3a8a; border: 2px solid #93c5fd; }
body.high-contrast .toast--success { background: #14532d; border: 2px solid #4ade80; }
body.high-contrast .toast--warning { background: #78350f; border: 2px solid #fbbf24; }
body.high-contrast .toast--error   { background: #7f1d1d; border: 2px solid #f87171; }

/* Nav */
body.high-contrast #app-nav {
    background: #000000;
    border-bottom-color: #ffffff;
}

/* Modal */
body.high-contrast .modal-overlay { background: rgba(0,0,0,0.85); }
body.high-contrast .modal          { background: #1a1a1a; border: 2px solid #ffffff; }

/* Toggle switch */
body.high-contrast .toggle-btn { background: var(--color-text-muted); }
body.high-contrast .toggle-btn[aria-checked="true"] { background: var(--color-purple); }

/* ─── OS-level forced colors (Windows High Contrast Mode) ────────────────── */
@media (forced-colors: active) {
    :root {
        --color-border-focus: Highlight;
        --color-purple:       Highlight;
    }

    .btn--primary {
        background: ButtonText;
        color: ButtonFace;
        border-color: ButtonText;
        forced-color-adjust: none;
    }

    .card-slot  { border: 2px solid ButtonText; forced-color-adjust: none; }
    .toast      { forced-color-adjust: none; border: 2px solid ButtonText; }
    .modal      { border: 2px solid ButtonText; }
}