/* ============================================================
   PAIYPER THEME — CSS Custom Properties + Light/Dark Toggle
   Dark mode is default (existing black/green scheme).
   Light mode (html.light) uses the Paiyper blue palette.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   DARK MODE — BSV Gold palette
   ────────────────────────────────────────────────────────── */
:root {
  --p-bg:            #000000;
  --p-bg-2:          #111111;
  --p-bg-3:          #1a1a1a;
  --p-bg-4:          #050503;
  --p-bg-hover:      #1a1200;   /* dark gold hover */
  --p-bg-disabled:   #374151;
  --p-text:          #EAB300;   /* BSV gold */
  --p-text-2:        #F5CC33;   /* lighter gold */
  --p-text-bright:   #FFD740;   /* bright gold */
  --p-text-muted:    rgba(234,179,0,0.5);
  --p-text-on-accent:#000000;
  --p-accent:        #C89800;   /* medium gold — button backgrounds */
  --p-accent-2:      #D4A800;   /* button hover */
  --p-accent-3:      #EAB300;   /* main BSV gold */
  --p-border:        rgba(234,179,0,0.22);
  --p-border-2:      rgba(234,179,0,0.5);
  --p-border-soft:   #1a1a1a;
  --p-input-bg:      #111111;
  --p-link:          #F5CC33;
  --p-warn:          #eab308;
  --p-danger:        #dc2626;
  --p-stop:          #d32f2f;
}

/* ──────────────────────────────────────────────────────────
   DARK MODE — Tailwind green → BSV gold overrides
   ────────────────────────────────────────────────────────── */
