/**
 * Automatic browser/OS color preference. Loaded after the page styles, including
 * wp-login.php. Light colors remain in the component styles as fallbacks.
 * Code panels keep their own dark palette in both modes; print stays light.
 */
:root {
    color-scheme: light;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-surface-bg: #0F172A;
        --color-surface-subtle: #131E30;
        --color-surface-muted: #243247;
        --color-surface-card: #192538;
        --color-text-primary: #F1F5F9;
        --color-text-secondary: #CBD5E1;
        --color-text-muted: #A4B3C8;
        --color-border-subtle: #334155;
        --color-border-strong: #52647B;
        --color-border-focus: #7DD3FC;

        --color-accent-primary: #7DD3FC;
        --color-accent-hover: #BAE6FD;
        --color-accent-active: #E0F2FE;
        --color-accent-subtle: #142F46;
        --color-accent-badge-bg: #16364F;
        --color-accent-badge-text: #BAE6FD;
        --color-accent-badge-border: #315A77;
        /* Buttons have white labels; their fill is separate from link ink. */
        --color-action-primary: #0369A1;
        --color-action-hover: #075985;
        --color-action-active: #0C4A6E;
        --color-action-neutral: #334155;
        --color-action-neutral-hover: #475569;

        --color-success-bg: #12372F;
        --color-success-text: #6EE7B7;
        --color-success-border: #286452;
        --color-warning-bg: #382D18;
        --color-warning-text: #FCD34D;
        --color-warning-border: #75602C;
        --color-error-bg: #3B202B;
        --color-error-text: #FCA5A5;
        --color-error-border: #88404C;
        --color-info-bg: #172E49;
        --color-info-text: #93C5FD;
        --color-info-border: #34577E;
        --color-violet-bg: #302545;
        --color-violet-text: #D8B4FE;
        --color-violet-border: #63517E;
        --color-indigo-bg: #282D4E;
        --color-indigo-text: #C7D2FE;
        --color-indigo-border: #505B8C;
        --color-teal-bg: #153936;
        --color-teal-text: #5EEAD4;
        --color-teal-border: #2C6B62;

        /* Preserve each component's original light swatch via its fallback. */
        --color-adaptive-accent-badge-bg: var(--color-accent-badge-bg);
        --color-adaptive-accent-badge-border: var(--color-accent-badge-border);
        --color-adaptive-accent-primary: var(--color-accent-primary);
        --color-adaptive-border-strong: var(--color-border-strong);
        --color-adaptive-border-subtle: var(--color-border-subtle);
        --color-adaptive-success-bg: var(--color-success-bg);
        --color-adaptive-success-border: var(--color-success-border);
        --color-adaptive-success-text: var(--color-success-text);
        --color-adaptive-surface-card: var(--color-surface-card);
        --color-adaptive-surface-muted: var(--color-surface-muted);
        --color-adaptive-surface-subtle: var(--color-surface-subtle);
        --color-adaptive-text-muted: var(--color-text-muted);
        --color-adaptive-text-secondary: var(--color-text-secondary);
        --color-adaptive-warning-bg: var(--color-warning-bg);
        --color-adaptive-warning-text: var(--color-warning-text);

        /* Older bbPress components use these aliases. Surfaces and ink have
           distinct tokens where the same light swatch served both purposes. */
        --color-surface: var(--color-surface-card);
        --color-surface-hover: var(--color-surface-muted);
        --color-slate-50: var(--color-surface-subtle);
        --color-slate-100: var(--color-surface-muted);
        --color-slate-200: var(--color-border-subtle);
        --color-slate-300: var(--color-border-strong);
        --color-slate-400: var(--color-text-muted);
        --color-slate-500: var(--color-text-muted);
        --color-slate-600: var(--color-text-secondary);
        --color-slate-700: var(--color-text-secondary);
        --color-slate-800: var(--color-text-primary);
        --color-slate-900: var(--color-text-primary);
        --color-blue-500: var(--color-accent-primary);
        --color-blue-600: var(--color-accent-primary);
        --color-blue-700: var(--color-accent-hover);
        --color-blue-800: var(--color-accent-active);
    }

    /* The raster wordmark has dark lettering on a transparent background. */
    .site-logo-img,
    .footer-logo-img,
    .login #login h1 a {
        filter: brightness(0) invert(.95);
    }

    /* Keep native form controls and WordPress widgets on the same palette. */
    input, textarea, select {
        accent-color: var(--color-accent-primary);
    }

    input::placeholder, textarea::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    .login .wp-tooltip__toggle,
    .login .wp-tooltip__toggle:hover,
    .login .wp-tooltip__toggle:focus-visible {
        color: var(--color-accent-primary);
    }

    .login .wp-tooltip__bubble {
        background-color: var(--color-surface-card);
        border-color: var(--color-border-strong);
    }

    .login .wp-tooltip__text,
    .login .wp-tooltip__close {
        color: var(--color-text-secondary);
    }

    .login .wp-tooltip__bubble::before { border-top-color: var(--color-border-strong); }
    .login .wp-tooltip__bubble::after { border-top-color: var(--color-surface-card); }

    /* bbPress supplies fixed white zebra rows in its own stylesheet. */
    #bbpress-forums li.bbp-body ul.topic:not(.sticky):not(.super-sticky),
    #bbpress-forums li.bbp-body ul.forum:not(.sticky):not(.super-sticky) {
        background-color: var(--color-surface-card);
    }

    #bbpress-forums li.bbp-body ul.topic.even:not(.sticky):not(.super-sticky),
    #bbpress-forums li.bbp-body ul.forum.even:not(.sticky):not(.super-sticky) {
        background-color: var(--color-surface-subtle);
    }

    #bbpress-forums div.bbp-reply-header,
    #bbpress-forums div.bbp-topic-header {
        background-color: var(--color-surface-subtle);
        border-color: var(--color-border-subtle);
    }

    #bbpress-forums div.bbp-reply-header a.bbp-reply-permalink,
    #bbpress-forums div.bbp-topic-header a.bbp-topic-permalink {
        color: var(--color-text-muted);
    }

    #bbpress-forums div.bbp-template-notice a {
        color: var(--color-accent-primary);
    }

    .ntk-badge-go, .lang-badge[style*="#00ADD8"] {
        background: var(--color-teal-bg) !important;
        color: var(--color-teal-text) !important;
        border-color: var(--color-teal-border) !important;
    }

    /* Theme-owned SVG diagrams use explicit presentation colors. Only remap
       these diagrams: photos, screenshots and third-party art stay intact. */
    .tech-diagram-svg [fill="#FFFFFF" i] { fill: var(--color-surface-card); }
    .tech-diagram-svg [fill="#F8FAFC" i] { fill: var(--color-surface-subtle); }
    .tech-diagram-svg [fill="#F1F5F9" i],
    .tech-diagram-svg rect[fill="#E2E8F0" i] { fill: var(--color-surface-muted); }
    .tech-diagram-svg [fill="#E0F2FE" i],
    .tech-diagram-svg [fill="#F0F9FF" i] { fill: var(--color-accent-badge-bg); }
    .tech-diagram-svg text[fill="#0F172A" i],
    .tech-diagram-svg text[fill="#1E293B" i] { fill: var(--color-text-primary); }
    .tech-diagram-svg [fill="#334155" i],
    .tech-diagram-svg [fill="#475569" i] { fill: var(--color-text-secondary); }
    .tech-diagram-svg [fill="#64748B" i] { fill: var(--color-text-muted); }
    .tech-diagram-svg [fill="#0284C7" i],
    .tech-diagram-svg [fill="#0369A1" i] { fill: var(--color-accent-primary); }
    .tech-diagram-svg [fill="#047857" i] { fill: var(--color-success-text); }
    .tech-diagram-svg [stroke="#CBD5E1" i],
    .tech-diagram-svg [stroke="#E2E8F0" i] { stroke: var(--color-border-strong); }
    .tech-diagram-svg [stroke="#BAE6FD" i] { stroke: var(--color-accent-badge-border); }
    .tech-diagram-svg [stroke="#0284C7" i] { stroke: var(--color-accent-primary); }
    .tech-diagram-svg [stroke="#64748B" i] { stroke: var(--color-text-muted); }
}