:root {
  /** Use --dxp-g to override global styles **/
  --dxp-g-heading-font-family: 'ivar-soft', 'georgia', Georgia;
  --dxp-g-root-font-family: 'neue-haas-grotesk-text', 'helvetica-lt-pro', Helvetica;

  --dxp-g-brand: none;

  /** Use --sds-c to override standard component styles **/
  --sds-c-modal-text-color: var(--color-gray-900);
  --sds-c-modal-color-border: var(--color-white);
  --sds-c-modal-header-color-background: var(--color-white);
  --sds-c-modal-content-color-background: var(--color-white);
  --sds-c-modal-footer-color-background: var(--color-white);
  --sds-c-modal-radius-border: var(--border-radius);
  --sds-c-modal-heading-font-weight: var(--font-weight-bold);
  --sds-c-modal-heading-font-size: var(--font-size-large);
  --sds-c-modal-heading-line-height: var(--line-height-large);
  --sds-c-modal-header-spacing-inline-start: 5rem;
  --sds-c-modal-header-spacing-inline-end: 5rem;
  --sds-c-modal-header-spacing-block-start: 1.75rem;
  --sds-c-modal-header-spacing-block-end: 1.75rem;
  --sds-c-modal-footer-spacing-inline-start: 2rem;
  --sds-c-modal-footer-spacing-inline-end: 2rem;
  --sds-c-modal-footer-spacing-block-start: 1.25rem;
  --sds-c-modal-footer-spacing-block-end: 1.25rem;

  /** Use --c to override custom component styles **/
  --c-modal-header-font-family: var(--font-family-large);
  --c-modal-close-icon-color: var(--color-teal-secondary);

  --c-modal-content-spacing-inline-start: 2rem;
  --c-modal-content-spacing-inline-end: 2rem;
  --c-modal-content-spacing-block-start: 1.5rem;
  --c-modal-content-spacing-block-end: 1.5rem;

  --c-notification-background: var(--color-deep-cream);
  --c-notification-spacing-inline-start: 1.8125rem;
  --c-notification-spacing-inline-end: 1.8125rem;
  --c-notification-spacing-block-start: 1.875rem;
  --c-notification-spacing-block-end: 1.875rem;

  --c-card-border: none;
  --c-card-border-radius: var(--border-radius);
  --c-card-background-color: var(--color-cream);
  --c-card-shadow: var(--shadow-base);

  --c-icon-color: var(--color-teal);

  /** Define custom variables **/
  --color-white: #FFFFFF;
  --color-black: #041322;

  --color-deep-teal: #002424;
  --color-teal: #005761;
  --color-teal-secondary: #086771;
  --color-teal-accent: #00E6F5;
  --color-cream: #FAF6F0;
  --color-deep-cream: #E9E2D8;
  --color-fig: #4E1821;
  --color-fig-secondary: #601E27;
  --color-fig-accent: #FF575A;

  --color-gray-900: #111928;
  --color-gray-800: #1F2A37;
  --color-gray-700: #333F4E;
  --color-gray-600: #585E6B;
  --color-gray-500: #6B7280;
  --color-gray-400: #AAACAF;
  --color-gray-300: #D3D5D8;
  --color-gray-200: #E5E7EB;
  --color-gray-100: #EFF0F2;
  --color-gray-50: #F9FAFB;

  --color-destructive: var(--color-fig-accent);
  --color-destructive-background: #FFEBF0;

  --color-link-blue: #0250D9;

  --font-family-h1: var(--dxp-s-text-heading-extra-large-font-family, var(--dxp-g-heading-font-family));
  --font-family-h2: var(--dxp-s-text-heading-large-font-family, var(--dxp-g-heading-font-family));
  --font-family-h3: var(--dxp-s-text-heading-medium-font-family, var(--dxp-g-heading-font-family));
  --font-family-h4: var(--dxp-s-text-heading-small-font-family, var(--dxp-g-heading-font-family));
  --font-family-large: var(--dxp-s-text-heading-extra-extra-small-font-family, var(--dxp-g-root-font-family));
  --font-family-base: var(--dxp-s-body-font-family, var(--dxp-g-root-font-family));

  --font-size-h1: var(--dxp-s-text-heading-extra-large-font-size);
  --font-size-h2: var(--dxp-s-text-heading-large-font-size);
  --font-size-h3: var(--dxp-s-text-heading-medium-font-size);
  --font-size-h4: var(--dxp-s-text-heading-small-font-size);
  --font-size-large: var(--dxp-s-text-heading-extra-extra-small-font-size);
  --font-size-base: var(--dxp-s-body-font-size);

  --font-weight-bold: 700;
  --font-weight-base: 400;

  --font-weight-h1: var(--dxp-s-text-heading-extra-large-font-weight, var(--font-weight-base));
  --font-weight-h2: var(--dxp-s-text-heading-large-font-weight, var(--font-weight-base));
  --font-weight-h3: var(--dxp-s-text-heading-medium-font-weight, var(--font-weight-base));
  --font-weight-h4: var(--dxp-s-text-heading-small-font-weight, var(--font-weight-base));
  --font-weight-large: var(--dxp-s-text-heading-extra-extra-small-font-weight);
  --font-weight-base: var(--dxp-s-body-font-weight, var(--font-weight-base));

  --line-height-h1: var(--dxp-s-text-heading-extra-large-line-height);
  --line-height-h2: var(--dxp-s-text-heading-large-line-height);
  --line-height-h3: var(--dxp-s-text-heading-medium-line-height);
  --line-height-h4: var(--dxp-s-text-heading-small-line-height);
  --line-height-large: var(--dxp-s-text-heading-extra-extra-small-line-height);
  --line-height-base: var(--dxp-s-body-line-height);

  --border-radius: 0.5rem;

  --shadow-color-primary: #11111A0D;
  --shadow-color-secondary: #11111A1A;
  --shadow-large: 0px 2px 6px 0px var(--shadow-color-primary), 0px 8px 16px 0px var(--shadow-color-secondary);
  --shadow-base: 0px 2px 6px 0px var(--shadow-color-primary), 0px 4px 12px 0px var(--shadow-color-secondary);
  --shadow-small: 0px 2px 3px 0px var(--shadow-color-primary), 0px 1px 2px 0px var(--shadow-color-secondary);

  /* Due to the base font size misalignment between Experience Builder(1rem) vs the design(0.75rem).
   * The misalignment makes it easier to calculate the line height ratios and apply font sizes in Experience Builder.
   * The manual calculation has to happen because the design specifies line heights in rem/px,
   * while Experience Builder only accetps a ratio from the base font size.
   */
  --dxp-s-button-font-size: var(--font-size-base);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.text-h1 {
  font-family: var(--font-family-h1);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
}

.text-h2 {
  font-family: var(--font-family-h2);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
}

.text-h3 {
  font-family: var(--font-family-h3);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
}

.text-h4 {
  font-family: var(--font-family-h4);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
}

.text-large,
.dxp-text-large h6 {
  font-family: var(--font-family-large);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-large);
  line-height: var(--line-height-large);
}

