:root {
  /* Primary Colors */
  --color-primary: #10a3b1;
  --color-primary-light: #3fcdda;
  --color-primary-dark: #0a7a85;
  --color-primary-transparent: #10a4b12d;

  /* Secondary Colors */
  --color-secondary: #faa91a;
  --color-secondary-light: #f3a318;
  --color-secondary-dark: #eca922;

  /* Text Colors */
  --color-text-dark: #231f20;
  --color-text-gray: #585858;
  --color-text-light-gray: #686868;
  --color-text-lighter-gray: #999999;
  --color-text-white: #ffffff;

  /* Background Colors */
  --color-bg-white: #ffffff;
  --color-bg-light: #f8f8f8;
  --color-bg-lighter: #f9f9f9;
  --color-bg-gray: #ebebeb;
  --color-bg-light-blue: #dcecf9;
  --color-bg-light-orange: #f9e1bb;
  --color-bg-light-teal: #eff8f8;

  /* Border Colors */
  --color-border-gray: #dddddd;
  --color-border-light-gray: #d7d7d7;
  --color-border-lighter-gray: #d9d9d9;

  /* Shadow Colors */
  --color-shadow-gray: #d9d9d9;
  --color-shadow-dark: #333;
  --color-shadow-light: #ccc;

  /* Other Colors */
  --color-blue: #5366c4;
  --color-dark-blue: #2f4975;
  --color-red: #cc3455;
  --color-green: #008b2a;
  --color-yellow: #ebc91e;
  --color-transparent-black: rgba(0, 0, 0, 0.8);
  --color-transparent-primary: rgba(16, 163, 177, 1);
}