/* ═══════════════════════════════════════════════
   THEME.CSS — minimalist dark-gray / white
   Single theme. Restrained. Mobile-first.
   The product name never drives any visual choice.
═══════════════════════════════════════════════ */

:root {
  /* ── surfaces — dark gray, layered by lightness ── */
  --bg:        #1a1a1c;
  --bg-raised: #212123;
  --bg-card:   #252527;
  --bg-hi:     #2e2e31;
  --bg-input:  #2a2a2d;

  /* ── borders ── */
  --border:    #313134;
  --border-md: #3c3c40;
  --border-hi: #4a4a4f;

  /* ── text — white scale ── */
  --text:      #f2f2f3;
  --text-2:    #a0a0a4;
  --text-3:    #6a6a6f;
  --text-4:    #48484c;
  --text-inv:  #1a1a1c;

  /* ── accent — plain white, no hue ── */
  --accent:      #f2f2f3;
  --accent-text: #f2f2f3;
  --accent-dim:  rgba(242,242,243,0.08);
  --accent-glow: rgba(242,242,243,0.14);

  /* ── semantic — desaturated, used sparingly ── */
  --success: #7fb88a;
  --danger:  #d68a8a;

  /* ── nav ── */
  --nav-bg: rgba(26,26,28,0.85);
  --bot-bg: rgba(33,33,35,0.95);

  /* ── overlay ── */
  --overlay-bg: rgba(0,0,0,0.6);
  --modal-bg:   #212123;

  /* ── shadow — minimal separation only ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);

  /* ── radius ── */
  --r-sm: 8px;
  --r:    11px;
  --r-lg: 16px;

  /* ── tags — uniform neutral gray ── */
  --tag-bg:     #2a2a2d;
  --tag-text:   #b0b0b4;
  --tag-border: #38383c;
}

/* Genre helpers — all identical neutral look.
   Genre/name never drives color. */
.g-romance, .g-detective, .g-fantasy, .g-epic,
.g-thriller, .g-mentor, .g-adventure, .g-drama {
  background: var(--tag-bg);
  color: var(--tag-text);
  border: 1px solid var(--tag-border);
}