.text-bold {
  font-weight: var(--font-weight-bold);
}

.dxp-header {
  background-color: var(--color-teal);
}

.dxp-footer {
  background-color: var(--color-teal);
}

.dxp-welcome {
  border-radius: var(--border-radius);
}

.dxp-welcome-text {
  --dxp-s-text-heading-extra-extra-small-color: var(--color-deep-teal);
}

/* Invalidate global vertical padding settings for icon buttons */
.slds-button.slds-button_icon {
  --dxp-s-button-padding-block-start: 0;
  --dxp-s-button-padding-block-end: 0;
}

/* remove default black outline */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

/* workaround for removing default focus outline */
.slds-input:focus,
.slds-textarea:focus {
  --slds-g-shadow-outline-focus-1: none;
  --slds-c-input-shadow: none;
}

.slds-input:focus {
  --sds-c-input-color-border-focus: var(--color-teal-secondary);
}

.slds-textarea:focus {
  --sds-c-textarea-color-border-focus: var(--color-teal-secondary);
  --slds-c-textarea-shadow-focus: none;
}

/* workaround for SLDS input readonly font size */
.slds-input[readonly] {
  font-size: var(--font-size-base) !important;
}

/* workaround for standard Salesforce dropdown height misalignment */
button.slds-combobox__input.slds-input_faux.fix-slds-input_faux {
  line-height: 1.5em !important;
}

