@import "tailwindcss" source(none);

@source "../templates/**/*.html";
@source "../static/**/*.js";

/*
 * These utilities are selected dynamically by Go template helpers or browser
 * code, so Tailwind cannot discover them as complete class names in source.
 */
@source inline("bg-amber-500 bg-pink-700 bg-blue-500 bg-blue-600 bg-green-500 bg-green-600 bg-red-600 bg-purple-600 bg-orange-600 bg-black bg-gray-600 text-amber-500 text-pink-400 text-blue-400 text-green-400 text-green-500 text-red-400 text-purple-400 text-orange-400 text-white text-gray-400 bg-yellow-600 bg-cyan-600 border-purple-500 border-blue-500 border-yellow-500 ring-green-500 ring-purple-500 opacity-0 opacity-100 transition-opacity duration-200 mx-0.5 mx-1");

@theme {
    /*
     * Deepen purple-600 slightly so small white text on bg-purple-600 clears
     * WCAG AA (4.5:1) with margin. Same hue/chroma as the default, only the
     * lightness drops 55.8% -> 53%, so the brand purple look is unchanged.
     * Measured contrast (WCAG relative luminance, sRGB render):
     *   default  oklch(55.8% .288 302.321) -> #9810fa -> 5.5:1 vs white
     *   override oklch(53%   .288 302.321) -> #9000f0 -> 6.1:1 vs white
     */
    --color-purple-600: oklch(53% .288 302.321);

    /* Filled success controls keep white text above WCAG AA in every state. */
    --color-green-600: oklch(48% .16 149.214);
    --color-green-700: oklch(42% .14 149.214);
}

/* Shared native checkbox switches: checked state is also exposed to assistive tech. */
.mpv-switch {
    appearance: none;
    flex-shrink: 0;
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 9999px;
    background-color: #4b5563;
    background-image: radial-gradient(circle, #fff 65%, transparent 70%);
    background-size: 1.25rem 1.25rem;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
    transition: background-position 150ms, background-color 150ms;
}
.mpv-switch:checked { background-color: var(--color-purple-600); background-position: right center; }
.mpv-switch:focus-visible { outline: 2px solid #c084fc; outline-offset: 3px; }
.mpv-switch:disabled { opacity: .5; cursor: wait; }
@media (forced-colors: active) {
    .mpv-switch { appearance: auto; background: none; }
}