/* ═══════════════════════════════════════════════════════════════════════
 * Design tokens — jedno źródło prawdy dla kolorów całej witryny.
 * Wartości pod :root to obecny (light) wygląd strony - 1:1 zgodne z tym
 * co wcześniej było wpisane na sztywno w style.css/additional.css, więc
 * podmiana na var() nie zmienia niczego w trybie jasnym. Blok
 * [data-bs-theme="dark"] nadpisuje te same zmienne wartościami dla
 * trybu ciemnego (przełącznik #darkSwitch ustawia ten atrybut, patrz
 * storage/app/public/assets/js/dark.js).
 *
 * Kolory czysto dekoracyjne (ikony kategorii, logo social media typu
 * Facebook/Twitter/Google) NIE są tu tokenizowane - mają zostać takie
 * same w obu motywach, to normalne dla dark mode.
 * ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* Marka (Velocity - panel klienta) */
    --v-cyan:       #00bcd4;
    --v-cyan-dark:  #0097a7;
    --v-cyan-lite:  #e0f7fa;
    --v-amber:      #f59e0b;
    --v-navy:       #0f172a;
    --v-navy-2:     #1e293b;
    --v-text:       #0f172a;
    --v-muted:      #64748b;
    --v-border:     #e2e8f0;
    --v-bg:         #f0f2f5;
    --v-success:    #16a34a;
    --v-warning:    #f59e0b;
    --v-danger:     #ef4444;

    /* Strukturalna paleta witryny publicznej (style.css / additional.css) */
    --site-bg:            #ffffff;  /* tło strony */
    --site-surface:       #f4f7fb;  /* tło kart / sekcji naprzemiennych */
    --site-surface-alt:   #edf4ff;  /* jasnoniebieskie panele (feature boxy) */
    --site-border:        #e5e5e5;  /* obramowania, separatory */
    --site-border-lite:   #eeeeee;
    --site-text:          #2f395d;  /* nagłówki, ciemny tekst nawigacji */
    --site-text-body:     #555555;  /* domyślny tekst akapitów (body) */
    --site-text-muted:    #777777;  /* tekst drugorzędny */
    --site-text-strong:   #000000;  /* najciemniejszy tekst / mocne nagłówki */
    --site-brand:         #0069ff;  /* główny kolor marki / CTA / linki */
    --site-brand-2:       #3e7ccc;  /* drugorzędny odcień marki */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --v-navy:            #0f172a;
        --v-text:            #f1f5f9;
        --v-muted:           #94a3b8;
        --v-border:          #334155;
        --v-bg:              #0f172a;

        --site-bg:           #0f172a;
        --site-surface:      #1e293b;
        --site-surface-alt:  #1e2b42;
        --site-border:       #334155;
        --site-border-lite:  #2b3a52;
        --site-text:         #f1f5f9;
        --site-text-body:    #cbd5e1;
        --site-text-muted:   #94a3b8;
        --site-text-strong:  #f8fafc;
        --site-brand:        #3b82f6;
        --site-brand-2:      #60a5fa;
    }
}

[data-bs-theme="dark"] {
    --v-navy:            #0f172a;
    --v-text:            #f1f5f9;
    --v-muted:           #94a3b8;
    --v-border:          #334155;
    --v-bg:              #0f172a;

    --site-bg:           #0f172a;
    --site-surface:      #1e293b;
    --site-surface-alt:  #1e2b42;
    --site-border:       #334155;
    --site-border-lite:  #2b3a52;
    --site-text:         #f1f5f9;
    --site-text-body:    #cbd5e1;
    --site-text-muted:   #94a3b8;
    --site-text-strong:  #f8fafc;
    --site-brand:        #3b82f6;
    --site-brand-2:      #60a5fa;
}

[data-bs-theme="light"] {
    --v-navy:            #0f172a;
    --v-text:            #0f172a;
    --v-muted:           #64748b;
    --v-border:          #e2e8f0;
    --v-bg:              #f0f2f5;

    --site-bg:           #ffffff;
    --site-surface:      #f4f7fb;
    --site-surface-alt:  #edf4ff;
    --site-border:       #e5e5e5;
    --site-border-lite:  #eeeeee;
    --site-text:         #2f395d;
    --site-text-body:    #555555;
    --site-text-muted:   #777777;
    --site-text-strong:  #000000;
    --site-brand:        #0069ff;
    --site-brand-2:      #3e7ccc;
}

/* Zabezpieczenie strukturalne - gwarantuje ciemne tło strony niezależnie
   od tego, czy dana podstrona ma własne, jawne reguły tła (np. panel
   staff, który korzysta z gołego Bootstrapa bez żadnych .vl-*/.vd-*/.site-*
   klas - bez tego nagłówki dostawały jasny tekst z motywu dark, ale tło
   zostawało białe, bo nic go jawnie nie przestawiało). Wyższa specyficzność
   niż zwykłe "body{...}" z bootstrap.min.css, więc zawsze wygrywa.
   Nie dotyczy .account-layout (panel klienta) ani .vd-/.vl- sekcji, które
   mają już własne tła z tokenów - to tylko domyślny fallback. */
[data-bs-theme="dark"] body {
    background-color: var(--site-bg);
    color: var(--site-text-body);
}

/* Statyczne utility klasy Bootstrapa (.bg-light, .bg-white, .text-dark) NIE
   są same z siebie reaktywne na [data-bs-theme] - to dosłowne nazwy kolorów
   ("light"/"white"/"dark"), nie semantyczne tokeny jak --bs-body-bg, więc
   Bootstrap celowo nie przestawia ich w trybie ciemnym. Stąd sekcje typu
   <section class="bg-light"> (np. cennik domen) zostawały jasne, mimo że
   nagłówek/tabela w środku (prawdziwe komponenty Bootstrapa) już ciemniały -
   dokładnie ten "niespójny" wygląd. !important bo oryginalne reguły
   Bootstrapa też są !important (inaczej nie dałoby się ich przebić). */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--site-surface) !important;
}
[data-bs-theme="dark"] .bg-white {
    background-color: var(--site-bg) !important;
}
[data-bs-theme="dark"] .text-dark {
    color: var(--site-text-strong) !important;
}