/* ==========================================================================
   Buzzeit — Global Theme (light / dark) — MARKETING SITE
   Path: /home/buzzeit/public_html/assets/css/theme.css

   HOW THIS WORKS
   --------------
   The marketing pages use hardcoded Tailwind utilities (bg-white,
   text-neutral-900, border-neutral-200 ...). Rather than editing every page
   to add `dark:` variants, this file re-maps those utilities whenever
   <html> carries the .dark class.

   `html.dark .bg-white` (specificity 0,2,0) beats `.bg-white` (0,1,0),
   so it wins without touching your markup.

   LOAD ORDER: this file must come AFTER the inline <style> block in
   header.php, or the .holo overrides in section 4 will lose to it.

   COMPANION FILE: /assets/css/app-theme.css handles the /user/ product
   pages, which are dark-first and key on html.light instead.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS — use these in anything NEW you build
   ========================================================================== */

:root {
  --bz-bg:            #ffffff;
  --bz-surface:       #ffffff;
  --bz-surface-alt:   #fafafa;
  --bz-surface-hover: #f5f5f5;

  --bz-text:          #171717;
  --bz-text-secondary:#525252;
  --bz-text-muted:    #737373;
  --bz-text-faint:    #a3a3a3;

  --bz-border:        #e5e5e5;
  --bz-border-soft:   #f5f5f5;
  --bz-border-strong: #d4d4d4;

  --bz-brand-from:    #7C3AED;
  --bz-brand-mid:     #C724B1;
  --bz-brand-to:      #E0218A;
  --bz-brand-text:    #a21caf;

  color-scheme: light;
}

