:root.dark {
  /* Base Colors */
  --base-300: #15191e;
  --base-shimmer: linear-gradient(
    90deg,
    rgba(21, 25, 30, 0) 0,
    rgba(36, 41, 48, 0.3) 15%,
    rgba(44, 50, 58, 0.4) 30%,
    rgba(54, 61, 71, 0.5) 50%,
    rgba(44, 50, 58, 0.4) 70%,
    rgba(36, 41, 48, 0.3) 85%,
    rgba(21, 25, 30, 0) 100%
  );

  /* State Colors */
  --info: #0ca6e9;
  --success: #2bd4bd;
  --success-300: #15776e;
  --warning: #f4c152;
  --error: #fb6f84;
  --error-300: #7b3e48;
  --delete: #ff3b30;

  /* State Content Colors */
  --info-content: #000c14;
  --success-content: #00332d;
  --warning-content: #382800;
  --error-content: #470000;

  /* Backgrounds */
  --background-default: #080808;
  --background-primary: #181818;
  --background-inverted: #d4d4d4;

  /* Borders */
  --border-primary: rgba(212, 212, 212, 0.07);
  --separator-primary: rgba(212, 212, 212, 0.17);

  /* Text Colors */
  --text-primary: #d4d4d4;
  --text-secondary: #979797;
  --text-tertiary: #787878;
  --text-inverted: #181818;

  /* Button Colors */
  --button-primary: #d4d4d4;
  --button-primary-hover: #b3b3b3;
  --button-secondary: rgba(212, 212, 212, 0.05);
  --button-secondary-hover: rgba(212, 212, 212, 0.08);
  --button-inverted: #181818;

  /* Shadows */
  --shadow-100: rgba(255, 255, 255, 0.1);
  --shadow-200: rgba(255, 255, 255, 0.2);
  --shadow-300: rgba(0, 0, 0, 0.3);
}