/* ================================================================
   LOKTUBE v224 — Theme Modes Expansion
   ------------------------------------------------------------------
   Adds 5 new UI modes on top of the existing dark/light pair:
   amoled, sepia, ocean, contrast, tiranga.

   Each block overrides the same token set already established by
   v50_master.css (--bg..--bg5, --border, --border2, --text..--text3,
   --bg-hover) and v221's --bg1 fix, so every existing component that
   already uses these vars (cards, navbar, bottom-nav, cat-bar, etc.)
   picks up the new palette automatically — no per-component CSS
   needed.

   LOAD ORDER: must load AFTER v50_master.css, v205_patch.css and
   theme_unify_v221.css so these overrides win. header.php loads it
   last for that reason.

   --accent (brand orange) is intentionally left untouched in every
   mode except contrast (needs a brighter, higher-contrast accent) —
   keeping the same accent everywhere keeps CTAs/buttons/brand
   recognizable no matter which mode is active.
   ================================================================ */

/* ── AMOLED — true black, battery-friendly on OLED screens ── */
[data-theme="amoled"] {
  --bg: #000000; --bg1: #000000; --bg2: #000000; --bg3: #0A0A0A;
  --bg4: #141414; --bg5: #1E1E1E; --bg-hover: rgba(255,107,0,.08);
  --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.16);
  --text: #F5F5F5; --text2: #9A9A9A; --text3: #5A5A5A;
}

/* ── SEPIA — warm desi paper tone, easy on the eyes at night ── */
[data-theme="sepia"] {
  --bg: #F4E9D8; --bg1: #FBF3E4; --bg2: #FBF3E4; --bg3: #EDDCC0;
  --bg4: #E2CBA0; --bg5: #D3B685; --bg-hover: rgba(180,100,30,.06);
  --border: rgba(120,70,20,.18); --border2: rgba(120,70,20,.32);
  --text: #3A2313; --text2: #7A5636; --text3: #A9835A;
}

/* ── OCEAN — cool blue-teal, calmer alternative to default dark ── */
[data-theme="ocean"] {
  --bg: #0A1A24; --bg1: #0D212D; --bg2: #0F2634; --bg3: #153649;
  --bg4: #1C4A63; --bg5: #245D7D; --bg-hover: rgba(0,184,212,.08);
  --border: rgba(0,184,212,.16); --border2: rgba(0,184,212,.3);
  --text: #E5F4FA; --text2: #8FB9C9; --text3: #4F7A8C;
}

/* ── CONTRAST — high-contrast / accessibility mode ── */
[data-theme="contrast"] {
  --bg: #000000; --bg1: #000000; --bg2: #000000; --bg3: #000000;
  --bg4: #0D0D0D; --bg5: #1A1A1A; --bg-hover: rgba(255,179,0,.16);
  --border: rgba(255,255,255,.45); --border2: rgba(255,255,255,.7);
  --text: #FFFFFF; --text2: #FFFFFF; --text3: #E0E0E0;
  --accent: #FFB300; --g-btn: linear-gradient(135deg,#FFB300,#FFD54F);
}
[data-theme="contrast"] * { text-decoration-thickness: 2px; }

/* ── TIRANGA — festive tricolor-accented dark mode ── */
[data-theme="tiranga"] {
  --bg: #0C0C0C; --bg1: #121212; --bg2: #141414; --bg3: #1D1710;
  --bg4: #241C10; --bg5: #2E2412; --bg-hover: rgba(255,107,0,.09);
  --border: rgba(255,153,51,.2); --border2: rgba(19,136,8,.28);
  --text: #F5F0E8; --text2: #B8A88E; --text3: #7A6D58;
  --accent2: #138808;
}
[data-theme="tiranga"] .navbar,
[data-theme="tiranga"] .bottom-nav {
  border-image: linear-gradient(90deg,#FF9933,#FFFFFF,#138808) 1;
}

/* ── Theme mode picker (used by the expanded toggle) ───────────── */
.theme-mode-menu {
  position: fixed; z-index: 9999; right: 12px; bottom: calc(var(--bottom-h,64px) + 12px);
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px;
  padding: 6px; display: none; flex-direction: column; gap: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.theme-mode-menu.open { display: flex; }
.theme-mode-menu button {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: none; border: none; color: var(--text); font-size: 13px;
  font-weight: 600; border-radius: 9px; cursor: pointer; text-align: left;
}
.theme-mode-menu button:hover,
.theme-mode-menu button[aria-current="true"] { background: var(--bg-hover); color: var(--accent); }
.theme-mode-menu .swatch {
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border2); flex: none;
}