@mixin define-l3-theme-content-colors() {
  // primitives  yellow
  --color-primitive-yellow-50: #fdfaed;
  --color-primitive-yellow-100: #fbf6dd;
  --color-primitive-yellow-200: #f8eebb;
  --color-primitive-yellow-300: #f5e79c;
  --color-primitive-yellow-400: #f2df7d;
  --color-primitive-yellow-500: #efd762;
  --color-primitive-yellow-600: #d7c158;
  --color-primitive-yellow-700: #8f813a;

  // primitives  green
  --color-primitive-green-50: #f2fdf0;
  --color-primitive-green-100: #d7f8d3;
  --color-primitive-green-200: #bff4b7;
  --color-primitive-green-300: #9cee8f;
  --color-primitive-green-400: #89eb76;
  --color-primitive-green-500: #6dbc5e;
  --color-primitive-green-600: #44753a;
  --color-primitive-green-700: #365e2f;

  // primitives  purple
  --color-primitive-purple-50: #eee5fd;
  --color-primitive-purple-100: #decdfb;
  --color-primitive-purple-200: #be9bf9;
  --color-primitive-purple-300: #a069f7;
  --color-primitive-purple-400: #8138f6;
  --color-primitive-purple-500: #6610f5;
  --color-primitive-purple-600: #510bc4;
  --color-primitive-purple-700: #33047a;

  // primitives  pink
  --color-primitive-pink-50: #f9e8fc;
  --color-primitive-pink-100: #f5d1f9;
  --color-primitive-pink-200: #eca3f4;
  --color-primitive-pink-300: #e577ef;
  --color-primitive-pink-400: #e362ee;
  --color-primitive-pink-500: #dd34e9;
  --color-primitive-pink-600: #b028ba;
  --color-primitive-pink-700: #841c8b;

  // primitives  red
  --color-primitive-red-50: #fbeceb;
  --color-primitive-red-100: #f8d8d8;
  --color-primitive-red-200: #f5c6c5;
  --color-primitive-red-300: #f0a19f;
  --color-primitive-red-400: #eb6c67;
  --color-primitive-red-500: #e94d45;
  --color-primitive-red-600: #ba3d37;
  --color-primitive-red-700: #8b2d29;

  // primitives  blue
  --color-primitive-blue-50: #ebedfc;
  --color-primitive-blue-100: #c2c9f6;
  --color-primitive-blue-200: #9aa5f1;
  --color-primitive-blue-300: #5d6fea;
  --color-primitive-blue-400: #364ce6;
  --color-primitive-blue-500: #3044cf;
  --color-primitive-blue-600: #2534a1;
  --color-primitive-blue-700: #151e5b;

  // primitives gray
  --color-primitive-white: #ffffff;
  --color-primitive-gray-50: #f8faff;
  --color-primitive-gray-100: #f1f6fe;
  --color-primitive-gray-200: #dde9fd;
  --color-primitive-gray-300: #cfe0fc;
  --color-primitive-gray-400: #bbd4fb;
  --color-primitive-gray-500: #a8bee2;
  --color-primitive-gray-600: #8294af;
  --color-primitive-gray-700: #5d6a7d;
  --color-primitive-gray-800: #383f4b;
  --color-primitive-gray-900: #131519;
  --color-primitive-black: #000000;

  // gradient
  --color-gradient-blue: linear-gradient(180deg, #4ca6f8 0%, #2152f3 100%);
  --color-gradient-red: linear-gradient(180deg, #d14485 0%, #e23248 100%);
  --color-gradient-light-green: linear-gradient(180deg, #74faa1 0%, #73f96d 100%);
  --color-gradient-dark-blue: linear-gradient(180deg, #2961f2 0%, #0406ee 100%);
  --color-gradient-yellow: linear-gradient(180deg, #fdfe53 0%, #eb9b3a 100%);
  --color-gradient-light-blue: linear-gradient(180deg, #73fafd 0%, #50b1d7 100%);
  --color-gradient-green: linear-gradient(180deg, #cefb53 0%, #7af94b 100%);
  --color-gradient-orange: linear-gradient(180deg, #eea03c 0%, #e85c29 100%);
  --color-gradient-pink: linear-gradient(180deg, #e332e6 0%, #a822f3 100%);

  // Transparent black
  --color-transparent-black-09: rgba(0, 0, 0, 0.9);
  --color-transparent-black-08: rgba(0, 0, 0, 0.8);
  --color-transparent-black-07: rgba(0, 0, 0, 0.7);
  --color-transparent-black-06: rgba(0, 0, 0, 0.6);
  --color-transparent-black-05: rgba(0, 0, 0, 0.5);
  --color-transparent-black-04: rgba(0, 0, 0, 0.4);
  --color-transparent-black-03: rgba(0, 0, 0, 0.3);
  --color-transparent-black-02: rgba(0, 0, 0, 0.2);
  --color-transparent-black-01: rgba(0, 0, 0, 0.1);

  // Transparent white
  --color-transparent-white-09: rgba(255, 255, 255, 0.9);
  --color-transparent-white-08: rgba(255, 255, 255, 0.8);
  --color-transparent-white-07: rgba(255, 255, 255, 0.7);
  --color-transparent-white-06: rgba(255, 255, 255, 0.6);
  --color-transparent-white-05: rgba(255, 255, 255, 0.5);
  --color-transparent-white-04: rgba(255, 255, 255, 0.4);
  --color-transparent-white-03: rgba(255, 255, 255, 0.3);
  --color-transparent-white-02: rgba(255, 255, 255, 0.2);
  --color-transparent-white-01: rgba(255, 255, 255, 0.1);

  // foundation
  --color-primary-a: var(--color-primitive-black);
  --color-primary-b: var(--color-primitive-white);
  --color-accent: var(--color-primitive-gray-400);
  --color-negative: var(--color-primitive-red-500);
  --color-warning: var(--color-primitive-yellow-500);
  --color-positive: var(--color-primitive-green-400);

  // core

  //background

  --color-core-background-primary: radial-gradient(
    52.7% 52.7% at 50% 50%,
    #3e4ea9 0%,
    #111b52 100%
  ); // todo maybe change this color
  --color-core-background-secondary: radial-gradient(52.7% 52.7% at 50% 50%, #3e4ea9 0%, #111b52 100%);
  --color-core-background-tertiary: var(--color-transparent-white-02);

  //content
  --color-content-primary: var(--color-primitive-white);
  --color-content-secondary: var(--color-primitive-black);
  --color-content-tertiary: var(--color-primitive-gray-400);
  --color-content-quaternary: var(--color-transparent-white-02);

  // border
  --color-border-primary: var(--color-primitive-gray-500);
  --color-border-secondary: var(--color-primitive-gray-200);
  --color-border-transparent: rgba(0, 0, 0, 0.08);
  --border-selected-a: var(--color-primary-a);
  --border-selected-a: var(--color-accent);

  // Core Extensions

  //   Background
  --color-background-state-disabled: var(--color-transparent-white-02);
  --color-background-overlay-art: radial-gradient(52.7% 52.7% at 50% 50%, #3e4ea9 0%, #111b52 100%);
  --color-background-overlay-dark: var(--color-transparent-black-03);
  --color-background-overlay-light: rgba(0, 0, 0, 0.08);
  --color-background-accent: var(--color-accent);
  --color-background-negative: var(--color-negative);
  --color-background-warning: var(--color-warning);
  --color-background-positive: var(--color-positive);
  --color-background-light-accent: var(--color-primitive-blue-50);
  --color-background-light-negative: var(--color-primitive-red-50);
  --color-background-light-warning: var(--color-primitive-yellow-50);
  --color-background-light-positive: var(--color-primitive-green-50);
  --color-background-always-dark: var(--color-primitive-black);
  --color-background-always-white: var(--color-primitive-white);

  //content++
  --color-content-state-disabled: var(--color-primitive-gray-400);
  --color-content-on-color: var(--color-primitive-white);
  --color-content-on-color-inverse: var(--color-primitive-black);
  --color-content-on-color-inverse: var(--color-primitive-black);
  --color-content-accent: var(--color-primitive-blue-600);
  --color-content-negative: var(--color-primitive-red-400);
  --color-content-warning: var(--color-primitive-yellow-600);
  --color-content-positive: var(--color-primitive-green-600);

  // border++
  --color-border-state-disabled: var(--color-primitive-gray-50);
  --color-border-accent: var(--color-primitive-blue-500);
  --color-border-accent-light: var(--color-primitive-blue-200);
  --color-border-negative: var(--color-primitive-red-300);
  --color-border-warning: var(--color-primitive-yellow-200);
  --color-border-positive: var(--color-primitive-green-200);

  // Special color

  // background
  --color-background-primary: radial-gradient(52.7% 52.7% at 50% 50%, #3e4ea9 0%, #111b52 100%);
  --color-background-secondary: #dfdfff;
}