html:not(.light) .text-green-400 { color: #EAB300 !important; }
html:not(.light) .text-green-300 { color: #F5CC33 !important; }
html:not(.light) .text-green-500 { color: #C89800 !important; }
html:not(.light) .text-green-600 { color: #A07800 !important; }
html:not(.light) .text-green-100 { color: #FFF3CC !important; }
html:not(.light) .bg-green-600   { background-color: #C89800 !important; color: #000 !important; }
html:not(.light) .bg-green-500   { background-color: #D4A800 !important; color: #000 !important; }
html:not(.light) .bg-green-700   { background-color: #A07800 !important; color: #000 !important; }
html:not(.light) .bg-green-900   { background-color: rgba(234,179,0,0.1) !important; }
html:not(.light) .hover\:bg-green-500:hover { background-color: #D4A800 !important; color: #000 !important; }
html:not(.light) .hover\:bg-green-600:hover { background-color: #C89800 !important; color: #000 !important; }
html:not(.light) .border-green-400 { border-color: #EAB300 !important; }
html:not(.light) .border-green-600 { border-color: #C89800 !important; }
html:not(.light) .border-green-700 { border-color: #A07800 !important; }
html:not(.light) .border-green-800 { border-color: rgba(234,179,0,0.3) !important; }
html:not(.light) .border-green-900 { border-color: rgba(234,179,0,0.15) !important; }
html:not(.light) .hover\:text-green-300:hover { color: #F5CC33 !important; }
html:not(.light) .hover\:text-green-200:hover { color: #FFD740 !important; }
html:not(.light) .hover\:border-green-600:hover { border-color: #C89800 !important; }
html:not(.light) .hover\:border-green-500:hover { border-color: #D4A800 !important; }
html:not(.light) .text-cyan-400  { color: #F5CC33 !important; }
html:not(.light) .text-cyan-300  { color: #FFD740 !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Paiyper Blue Palette
   ────────────────────────────────────────────────────────── */
html.light {
  --paiyper-blue-light:   #7DD8F8;
  --paiyper-blue-mid:     #29A8E0;
  --paiyper-blue-core:    #1A7DC4;
  --paiyper-blue-deep:    #1155A6;
  --paiyper-blue-darkest: #0D3D7A;

  --p-bg:            #FFFFFF;
  --p-bg-2:          #F4F8FC;
  --p-bg-3:          #E8F3FA;
  --p-bg-4:          #F0F7FD;
  --p-bg-hover:      rgba(41,168,224,0.10);
  --p-bg-disabled:   #A8CFEA;
  --p-text:          #0D2B4A;
  --p-text-2:        #1A7DC4;
  --p-text-bright:   #29A8E0;
  --p-text-muted:    #7A9BB5;
  --p-text-on-accent:#FFFFFF;
  --p-accent:        #1A7DC4;
  --p-accent-2:      #29A8E0;
  --p-accent-3:      #7DD8F8;
  --p-border:        #D0E8F5;
  --p-border-2:      #A8CFEA;
  --p-border-soft:   #E8F3FA;
  --p-input-bg:      #F0F7FD;
  --p-link:          #1A7DC4;
  --p-warn:          #8A6200;
  --p-danger:        #c0392b;
  --p-stop:          #c0392b;
}

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Global base
   ────────────────────────────────────────────────────────── */
html.light body {
  background-color: var(--p-bg) !important;
  color: var(--p-text) !important;
}

html.light a { color: var(--p-link) !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Tailwind background overrides
   ────────────────────────────────────────────────────────── */
html.light .bg-black    { background-color: var(--p-bg)   !important; }
html.light .bg-gray-900 { background-color: var(--p-bg-2) !important; }
html.light .bg-gray-800 { background-color: var(--p-bg-3) !important; }
html.light .bg-gray-700 { background-color: #dde8f3       !important; }
html.light .bg-gray-600 { background-color: #c5d8ea       !important; }

html.light .hover\:bg-gray-700:hover { background-color: #dde8f3       !important; }
html.light .hover\:bg-gray-800:hover { background-color: var(--p-bg-3) !important; }

/* Green → Blue accent backgrounds */
html.light .bg-green-600 { background-color: var(--p-accent)  !important; color: var(--p-text-on-accent) !important; }
html.light .bg-green-500 { background-color: var(--p-accent-2) !important; color: var(--p-text-on-accent) !important; }
html.light .bg-green-700 { background-color: var(--paiyper-blue-deep, #1155A6) !important; }
html.light .bg-green-900 { background-color: rgba(17,85,166,0.15) !important; }

html.light .hover\:bg-green-500:hover { background-color: var(--p-accent-2) !important; color: var(--p-text-on-accent) !important; }
html.light .hover\:bg-green-600:hover { background-color: var(--p-accent)   !important; }

/* Blue buttons — remap to brand blue */
html.light .bg-blue-500 { background-color: var(--p-accent)   !important; }
html.light .bg-blue-600 { background-color: var(--p-text-2)   !important; }
html.light .bg-blue-800 { background-color: var(--paiyper-blue-deep, #1155A6) !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Tailwind text overrides
   ────────────────────────────────────────────────────────── */
html.light .text-green-400 { color: var(--p-text)    !important; }
html.light .text-green-300 { color: var(--p-text-2)  !important; }
html.light .text-green-500 { color: var(--paiyper-blue-deep, #1155A6) !important; }
html.light .text-green-600 { color: var(--paiyper-blue-deep, #1155A6) !important; }
html.light .text-green-100 { color: var(--p-text)    !important; }
html.light .text-cyan-400  { color: var(--p-accent)  !important; }
html.light .text-cyan-300  { color: var(--p-accent-2) !important; }
html.light .text-yellow-400 { color: #8A6200         !important; }

html.light .hover\:text-green-300:hover { color: var(--p-accent-2) !important; }
html.light .hover\:text-green-200:hover { color: var(--p-accent-2) !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Tailwind border overrides
   ────────────────────────────────────────────────────────── */
html.light .border-green-400 { border-color: var(--p-accent)   !important; }
html.light .border-green-600 { border-color: var(--p-border-2) !important; }
html.light .border-green-700 { border-color: var(--p-border-2) !important; }
html.light .border-green-800 { border-color: var(--p-border)   !important; }
html.light .border-green-900 { border-color: var(--p-border)   !important; }
html.light .border-gray-600  { border-color: var(--p-border-soft) !important; }
html.light .border-gray-700  { border-color: var(--p-border)   !important; }
html.light .border-gray-800  { border-color: var(--p-border-soft) !important; }
html.light .border-blue-400  { border-color: var(--p-accent)   !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Form inputs (global)
   ────────────────────────────────────────────────────────── */
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="password"],
html.light input[type="number"],
html.light input[type="search"],
html.light input[type="file"],
html.light select,
html.light textarea {
  background-color: var(--p-input-bg) !important;
  color: var(--p-text) !important;
  border-color: var(--p-border-2) !important;
}
html.light input::placeholder,
html.light textarea::placeholder {
  color: var(--p-text-muted) !important;
}
html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: var(--p-accent) !important;
  box-shadow: 0 0 0 3px rgba(41,168,224,0.18) !important;
  background-color: var(--p-bg) !important;
}

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Custom class overrides (per page)
   ────────────────────────────────────────────────────────── */

/* paiyper-editor.ejs */
html.light .page-card    { background: var(--p-bg-2) !important; border-color: var(--p-accent) !important; }
html.light .type-tile    { background: var(--p-bg) !important; border-color: var(--p-accent) !important; color: var(--p-text) !important; }
html.light .type-tile:hover { background: var(--p-bg-3) !important; border-color: var(--p-accent-2) !important; }
html.light .page-type-badge { background: rgba(41,168,224,0.15) !important; color: var(--p-accent) !important; }
html.light .field-input  { background: var(--p-input-bg) !important; border-color: var(--p-border-2) !important; color: var(--p-text) !important; }
html.light .field-input:focus { border-color: var(--p-accent) !important; }
html.light .avail-cell-on  { background: rgba(41,168,224,0.20) !important; color: var(--p-accent) !important; }
html.light .avail-cell-off { background: var(--p-bg-3) !important; }

/* ai-discover.ejs + ai-publisher.ejs */
html.light .user-bubble  { background: rgba(41,168,224,0.12) !important; border-color: var(--p-border-2) !important; color: var(--p-text) !important; }
html.light .ai-text      { background: var(--p-bg-2) !important; border-color: var(--p-border-soft) !important; color: var(--p-text) !important; }
html.light .chip         { border-color: var(--p-accent) !important; color: var(--p-accent) !important; background: var(--p-bg) !important; }
html.light .chip:hover   { background: var(--p-bg-3) !important; }

/* ai-publisher.ejs */
html.light #previewCol   { background: var(--p-bg-2) !important; }
html.light #userInput    { background: var(--p-input-bg) !important; border-color: var(--p-border-2) !important; color: var(--p-text) !important; }
html.light #userInput:focus { border-color: var(--p-accent) !important; }
html.light #sendBtn      { background: var(--p-accent) !important; color: var(--p-text-on-accent) !important; }
html.light #sendBtn:disabled { background: var(--p-bg-disabled) !important; }
html.light .page-pill    { background: var(--p-bg-2) !important; border-color: var(--p-border-2) !important; color: var(--p-text) !important; }
html.light .page-pill .ptype { color: var(--p-text-muted) !important; }

/* paiyper-reader.ejs */
html.light .page-row     { background: var(--p-bg-2) !important; border-color: var(--p-border) !important; color: var(--p-text) !important; }
html.light .page-row:hover { border-color: var(--p-accent-2) !important; }
html.light .price-tag    { color: var(--p-text-2) !important; }
html.light .btn-open     { background: var(--p-accent) !important; color: var(--p-text-on-accent) !important; }
html.light .btn-open:hover { background: var(--p-accent-2) !important; }
html.light .btn-view     { background: var(--paiyper-blue-deep, #1155A6) !important; color: #fff !important; }
html.light .btn-view:hover { background: var(--p-accent) !important; }

/* paiyper-page.ejs */
html.light .avail-on     { background: rgba(41,168,224,0.20) !important; color: var(--p-accent) !important; }

/* text-buyer.html */
html.light #ticker::before,
html.light #ticker::after { background: var(--p-accent) !important; opacity: 0.2 !important; }
html.light .tw-pre, html.light .tw-post, html.light .tw-chunk { color: var(--p-text) !important; }
html.light .tw-orp       { color: var(--p-accent) !important; }

/* media-buyer.html + video-buyer.html (bare button selector) */
html.light #stopBtn,
html.light #stopStream,
html.light #closeBtn,
html.light #panicBtn     { background: var(--p-stop) !important; color: #fff !important; }
html.light #fullPurchaseBtn { background: var(--paiyper-blue-deep, #1155A6) !important; color: #fff !important; }
html.light #status       { color: var(--p-warn) !important; }
html.light #timer        { color: var(--p-accent) !important; }
html.light #chapters button { background: var(--p-bg-2) !important; color: var(--p-text) !important; }
html.light #purchaseSummary {
  background: rgba(41,168,224,0.08) !important;
  border-color: var(--p-accent) !important;
}
html.light #purchaseSummary h3 { color: var(--p-accent) !important; }

/* buyer-search.html */
html.light .post         { background: var(--p-bg-2) !important; border-color: var(--p-border-2) !important; box-shadow: 0 2px 8px rgba(41,168,224,0.12) !important; }
html.light .post h3      { color: var(--p-accent) !important; }
html.light .media-badge  { background: var(--p-accent) !important; color: #fff !important; }
html.light .live-badge   { background: #d32f2f !important; }
html.light .upcoming-badge { background: var(--paiyper-blue-deep, #1155A6) !important; }
html.light .rating       { color: #8A6200 !important; }
html.light .meet-details { color: var(--p-accent) !important; }
html.light .viewer-count { color: var(--p-accent-2) !important; }

/* live-buyer.html */
html.light #liveChat     { background: var(--p-bg-2) !important; border-color: var(--p-border) !important; }
html.light #liveChat div { background: var(--p-bg-3) !important; }
html.light #chatMsg      { background: var(--p-bg-2) !important; color: var(--p-text) !important; border-color: var(--p-border-2) !important; }
html.light #sendChatBtn  { background: var(--p-accent) !important; color: var(--p-text-on-accent) !important; }

/* publisher.html */
html.light #liveChatPublisher     { background: var(--p-bg-2) !important; border-color: var(--p-border) !important; }
html.light #liveChatPublisher div { background: var(--p-bg-3) !important; }
html.light #publisherViewerCount  { color: var(--p-accent) !important; }
html.light #chat          { background: var(--p-bg-2) !important; }
html.light #chat .you     { background: var(--p-accent) !important; color: var(--p-text-on-accent) !important; }
html.light #chat .buyer   { background: var(--p-bg-3) !important; color: var(--p-text) !important; }

/* meet-buyer.html */
html.light #status        { color: var(--p-warn) !important; }

/* video elements */
html.light video          { border-color: var(--p-border) !important; background: var(--p-bg-3) !important; }

/* ──────────────────────────────────────────────────────────
   THEME TOGGLE BUTTON
   ────────────────────────────────────────────────────────── */
#theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--p-border-2);
  background: var(--p-bg-2);
  color: var(--p-text);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0;
  line-height: 1;
  user-select: none;
}
#theme-toggle:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}