@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

:root {
  /* Typography https://www.figma.com/file/UOVw8kjJWfcqmZDxmzOWrU/SFDS-v2?type=design&node-id=2339-13054&t=fjDi6RIf6ZFx9Mjo-0 */

  --exp-fontfamily: inter, sans-serif;

  /* Colors https://www.figma.com/file/UOVw8kjJWfcqmZDxmzOWrU/SFDS-v2?type=design&node-id=2339-13053&t=U4YfqUfS4bB3YeDS-0 */
  --exp-color-green-1000: #064522;
  --exp-color-green-110: #15381a;
  --exp-color-green-100: #205527;
  --exp-color-green-90: #2d7637;
  --exp-color-green-80: #389444;
  --exp-color-green-70: #43b152;
  --exp-color-green-60: #5cc16a;
  --exp-color-green-50: #7acd85;
  --exp-color-green-40: #97d8a0;
  --exp-color-green-30: #b5e3bb;
  --exp-color-green-20: #d3eed6;
  --exp-color-green-10: #f0f9f1;
  --exp-color-black: #000;
  --exp-color-neutral-1000: #0a0e1d;
  --exp-color-neutral-700: #696d77;
  --exp-color-neutral-300: #cdcfd2;
  --exp-color-neutral-200: #e6e7e9;
  --exp-color-neutral-100: #f1f3f4;
  --exp-color-neutral-0: #fff;
  --exp-color-grey-90: #292929;
  --exp-color-grey-80: #525252;
  --exp-color-grey-70: #7a7a7a;
  --exp-color-grey-60: #a3a3a3;
  --exp-color-grey-50: #adadad;
  --exp-color-grey-40: #d8d8d8;
  --exp-color-grey-30: #ebebeb;
  --exp-color-grey-20: #f5f5f5;
  --exp-color-grey-10: #f9f9f9;
  --exp-color-white: #fff;
  --exp-color-blue-60: #265e91;
  --exp-color-blue-30: #599bd8;
  --exp-color-blue-10: #f4f8fc;
  --exp-color-yellow-1000: #4f3702;
  --exp-color-yellow-60: #987a00;
  --exp-color-yellow-30: #fecb0c;
  --exp-color-yellow-10: #fffcee;
  --exp-color-red-800: #cf2208;
  --exp-color-red-100: #faeae7;
  --exp-color-red-70: #c769c7;
  --exp-color-red-60: #610;
  --exp-color-red-50: #bf1100;
  --exp-color-red-30: #ce3635;
  --exp-color-red-20: #e65c6b;
  --exp-color-red-10: #fff4f2;
  --exp-color-gradient-01: linear-gradient(
    133deg,
    #649924 14.62%,
    #226b23 56.16%,
    #032502 85.38%
  );
  --exp-color-orange-30: #fbb65d;
  --exp-color-eazle: #004b57;
  --exp-color-teal-800: #026d7c;
  --exp-color-teal-1000: #00414b;
  --exp-color-lime-90: #c1fcd0;
  --exp-color-lime-100: #cefab7;
  --exp-color-shadow: color-mix(
    in srgb,
    var(--exp-color-black) 15%,
    transparent
  );

  /* in case of color missing, please request advice from CXO team for a similar color */

  /* aliases */
  --exp-color-promotion: var(--exp-color-red-20);
  --exp-color-cartpill: var(--exp-color-red-50);
  --exp-color-stocklevel: var(--exp-color-orange-30);
  --exp-color-infoalert-dark: var(--exp-color-blue-60);
  --exp-color-infoalert-medium: var(--exp-color-blue-30);
  --exp-color-infoalert-light: var(--exp-color-blue-10);
  --exp-color-warnalert-dark: var(--exp-color-yellow-60);
  --exp-color-warnalert-medium: var(--exp-color-yellow-30);
  --exp-color-warnalert-light: var(--exp-color-yellow-10);
  --exp-color-blockalert-dark: var(--exp-color-red-60);
  --exp-color-blockalert-medium: var(--exp-color-red-30);
  --exp-color-blockalert-light: var(--exp-color-red-10);
}

/* default font for whole document */
html,
body,
.exp-text-body_medium {
  font-family: var(--exp-fontfamily);
  font-size: 15px;
  line-height: 20px;
}

/* bold + header tags */
h1,
h2,
h3,
h4,
h5,
h6,
b,
[attribute^="exp-text-heading_"] {
  font-weight: 700;
}

h1,
.exp-text-heading_xlarge {
  font-size: 40px;
  line-height: 50px;
}

h2,
.exp-text-heading_large {
  font-size: 32px;
  line-height: 40px;
}

h3,
.exp-text-heading_medium {
  font-size: 27px;
  line-height: 34px;
}

h4,
.exp-text-heading_small {
  font-size: 22px;
  line-height: 28px;
}

h5,
.exp-text-heading_xsmall {
  font-size: 20px;
  line-height: 26px;
}

h6 {
  font-size: 17px;
  line-height: 23px;
}

.exp-text-body_large {
  font-size: 17px;
  line-height: 22px;
}

.exp-text-body_small {
  font-size: 12px;
  line-height: 17px;
}

.exp-text-body_caption {
  font-size: 10px;
  line-height: 15px;
}

.exp-unselectable-blur {
  filter: blur(6.5px);
  user-select: none;
}

.title-semibold-medium {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: var(--exp-color-neutral-1000);
}

.title-semibold-extra-large {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--exp-color-neutral-1000);
}

.body-regular-small {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: var(--exp-color-neutral-700);
}

.body-regular-medium {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: var(--exp-color-neutral-1000);
}

/* TODO confirm screen width used for mobile */
@media only screen and (max-width: 600px) {
  h1,
  .exp-text-heading_xlarge {
    font-size: 27px;
    line-height: 34px;
  }

  h2,
  .exp-text-heading_large {
    font-size: 22px;
    line-height: 28px;
  }

  h3,
  .exp-text-heading_medium {
    font-size: 20px;
    line-height: 26px;
  }

  h4,
  .exp-text-heading_small {
    font-size: 17px;
    line-height: 23px;
  }

  h5,
  .exp-text-heading_xsmall {
    font-size: 14px;
    line-height: 20px;
  }

  h6 {
    font-size: 12px;
    line-height: 18px;
  }

  .exp-text-body_large {
    font-size: 15px;
    line-height: 20px;
  }
}