html.dark {
  --bz-bg:            #0a0a0a;
  --bz-surface:       #171717;
  --bz-surface-alt:   #0f0f0f;
  --bz-surface-hover: #262626;

  --bz-text:          #fafafa;
  --bz-text-secondary:#d4d4d4;
  --bz-text-muted:    #a3a3a3;
  --bz-text-faint:    #737373;

  --bz-border:        #262626;
  --bz-border-soft:   #1f1f1f;
  --bz-border-strong: #404040;

  --bz-brand-text:    #f0abfc;

  color-scheme: dark;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

html.dark body {
  background-color: var(--bz-bg);
  color: var(--bz-text);
}

html.dark ::selection { background: #701a75; color: #fff; }

/* Smooth toggle — suppressed during first paint via .bz-no-transition */
body, body * {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.bz-no-transition, .bz-no-transition * { transition: none !important; }

/* Never fight the reveal / holo animations already defined in header.php */
[data-reveal], .holo, .holo::before, .holo::after, .holo-frame::after {
  transition-property: opacity, transform, box-shadow, background-position;
}


/* ==========================================================================
   3. TAILWIND UTILITY REMAPS (dark only)
   ========================================================================== */

/* ---- Backgrounds ---- */
html.dark .bg-white          { background-color: var(--bz-surface)      !important; }
html.dark .bg-neutral-50     { background-color: var(--bz-surface-alt)  !important; }
html.dark .bg-neutral-100    { background-color: var(--bz-surface-hover)!important; }
html.dark .bg-neutral-200    { background-color: #2e2e2e                !important; }
html.dark .bg-neutral-50\/50 { background-color: rgba(255,255,255,.02)  !important; }

html.dark .hover\:bg-neutral-50:hover  { background-color: var(--bz-surface-hover) !important; }
html.dark .hover\:bg-neutral-100:hover { background-color: #2e2e2e !important; }

/* Translucent variants are SEPARATE classes from plain bg-white.
   The attribute selector catches /50 through /95 in one rule, so you never
   have to chase a specific opacity value again. */
html.dark [class*="bg-white/"]        { background-color: rgba(10,10,10,.85) !important; }
html.dark .bg-white\/95 { background-color: rgba(10,10,10,.95) !important; }
html.dark .bg-white\/90 { background-color: rgba(10,10,10,.90) !important; }
html.dark .bg-white\/85 { background-color: rgba(10,10,10,.85) !important; }
html.dark .bg-white\/80 { background-color: rgba(10,10,10,.82) !important; }
html.dark .bg-white\/70 { background-color: rgba(10,10,10,.75) !important; }
html.dark .bg-white\/60 { background-color: rgba(10,10,10,.70) !important; }
html.dark .bg-white\/50 { background-color: rgba(10,10,10,.65) !important; }

html.dark [class*="bg-neutral-50/"]  { background-color: rgba(15,15,15,.85) !important; }
html.dark [class*="bg-neutral-100/"] { background-color: rgba(38,38,38,.85) !important; }
html.dark [class*="border-white/"]   { border-color: rgba(255,255,255,.10) !important; }

/* ---- Text ---- */
html.dark .text-neutral-900 { color: var(--bz-text)           !important; }
html.dark .text-neutral-800 { color: var(--bz-text)           !important; }
html.dark .text-neutral-700 { color: var(--bz-text-secondary) !important; }
html.dark .text-neutral-600 { color: var(--bz-text-secondary) !important; }
html.dark .text-neutral-500 { color: var(--bz-text-muted)     !important; }
html.dark .text-neutral-400 { color: var(--bz-text-faint)     !important; }

/* Brand + accent text lightened for contrast on dark */
html.dark .text-fuchsia-700 { color: var(--bz-brand-text) !important; }
html.dark .text-fuchsia-600 { color: #e879f9 !important; }
html.dark .text-emerald-600 { color: #34d399 !important; }
html.dark .group:hover .group-hover\:text-fuchsia-900,
html.dark .hover\:text-fuchsia-900:hover { color: #f5d0fe !important; }

/* White text on the gradient CTA must stay white */
html.dark .text-white,
html.dark .grad-bg .text-white { color: #fff !important; }

/* ---- Borders ---- */
html.dark .border-neutral-100 { border-color: var(--bz-border-soft)   !important; }
html.dark .border-neutral-200 { border-color: var(--bz-border)        !important; }
html.dark .border-neutral-300 { border-color: var(--bz-border-strong) !important; }
html.dark .divide-neutral-100 > * + * { border-color: var(--bz-border-soft) !important; }

html.dark .hover\:border-neutral-300:hover { border-color: var(--bz-border-strong) !important; }
html.dark .hover\:border-neutral-400:hover { border-color: #525252 !important; }

/* ---- Marquee edge fades ---- */
html.dark .from-white { --tw-gradient-from: var(--bz-bg) !important;
                        --tw-gradient-to: rgba(10,10,10,0) !important;
                        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.dark .to-white   { --tw-gradient-to:   var(--bz-bg) !important; }

/* ---- Shadows deepen so they remain visible ---- */
html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.5) !important; }
html.dark .shadow-md,
html.dark .hover\:shadow-md:hover { box-shadow: 0 4px 14px rgba(0,0,0,.6) !important; }
html.dark .shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,.7) !important; }


/* ==========================================================================
   4. HOLOGRAPHIC SURFACES — dark overrides
   The .holo system in header.php stays intact; only the white parts flip.
   ========================================================================== */

html.dark .holo {
  background: var(--bz-surface);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(199,36,177,.55);
}

/* The iridescent bloom reads stronger on dark — pull it back a little */
html.dark .holo::before { opacity: .38; }
html.dark .holo:hover::before,
html.dark .group:hover .holo::before { opacity: .62; }

/* The white specular highlight would blow out on dark — soften to a sheen */
html.dark .holo::after {
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 49%, transparent 62%);
  background-size: 100% 100%, 260% 100%;
  background-position: 0 0, 165% 0;
}

html.dark .holo:hover,
html.dark .group:hover .holo {
  box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -20px rgba(199,36,177,.65);
}

/* Media frames */
html.dark .holo-frame {
  background: linear-gradient(140deg, rgba(124,58,237,.28), rgba(199,36,177,.22), rgba(34,211,238,.24));
  border-color: rgba(199,36,177,.30);
  box-shadow: 0 30px 70px -34px rgba(124,58,237,.75);
}
html.dark .holo-frame::after {
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  background-size: 260% 100%;
  background-position: 165% 0;
}

html.dark .holo-media      { background: var(--bz-surface); }
html.dark .bz-plain-frame  { background: var(--bz-surface); border-color: rgba(255,255,255,.10); }

html.dark .holo-fallback {
  background: linear-gradient(140deg, rgba(124,58,237,.14), rgba(224,33,138,.14));
  color: var(--bz-text-faint);
}

html.dark .tint { background: rgba(199,36,177,.12); }

/* Photos dim slightly so they don't glare. Add class="bz-no-dim" to opt out. */
html.dark img:not(.bz-no-dim) { filter: brightness(.93); }


/* ==========================================================================
   5. NAV
   ========================================================================== */

html.dark .bz-nav {
  background-color: rgba(10, 10, 10, .85) !important;
  border-bottom-color: var(--bz-border) !important;
}

html.dark .bz-nav a.text-neutral-600 { color: var(--bz-text-muted) !important; }
html.dark .bz-nav a.text-neutral-700 { color: var(--bz-text-secondary) !important; }

html.dark .bz-nav a:hover,
html.dark .bz-nav a.hover\:text-neutral-900:hover { color: var(--bz-text) !important; }
html.dark .bz-nav a[aria-current="page"],
html.dark .bz-nav a.text-neutral-900 { color: var(--bz-text) !important; }

/* The gradient buttons keep white text no matter what */
html.dark .bz-nav .grad-bg,
html.dark .bz-nav .grad-bg * { color: #fff !important; }

/* Mobile drawer + hamburger */
html.dark #bzMenu {
  background-color: var(--bz-bg) !important;
  border-top-color: var(--bz-border) !important;
}
html.dark #bzMenuBtn {
  border-color: var(--bz-border) !important;
  color: var(--bz-text-secondary) !important;
}
html.dark #bzMenuBtn:hover { background-color: var(--bz-surface-hover) !important; }


/* ==========================================================================
   6. LOGO SWAP
   Two <img> tags in nav.php; CSS decides which one is visible.
   ========================================================================== */

.bz-logo-dark  { display: none  !important; }
.bz-logo-light { display: block !important; }

html.dark .bz-logo-light { display: none  !important; }
html.dark .bz-logo-dark  { display: block !important; }

/* Logos never get the global image dimming */
.bz-logo { filter: none !important; }

/* STOPGAP — delete once /bz-logo-dark.png exists.
   bz-logo-white.png has a white background baked in, which reads as a white
   tile on dark. 'screen' blending drops pure white to transparent. It's a
   workaround: a transparent PNG or SVG will always look better. */
html.dark .bz-logo-dark { mix-blend-mode: screen; }


/* ==========================================================================
   7. FORM CONTROLS
   ========================================================================== */

html.dark input, html.dark textarea, html.dark select {
  background-color: var(--bz-surface-alt);
  border-color: var(--bz-border);
  color: var(--bz-text);
}
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--bz-text-faint); }
html.dark input:focus, html.dark textarea:focus, html.dark select:focus {
  border-color: var(--bz-brand-mid); outline: none;
}


/* ==========================================================================
   8. THE TOGGLE — inline in the marketing nav

   The button is rendered ONLY inside .bz-nav, by bz-theme.js. Product pages
   under /user/ never show it; they simply read the saved preference.

   This is the ONLY toggle definition in this file. Older versions defined it
   twice — once here, once in an appended patch — and the two fought each
   other. If `.bz-toggle-dock` or `.bz-toggle-wrap` ever reappears below,
   delete it.
   ========================================================================== */

.bz-toggle-slot {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.bz-theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--bz-border);
  background: transparent;
  color: var(--bz-text-secondary);
  flex-shrink: 0;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.bz-theme-toggle:hover {
  background: var(--bz-surface-hover);
  border-color: var(--bz-border-strong);
  color: var(--bz-text);
}

.bz-theme-toggle:active { transform: scale(.94); }
.bz-theme-toggle:focus-visible { outline: 2px solid #C724B1; outline-offset: 2px; }

.bz-theme-toggle svg {
  position: absolute;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  transition: opacity .18s ease, transform .3s ease;
}

/* Dark -> show the sun (click to go light). Light -> show the moon. */
html.dark  .bz-theme-toggle .bz-icon-sun  { opacity: 1; transform: rotate(0)      scale(1);  }
html.dark  .bz-theme-toggle .bz-icon-moon { opacity: 0; transform: rotate(90deg)  scale(.5); }

html:not(.dark) .bz-theme-toggle .bz-icon-sun  { opacity: 0; transform: rotate(-90deg) scale(.5); }
html:not(.dark) .bz-theme-toggle .bz-icon-moon { opacity: 1; transform: rotate(0)      scale(1);  }

@media print { .bz-toggle-slot { display: none !important; } }


/* ==========================================================================
   8b. SAFETY — kill any stray toggle outside the nav

   If a cached copy of an older script ever docks a button to <body>, this
   hides it rather than letting it float over the page.
   ========================================================================== */

body > .bz-toggle-dock,
body > .bz-toggle-wrap { display: none !important; }


/* ==========================================================================
   9. SCROLLBAR
   ========================================================================== */

html.dark ::-webkit-scrollbar             { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track       { background: var(--bz-bg); }
html.dark ::-webkit-scrollbar-thumb       { background: #333; border-radius: 5px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #444; }


/* ==========================================================================
   10. REDUCED MOTION + PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body, body * { transition: none !important; }
}

@media print {
  html.dark { --bz-bg:#fff; --bz-surface:#fff; --bz-text:#000; --bz-text-secondary:#333; }
  html.dark body { background:#fff !important; color:#000 !important; }
  html.dark img  { filter: none !important; }
  .bz-toggle-slot { display: none !important; }
}