/**
 * Mito Dark Mode - domkniecie przelacznika AT
 *
 * Motyw dwutorowy jedzie na palecie AT (kazdy kolor ma rawValue light/dark) plus
 * warstwie semantycznej w tokens.css. Sam przelacznik to natywny element AT
 * (`brxc-darkmode-toggle`) - nie piszemy wlasnego.
 *
 * Ten arkusz dokleja to, czego element AT nie ma:
 *
 *  1. FOCUS RING. CSS pluginu nie ma zadnej reguly :focus dla przelacznika, a checkbox
 *     jest wizualnie schowany (opacity:0, 0x0 px), wiec uzytkownik klawiatury nie widzi,
 *     gdzie jest. Ring rysujemy na widocznym torze switcha (.brxc-toggle-slot).
 *
 *  2. ROZMIAR CELU DOTYKOWEGO. WCAG 2.2 (2.5.8) wymaga 24x24 px; tor switcha AT jest
 *     nizszy, wiec podnosimy go paddingiem na samym <label>.
 *
 * Dostepna nazwa (aria-label) siedzi w dark-mode.js - element AT renderuje sam checkbox
 * w <label> z ikonami SVG, wiec czytnik ekranu nie mialby czego przeczytac.
 *
 * @author lukuro
 */

/* ---------------------------------------------------------------------------
   Kontrolki natywne przegladarki

   Pola formularzy bez jawnego tla (np. input[type="search"] w filtrach Bricks) biora
   biel ze stylu PRZEGLADARKI, nie z naszego CSS - w dark zostawaly bialymi prostokatami.
   `color-scheme` to natywny przelacznik: mowi silnikowi, ktorym wariantem malowac
   kontrolki, paski przewijania i pola. Zalatwia je wszystkie naraz, bez lapania
   selektorami po jednym.
   --------------------------------------------------------------------------- */
:root {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

/* Pierscien fokusu na torze switcha - checkbox jest 0x0 px, wiec :focus-visible na nim
   nie ma czego obrysowac. Kolor turkusowy w obu motywach (--at-primary sie nie odwraca). */
.brxe-brxc-darkmode-toggle .brxc-toggle-checkbox:focus-visible ~ .brxc-toggle-slot {
    outline: 2px solid var(--mito-color-primary, #0ba1bf);
    outline-offset: 3px;
    border-radius: var(--mito-radius-pill, 999px);
}

/* Cel dotykowy min. 24x24 px (WCAG 2.2 - 2.5.8 Target Size Minimum). */
.brxe-brxc-darkmode-toggle label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Panel koszyka (off-canvas)

   Motyw NADRZEDNY Bricks twardo ustawia `.cart-detail { background-color: #fff }`
   (assets/css/frontend.min.css). Inwariant projektu zabrania go edytowac, wiec
   nadpisujemy tu - powierzchnia jest biala w light (czyli bez zmian) i ciemna w dark.
   Bez tego panel koszyka zostawal jedynym bialym blokiem w ciemnym motywie.
   --------------------------------------------------------------------------- */
.cart-detail {
    background-color: var(--mito-color-surface, #ffffff);
    color: var(--mito-color-text, #14181c);
}