:root {
  /* surfaces - obsidian */
  --bg: #0a0a0c;
  --bg-raised: #121216;
  /* Opaque content-surface fills. These must stay opaque: cards/panels carry
     backdrop-filter, and nesting a blurred surface inside another (e.g. a
     .card inside a .panel) frosts WHITE in GPU-composited Chrome. An opaque
     fill paints over the blur so that can never happen. Translucent glass for
     genuinely floating elements lives in --glass below. */
  --surface: #141418;
  --surface-2: #1d1d22;
  --glass: rgba(18, 18, 22, 0.72);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* text */
  --text: #f5f5f7;
  --text-2: rgba(245, 245, 247, 0.64);
  --text-3: rgba(245, 245, 247, 0.4);

  /* brand */
  --gold: #e3b765;
  --ember: #ff7a45;
  --steel: #7fb8f0;
  --good: #43d17c;
  --bad: #ff5a52;
  --warn: #ffd60a;

  /* legacy aliases */
  --bg2: var(--bg-raised);
  --panel: var(--surface);
  --panel2: var(--surface-2);
  --line2: var(--line-strong);
  --dim: var(--text-2);
  --accent: var(--gold);
  --accent2: var(--steel);
  --shadow: rgba(0, 0, 0, 0.5);

  /* rarity */
  --rar-common: #a9b1bc;
  --rar-magic: #66a8ff;
  --rar-rare: #f0c75e;
  --rar-epic: #c07ef2;
  --rar-legendary: #ff9555;
  --glow-epic: 0 0 24px rgba(192, 126, 242, 0.3);
  --glow-legendary: 0 0 28px rgba(255, 149, 85, 0.35);

  /* geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.45);
  --blur: blur(20px) saturate(150%);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --fs-hero: 34px;
  --fs-title: 24px;
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-cap: 11px;
  --sidebar-w: 264px;
  --sidebar-w-rail: 76px;
}