:root {
  /* Mode 1 */
  /* colors */
  --color-white: #ffffff;
  --color-blue-050: #e4f6ff;
  --color-blue-100: #bae8ff;
  --color-blue-200: #8fe4ff;
  --color-blue-300: #68caff;
  --color-blue-400: #53befe;
  --color-blue-500: #4ab2fd;
  --color-blue-600: #45a4ed;
  --color-blue-700: #4090d9;
  --color-blue-800: #3b7fc4;
  --color-blue-900: #325fa1;
  --color-blue-color: #ffffff;
  --color-green-050: #e2ffef;
  --color-green-100: #baffd7;
  --color-green-200: #9effca;
  --color-green-300: #86ffbd;
  --color-green-400: #00dc9a;
  --color-green-500: #00c391;
  --color-green-600: #00b57f;
  --color-green-700: #00a772;
  --color-green-800: #009561;
  --color-green-900: #008553;
  --color-green-color: #ffffff;
  --color-navy-025: #eef6f9;
  --color-navy-040: #e2eef2;
  --color-navy-050: #dbebf0;
  --color-navy-090: #add8e1;
  --color-navy-100: #c0d3d7;
  --color-navy-110: #001b3e;
  --color-navy-200: #9bb4bb;
  --color-navy-300: #76969f;
  --color-navy-400: #5b808a;
  --color-navy-500: #406b76;
  --color-navy-600: #355d67;
  --color-navy-700: #284a52;
  --color-navy-800: #1c373f;
  --color-navy-900: #0c2329;
  --color-orange-050: #fffde6;
  --color-orange-100: #fff9c1;
  --color-orange-200: #fff597;
  --color-orange-300: #fff06c;
  --color-orange-400: #ffeb47;
  --color-orange-500: #fee61a;
  --color-orange-600: #ffd920;
  --color-orange-700: #ffc018;
  --color-orange-800: #ffa710;
  --color-orange-900: #ff7b00;
  --color-pink-050: #fee7ee;
  --color-pink-100: #fec1d6;
  --color-pink-200: #ff9aba;
  --color-pink-300: #ff729f;
  --color-pink-400: #fd5588;
  --color-pink-500: #fe3f73;
  --color-pink-600: #ec3b6f;
  --color-pink-700: #d5366a;
  --color-pink-800: #bf3166;
  --color-pink-900: #9a285d;
  --color-red-050: #ffebee;
  --color-red-100: #ffccd1;
  --color-red-200: #f29898;
  --color-red-300: #e97070;
  --color-red-400: #f34d4c;
  --color-red-500: #f83b30;
  --color-red-600: #e93030;
  --color-red-700: #d7252a;
  --color-red-800: #ca1c23;
  --color-red-900: #bc0816;
  --color-violet-050: #f1e8fe;
  --color-violet-100: #d9c8fd;
  --color-violet-200: #c0a2fd;
  --color-violet-300: #a57afe;
  --color-violet-400: #8e5afc;
  --color-violet-500: #7538fa;
  --color-violet-600: #6933f3;
  --color-violet-700: #572aea;
  --color-violet-800: #4323e5;
  --color-violet-900: #0b10dd;
  /* numbers */
  --dimensions-size-1: 1px;
  --dimensions-size-2: 2px;
  --dimensions-size-3: 3px;
  --dimensions-size-4: 4px;
  --dimensions-size-8: 8px;
  --dimensions-size-12: 12px;
  --dimensions-size-13: 13px;
  --dimensions-size-14: 14px;
  --dimensions-size-16: 16px;
  --dimensions-size-18: 18px;
  --dimensions-size-20: 20px;
  --dimensions-size-24: 24px;
  --dimensions-size-28: 28px;
  --dimensions-size-32: 32px;
  --dimensions-size-38: 38px;
  --dimensions-size-40: 40px;
  --dimensions-size-48: 48px;
  --dimensions-size-56: 56px;
  --dimensions-size-64: 64px;
  --dimensions-size-72: 72px;
}

