@custom-media --screen-width--below-tablet (max-width: 767px);
@custom-media --screen-width--above-phone (min-width: 768px);
@custom-media --screen-width--below-desktop (max-width: 1279px);
@custom-media --screen-width--above-tablet (min-width: 1280px);
@custom-media --screen-width--above-desktop (min-width: 1440px);

@custom-media --screen-width--tablet (--screen-width--above-phone) and (--screen-width--below-desktop);

:root {
  
  /* ====== Overrides ====== */

  /* --- FONT SIZE BASE --- */

  font-size: 14px;

  /* ====== VALUES ====== */

  /* --- BRAND COLORS --- */

  /* Primary */
  --color--pink: #D725C5;
  --color--brand-gold: #DBAB00;
  --color--brand-dark-green: #283C20;
  --color--brand-dark-green-vivid: #283C20;

  /* Primary colors to get rid of */
  --color--purple: #4015BB;
  --color--yellow: #F0C659;
  --background--gradient: linear-gradient(45deg, var(--color--yellow) 0%, var(--color--pink) 100%);
  --background--gradient-vivid: linear-gradient(77.59deg, #F0C65C 0%, #FBB450 21%, #FFA04C 30%, #FF8850 39.01%, #FF725C 46%, #FF5C6F 54%, #FF4281 61%, #FF2994 69%, #F31BAB 79%, #D624C4 100%);

  /* Neutral */
  --color--neutral-green-90: #0E2826;
  --color--neutral-green-40: #7A9391;
  --color--neutral-green-5: #E6EEEC;
  --color--neutral-green-0: #FDFDFE;

  /* --- PRODUCT COLORS --- */

  /* Neutrals */
  --color--grey-90: #1F1F1F;
  --color--grey-80: #333333;
  --color--grey-70: #4D4D4D;
  --color--grey-60: #757575;
  --color--grey-50: #808080;
  --color--grey-40: #999999;
  --color--grey-30: #B3B3B3;
  --color--grey-20: #CCCCCC;
  --color--grey-10: #E7E7E7;
  --color--grey-5: #F7F7F7;
  --color--white: #FFFFFF;

  /* Blue */
  --color--blue: #0034EB;
  --color--blue-5: #E3EBF7;
  --color--blue-10: #B2D1FF;
  --color--blue-70: #0027B3;
  --color--blue-90: #001666;

  /* Green */
  --color--green: #069814;
  --color--green-5: #E1F5E3;
  --color--green-10: #B8E5BC;
  --color--green-70: #058011;
  --color--green-90: #034D0A;

  /* Orange */
  --color--orange: #EB8D00;
  --color--orange-5: #FAEEDC;
  --color--orange-10: #FFDAA3;
  --color--orange-70: #CC7A00;
  --color--orange-90: #995C00;

  /* Red */
  --color--red: #E60F00;
  --color--red-5: #FFE2E0;
  --color--red-10: #FFB7B2;
  --color--red-70: #CC0D00;
  --color--red-90: #990A00;

  /* Colours used for Rebrand */
  --color--brand-gold: #DBAB00;
  --color--brand-dark-green: #283C20;
  --color--core-white: #F3EBE4;
  --color--core-black: #0B0808;
  --color--secondary-light-green: #54684C;
  --color--secondary-green: #3E4E2E;
  --color--secondary-dark-grey: #35302E;
  --color--secondary-light-grey: #DCD4CE;
  --color--secondary-light-brown: #C68550;
  --color--secondary-brown: #8C4F23;
  --color--secondary-dark-brown: #392312;
  --color--accent-off-white: #F3EBE44d;

  /* --- TITLES --- */

  /* Title XXL */
  --font-family--outfit-title-40: 'Outfit', sans-serif;
  --font-weight--outfit-title-40: 700;
  --font-size--outfit-title-40: 2.86rem;
  --line-height--outfit-title-40: 3.43rem;
  --font--outfit-title-40: var(--font-weight--outfit-title-40) var(--font-size--outfit-title-40)/var(--line-height--outfit-title-40) var(--font-family--outfit-title-40);

  /* Title XL */
  --font-family--outfit-title-32: 'Outfit', sans-serif;
  --font-weight--outfit-title-32: 700;
  --font-size--outfit-title-32: 2.29rem;
  --line-height--outfit-title-32: 2.71rem;
  --font--outfit-title-32: var(--font-weight--outfit-title-32) var(--font-size--outfit-title-32)/var(--line-height--outfit-title-32) var(--font-family--outfit-title-32);

  /* Title L */
  --font-family--outfit-title-24: 'Outfit', sans-serif;
  --font-weight--outfit-title-24: 700;
  --font-size--outfit-title-24: 1.71rem;
  --line-height--outfit-title-24: 2rem;
  --font--outfit-title-24: var(--font-weight--outfit-title-24) var(--font-size--outfit-title-24)/var(--line-height--outfit-title-24) var(--font-family--outfit-title-24);

  /* Title M */
  --font-family--outfit-title-20: 'Outfit', sans-serif;
  --font-weight--outfit-title-20: 700;
  --font-size--outfit-title-20: 1.43rem;
  --line-height--outfit-title-20: 1.71rem;
  --font--outfit-title-20: var(--font-weight--outfit-title-20) var(--font-size--outfit-title-20)/var(--line-height--outfit-title-20) var(--font-family--outfit-title-20);

  /* Title S */
  --font-family--outfit-title-16: 'Outfit', sans-serif;
  --font-weight--outfit-title-16: 700;
  --font-size--outfit-title-16: 1.14rem;
  --line-height--outfit-title-16: 1.43rem;
  --font--outfit-title-16: var(--font-weight--outfit-title-16) var(--font-size--outfit-title-16)/var(--line-height--outfit-title-16) var(--font-family--outfit-title-16);

  /* Title XS */
  --font-family--outfit-title-14: 'Outfit', sans-serif;
  --font-weight--outfit-title-14: 700;
  --font-size--outfit-title-14: 1rem;
  --line-height--outfit-title-14: 1.14rem;
  --font--outfit-title-14: var(--font-weight--outfit-title-14) var(--font-size--outfit-title-14)/var(--line-height--outfit-title-14) var(--font-family--outfit-title-14);

  /* Title XXS */
  --font-family--outfit-title-12: 'Outfit', sans-serif;
  --font-weight--outfit-title-12: 700;
  --font-size--outfit-title-12: 0.86rem;
  --line-height--outfit-title-12: 1rem;
  --font--outfit-title-12: var(--font-weight--outfit-title-12) var(--font-size--outfit-title-12)/var(--line-height--outfit-title-12) var(--font-family--outfit-title-12);

  /* Title Anton 120 */
  --font-family--title-anton-120: 'Anton', sans-serif;
  --font-weight--title-anton-120: 400;
  --font-size--title-anton-120: 7.5rem;
  --line-height--title-anton-120: 100%;
  --font--title-anton-120: var(--font-weight--title-anton-120) var(--font-size--title-anton-120)/var(--line-height--title-anton-120) var(--font-family--title-anton-120);

  /* Title Anton 100 */
  --font-family--title-anton-100: 'Anton', sans-serif;
  --font-weight--title-anton-100: 400;
  --font-size--title-anton-100: 6.25rem;
  --line-height--title-anton-100: 100%;
  --font--title-anton-100: var(--font-weight--title-anton-100) var(--font-size--title-anton-100)/var(--line-height--title-anton-100) var(--font-family--title-anton-100);

  /* Title Anton 80 */
  --font-family--title-anton-80: 'Anton', sans-serif;
  --font-weight--title-anton-80: 400;
  --font-size--title-anton-80: 4.25rem;
  --line-height--title-anton-80: 100%;
  --font--title-anton-80: var(--font-weight--title-anton-80) var(--font-size--title-anton-80)/var(--line-height--title-anton-80) var(--font-family--title-anton-80);

  /* Title Anton 60 */
  --font-family--title-anton-60: 'Anton', sans-serif;
  --font-weight--title-anton-60: 400;
  --font-size--title-anton-60: 3.75rem;
  --line-height--title-anton-60: 100%;
  --font--title-anton-60: var(--font-weight--title-anton-60) var(--font-size--title-anton-60)/var(--line-height--title-anton-60) var(--font-family--title-anton-60);

  /* --- BODY ---- */

  /* Body Sentence */
  --font-family--outfit-20: 'Outfit', sans-serif;
  --font-weight--outfit-20: 300;
  --font-size--outfit-20: 1.75rem;
  --line-height--outfit-20: 100%;
  --font--outfit-20: var(--font-weight--outfit-20) var(--font-size--outfit-20)/var(--line-height--outfit-20) var(--font-family--outfit-20);

  --font-family--outfit-16: 'Outfit', sans-serif;
  --font-weight--outfit-16: 300;
  --font-size--outfit-16: 1.14rem;
  --line-height--outfit-16: 1.71rem;
  --font--outfit-16: var(--font-weight--outfit-16) var(--font-size--outfit-16)/var(--line-height--outfit-16) var(--font-family--outfit-16);

  /* Body Table */
  --font-family--outfit-14: 'Outfit', sans-serif;
  --font-weight--outfit-14: 300;
  --font-size--outfit-14: 1rem;
  --line-height--outfit-14: 1.57rem;
  --font--outfit-14: var(--font-weight--outfit-14) var(--font-size--outfit-14)/var(--line-height--outfit-14) var(--font-family--outfit-14);

  /* Body Caption */
  --font-family--outfit-12: 'Outfit', sans-serif;
  --font-weight--outfit-12: 300;
  --font-size--outfit-12: 0.86rem;
  --line-height--outfit-12: 1.29rem;
  --font--outfit-12: var(--font-weight--outfit-12) var(--font-size--outfit-12)/var(--line-height--outfit-12) var(--font-family--outfit-12);

  /* Body Info */
  --font-family--outfit-11: 'Outfit', sans-serif;
  --font-weight--outfit-11: 300;
  --font-size--outfit-11: 0.79rem;
  --line-height--outfit-11: 1.14rem;
  --font--outfit-11: var(--font-weight--outfit-11) var(--font-size--outfit-11)/var(--line-height--outfit-11) var(--font-family--outfit-11);

  /* Body Outfit Label */
  --font-family--body-outfit-label: 'Outfit', sans-serif;
  --font-weight--body-outfit-label: 500;
  --font-size--body-outfit-label: 1rem;
  --line-height--body-outfit-label: 1rem;
  --font--body-outfit-label: var(--font-weight--body-outfit-label) var(--font-size--body-outfit-label)/var(--line-height--body-outfit-label) var(--font-family--body-outfit-label);

  /* Body Outfit Paragraph */
  --font-family--body-outfit-paragraph: 'Outfit', sans-serif;
  --font-weight--body-outfit-paragraph: 300;
  --font-size--body-outfit-paragraph: 1rem;
  --line-height--body-outfit-paragraph: 1rem;
  --font--body-outfit-paragraph: var(--font-weight--body-outfit-paragraph) var(--font-size--body-outfit-paragraph)/var(--line-height--body-outfit-paragraph) var(--font-family--body-outfit-paragraph);

  /* Body Outfit Link */
  --font-family--body-outfit-link: 'Outfit', sans-serif;
  --font-weight--body-outfit-link: 700;
  --font-size--body-outfit-link: 1rem;
  --line-height--body-outfit-link: 1rem;
  --font--body-outfit-link: var(--font-weight--body-outfit-link) var(--font-size--body-outfit-link)/var(--line-height--body-outfit-link) var(--font-family--body-outfit-link);

  /* Anton Font 40 */
  --font-family--font--anton-40: 'Anton', sans-serif;
  --font-weight--font--anton-40: 400;
  --font-size--font--anton-40: 2.86rem;
  --line-height--font--anton-40: 100%;
  --font--anton-40: var(--font-weight--font--anton-40) var(--font-size--font--anton-40)/var(--line-height--font--anton-40) var(--font-family--font--anton-40);

  /* Anton Font 32 */
  --font-family--font--anton-32: 'Anton', sans-serif;
  --font-weight--font--anton-32: 400;
  --font-size--font--anton-32: 2.29rem;
  --line-height--font--anton-32: 100%;
  --font--anton-32: var(--font-weight--font--anton-32) var(--font-size--font--anton-32)/var(--line-height--font--anton-32) var(--font-family--font--anton-32);

  /* Anton Font 24 */
  --font-family--font--anton-24: 'Anton', sans-serif;
  --font-weight--font--anton-24: 400;
  --font-size--font--anton-24: 1.71rem;
  --line-height--font--anton-24: 100%;
  --font--anton-24: var(--font-weight--font--anton-24) var(--font-size--font--anton-24)/var(--line-height--font--anton-24) var(--font-family--font--anton-24);

  /* Anton Font 20 */
  --font-family--font--anton-20: 'Anton', sans-serif;
  --font-weight--font--anton-20: 400;
  --font-size--font--anton-20: 1.43rem;
  --line-height--font--anton-20: 100%;
  --font--anton-20: var(--font-weight--font--anton-20) var(--font-size--font--anton-20)/var(--line-height--font--anton-20) var(--font-family--font--anton-20);

  /* Anton Font 16 */
  --font-family--font--anton-16: 'Anton', sans-serif;
  --font-weight--font--anton-16: 400;
  --font-size--font--anton-16: 1.14rem;
  --line-height--font--anton-16: 100%;
  --font--anton-16: var(--font-weight--font--anton-16) var(--font-size--font--anton-16)/var(--line-height--font--anton-16) var(--font-family--font--anton-16);

  /* Anton Font 14 */
  --font-family--font--anton-14: 'Anton', sans-serif;
  --font-weight--font--anton-14: 400;
  --font-size--font--anton-14: 1rem;
  --line-height--font--anton-14: 100%;
  --font--anton-14: var(--font-weight--font--anton-14) var(--font-size--font--anton-14)/var(--line-height--font--anton-14) var(--font-family--font--anton-14);

  /* Anton Font 12 */
  --font-family--font--anton-12: 'Anton', sans-serif;
  --font-weight--font--anton-12: 400;
  --font-size--font--anton-12: 0.86rem;
  --line-height--font--anton-12: 100%;
  --font--anton-12: var(--font-weight--font--anton-12) var(--font-size--font--anton-12)/var(--line-height--font--anton-12) var(--font-family--font--anton-12);

  --text-transform--font--anton: uppercase;
  
  --font--input: var(--font--outfit-14);
  --font--icons: 'Material Symbols Outlined';

  /* --- SPACING --- */

  --spacing--xxl: 48px;
  --spacing--xl: 32px;
  --spacing--l: 24px;
  --spacing--m: 16px;
  --spacing--s: 12px;
  --spacing--xs: 8px;
  --spacing--xxs: 4px;

  --size--border-thin: 1px;
  --size--border: 1px;
  --size--icon: 24px;
  --size--control: 40px;

  --size--overlay--large: 900px;
  --size--overlay--medium: 600px;
  --size--overlay--small: 360px;

  /* --- RADIUS --- */

  --radius--l: 20px;
  --radius--m: 12px;
  --radius--s: 8px;
  --radius--xs: 3px;

  --radius--circle: 50%;

  /* Animations */
  --ease--on-screen: cubic-bezier(0.25, 0, 0.55, 1);
  --ease--entrance: cubic-bezier(0, 0, 0.1, 0.9);
  --ease--exit: cubic-bezier(0.35, 0.1, 0.8, 1);

  --duration--extra-fast: 0.1s; /* 100ms */
  --duration--fast: 0.15s; /* 150ms */
  --duration--medium: 0.2s; /* 200ms */
  --duration--slow: 0.25s; /* 250ms */
  --duration--extra-slow: 0.3s; /* 300ms */
  --duration--extra-extra-slow: 0.5s; /* 500ms */

  /* ====== TOKENS ====== */

  --font--action: var(--font--outfit-title-14);

  --color--default--text: var(--color--grey-90);
  --color--default--background: var(--color--white);
  --color--default--hover: var(--color--grey-10);

  --color--info: var(--color--grey-40);
  --color--discreet: var(--color--grey-20);

  --color--standout--text: var(--color--white);
  --color--standout--background: var(--color--grey-90);

  --color--primary--text: var(--color--white);
  --color--primary--background: var(--color--secondary-green);
  --color--primary--hover: var(--color--brand-dark-green);
  --color--primary--active: var(--color--brand-dark-green);

  --color--disabled--text: var(--color--grey-20);
  --color--disabled--background: var(--color--grey-5);

  --color--secondary--text: var(--color--grey-90);
  --color--secondary--background: var(--color--white);
  --color--secondary--hover: var(--color--grey-10);
  --color--secondary--active: var(--color--grey-20);

  --color--placeholder: var(--color--grey-40);
  --color--accent: var(--color--brand-dark-green);

  --color--help: var(--color--blue);
  --color--help-hover: var(--color--blue-90);

  --color--active: var(--color--secondary-green);
  --color--active--background: var(--color--blue-5);
  --border--active: var(--size--border) solid var(--color--blue);
  
  --border--disabled: var(--size--border) solid var(--color--grey-20);

  --color--divider: var(--color--grey-10);
  --border--divider: var(--size--border) solid var(--color--divider);

  --color--error: var(--color--red);
  --color--error--text: var(--color--red-70);
  --color--error--background: var(--color--red-5);
  --border--error: var(--size--border) solid var(--color--error);

  --color--success: var(--color--green);
  --color--success--text: var(--color--green-70);
  --color--success--background: var(--color--green-5);
  --border--success: var(--size--border) solid var(--color--success);

  --color--warning: var(--color--orange);
  --color--warning--text: var(--color--orange-70);
  --color--warning--background: var(--color--orange-5);
  --border--warning: var(--size--border) solid var(--color--warning);

  --color--link: var(--color--blue);
  --color--link--hover: var(--color--blue-70);
  --color--link--active: var(--color--blue-90);
  --color--link--visited: var(--color--accent);

  --color--header--background: var(--color--grey-5);

  /* some special colours */
  --color--backdrop: #0b080833;
  --color--shadow: #00000040;

  /* Layers of z-indexes for these specific component containers */
  --Tooltip--z-index: 1;
  --Dropdown--z-index: 1;
  --Spotlight--z-index: 1;
  --Sidebar--z-index: 1;
  --Modal--z-index: 1;
  --Tray--z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration--extra-fast: 0s;
    --duration--fast: 0s;
    --duration--medium: 0s;
    --duration--slow: 0s;
    --duration--extra-slow: 0s;
  }
}