:root {
  /* Colors */
  --bg-0: #06070A;
  --bg-1: #0B0D12;
  --bg-2: #11141B;
  --bg-3: #171B24;
  --bg-4: #1E2330;

  --line: rgba(236, 233, 226, 0.07);
  --line-2: rgba(236, 233, 226, 0.14);
  --line-3: rgba(236, 233, 226, 0.26);

  --tx-0: #ECE9E2;
  --tx-1: #A9A69E;
  --tx-2: #6E6C66;
  --tx-inv: #0B0D12;

  --accent: #BCD0FF;
  --accent-2: #8FA9E8;
  --accent-glow: rgba(188, 208, 255, 0.18);

  --ok: #62D6A0;
  --warn: #E5B454;
  --err: #F0675E;
  --info: #7FB4FF;

  --rank-basic: #A7ADB8;
  --rank-premium: #D9B26A;
  --rank-etherium: conic-gradient(from 210deg, #7FE7E0, #B9A6FF, #FFB5D2, #7FE7E0);

  /* Typography */
  --font-display: "Instrument Serif", "Fraunces", Georgia, serif;
  --font-ui: "Geist", "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Elevation & Shadows */
  --sh-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --sh-2: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 64px rgba(0, 0, 0, 0.5);

  /* Radii */
  --r-control: 10px;
  --r-card: 16px;
  --r-panel: 24px;
  --r-chip: 999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --d-1: 120ms;
  --d-2: 200ms;
  --d-3: 360ms;
  --d-4: 600ms;
  --d-5: 900ms;

  /* Z-index system */
  --z-nav: 50;
  --z-sheet: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-palette: 90;
}