:root {
  /*colors*/
  /* Pastel Premium Palette (taken from your reference image) */
  --white-color: #ffffff; /* white swatch from image */
  --black-color: #000000; /* unchanged for true black */

  /* light / surface backgrounds */
  --oslo-grey-color: #fafafd; /* very‑light lavender‑grey */
  --white-lilac-color: #d1d5fa; /* pastel lavender panel background */
  --white-smoke-color: #f7f8fc; /* soft white‑violet variant */
  --snow-drift-color: #fcfcfe; /* near‑white card background */

  /* brand & accent tones (from the pills) */
  --dull-lavender-color: #353c58; /* warm pastel pink accent */
  --tropical-blue-color: #a9dfe2; /* mint‑aqua highlight (name unchanged) */
  --moody-blue-color: #5c6898; /* deep dusty‑indigo for buttons / nav */
  --rhino-color: #98a0c1; /* same hue for consistency */
  --blue-zodiac-color: #353c58; /* same hue for consistency */

  /* neutrals and text */
  --bright-grey-color: #4f5160; /* rich neutral for body text */
  --smokey-grey-color: #717380; /* secondary text / placeholders */
  --oslo-greynew-color: #a5a7b4; /* captions / disabled elements */
  --silver-chalice-color: #c8cad6; /* subtle outlines */

  /* borders & dividers */
  --platinum-color: #e5e6f0; /* light divider lines */
  --gainsboro-color: #c5c5ca; /* section separators */

  /*badge color*/
  --badge1-color: #7aa993;
  --badge2-color: #fcda45;
  --badge3-color: #b4be79;
  --badge4-color: #e52947;
  --badge5-color: #008859;
  --badge6-color: #116ef5;

  --badge-yellow: #fcda45;
  --badge-red: #e52947;
  --badge-green: #008859;
  --badge-blue: #116ef5;
  --badge-info: #17a2b8;
  --badge-dark: #343a40;
  --badge-light: #f8f9fa;
  --badge-primary: #007bff;

  /*box shadow color*/
  --box-shadow-color1: #27207803;
  --box-shadow-color2: #dadadf85;
  --box-shadow-color3: #2e235e0d;
}