/* ============================================================
   DESIGN TOKENS — tất cả giá trị cấu hình giao diện ở đây
   ============================================================ */

:root {
  /* --- Background layers --- */
  --bg:       #120F26;
  --bg2:      #1A1538;
  --surface:  #221C44;
  --surface2: #2B2456;

  /* --- Border colors --- */
  --line:      #3A3270;
  --line-soft: #2E2860;

  /* --- Text --- */
  --ink:   #F3F0FF;
  --muted: #A6A0D0;
  --faint: #6E689A;

  /* --- Brand / accent --- */
  --pink:   #FF5C8A;
  --pink2:  #FF87AE;
  --cyan:   #43E8D8;
  --gold:   #FFC857;
  --violet: #9B6BFF;
  --green:  #3DDC8B;
  --red:    #FF6B6B;

  /* --- Item rarity colors --- */
  --r-common: #5FE6D6;
  --r-rare:   #5B9BFF;
  --r-epic:   #C56BFF;
  --r-legend: #FFC857;

  /* --- Layout dimensions --- */
  --sidebar-w: 248px;
  --topbar-h:  65px;

  /* --- Typography --- */
  --font-main: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', monospace;

  /* --- Transitions --- */
  --ease: .18s ease;
}