:root {
  /* Mode 1 */
  /* colors */
  --color-alert-error: var(--color-red-600);
  --color-alert-error-bg: var(--color-red-100);
  --color-alert-information: var(--color-blue-500);
  --color-alert-information-bg: var(--color-blue-100);
  --color-alert-neutral: var(--color-navy-500);
  --color-alert-new: var(--color-violet-200);
  --color-alert-new-bg: var(--color-violet-050);
  --color-alert-success: var(--color-green-700);
  --color-alert-success-bg: var(--color-green-050);
  --color-alert-warning: var(--color-orange-800);
  --color-alert-warning-bg: var(--color-orange-100);
  --color-brand-certification: var(--color-blue-300);
  --color-brand-affilae: #00ccff;
  --color-brand-facebook: #1877f2;
  --color-brand-instagram: #d300c5;
  --color-brand-shopify: #008060;
  --color-brand-tiktok: #010101;
  --color-brand-twitter: #1b9df0;
  --color-brand-youtube: #ff0000;
  --color-brand-snapchat-secondary: #fee61a;
  --color-chart-1: var(--color-red-600);
  --color-chart-10: var(--color-navy-900);
  --color-chart-11: var(--color-pink-200);
  --color-chart-12: var(--color-secondary-600);
  --color-chart-13: var(--color-orange-500);
  --color-chart-14: var(--color-secondary-100);
  --color-chart-15: var(--color-violet-100);
  --color-chart-2: var(--color-orange-900);
  --color-chart-3: var(--color-orange-700);
  --color-chart-4: var(--color-green-200);
  --color-chart-5: var(--color-blue-300);
  --color-chart-6: var(--color-green-400);
  --color-chart-7: var(--color-blue-800);
  --color-chart-8: var(--color-violet-300);
  --color-chart-9: var(--color-violet-600);
  --color-dominant-on-dominant: var(--color-navy-900);
  --color-dominant-secondary: var(--color-blue-200);
  --color-dominant-tertiary: var(--color-navy-600);
  --color-dominant-transparent: #ffffff;
  --color-dominant-white: var(--color-white);
  --color-evolution-down: var(--color-red-600);
  --color-evolution-up: var(--color-green-400);
  --color-gender-female: var(--color-violet-600);
  --color-gender-male: var(--color-blue-400);
  --color-instagram-100: var(--color-orange-600);
  --color-instagram-200: var(--color-orange-900);
  --color-instagram-300: var(--color-pink-500);
  --color-instagram-400: var(--color-violet-500);
  --color-primary-050: var(--color-green-050);
  --color-primary-100: var(--color-green-100);
  --color-primary-200: var(--color-green-200);
  --color-primary-300: var(--color-green-300);
  --color-primary-400: var(--color-green-400);
  --color-primary-500: var(--color-green-500);
  --color-primary-600: var(--color-green-600);
  --color-primary-700: var(--color-green-700);
  --color-primary-800: var(--color-green-800);
  --color-primary-900: var(--color-green-900);
  --color-primary-color-2: #ffffff;
  --color-role-admin-bg: var(--color-violet-050);
  --color-role-manager-bg: var(--color-red-050);
  --color-role-member-bg: var(--color-orange-100);
  --color-score-average: var(--color-orange-600);
  --color-score-bad: var(--color-orange-800);
  --color-score-excellent: var(--color-green-700);
  --color-score-hight: var(--color-green-500);
  --color-score-neutral: var(--color-navy-900);
  --color-score-poor: var(--color-red-600);
  --color-secondary-050: var(--color-blue-050);
  --color-secondary-100: var(--color-blue-100);
  --color-secondary-200: var(--color-blue-200);
  --color-secondary-300: var(--color-blue-300);
  --color-secondary-400: var(--color-blue-400);
  --color-secondary-500: var(--color-blue-500);
  --color-secondary-600: var(--color-blue-600);
  --color-secondary-700: var(--color-blue-700);
  --color-secondary-800: var(--color-blue-800);
  --color-secondary-900: var(--color-blue-900);
  --color-secondary-color: #ffffff;
  --color-status-archived: var(--color-navy-200);
  --color-status-archived-100: var(--color-navy-025);
  --color-status-completed: var(--color-navy-900);
  --color-status-completed-100: var(--color-blue-100);
  --color-status-draft: var(--color-violet-200);
  --color-status-draft-100: var(--color-violet-050);
  --color-status-in-progress: var(--color-green-400);
  --color-status-in-progress-100: var(--color-green-050);
  --color-status-ready: var(--color-pink-300);
  --color-status-ready-100: var(--color-pink-050);
  --color-tertiary-025: var(--color-navy-025);
  --color-tertiary-040: var(--color-navy-040);
  --color-tertiary-050: var(--color-navy-050);
  --color-tertiary-090: var(--color-navy-090);
  --color-tertiary-100: var(--color-navy-100);
  --color-tertiary-200: var(--color-navy-200);
  --color-tertiary-300: var(--color-navy-300);
  --color-tertiary-400: var(--color-navy-400);
  --color-tertiary-500: var(--color-navy-500);
  --color-tertiary-600: var(--color-navy-600);
  --color-tertiary-700: var(--color-navy-700);
  --color-tertiary-800: var(--color-navy-800);
  --color-tertiary-color: #ffffff;

  --Dark-Green: #132a30;

  --color-gradiant-050: linear-gradient(103deg, var(--color-green-050) -13.82%, var(--color-blue-050) 121.29%);
  --color-gradiant-100: linear-gradient(103deg, var(--color-green-100) -13.82%, var(--color-blue-100) 121.29%);
  --color-gradiant-300: linear-gradient(103deg, var(--color-green-300) -13.82%, var(--color-blue-300) 121.29%);
  --color-dominant-primary: var(--color-gradiant-300);

  --color-item-selected: var(--color-primary-100);
  --color-item-hovered: var(--color-primary-300);
  /* numbers */
  --border-radius-small: var(--dimensions-size-4);
  --border-radius-medium: var(--dimensions-size-8);
  --border-radius-large: var(--dimensions-size-16);
  --border-radius-border-radius-full: 1000px;
  --border-sizing-small: var(--dimensions-size-1);
  --border-sizing-medium: var(--dimensions-size-2);
  --border-sizing-large: var(--dimensions-size-3);
  --font-size-font-size-1: var(--dimensions-size-12);
  --font-size-font-size-2: var(--dimensions-size-13);
  --font-size-font-size-3: var(--dimensions-size-14);
  --font-size-font-size-4: var(--dimensions-size-16);
  --font-size-font-size-5: var(--dimensions-size-18);
  --font-size-font-size-6: var(--dimensions-size-24);
  --font-size-font-size-7: var(--dimensions-size-28);
  --font-size-font-size-8: var(--dimensions-size-32);
  --font-size-font-size-9: var(--dimensions-size-38);
  --size-sizing-thin: var(--dimensions-size-4);
  --size-sizing-xxx-small: var(--dimensions-size-8);
  --size-sizing-xx-small: var(--dimensions-size-16);
  --size-sizing-x-small-var: var(--dimensions-size-20);
  --size-sizing-x-small: var(--dimensions-size-24);
  --size-sizing-small: var(--dimensions-size-32);
  --size-sizing-small-var: var(--dimensions-size-38);
  --size-sizing-medium: var(--dimensions-size-40);
  --size-sizing-large: var(--dimensions-size-48);
  --size-sizing-x-large: var(--dimensions-size-56);
  --size-sizing-xx-large: var(--dimensions-size-64);
  --spacing-spacing-thin: var(--dimensions-size-4);
  --spacing-spacing-xxx-small: var(--dimensions-size-8);
  --spacing-spacing-xx-small: var(--dimensions-size-16);
  --spacing-spacing-x-small: var(--dimensions-size-24);
  --spacing-spacing-small: var(--dimensions-size-32);
  --spacing-spacing-medium: var(--dimensions-size-40);
  --spacing-spacing-large: var(--dimensions-size-48);
  --spacing-spacing-x-large: var(--dimensions-size-56);
  --spacing-spacing-xx-large: var(--dimensions-size-64);
}

