:root {
  /* Base Colors */

  --base-300: #e5e6e6;
  --base-shimmer: linear-gradient(
    90deg,
    rgba(229, 230, 230, 0) 0,
    rgba(240, 241, 241, 0.3) 15%,
    rgba(242, 243, 243, 0.4) 30%,
    rgba(245, 246, 246, 0.5) 50%,
    rgba(242, 243, 243, 0.4) 70%,
    rgba(240, 241, 241, 0.3) 85%,
    rgba(229, 230, 230, 0) 100%
  );

  /* State Colors */
  --info: #3abff8;
  --success: #36d399;
  --success-300: #abe7e1;
  --warning: #fbbd23;
  --error: #f87272;
  --error-300: #fbada8;
  --delete: #ff3b30;

  /* State Content Colors */
  --info-content: #002b3d;
  --success-content: #003320;
  --warning-content: #382800;
  --error-content: #470000;

  /* Backgrounds */
  --background-default: #f8f8f8;
  --background-primary: #ffffff;
  --background-inverted: #2a2a2a;

  /* Borders */
  --border-primary: rgba(66, 66, 66, 0.05);
  --separator-primary: rgba(66, 66, 66, 0.1);

  /* Text Colors */
  --text-primary: #2a2a2a;
  --text-secondary: #686868;
  --text-tertiary: #878787;
  --text-inverted: #ffffff;

  /* Button Colors */
  --button-primary: #2a2a2a;
  --button-primary-hover: #3d3d3d;
  --button-secondary: rgba(42, 42, 42, 0.05);
  --button-secondary-hover: rgba(42, 42, 42, 0.08);
  --button-inverted: #ffffff;

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