:root {
  /* Colors */
  --bg-primary: #2c2c2c;
  --bg-secondary: #303030;
  --bg-hover: rgba(255, 255, 255, 0.01);

  --text-primary: #e1e9f6;
  --text-secondary: #a1a9b6;
  --text-muted: #9199a6;
  --text-muted-rgb: 145, 153, 166;

  --primary: #4f9dff;
  --primary-rgb: 79, 157, 255;
  --icon-primary: rgba(var(--primary-rgb), 0.8);
  --icon-default: #e1e9f6;

  --border: #333333;
  --border-loading: rgba(255, 255, 255, 0.1);

  /* Typography */
  --fs-xs: 1.2rem;
  --fs-sm: 1.3rem;
  --fs-md: 1.4rem;
  --fs-lg: 1.6rem;

  /* Spacing */
  --space-xs: 0.6rem;
  --space-sm: 0.8rem;
  --space-md: 1.2rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Border Radius */
  --radius-sm: 0.4rem;
  --radius-md: 0.6rem;
  --radius-lg: 1rem;
  --radius-full: 50%;

  /* Shadows */
  --shadow-default: 0 1px 1px 1px rgba(0, 0, 0, 0.03);
}

/* Light Theme */
.light-theme {
  --bg-primary: #f9fafc;
  --bg-secondary: #f1f4f9;
  --bg-hover: #f5f5f9;

  --text-primary: #768293;
  --text-secondary: #818ea0;
  --text-muted: #96a2b3;
  --text-muted-rgb: 148, 148, 152;

  --primary: #619cf8;
  --primary-rgb: 97, 156, 248;
  --icon-primary: rgba(var(--primary-rgb), 0.8);
  --icon-default: #566273;

  --border: #e3e3e5;
  --border-loading: rgba(0, 0, 0, 0.1);
}