:root {
  --font-family: 'pp_agrandirregular', sans-serif;
  --font-family-heading: 'pp_agrandirwide_black', serif;
  --font-family-subtitle: 'pp_agrandirregular', serif;
  --font-family-var-text: 'pp_agrandirmedium', sans-serif;
  --font-family-var: 'pp_agrandirmedium', sans-serif;
  --font-family-variable: 'Agrandir Varible', sans-serif;

  /* Font for Kreators */
  --font-family-poppins: 'Poppins', sans-serif;

  --font-weight-thin: 500;
  --font-weight-regular: 600;
  --font-weight-medium: 700;
  --font-weight-bold: 700;

  --line-height-heading: 1.25;
  --line-height-var-text: 1.35;
  --line-height-text: 1.5;

  --border-radius-full: 50%;

  /* --border-thin: var(--border-sizing-small) solid var(--color-tertiary-100); */
  --border-thin: var(--border-sizing-small) solid var(--color-dominant-on-dominant);
  --border-medium: var(--border-sizing-medium) solid var(--color-dominant-on-dominant);
  --transition-bezier: cubic-bezier(0.26, -0.335, 1, 0.565);
  --transition-hover: 200ms ease-in-out;

  --opacity-disabled: 0.5;

  /* Shadows */
  --table-header-shadow: 2px 0px 7px rgba(0, 48, 87, 0.5);
  --tile-shadow: 0 2px 4px rgba(0, 48, 87, 0.2);
  --tile-shadow-hover: 0 2px 8px rgba(0, 48, 87, 0.4);
  --right-shadow: 2px 0 4px -6px rgba(0, 48, 87, 0.4);
  --float-shadow: 0px 2px 8px 0px rgba(0, 48, 87, 0.4);
  --menu-shadow: 0 4px 12px rgba(0, 48, 87, 0.2);

  --responsive-width-s: 319px;
  --responsive-width-m: 767px;
  --responsive-width-l: 1023px;
  --responsive-width-xl: 1279px;

  --color-instagram-gradient: linear-gradient(
    180deg,
    #7638fa 0%,
    #d300c5 31.25%,
    #ff7a00 76.56%,
    #f7c122 100%,
    #ffd600 100%
  );

  --color-KOL-status-default: var(--color-navy-050);
  --color-KOL-status-new: var(--color-violet-100);
  --color-KOL-status-ok: var(--color-green-100);
  --color-KOL-status-not-ok: var(--color-red-100);
  --color-KOL-status-finished: var(--color-blue-100);
}

@property --startColor {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

@property --endColor {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}