/* ═══════════════════════════════════════════
   WeedTV 2026 — Theme System
   Multi-color + Light/Dark + Tailwind Compat
   ═══════════════════════════════════════════ */

/* ── Tailwind Config ── */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&display=swap');

/* ── Theme Colors ── */
[data-theme="green"]  { --c-500:#22c55e; --c-600:#16a34a; --c-400:#4ade80; --c-700:#15803d; --c-glow:rgba(34,197,94,.12); --c-ring:rgba(34,197,94,.35); }
[data-theme="purple"] { --c-500:#8b5cf6; --c-600:#7c3aed; --c-400:#a78bfa; --c-700:#6d28d9; --c-glow:rgba(139,92,246,.12); --c-ring:rgba(139,92,246,.35); }
[data-theme="blue"]   { --c-500:#3b82f6; --c-600:#2563eb; --c-400:#60a5fa; --c-700:#1d4ed8; --c-glow:rgba(59,130,246,.12); --c-ring:rgba(59,130,246,.35); }
[data-theme="orange"] { --c-500:#f97316; --c-600:#ea580c; --c-400:#fb923c; --c-700:#c2410c; --c-glow:rgba(249,115,22,.12); --c-ring:rgba(249,115,22,.35); }
[data-theme="teal"]   { --c-500:#14b8a6; --c-600:#0d9488; --c-400:#2dd4bf; --c-700:#0f766e; --c-glow:rgba(20,184,166,.12); --c-ring:rgba(20,184,166,.35); }

/* ── Dark Mode (default) ── */
[data-mode="dark"] {
  --bg-body: #09090b;
  --bg-card: #18181b;
  --bg-elevated: #27272a;
  --bg-input: #27272a;
  --border: #3f3f46;
  --border-light: #52525b;
  --text: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ── Light Mode ── */
[data-mode="light"] {
  --bg-body: #fafafa;
  --bg-card: #ffffff;
  --bg-elevated: #f4f4f5;
  --bg-input: #f4f4f5;
  --border: #e4e4e7;
  --border-light: #d4d4d8;
  --text: #09090b;
  --text-secondary: #52525b;
  --text-muted: #a1a1aa;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  color-scheme: light;
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: 'Roboto', sans-serif; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg-body);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, select, input { font-family: inherit; }

/* ── Primary Color Utilities ── */
.text-primary { color: var(--c-500) !important; }
.bg-primary { background: var(--c-500) !important; }
.bg-primary-hover:hover { background: var(--c-600) !important; }
.bg-primary-glow { background: var(--c-glow) !important; }
.border-primary { border-color: var(--c-500) !important; }
.ring-primary:focus { box-shadow: 0 0 0 3px var(--c-ring) !important; }

/* ── Component Tokens ── */
.bg-body { background: var(--bg-body); }
.bg-card { background: var(--bg-card); }
.bg-elevated { background: var(--bg-elevated); }
.bg-input { background: var(--bg-input); }
.border-theme { border-color: var(--border); }
.text-main { color: var(--text); }
.text-sub { color: var(--text-secondary); }
.text-dim { color: var(--text-muted); }
.shadow-card { box-shadow: var(--shadow-sm); }
.shadow-card-md { box-shadow: var(--shadow-md); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Carousel Scroll ── */
.carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.carousel-track::-webkit-scrollbar { height: 4px; }
.carousel-track > * { scroll-snap-align: start; flex-shrink: 0; }

/* ── AZ Scroller ── */
.az-scroller { display: flex; gap: 2px; flex-wrap: wrap; padding: 8px 0; }
.az-scroller span { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border-radius: 6px; cursor: pointer; color: var(--text-muted); transition: all .15s; }
.az-scroller span:hover { background: var(--c-glow); color: var(--c-500); }
.az-scroller span.active { background: var(--c-500); color: #fff; }

/* ── THC Progress Bar ── */
.thc-bar { height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.thc-bar .fill { height: 100%; background: linear-gradient(90deg, var(--c-500), var(--c-400)); border-radius: 2px; transition: width .3s; }

/* ── Potency Meter ── */
.potency-meter { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.potency-meter label { width: 36px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.potency-meter .bar { flex: 1; height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; }
.potency-meter .bar .fill { height: 100%; border-radius: 4px; transition: width .4s; }
.potency-meter .val { width: 40px; text-align: right; font-size: 13px; font-weight: 700; }

/* ── Terpene Pills ── */
.terpene-chart { display: flex; gap: 8px; flex-wrap: wrap; }
.terpene-pill { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-elevated); border-radius: 999px; font-size: 12px; }
.terpene-pill .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── Featured Scroller (in video cards) ── */
.featured-scroller { padding: 8px 12px; border-top: 1px solid var(--border); }
.featured-scroller .fs-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 6px; }
.featured-scroller .fs-track { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.featured-scroller .fs-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--bg-elevated); border-radius: 8px; cursor: pointer; flex-shrink: 0; min-width: 140px; font-size: 11px; }
.featured-scroller .fs-item:hover { background: var(--c-glow); }
.featured-scroller .fs-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.featured-scroller .fs-type { color: var(--text-muted); font-size: 10px; }

/* ── Strain Type Badges ── */
.strain-sativa { background: #eab308; color: #422006; }
.strain-indica { background: #8b5cf6; color: #fff; }
.strain-hybrid { background: #22c55e; color: #052e16; }

/* ── Live Badge ── */
.live-badge { position: absolute; top: 8px; left: 8px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .5px; }

/* ── Mobile Nav ── */
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--bg-card); border-top: 1px solid var(--border); padding: 4px 0 env(safe-area-inset-bottom, 4px); }
.mobile-nav ul { display: flex; list-style: none; justify-content: space-around; }
.mobile-nav li a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; font-size: 10px; font-weight: 500; color: var(--text-muted); transition: color .2s; }
.mobile-nav li a.active, .mobile-nav li a:hover { color: var(--c-500); }
.mobile-nav li a i { font-size: 18px; }

@media (max-width: 768px) {
  .mobile-nav { display: block; }
  body { padding-bottom: 64px; }
  .desktop-nav { display: none !important; }
}

/* ── Custom Input Styles ── */
.input-theme {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.input-theme:focus { outline: none; border-color: var(--c-500); box-shadow: 0 0 0 3px var(--c-ring); }
.input-theme::placeholder { color: var(--text-muted); }

select.input-theme { cursor: pointer; appearance: auto; }

/* ── Button Primary Dynamic ── */
.btn-primary-dynamic {
  background: var(--c-500);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s, transform .1s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary-dynamic:hover { background: var(--c-600); }
.btn-primary-dynamic:active { transform: scale(.98); }
.btn-primary-dynamic.sm { padding: 6px 14px; font-size: 12px; }
.btn-primary-dynamic.lg { padding: 14px 28px; font-size: 16px; }

/* ── Sponsor Slot ── */
.sponsor-slot {
  background: linear-gradient(135deg, var(--c-700), var(--c-500));
  border-radius: 12px;
  padding: 24px;
  color: #fff;
  margin: 24px 0;
}

/* ── TokeCoin Specific ── */
.tc-wallet{background:linear-gradient(135deg,var(--c-600),var(--c-400));border-radius:16px;padding:28px;color:#fff;position:relative;overflow:hidden}
.tc-wallet::before{content:'';position:absolute;top:-40%;right:-20%;width:200px;height:200px;background:rgba(255,255,255,.08);border-radius:50%}
.tc-wallet::after{content:'';position:absolute;bottom:-30%;left:-10%;width:160px;height:160px;background:rgba(255,255,255,.05);border-radius:50%}
.tc-wallet *{position:relative;z-index:1}
.tc-chart{height:120px;display:flex;align-items:flex-end;gap:3px;padding:12px;overflow:hidden;background:var(--bg-elevated);border-radius:8px;margin-top:12px}
.tc-chart-bar{flex:1;background:var(--c-500);border-radius:3px 3px 0 0;min-height:4px}
.tc-tabs{display:flex;gap:0;overflow:hidden;border-radius:12px;border:1px solid var(--border);background:var(--bg-card)}
.tc-tab{flex:1;padding:14px 16px;text-align:center;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;background:transparent;color:var(--text-muted);border:none}
.tc-tab:hover{background:var(--bg-elevated);color:var(--text)}
.tc-tab.active{background:var(--c-500);color:#fff}
.tc-panel{display:none}.tc-panel.active{display:block}
.tc-lt{width:100%;border-collapse:collapse}
.tc-lt th{text-align:left;padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:2px solid var(--border)}
.tc-lt td{padding:12px;border-bottom:1px solid var(--border);font-size:13px}
.tc-lt tr:hover{background:var(--bg-elevated)}
.tc-st{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.tc-st.ok{background:rgba(34,197,94,.15);color:#22c55e}
.tc-st.pn{background:rgba(234,179,8,.15);color:#eab308}
.tc-st.rw{background:rgba(139,92,246,.15);color:#8b5cf6}

@media(max-width:900px){
  .tc-dashboard-grid{grid-template-columns:1fr !important}
}
@media(max-width:600px){
  .tc-tabs{flex-wrap:wrap}
  .tc-tab{min-width:calc(50% - 1px)}
}

/* ── Cart Dropdown ── */
.cart-btn { position: relative; cursor: pointer; }
.cart-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.cart-btn:hover .cart-dropdown { display: block; }

/* ── Print ── */
@media print { .mobile-nav, .desktop-nav, .util-bar { display: none !important; } }