/* ─── Puzzle Light ───────────────────────────────────────────────────────── */
[data-theme="puzzle-light"] {
  /* Campfire theme vars */
  --bg:         #faf5ff;
  --bg-sidebar: #f0e8fc;
  --bg-card:    #ffffff;
  --bg-hover:   #f5eeff;
  --bg-inset:   #fdfaff;
  --bg-alt:     rgba(0,0,0,0.025);
  --border:     #d8c8f0;
  --border-sub: #e8ddf8;
  --text:       #1c0c28;
  --text-muted: #7038a8;
  --text-dim:   #b898d8;
  --accent:     #8030d8;
  --accent-bg:  rgba(128,48,216,0.1);
  --color-green:  #107840; --green-bg:  rgba(16,120,64,0.1);
  --color-yellow: #a07000; --yellow-bg: rgba(160,112,0,0.1);
  --color-orange: #b04808; --orange-bg: rgba(176,72,8,0.1);
  --color-red:    #a81028; --red-bg:    rgba(168,16,40,0.1);
  --r-common: #607888; --r-rare: #1860b8; --r-epic: #8030d8; --r-legendary: #b07000;
  --medal-gold: #a07000; --medal-silver: #607080; --medal-bronze: #885030;

  /* Override Hextra's Tailwind color vars so all elements theme automatically */
  --hx-color-gray-50:   var(--bg-inset);
  --hx-color-gray-100:  var(--bg-hover);
  --hx-color-gray-200:  var(--border);
  --hx-color-gray-300:  var(--border);
  --hx-color-gray-400:  var(--text-dim);
  --hx-color-gray-500:  var(--text-muted);
  --hx-color-gray-600:  var(--text-muted);
  --hx-color-gray-700:  var(--text);
  --hx-color-gray-800:  var(--text);
  --hx-color-gray-900:  var(--text);
  --hx-color-primary-100: var(--accent-bg);
  --hx-color-primary-200: var(--accent-bg);
  --hx-color-primary-600: var(--accent);
  --hx-color-primary-700: var(--accent);
  --hx-color-primary-800: var(--accent);
}

/* ─── Puzzle Dark ────────────────────────────────────────────────────────── */
[data-theme="puzzle-dark"] {
  /* Campfire theme vars */
  --bg:         #160f20;
  --bg-sidebar: #1e1530;
  --bg-card:    #281d3c;
  --bg-hover:   #342550;
  --bg-inset:   #0e0a18;
  --bg-alt:     rgba(255,255,255,0.025);
  --border:     #3c2858;
  --border-sub: #2a1c44;
  --text:       #f0d0f8;
  --text-muted: #9858c0;
  --text-dim:   #482870;
  --accent:     #f050c0;
  --accent-bg:  rgba(240,80,192,0.15);
  --color-green:  #00d870; --green-bg:  rgba(0,216,112,0.12);
  --color-yellow: #f8c030; --yellow-bg: rgba(248,192,48,0.12);
  --color-orange: #f07020; --orange-bg: rgba(240,112,32,0.12);
  --color-red:    #e02850; --red-bg:    rgba(224,40,80,0.12);
  --r-common: #90a8c8; --r-rare: #50a0f0; --r-epic: #f050c0; --r-legendary: #f8b030;
  --medal-gold: #f8c030; --medal-silver: #b0b8c8; --medal-bronze: #c87840;

  /* Override Hextra's Tailwind color vars */
  --hx-color-dark:       var(--bg);
  --hx-color-gray-50:    var(--bg-inset);
  --hx-color-gray-100:   var(--bg-hover);
  --hx-color-gray-200:   var(--border);
  --hx-color-gray-300:   var(--border);
  --hx-color-gray-400:   var(--text-dim);
  --hx-color-gray-500:   var(--text-muted);
  --hx-color-gray-600:   var(--text-muted);
  --hx-color-gray-700:   var(--text);
  --hx-color-gray-800:   var(--text);
  --hx-color-gray-900:   var(--text);
  --hx-color-neutral-50:  var(--bg-card);
  --hx-color-neutral-200: var(--border);
  --hx-color-neutral-300: var(--border);
  --hx-color-neutral-400: var(--text-muted);
  --hx-color-neutral-500: var(--text-muted);
  --hx-color-neutral-600: var(--text-muted);
  --hx-color-neutral-700: var(--text);
  --hx-color-neutral-800: var(--border);
  --hx-color-neutral-900: var(--bg-sidebar);
  --hx-color-primary-100: var(--accent-bg);
  --hx-color-primary-200: var(--accent-bg);
  --hx-color-primary-400: var(--accent);
  --hx-color-primary-600: var(--accent);
  --hx-color-primary-700: var(--accent);
  --hx-color-primary-800: var(--accent);
}