/* workaround for removing box shadow outline from standard Salesforce dropdown when focused */
button.slds-combobox__input:focus {
  --slds-g-shadow-outline-focus-1: none;
  --sds-c-input-color-border-focus: var(--color-teal-secondary);
  --slds-c-input-shadow: none;
}

/* reset lightning-datatable row action dropdown item text color because Salesforce treats them as links */
.slds-dropdown__item>a,
.slds-dropdown__item>a:focus {
  --slds-g-link-color-focus: var(--color-deep-teal);
}

/* workaround for removing box shadow outline from standard Salesforce dropdown item when focused */
.slds-dropdown__item>a:focus {
   --slds-g-shadow-outline-focus-1: none;
   --slds-g-shadow-inset-focus-1: none;
}


/* workaround to apply styles to "neutral" variant of lightning-button 
to be removed when Salesforce adds relevant variables to Experience Builder */
.slds-button_neutral {
  --sds-c-button-neutral-color-background: var(--color-white);
  --sds-c-button-neutral-color-background-hover: var(--color-white);
  --sds-c-button-neutral-color-background-active: var(--color-white);
  --sds-c-button-neutral-color-border: var(--color-teal);
  --sds-c-button-neutral-color-border-hover: var(--color-deep-teal);
  --sds-c-button-neutral-color-border-active: var(--color-teal-secondary);
  --slds-c-button-spacing-inline-start: var(--dxp-s-button-padding);
  --slds-c-button-spacing-inline-end: var(--dxp-s-button-padding);
}
/* remove default black border when focused */
.slds-button_neutral:focus {
  --sds-c-button-neutral-color-border-hover: var(--color-teal-secondary);
}

/* workaround to change spinner color 
to be removed once Salesforce adds relevant variables
*/
.slds-spinner_brand.slds-spinner:before,
.slds-spinner_brand.slds-spinner:after,
.slds-spinner_brand .slds-spinner__dot-a:before,
.slds-spinner_brand .slds-spinner__dot-a:after,
.slds-spinner_brand .slds-spinner__dot-b:before,
.slds-spinner_brand .slds-spinner__dot-b:after {
  background-color: var(--color-teal);
}

/* workaround to apply styles to lightning-datatable */
lightning-datatable {
  --slds-g-color-neutral-base-95: var(--color-deep-cream); /* header cell background */
  --slds-g-color-neutral-base-30: var(--color-gray-700); /* header cell color */
  --slds-g-color-border-base-1: var(--color-deep-cream); /* header bottom and row top border */
  --dxp-g-root-contrast: var(--color-deep-teal); /* cell text color */
  --dxp-s-button-font-size: var(--font-size-base); /* header cell button font size */
}

/* lightning-datatable header cell focus outline */
.slds-has-focus .slds-th__action {
  box-shadow: 0 0 0 1px var(--color-teal-secondary) inset !important;
}
/* lightning-datatable cell focus outline */
.slds-table [role=gridcell]:focus,
.slds-table [role=gridcell].slds-has-focus,
.slds-table th:focus,
.slds-table th.slds-has-focus {
  --slds-g-shadow-inset-inverse-focus-1: 0 0 0 1px var(--color-teal-secondary) inset !important;
}