/* Display-only: global dark-mode ergonomics + print overrides. Tokens: app-tokens.css (loaded before). */

/* ---- Dark mode: form controls (typed text + dark field surfaces) ---- */
html.dark textarea,
html.dark select,
html.dark input[list],
html.dark input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="color"]) {
    background-color: var(--color-input-bg);
    color: var(--color-input-fg);
    caret-color: var(--color-input-fg);
    border-color: var(--color-border);
}

html.dark textarea::placeholder,
html.dark input::placeholder {
    color: var(--color-fg-muted);
    opacity: 1;
}

html.dark textarea:focus,
html.dark select:focus,
html.dark input[list]:focus,
html.dark input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="color"]):focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-ring);
}

/* Autofill: avoid flashing light yellow fields in dark mode */
html.dark input:-webkit-autofill,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-input-fg);
    caret-color: var(--color-input-fg);
    box-shadow: 0 0 0 1000px var(--color-input-bg) inset;
    transition: background-color 99999s ease-out;
}

html.dark [contenteditable="true"],
html.dark [contenteditable=""] {
    background-color: var(--color-input-bg);
    color: var(--color-input-fg);
    caret-color: var(--color-input-fg);
}

/*
 * Legacy Tailwind palette bridge (temporary): templates still use text-slate-* /
 * text-gray-* for “body” copy. Under html.dark those resolve to dark greys —
 * unreadable on dark surfaces. Map to semantic fg until migrated to text-app-fg*.
 */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-slate-900,
html.dark .text-slate-800 {
    color: var(--color-fg);
}

html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-slate-700,
html.dark .text-slate-600 {
    color: var(--color-fg-muted);
}

html.dark .text-gray-500,
html.dark .text-slate-500 {
    color: var(--color-fg-subtle);
}

html.dark .text-gray-400,
html.dark .text-slate-400 {
    color: color-mix(in srgb, var(--color-fg-muted) 85%, transparent);
}

html.dark .bg-white {
    background-color: var(--color-surface);
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300 {
    border-color: var(--color-border);
}

@media print {
    html {
        color-scheme: light !important;
    }
    html.dark {
        color-scheme: light !important;
    }
    body {
        background: #fff !important;
        color: #111 !important;
    }
    textarea,
    select,
    input[list],
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="color"]) {
        background: #fff !important;
        color: #111 !important;
        border-color: #ccc !important;
        box-shadow: none !important;
        -webkit-text-fill-color: #111 !important;
    }
}