:root {
  --bg-page: #0f0f1a;
  --bg-card: rgba(22, 33, 62, 0.55);
  --bg-card-hover: rgba(26, 40, 72, 0.65);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.18);
  --accent: #e94560;
  --accent-hover: #ff5a78;
  --accent-gold: #f8d030;
  --text-primary: #e0e0e0;
  --text-secondary: #9a9ab0;
  --text-muted: #6a6a8a;
  --radius-sm: 6px;
  --radius-md: 10px;
  --font-body: 'Inter', sans-serif;
  --font-pixel: 'Press Start 2P', monospace;

  /* RGB triplets for rgba(var(--rgb-*), opacity) */
  --rgb-success: 74, 222, 128;
  --rgb-danger: 248, 113, 113;
  --rgb-streamer: 96, 165, 250;
  --rgb-type-blue: 74, 134, 192;
  --rgb-accent: 233, 69, 96;
  --rgb-gold: 248, 208, 48;
  --rgb-twitch: 145, 70, 255;
  --rgb-twitch-hover: 169, 112, 255;
  --rgb-slot-empty: 30, 58, 95;

  --text-on-dark: #fff;
  --text-dim: #888;
  --text-meta: #555;
  --text-note-muted: #9aa0b8;
  --text-result: #ccc;
  --text-stress: #bfb7d8;
  --text-placeholder-title: #8a8a9a;
  --text-rewards: #f39c12;
  --text-history-name: #eee;
  --text-controls-unit: #666;
  --text-tab-muted: #888;
  --text-tab-hover: #bbb;
  --text-stats-toggle: #8ab0d0;
  --text-box-nav-disabled: #3a4a5a;

  --border-top-faint: rgba(255, 255, 255, 0.05);
  --border-dashed-faint: rgba(255, 255, 255, 0.12);
  --border-input: rgba(255, 255, 255, 0.12);
  --bg-input: rgba(13, 27, 62, 0.6);
  --bg-tab-bar: rgba(255, 255, 255, 0.04);
  --bg-toast: rgba(22, 33, 62, 0.9);
  --scrollbar-thumb: #333;
  --scrollbar-thumb-hover: #555;
  /* exception: browser accent-color — keep literal */
  --accent-checkbox: #4b2f68;
  --slot-selected-bg: #2a5090;
  --toggle-track-off: #333;
  --toggle-knob: #ccc;

  --pokeball-rim: #2a2a3a;
  --pokeball-highlight: #f5f5f5;

  --btn-disabled-bg: #1e1e2e;
  --btn-disabled-border: #2a2a3a;
  --btn-disabled-text: #666;
  --btn-secondary-bg: #4a4a5a;
  --btn-secondary-hover: #5a5a6a;

  --progress-fill-start: #c73e54;
  --progress-gold-start: #c09020;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card-elevated: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.3);

  --twitch-purple: #9146ff;
  --twitch-purple-hover: #a970ff;

  --color-success: #4ade80;
  --color-danger: #f87171;

  /* Ranking medals */
  --rank-gold: #ffd700;
  --rank-silver: #c0c0c0;
  --rank-bronze: #cd7f32;

  /* Raid overlay */
  --raid-text: #e9ecff;
  --raid-ws-error: #e53935;
  --raid-hp-high: #5ddf6e;
  --raid-hp-mid: #3cd279;
  --raid-hp-low: #2bb55e;

  /* Grade badge colors */
  --grade-s: #ffd980;
  --grade-a: #7bd6ff;
  --grade-b: #8ce39d;
  --grade-c: #b8b8ff;
  --grade-d: #f1b276;
  --grade-e: #e59595;

  /* Grade badge RGB triplets for alpha backgrounds */
  --rgb-grade-s: 255, 217, 128;
  --rgb-grade-s-dark: 255, 171, 74;
  --rgb-grade-a: 88, 198, 255;
  --rgb-grade-b: 93, 210, 115;
  --rgb-grade-c: 141, 141, 255;
  --rgb-grade-d: 241, 178, 118;
  --rgb-grade-e: 229, 149, 149;
}