/*
Refer to AutoStore Design System (ADS) for more details
https://www.figma.com/file/hdLvs2exVK51yLFq4FGSU0/ASDS-%E2%80%93-Base?node-id=403-2827&t=yeb7DT5jPusFkS8q-0
*/

:root {
  /*--dxp styling hooks*/
  /* Color */
  --dxp-g-root: var(--ads-color-background-default-primary);
  --dxp-g-root-contrast: var(--ads-color-text-default-primary);
  --dxp-g-root-1: var(--ads-color-background-default-secondary);

  --dxp-g-brand: var(--ads-color-background-accent-primary);
  --dxp-g-brand-contrast: var(--ads-color-text-inverse-primary);
  --dxp-g-brand-1: var(--ads-color-background-accent-primary-hover);
  --dxp-g-brand-contrast-1: var(--ads-color-text-inverse-primary);

  --dxp-g-success: var(--ads-color-background-success-primary);
  --dxp-g-success-contrast: var(--ads-color-text-inverse-primary);
  --dxp-g-success-1: var(--ads-color-background-success-primary-hover);
  --dxp-g-success-contrast-1: var(--ads-color-text-inverse-primary);

  --dxp-g-destructive: var(--ads-color-background-error-primary);
  --dxp-g-destructive-contrast: var(--ads-color-text-inverse-primary);
  --dxp-g-destructive-1: var(--ads-color-background-error-primary-hover);
  --dxp-g-destructive-contrast-1: var(--ads-color-text-inverse-primary);

  --dxp-g-warning: var(--ads-color-background-warning-primary);
  --dxp-g-warning-contrast: var(--ads-color-text-default-primary);

  --dxp-g-info: var(--ads-color-background-inverse-primary);
  --dxp-g-info-contrast: var(--ads-color-text-inverse-primary);

  --dxp-g-neutral: var(--ads-color-background-default-secondary);
  --dxp-g-neutral-contrast: var(--ads-color-text-default-primary);
  --dxp-g-neutral-1: var(--ads-color-border-default-primary);

  /* Typography */
  --dxp-s-html-font-size: 16px;
  --dxp-s-html-font-size-mobile: 16px;


  /** Set the font for all root/body text **/
  --dxp-g-root-font-family: var(--ads-font-family);
  --dxp-g-heading-font-family: var(--ads-font-family);

  /* Mapped to ADS level 5 */
  --dxp-s-text-heading-extra-large-font-family: var(--ads-font-family);
  --dxp-s-text-heading-extra-large-font-size: 2.5rem;
  --dxp-s-text-heading-extra-large-font-weight: 2.5rem;

  /* Mapped to ADS level 4 */
  --dxp-s-text-heading-large-font-family: var(--ads-font-family);
  --dxp-s-text-heading-large-font-size: 2rem;
  --dxp-s-text-heading-large-font-weight: var(--ads-font-weight);

  /* Mapped to ADS level 3 */
  --dxp-s-text-heading-medium-font-family: var(--ads-font-family);
  --dxp-s-text-heading-medium-font-size: 1.5rem;
  --dxp-s-text-heading-medium-font-weight: var(--ads-font-weight);

  /* Mapped to ADS level 2 */
  --dxp-s-text-heading-small-font-family: var(--ads-font-family);
  --dxp-s-text-heading-small-font-size: 1.25rem;
  --dxp-s-text-heading-small-font-weight: var(--ads-font-weight);

  /* Mapped to ADS level 0 */
  --dxp-s-body-font-family: var(--ads-font-family);
  --dxp-s-body-font-size: 0.875rem;
  --dxp-s-body-font-weight: var(--ads-font-weight);

  /* Mapped to ADS level -1 */
  --dxp-s-body-small-font-family: var(--ads-font-family);
  --dxp-s-body-small-font-size: 0.75rem;
  --dxp-s-body-small-font-weight: var(--ads-font-weight);

  /* Buttons - Mapped to ADS level 1 */
  --dxp-s-text-button-font-family: var(--ads-font-family);
  --dxp-s-text-button-font-size: 0.875rem;
  --dxp-s-text-button-font-weight: var(--ads-font-weight-bold);
  --dxp-s-button-font-weight: var(--ads-font-weight-bold);
  --dxp-s-button-small-radius-border: var(--ads-button-border-radius);
  --dxp-s-button-radius-border: var(--ads-button-border-radius);
  --dxp-s-button-large-radius-border: var(--ads-button-border-radius);

  --dxp-c-section-content-spacing-inline-start: 5rem;
  --dxp-c-section-content-spacing-inline-end: 5rem;
  --dxp-c-header-container-spacing-inline-start: 5rem;
  --dxp-c-header-container-spacing-inline-end: 5rem;
  --dxp-c-footer-container-spacing-inline-start: 5rem;
  --dxp-c-footer-container-spacing-inline-end: 5rem;


  /*Lightning Design System Styling Hooks*/
  /*Button overrides*/
  --sds-c-button-brand-spacing-inline-start: 1.875rem;
  --sds-c-button-brand-spacing-inline-end: 1.875rem;
  --sds-c-button-outline-brand-color-background: rgba(0, 0, 0, 0.08);
  --sds-c-button-sizing-border: 0px;
  --sds-c-button-text-color: var(--ads-color-text-default-primary);
  --sds-c-button-text-color-hover: var(--ads-color-text-default-primary);
  --sds-c-button-outline-brand-color-background-hover: rgba(0, 0, 0, 0.11);
  --sds-c-button-shadow-focus: 0px;

  --sds-c-button-brand-color-background: var(--ads-color-background-accent-primary);
  --sds-c-button-brand-color-background-active: var(--ads-color-background-accent-primary);
  --sds-c-button-brand-color-background-hover: var(--ads-color-background-accent-primary-hover);
  --sds-c-button-brand-text-color: var(--ads-color-text-inverse-primary);
  --sds-c-button-brand-text-color-hover: var(--ads-color-text-inverse-primary);


  --sds-c-button-neutral-color-background: rgba(0,0,0,0.08);
  --sds-c-button-neutral-color-background-active: rgba(0,0,0,0.11);
  --sds-c-button-neutral-color-background-hover: rgba(0,0,0,0.11);

  /*Icons*/
  --slds-c-icon-color-foreground: var(--ads-color-icon-default-primary);

  /*Form elements*/
  --sds-c-input-color-border: var(--ads-color-mono-200);
  --slds-c-input-color-border: var(--ads-color-mono-200); /*lightning-combobox uses this one */
  --sds-c-input-color-border-focus: var(--ads-color-input-border-focus);
  --sds-c-textarea-color-border: var(--ads-color-mono-200);
  --sds-c-textarea-color-border-focus: var(--ads-color-input-border-focus);
  --sds-c-checkbox-color-border: var(--ads-color-mono-200);
  --sds-c-checkbox-color-border-focus: var(--ads-color-input-border-focus);

  /*AutoStore Design System Variables*/
  /*Colors (https://www.figma.com/file/hdLvs2exVK51yLFq4FGSU0/ASDS-%E2%80%93-Base?node-id=0%3A1&t=HvnuQndzLFy6wQNs-1)*/
  --ads-color-background-default-primary: #FFFFFF;
  --ads-color-background-default-secondary: #F0F0F0;
  --ads-color-background-inverse-primary: #000000;
  --ads-color-background-inverse-primary-hover: #333333;
  --ads-color-background-accent-primary: #276FEC;
  --ads-color-background-accent-primary-hover: #185BD1;
  --ads-color-background-accent-light-primary: #EFF3FE;
  --ads-color-background-accent-light-primary-hover: #E4ECFF;
  --ads-color-background-success-primary: #15844B;
  --ads-color-background-success-primary-hover: #0E733F;
  --ads-color-background-success-light-primary: #E6F2ED;
  --ads-color-background-success-light-primary-hover: #DAEDE5;
  --ads-color-background-error-primary: #E11B22;
  --ads-color-background-error-primary-hover: #C91218;
  --ads-color-background-error-light-primary: #FFEFED;
  --ads-color-background-error-light-primary-hover: #FFE6E2;
  --ads-color-background-warning-primary: #FFC043;
  --ads-color-background-warning-primary-hover: #F0B135;
  --ads-color-background-warning-light-primary: #FFF2D9;
  --ads-color-background-warning-light-primary-hover: #F8E9CE;
  --ads-color-input-border-focus: var(--ads-color-border-accent);

  --ads-color-text-default-primary: rgba(0, 0, 0, 0.87);
  --ads-color-text-default-secondary: rgba(0, 0, 0, 0.6);
  --ads-color-text-default-disabled: rgba(0, 0, 0, 0.3);
  --ads-color-text-default-inactive: rgba(0, 0, 0, 0.4);
  --ads-color-text-default-inactive-hover: rgba(0, 0, 0, 0.6);
  --ads-color-text-inverse-primary: rgba(255, 255, 255, 1);
  --ads-color-text-inverse-secondary: rgba(255, 255, 255, 0.65);
  --ads-color-text-inverse-disabled:  rgba(255, 255, 255, 0.45);
  --ads-color-text-accent: rgba(34, 96, 211, 1);
  --ads-color-text-success: rgba(19, 118, 67, 1);
  --ads-color-text-error: rgba(210, 25, 31, 1);
  --ads-color-text-warning: rgba(132, 98, 31, 1);

  --ads-color-icon-default-primary: #000000;
  --ads-color-icon-default-secondary: rgba(0, 0, 0, 0.54);
  --ads-color-icon-default-disabled: rgba(0, 0, 0, 0.3);
  --ads-color-icon-default-inactive: rgba(0, 0, 0, 0.35);
  --ads-color-icon-default-inactive-hover: rgba(0, 0, 0, 0.6);
  --ads-color-icon-inverse-primary: #FFFFFF;
  --ads-color-icon-inverse-disabled: rgba(255, 255, 255, 0.45);
  --ads-color-icon-accent: rgba(34, 96, 211, 1);
  --ads-color-icon-success: rgba(24, 154, 87, 1);
  --ads-color-icon-error: rgba(245, 29, 0, 1);
  --ads-color-icon-warning: rgba(186, 138, 44, 1);

  --ads-color-border-default-primary: rgba(0, 0, 0, 0.2);
  --ads-color-border-default-secondary: rgba(0, 0, 0, 0.1);
  --ads-color-border-inverse-primary: rgba(255, 255, 255, 0.35);
  --ads-color-border-inverse-secondary: rgba(255, 255, 255, 0.25);
  --ads-color-border-accent: rgba(34, 96, 211, 1);
  --ads-color-border-success: rgba(24, 154, 87, 1);
  --ads-color-border-error: rgba(225, 27, 34, 1);
  --ads-color-border-warning: rgba(186, 138, 44, 1);

  --ads-color-label-1: #BDD3FF;
  --ads-color-label-2: #C8BDFF;
  --ads-color-label-3: #E9BDFF;
  --ads-color-label-4: #FFBDE9;
  --ads-color-label-5: #FFBDBD;
  --ads-color-label-6: #FFD3BD;
  --ads-color-label-7: #FFE3AC;
  --ads-color-label-8: #EBEB9D;
  --ads-color-label-9: #DAF5A5;
  --ads-color-label-10: #BAFFAC;
  --ads-color-label-11: #ACFFD5;
  --ads-color-label-12: #ACF1FF;

  --ads-color-mono-white: rgba(255, 255, 255, 1);
  --ads-color-mono-50: rgba(246, 246, 246, 1);
  --ads-color-mono-100: rgba(238, 238, 238, 1);
  --ads-color-mono-200: rgba(226, 226, 226, 1);
  --ads-color-mono-300: rgba(203, 203, 203, 1);
  --ads-color-mono-400: rgba(175, 175, 175, 1);
  --ads-color-mono-500: rgba(117, 117, 117, 1);
  --ads-color-mono-600: rgba(84, 84, 84, 1);
  --ads-color-mono-700: rgba(51, 51, 51, 1);

  /*Font*/
  --ads-font-family: CircularXX;
  --ads-font-weight: 400;
  --ads-font-weight-bold: 500;

  /*Buttons*/
  --ads-button-border-radius: 6px;
}