/* ============================================================
   MB&SP — System motywów
   Dark: domyślny (obecny wygląd MB&SP)
   Light: premium, chłodny — inspirowany Apple/Tesla
   ============================================================ */

/* ── JASNY MOTYW (domyślny gdy brak klasy) ──────────────────
   Aktywny gdy: brak html.dark i brak html.light-forced
   Nigdy nie stosuj twardych kolorów bezpośrednio w komponentach —
   zawsze przez te zmienne.
   ----------------------------------------------------------- */
:root {
  /* Tła */
  --bg:           #FFFFFF;
  --bg-2:         #F5F5F7;   /* Apple-style sekcje */
  --bg-3:         #EBEBED;
  --bg-4:         #E0E0E2;

  /* Tekst */
  --fg:           #1D1D1F;   /* Apple headline black */
  --fg-2:         #3A3A3C;
  --fg-3:         #6E6E73;   /* Apple secondary */
  --fg-4:         #AEAEB2;

  /* Akcent — chłodny niebieski (spójny z obecnym #2563eb) */
  --accent:       #2563EB;
  --accent-hover: #1D4ED8;
  --accent-muted: #EFF6FF;

  /* Obramowania */
  --border:       #D2D2D7;   /* Apple-style border */
  --border-2:     #E8E8ED;

  /* Nawigacja */
  --nav-bg:               #FFFFFF;
  --nav-bg-translucent:   rgba(255, 255, 255, 0.85);
  --nav-border:           #D2D2D7;

  /* Karty */
  --card-bg:      #FFFFFF;
  --card-border:  #D2D2D7;
  --card-hover-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);

  /* Sidebar */
  --sidebar-bg:   #F5F5F7;
  --sidebar-link-hover: #E8E8ED;
  --sidebar-active: #2563EB;

  /* Inputy / selecty */
  --input-bg:     #FFFFFF;
  --input-border: #D2D2D7;
  --input-focus:  #2563EB;

  /* Cienie */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow:       0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 20px 48px rgba(0,0,0,0.12);

  /* Skeleton (loading) */
  --skeleton-from: #E8E8ED;
  --skeleton-to:   #F5F5F7;

  /* Bottom nav */
  --bottomnav-bg:     #FFFFFF;
  --bottomnav-border: #D2D2D7;

  /* Cookie banner */
  --cb-bg:        #FFFFFF;
  --cb-border:    #D2D2D7;
  --cb-shadow:    0 -8px 32px rgba(0,0,0,0.08);

  /* Splash screen */
  --splash-bg:    #FFFFFF;
}

/* ── CIEMNY MOTYW ────────────────────────────────────────── */
html.dark {
  /* Tła */
  --bg:           #09090B;   /* zinc-950 — obecny dark MB&SP */
  --bg-2:         #18181B;   /* zinc-900 */
  --bg-3:         #27272A;   /* zinc-800 */
  --bg-4:         #3F3F46;   /* zinc-700 */

  /* Tekst */
  --fg:           #FAFAFA;
  --fg-2:         #E4E4E7;
  --fg-3:         #A1A1AA;   /* zinc-400 */
  --fg-4:         #71717A;   /* zinc-500 */

  /* Akcent */
  --accent:       #3B82F6;   /* blue-500 — jaśniejszy na ciemnym tle */
  --accent-hover: #60A5FA;
  --accent-muted: #1E3A5F;

  /* Obramowania */
  --border:       #3F3F46;
  --border-2:     #27272A;

  /* Nawigacja */
  --nav-bg:               #09090B;
  --nav-bg-translucent:   rgba(9, 9, 11, 0.88);
  --nav-border:           #3F3F46;

  /* Karty */
  --card-bg:      #18181B;
  --card-border:  #3F3F46;
  --card-hover-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,130,246,0.25);

  /* Sidebar */
  --sidebar-bg:   #09090B;
  --sidebar-link-hover: #27272A;
  --sidebar-active: #2563EB;

  /* Inputy */
  --input-bg:     #18181B;
  --input-border: #3F3F46;
  --input-focus:  #3B82F6;

  /* Cienie */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow:       0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:    0 20px 48px rgba(0,0,0,0.6);

  /* Skeleton */
  --skeleton-from: #27272A;
  --skeleton-to:   #3F3F46;

  /* Bottom nav */
  --bottomnav-bg:     #18181B;
  --bottomnav-border: #3F3F46;

  /* Cookie banner */
  --cb-bg:        #18181B;
  --cb-border:    #3F3F46;
  --cb-shadow:    0 -8px 32px rgba(0,0,0,0.5);

  /* Splash screen */
  --splash-bg:    #000000;
}

