/* ═══════════════════════════════════════════════════
   theme-tokens.css — Shared design tokens

   Usage: <link rel="stylesheet" href="theme-tokens.css">
   Set data-theme-flavor="gold" or "crimson" on <html>
   ═══════════════════════════════════════════════════ */

/* ── Gold flavor (Systems A/B: login, story, blog, character-creation,
      missing-nin, npc-mission, index, admin) ── */

[data-theme-flavor="gold"] {
  --bg-primary: #0a0a0f;
  --bg-secondary: #0c0c10;
  --bg-panel: rgba(10, 6, 2, 0.88);

  --text-primary: #f5f0e8;
  --text-secondary: #e8e8e8;
  --text-muted: #9e9680;

  --accent: #d4a017;
  --accent-hover: #e8b520;

  --border: rgba(212, 160, 23, 0.18);

  --button-bg: #b78c34;
  --button-text: #070707;

  /* Narrative accent — used by blog/story for editorial highlights,
     combat UI, consequence banners. Separate from the gold --accent. */
  --accent-narrative: #c0392b;
  --accent-narrative2: #e67e22;
}

/* ── Gold light mode (blog, story) ── */

[data-theme-flavor="gold"][data-theme="light"] {
  --bg-primary: #f5f0e8;
  --bg-secondary: #ece4d4;
  --bg-panel: rgba(255, 255, 255, 0.85);

  --text-primary: #1a1a2e;
  --text-secondary: #5a5a6e;
  --text-muted: #5a5a6e;

  --accent: #b8860b;
  --accent-hover: #9a7209;

  --border: rgba(140, 110, 20, 0.2);

  --button-bg: #b8860b;
  --button-text: #f5f0e8;

  --accent-narrative: #c0392b;
  --accent-narrative2: #e67e22;
}

/* ── Crimson flavor (9 pages: akatsuki-hq, bounty-board, clan-upgrades,
      kage-office, kekkei-genkai, marketplace, sage-training,
      season-info, world-events) ── */

[data-theme-flavor="crimson"] {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-panel: rgba(22, 33, 62, 0.8);

  --text-primary: #e0e0e0;
  --text-secondary: #e8e8e8;
  --text-muted: #a0a0a0;

  --accent: #e94560;
  --accent-hover: #ff6b6b;

  --border: #e94560;

  --button-bg: #0f3460;
  --button-text: #e0e0e0;
}

/* ── Crimson light mode ── */

[data-theme-flavor="crimson"][data-theme="light"] {
  --bg-primary: #e2e8f0;
  --bg-secondary: #d5dde8;
  --bg-panel: rgba(255, 255, 255, 0.82);

  --text-primary: #1a2036;
  --text-secondary: #4a5568;
  --text-muted: #718096;

  --accent: #b8354a;
  --accent-hover: #9a2a3e;

  --border: #c93048;

  --button-bg: #1a3568;
  --button-text: #ffffff;
}

/* ═══════════════════════════════════════════════════
   Theme toggle — single canonical component
   Used by: index, login, character-creation, story,
   blog, npc-mission, shinobi-character-creation, admin
   ═══════════════════════════════════════════════════ */

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255,255,255,.15);
  color: var(--text-secondary); cursor: pointer; transition: all .2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--text-primary); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.04);
}
[data-theme="light"] .theme-toggle {
  color: var(--text-secondary); border-color: rgba(0,0,0,.12); background: transparent;
}
[data-theme="light"] .theme-toggle:hover {
  color: var(--text-primary); border-color: rgba(0,0,0,.25); background: rgba(0,0,0,.04);
}