:root {
  /* === Colors === */
  --color-bg:          #0c0d12;
  --color-bg-card:     #28282a;
  --color-bg-panel:    #1a1d24;
  --color-bg-overlay:  rgba(0, 0, 0, 0.67);
  --color-bg-dialog:   #242424f5;
  --color-bg-slot:     rgba(52, 54, 64, 0.6);
  --color-bg-badge:    #080808;
  --color-bg-checkbox: #373737;
  --color-bg-bonus:    rgba(81, 81, 81, 0.1);

  --color-white:       #ffffff;
  --color-text:        #ffffff;
  --color-text-muted:  #a6a7b2;
  --color-text-dim:    rgba(255, 255, 255, 0.35);
  --color-text-hint:   #595959;
  --color-text-check:  #bcbcbc;
  --color-text-green:  #4caf50;
  --color-text-yellow: #f5c842;

  --color-accent-red:     #913b32;
  --color-accent-gray:    rgba(84, 92, 117, 0.2);
  --color-accent-bar:     #9b9da5;
  --color-border:         rgba(255, 255, 255, 0.15);
  --color-border-light:   rgba(255, 255, 255, 0.3);
  --color-border-dialog:  #bfbdd5;
  --color-border-badge:   #707070;
  --color-border-check:   #bdbdbd;

  --color-dust-glow:   rgba(255, 199, 0, 0.3);
  --color-rarity-1:    #808080;  /* Common */
  --color-rarity-2:    #4a90d9;  /* Uncommon */
  --color-rarity-3:    #9b59b6;  /* Rare */
  --color-rarity-4:    #e74c3c;  /* Epic */
  --color-rarity-5:    #f1c40f;  /* Legendary */

  /* === Typography === */
  --font-family:   'Montserrat', sans-serif;

  --font-title:    700 51px/1 var(--font-family);
  --font-heading:  800 italic 39px/1 var(--font-family);
  --font-body:     500 33px/1 var(--font-family);
  --font-body-sm:  500 27px/1.15 var(--font-family);
  --font-btn:      700 27px/1 var(--font-family);
  --font-btn-lg:   700 34px/1 var(--font-family);
  --font-label:    700 31px/1 var(--font-family);
  --font-badge:    700 22px/1.2 var(--font-family);
  --font-small:    700 18px/1.2 var(--font-family);
  --font-balance:  700 25px/1 var(--font-family);
  --font-dust:     700 20px/1 var(--font-family);
  --font-prize:    700 31px/1 var(--font-family);
  --font-counter:  700 15px/1 var(--font-family);

  /* === Layout === */
  --page-w:   1772px;
  --page-h:   997px;

  /* === Radius === */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     17px;
  --radius-btn:    4px;
  --radius-dialog: 12px;
  --radius-reward: 10px;

  /* === Transitions === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}