/* ── PŁYNNE PRZEJŚCIE ────────────────────────────────────── */
body,
.site-header,
.sidebar,
nav.fixed.bottom-0,
.product-card,
.blog-card,
select,
input,
textarea {
  transition:
    background-color 0.25s ease,
    border-color     0.25s ease,
    color            0.25s ease;
}

/* ── IKONY MOTYWU (moon / sun) ───────────────────────────── */
.theme-icon-moon { display: block; }
.theme-icon-sun  { display: none;  }
html.dark .theme-icon-moon { display: none;  }
html.dark .theme-icon-sun  { display: block; }
.logo-dark  { display: block; }
.logo-light { display: none; }
html.dark .logo-dark  { display: none; }
html.dark .logo-light { display: block; }
/* ============================================================
   MB&SP — Overrides jasnego motywu dla klas Tailwinda
   Dopisz na końcu mbsp-theme.css
   ============================================================ */

/* ── TŁA ─────────────────────────────────────────────────── */
html:not(.dark) .bg-black,
html:not(.dark) .bg-zinc-950                { background-color: var(--bg) !important; }

html:not(.dark) .bg-zinc-900                { background-color: var(--bg-2) !important; }

html:not(.dark) .bg-zinc-800                { background-color: var(--bg-3) !important; }

html:not(.dark) .bg-zinc-700                { background-color: var(--bg-4) !important; }

/* ── TEKST ───────────────────────────────────────────────── */
html:not(.dark) .text-white,
html:not(.dark) .text-zinc-50               { color: var(--fg) !important; }

html:not(.dark) .text-zinc-200,
html:not(.dark) .text-zinc-300              { color: var(--fg-2) !important; }

html:not(.dark) .text-zinc-400,
html:not(.dark) .text-zinc-500              { color: var(--fg-3) !important; }

html:not(.dark) .text-zinc-600              { color: var(--fg-4) !important; }

/* ── AKCENT ──────────────────────────────────────────────── */
html:not(.dark) .bg-blue-600                { background-color: var(--accent) !important; }
html:not(.dark) .hover\:bg-blue-700:hover   { background-color: var(--accent-hover) !important; }
html:not(.dark) .bg-blue-900\/20,
html:not(.dark) .bg-blue-950                { background-color: var(--accent-muted) !important; }

html:not(.dark) .text-blue-400,
html:not(.dark) .text-blue-500              { color: var(--accent) !important; }

/* ── OBRAMOWANIA ─────────────────────────────────────────── */
html:not(.dark) .border-zinc-700,
html:not(.dark) .border-zinc-800            { border-color: var(--border) !important; }

html:not(.dark) .border-zinc-900            { border-color: var(--border-2) !important; }

/* ── INPUTY / SELECTY ────────────────────────────────────── */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: var(--input-bg) !important;
  border-color:     var(--input-border) !important;
  color:            var(--fg) !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: var(--input-focus) !important;
}

/* ── DIVIDE ──────────────────────────────────────────────── */
html:not(.dark) .divide-zinc-700 > * + *,
html:not(.dark) .divide-zinc-800 > * + *    { border-color: var(--border) !important; }

/* ── RING ────────────────────────────────────────────────── */
html:not(.dark) .ring-zinc-700,
html:not(.dark) .ring-zinc-800              { --tw-ring-color: var(--border) !important; }

/* ── PLACEHOLDER ─────────────────────────────────────────── */
html:not(.dark) ::placeholder               { color: var(--fg-4) !important; }

/* ── SCROLL BAR ──────────────────────────────────────────── */
html:not(.dark) ::-webkit-scrollbar-track   { background: var(--bg-2); }
html:not(.dark) ::-webkit-scrollbar-thumb   { background: var(--border); border-radius: 4px; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: var(--fg-4); }