:root {
  /* fonts */
  --font-header: 16px;
  --font-regular: 13px;
  --font-informative: 11px;
  --main-text-color: #344054;
  --second-text-color: #667085;
  --third-text-color: #475467;
  --preview-header-color: #484848;
  --main-purple: #7f56d9;
  --light-purple: #f3e5f5;
  --light-gray: #eaecf0;
  --light-border-color: #d0d5dd;
  --border-error-solid: #d92d20;
  --checkIcon-green: #079455;
  --background-color: #fcfcfd;
  --dark-purple: #6941c6;
  --light-purple-background: #f9f5ff;
  --grey-border: #ebebeb;
  --shadow-one: #10182808;
  --shadow-two: #10182814;
  --header-background: #f8f9f8;
  --menu-icon-color: #9486cb;

  /* Additional colors */
  --primary-color: #6200ea;
  --secondary-color: #03dac6;
  --error-color: #b00020;
  --warning-color: #ff9800;
  --info-color: #2196f3;
  --success-color: #4caf50;
  --light-background: #ffffff;
  --dark-background: #121212;
  --light-surface: #f5f5f5;
  --dark-surface: #1e1e1e;
  --gray-50: #fbfbfb;
  --gray-100: #f8f8f8;
  --gray-200: #f3f3f3;
  --gray-250: #c6c6c7;
  --gray-300: #d9d9d9;
  --gray-350: #868c98;
  --gray-400: #73787f;
  --gray-500: #545454;
  --blue-50: #e3ebff;
  --blue-300: #95b3ff;
  --green-400: #079455;
  --red-500: #ef4444;

  /* Custom label tag component */
  --label-orange-bg: #fff3e0;
  --label-orange-color: #ef6c00;
  --label-orange-border: #ef6c00;
  --label-green-bg: #e8f5e9;
  --label-green-border: #a5d6a7;
  --label-new-dot: #ff9800;

  /* Radii */
  --radius-button: 8.9px;
  --radius-card: 6.95px;
  --radius-skeleton: 2.48px;
}

/* Dark mode overrides */
body[data-theme='dark'] {
  --main-text-color: #ffffff;
  --second-text-color: #b0b0b0;
  --third-text-color: #a0a0a0;
  --background-color: #121212;
  --header-background: #1f1f1f;
  --main-purple: #bb86fc;
  --light-purple: #3a3a3a;
  --light-gray: #2c2c2c;
  --light-border-color: #444444;
  --primary-color: #bb86fc;
  --secondary-color: #03dac6;
  --error-color: #cf6679;
  --warning-color: #ffb74d;
  --info-color: #64b5f6;
  --success-color: #81c784;
  --light-background: #1e1e1e;
  --dark-background: #121212;
  --light-surface: #2c2c2c;
  --dark-surface: #1e1e1e;
}
