/* ============================================================
   themes — three variants inspired by PS3 XMB seasonal moods
   [data-theme="black"]  → classic dark
   [data-theme="gray"]   → silver / cool day
   [data-theme="beige"]  → warm sepia
   ============================================================ */

/* --- BLACK (default) --- */
:root,
:root[data-theme="black"] {
  --bg: #05080d;
  --fg: #eef2f7;
  --muted: #a7b0bd;
  --accent: #7fd0ff;
  --accent-strong: #35a8ff;
  --card: rgba(14, 20, 30, 0.55);
  --card-border: rgba(255,255,255,0.10);
  --divider: rgba(255,255,255,0.08);

  --icon-bg: rgba(255,255,255,0.06);
  --icon-border: rgba(255,255,255,0.14);
  --icon-active-glow: 0 0 40px rgba(120,200,255,0.55), 0 0 8px rgba(255,255,255,0.6);

  --toast-bg: rgba(10, 16, 26, 0.85);
  --toast-fg: #eaf3ff;
  --toast-border: rgba(255,255,255,0.12);

  --kbd-bg: rgba(255,255,255,0.08);
  --kbd-fg: #eaf3ff;
  --kbd-border: rgba(255,255,255,0.18);
  --kbd-shadow: rgba(255,255,255,0.08);
}

/* --- GRAY --- */
:root[data-theme="gray"] {
  --bg: #b8bcc2;
  --fg: #101318;
  --muted: #3a4048;
  --accent: #1f4b6b;
  --accent-strong: #12324a;
  --card: rgba(255,255,255,0.45);
  --card-border: rgba(0,0,0,0.10);
  --divider: rgba(0,0,0,0.08);

  --icon-bg: rgba(255,255,255,0.35);
  --icon-border: rgba(0,0,0,0.12);
  --icon-active-glow: 0 0 30px rgba(255,255,255,0.85), 0 0 6px rgba(255,255,255,0.9);

  --toast-bg: rgba(255,255,255,0.85);
  --toast-fg: #0d1116;
  --toast-border: rgba(0,0,0,0.12);

  --kbd-bg: rgba(255,255,255,0.65);
  --kbd-fg: #0d1116;
  --kbd-border: rgba(0,0,0,0.18);
  --kbd-shadow: rgba(0,0,0,0.08);
}

/* --- BEIGE --- */
:root[data-theme="beige"] {
  --bg: #e9dcc3;
  --fg: #2a1e10;
  --muted: #5a4630;
  --accent: #b8611b;
  --accent-strong: #8f4711;
  --card: rgba(255,247,232,0.55);
  --card-border: rgba(90,60,30,0.18);
  --divider: rgba(90,60,30,0.14);

  --icon-bg: rgba(255,247,232,0.45);
  --icon-border: rgba(90,60,30,0.20);
  --icon-active-glow: 0 0 32px rgba(255, 200, 120, 0.85), 0 0 6px rgba(255, 240, 200, 0.9);

  --toast-bg: rgba(255,247,232,0.9);
  --toast-fg: #2a1e10;
  --toast-border: rgba(90,60,30,0.18);

  --kbd-bg: rgba(255,247,232,0.7);
  --kbd-fg: #2a1e10;
  --kbd-border: rgba(90,60,30,0.25);
  --kbd-shadow: rgba(90,60,30,0.10);
}