:root {
    --white: #ffffff;
    --white-transparent-10: rgba(255, 255, 255, 0.1);
    --white-transparent-50: rgba(255, 255, 255, 0.5);
    --pink-light: #d2c9f6;
    --pink: #b175f0;
    --pink-mid: #b275f0;
    --purple-light: #8156ed;
    --purple-pale: #dde0f8;
    --purple-dark: #4f64e1;
    --purple-dark-cc: #4f64e1;
    --blue-light: #5265e1;
    --blue-mid: #4f64e1;
    --blue-royal: #1d3c71;
    --blue-navy: #143062;
    --blue-midnight: #021436;
    --blue-dark: #061c43;
    --grey-light: #9897ae;
    --grey-dark: #2e3228;
    --near-black: #222;
    --black: #000;

    --palette-pink-pale: #d2c9f6;
    --palette-white: #fff;

    --chat-bubble-background: var(--white);
    --chat-bubble-background-dark: var(--blue-royal);

    --chat-bubble-user-background: var(--purple-pale);

    --primary-pale: var(--pink-light);

    --primary-gradient: linear-gradient(
      90deg,
      var(--purple-dark) 0%,
      var(--pink-mid) 100%
    );
    
    --primary-gradient-inverted: linear-gradient(
      90deg,
      var(--pink-mid) 0%,
      var(--purple-dark) 100%
    );

    --primary-gradient-wide: linear-gradient(
      90deg,
      var(--purple-pale) 0%,
      var(--purple-pale) 33%,
      var(--purple-dark-cc) 50%,
      var(--purple-dark) 67%,
      var(--pink-mid) 100%
    );

    --primary-gradient-wide-mobile: linear-gradient(
      90deg,
      var(--white) 0%,
      var(--white) 33%,
      var(--purple-dark-cc) 50%,
      var(--purple-dark) 67%,
      var(--pink-mid) 100%
    );

    --primary-gradient-wide-dark: linear-gradient(
      90deg,
      var(--blue-royal) 0%,
      var(--blue-royal) 33%,
      var(--purple-dark-cc) 50%,
      var(--purple-dark) 67%,
      var(--pink-mid) 100%
    );
  }