/* ============================================================================ POLLOS LIVE — SITE-WIDE THEME Every page defines the same CSS variables (--bg, --bg-soft, --ink, --line…), so flipping those in one place re-themes most of the site automatically. The rules under them mop up the places that hardcode #fff / dark text. Applied by js/theme.js, which sets before paint so there is never a white flash. ========================================================================== */ html[data-theme="dark"]{ --ink:#F2F2F4; --ink-soft:#C9C9CF; --ink-mute:#9A9AA2; --bg:#0F0F12; --bg-soft:#191920; --line:rgba(255,255,255,.11); --card:#17171C; --cream:#241E12; --live-surface:#141418; --live-surface-2:#0E0E11; --live-ink:#F2F2F4; --live-ink-mute:#9A9AA2; --live-line:rgba(255,255,255,.10); color-scheme:dark; } html[data-theme="dark"] body{background:var(--bg);color:var(--ink);} /* ---- surfaces that hardcode white ---- */ html[data-theme="dark"] .card, html[data-theme="dark"] .tile, html[data-theme="dark"] .panel, html[data-theme="dark"] .modal, html[data-theme="dark"] .m-box, html[data-theme="dark"] .ins-box, html[data-theme="dark"] .settings-modal, html[data-theme="dark"] .stamp-modal, html[data-theme="dark"] .auth-modal, html[data-theme="dark"] .post-box, html[data-theme="dark"] .item-card, html[data-theme="dark"] .staff-card, html[data-theme="dark"] .event-card, html[data-theme="dark"] .how-card, html[data-theme="dark"] .dish, html[data-theme="dark"] .salsas, html[data-theme="dark"] .rs, html[data-theme="dark"] .abt-card, html[data-theme="dark"] .feed-item, html[data-theme="dark"] .ig-post, html[data-theme="dark"] .up-row, html[data-theme="dark"] .act-row-c, html[data-theme="dark"] .channel-bar, html[data-theme="dark"] .ctl-sec, html[data-theme="dark"] .pd, html[data-theme="dark"] .clip-box, html[data-theme="dark"] .review, html[data-theme="dark"] .dash-feed{ background:var(--card); color:var(--ink); border-color:var(--line); } /* ---- softer inset surfaces ---- */ html[data-theme="dark"] .ctl-card, html[data-theme="dark"] .pd-item, html[data-theme="dark"] .pd-receipt, html[data-theme="dark"] .ph-act, html[data-theme="dark"] .ph-hrow, html[data-theme="dark"] .ph-mem, html[data-theme="dark"] .pack, html[data-theme="dark"] .pay-b, html[data-theme="dark"] .act-q, html[data-theme="dark"] .voter-chip, html[data-theme="dark"] .ti-card, html[data-theme="dark"] .lv-row, html[data-theme="dark"] .le-stat, html[data-theme="dark"] .le-res, html[data-theme="dark"] .unlock-box, html[data-theme="dark"] .req-opt, html[data-theme="dark"] .seg-ctl, html[data-theme="dark"] .chart-filter, html[data-theme="dark"] .tab-b, html[data-theme="dark"] .theme-pick button{ background:var(--bg-soft); color:var(--ink); border-color:var(--line); } /* ---- navigation / sticky bars ---- */ html[data-theme="dark"] .nav, html[data-theme="dark"] nav, html[data-theme="dark"] .topbar, html[data-theme="dark"] .tabs-bar, html[data-theme="dark"] .tabs, html[data-theme="dark"] .biz-tabs{ background:rgba(20,20,26,.92); border-color:var(--line); color:var(--ink); } html[data-theme="dark"] .chip-btn{background:var(--bg-soft);color:var(--ink);border-color:var(--line);} html[data-theme="dark"] .tab-b.on, html[data-theme="dark"] .biz-tabs button.on, html[data-theme="dark"] .tabs button.on{background:#F2F2F4;color:#141418;} html[data-theme="dark"] .seg-ctl button.active, html[data-theme="dark"] .chart-filter.active{background:#2A2A33;color:#fff;} /* ---- form controls ---- */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .pd-in, html[data-theme="dark"] .clip-in{ background:var(--bg-soft); color:var(--ink); border-color:var(--line); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{color:var(--ink-mute);} /* ---- text tones ---- */ html[data-theme="dark"] .empty-state, html[data-theme="dark"] .item-sub, html[data-theme="dark"] .t-sub, html[data-theme="dark"] .ch-followers, html[data-theme="dark"] .pick-hint, html[data-theme="dark"] .foot-col, html[data-theme="dark"] .sec-head .sh-s, html[data-theme="dark"] .ctl-sub{color:var(--ink-mute);} html[data-theme="dark"] h1,html[data-theme="dark"] h2, html[data-theme="dark"] h3,html[data-theme="dark"] h4, html[data-theme="dark"] .card-title, html[data-theme="dark"] .t-value, html[data-theme="dark"] .section-title{color:var(--ink);} /* ---- light-tinted callouts ---- */ html[data-theme="dark"] .warn-box, html[data-theme="dark"] .note-box, html[data-theme="dark"] .announce{ background:rgba(245,161,28,.12); color:#FFD9A0; border-color:rgba(245,161,28,.28); } /* ---- footer / page chrome ---- */ html[data-theme="dark"] footer, html[data-theme="dark"] .foot{background:var(--bg);color:var(--ink-mute);border-color:var(--line);} /* ---- keep brand colours punchy (never dim these) ---- */ html[data-theme="dark"] .btn-red, html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-follow, html[data-theme="dark"] .btn-sub, html[data-theme="dark"] .btn-vote, html[data-theme="dark"] .ctl-btn.red, html[data-theme="dark"] .pd-go, html[data-theme="dark"] .clip-go{color:#fff;} html[data-theme="dark"] .btn-white{background:var(--bg-soft);color:var(--ink);border-color:var(--line);} html[data-theme="dark"] .btn-soft{background:var(--bg-soft);color:var(--ink);} /* images/logos that sat on white need their own chip in dark */ html[data-theme="dark"] .live-ring img, html[data-theme="dark"] .ig-av{background:#fff;}