:root {
  /* Backgrounds */
  --bg-body-gradient-from: rgba(204,207,221,1);
  --bg-body-gradient-to: rgb(240,240,240, 0);
  --bg-surface: rgb(250,250,250);
  --bg-surface-alt: rgb(255,255,255);
  --bg-elevated: rgb(240,240,240);
  --bg-hover: rgb(220,220,220);
  --bg-icon: rgba(204,207,221,1);
  --bg-active: rgb(200,200,200);

  /* Text */
  --text-primary: black;
  --text-secondary: rgb(50,50,50);
  --text-icon: rgb(130,130,130);

  /* Borders */
  --border-primary: rgb(200,200,200);

  /* Shadows */
  --shadow-color: rgb(100,100,100);
  --shadow-hover-color: rgb(10,10,10);

  /* Inputs */
  --input-border: rgb(200,200,200);
  --input-text: rgb(100,100,100);
}

[data-theme="dark"] {
  /* Backgrounds */
  --bg-body-gradient-from: rgb(20,20,24);
  --bg-body-gradient-to: rgb(30,30,34);
  --bg-surface: rgb(30,30,34);
  --bg-surface-alt: rgb(38,38,42);
  --bg-elevated: rgb(44,44,48);
  --bg-hover: rgb(55,55,60);
  --bg-icon: rgb(50,50,55);
  --bg-active: rgb(60,60,65);

  /* Text */
  --text-primary: rgb(210,210,210);
  --text-secondary: rgb(180,180,185);
  --text-icon: rgb(160,160,165);

  /* Borders */
  --border-primary: rgb(60,60,65);

  /* Shadows */
  --shadow-color: rgb(0,0,0);
  --shadow-hover-color: rgb(0,0,0);

  /* Inputs */
  --input-border: rgb(60,60,65);
  --input-text: rgb(160,160,165);
}