/**
 * Semantic tokens
 * Use these in your projects
 *
 */

 @import url('primitives.css');

/**
 * Color Theme tokens used in the theme.
 *
 */

:root {
  --mds-background-base-transparent: var(--mds-color-utility-base-white-transparent);
  --mds-background-base-overlay: var(--mds-color-utility-base-black-transparent);
  --mds-background-surface-default: var(--mds-color-brand-surface-1000);
  --mds-background-section-brand-neutral-lowest: var(--mds-color-brand-gray-100);
  --mds-background-section-brand-neutral-low: var(--mds-color-brand-gray-300);
  --mds-background-section-brand-neutral-mid: var(--mds-color-brand-gray-800);
  --mds-background-section-brand-neutral-high: var(--mds-color-brand-gray-1100);
  --mds-background-section-brand-neutral-highest: var(--mds-color-brand-gray-1300);
  --mds-background-section-brand-neutral-disabled: var(--mds-color-brand-gray-200);
  --mds-background-section-brand-primary-lowest: var(--mds-color-brand-bay-blue-100);
  --mds-background-section-brand-primary-mid: var(--mds-color-brand-bay-blue-1000);
  --mds-background-section-brand-primary-highest: var(--mds-color-brand-bay-blue-1300);
  --mds-background-section-brand-secondary-lowest: var(--mds-color-brand-berkshires-green-100);
  --mds-background-section-brand-secondary-mid: var(--mds-color-brand-berkshires-green-1000);
  --mds-background-section-brand-secondary-highest: var(--mds-color-brand-berkshires-green-1300);
  --mds-background-section-brand-tertiary-lowest: var(--mds-color-brand-independence-cranberry-100);
  --mds-background-section-brand-tertiary-mid: var(--mds-color-brand-independence-cranberry-800);
  --mds-background-section-brand-tertiary-highest: var(--mds-color-brand-independence-cranberry-1300);
  --mds-background-section-utility-informative-lowest: var(--mds-color-utility-informative-blue-100);
  --mds-background-section-utility-informative-mid: var(--mds-color-utility-informative-blue-900);
  --mds-background-section-utility-informative-highest: var(--mds-color-utility-informative-blue-1300);
  --mds-background-section-utility-danger-lowest: var(--mds-color-utility-danger-red-100);
  --mds-background-section-utility-danger-mid: var(--mds-color-utility-danger-red-600);
  --mds-background-section-utility-danger-highest: var(--mds-color-utility-danger-red-1300);
  --mds-background-section-utility-warning-lowest: var(--mds-color-utility-warning-yellow-100);
  --mds-background-section-utility-warning-mid: var(--mds-color-utility-warning-yellow-600);
  --mds-background-section-utility-warning-highest: var(--mds-color-utility-warning-yellow-1300);
  --mds-background-section-utility-success-lowest: var(--mds-color-utility-success-green-100);
  --mds-background-section-utility-success-mid: var(--mds-color-utility-success-green-600);
  --mds-background-section-utility-success-highest: var(--mds-color-utility-success-green-1300);
  --mds-background-section-utility-static-white: var(--mds-color-utility-base-white);
  --mds-background-section-utility-static-black: var(--mds-color-utility-base-black);
  --mds-background-section-utility-inverse: var(--mds-color-utility-base-white);


  /* Adaptive/Interactive state colors */
  --mds-background-adaptive-brand-neutral-lowest: var(--mds-color-brand-gray-100);
  --mds-background-adaptive-brand-neutral-low: var(--mds-color-brand-gray-300);
  --mds-background-adaptive-brand-neutral-mid: var(--mds-color-brand-gray-900);
  --mds-background-adaptive-brand-neutral-high: var(--mds-color-brand-gray-1000);
  --mds-background-adaptive-brand-neutral-highest: var(--mds-color-brand-gray-1300);
  --mds-background-adaptive-brand-neutral-disabled: var(--mds-color-brand-gray-200);
  --mds-background-adaptive-brand-primary-lowest: var(--mds-color-brand-bay-blue-200);
  --mds-background-adaptive-brand-primary-low: var(--mds-color-brand-bay-blue-400);
  --mds-background-adaptive-brand-primary-mid: var(--mds-color-brand-bay-blue-1000);
  --mds-background-adaptive-brand-primary-high: var(--mds-color-brand-bay-blue-1100);
  --mds-background-adaptive-brand-primary-highest: var(--mds-color-brand-bay-blue-1300);
  --mds-background-adaptive-brand-secondary-lowest: var(--mds-color-brand-berkshires-green-200);
  --mds-background-adaptive-brand-secondary-low: var(--mds-color-brand-berkshires-green-600);
  --mds-background-adaptive-brand-secondary-mid: var(--mds-color-brand-berkshires-green-1000);
  --mds-background-adaptive-brand-secondary-high: var(--mds-color-brand-berkshires-green-1100);
  --mds-background-adaptive-brand-secondary-highest: var(--mds-color-brand-berkshires-green-1300);
  --mds-background-adaptive-brand-tertiary-lowest: var(--mds-color-brand-independence-cranberry-200);
  --mds-background-adaptive-brand-tertiary-low: var(--mds-color-brand-independence-cranberry-500);
  --mds-background-adaptive-brand-tertiary-mid: var(--mds-color-brand-independence-cranberry-900);
  --mds-background-adaptive-brand-tertiary-high: var(--mds-color-brand-independence-cranberry-1100);
  --mds-background-adaptive-brand-tertiary-highest: var(--mds-color-brand-independence-cranberry-1300);
  --mds-background-adaptive-brand-highlight-mid: var(--mds-color-brand-duckling-yellow-800);
  --mds-background-adaptive-utility-informative-lowest: var(--mds-color-utility-informative-blue-100);
  --mds-background-adaptive-utility-informative-low: var(--mds-color-utility-informative-blue-300);
  --mds-background-adaptive-utility-informative-mid: var(--mds-color-utility-informative-blue-600);
  --mds-background-adaptive-utility-informative-high: var(--mds-color-utility-informative-blue-900);
  --mds-background-adaptive-utility-informative-highest: var(--mds-color-utility-informative-blue-1300);
  --mds-background-adaptive-utility-danger-lowest: var(--mds-color-utility-danger-red-100);
  --mds-background-adaptive-utility-danger-low: var(--mds-color-utility-danger-red-300);
  --mds-background-adaptive-utility-danger-mid: var(--mds-color-utility-danger-red-600);
  --mds-background-adaptive-utility-danger-high: var(--mds-color-utility-danger-red-900);
  --mds-background-adaptive-utility-danger-highest: var(--mds-color-utility-danger-red-1300);
  --mds-background-adaptive-utility-warning-lowest: var(--mds-color-utility-warning-yellow-100);
  --mds-background-adaptive-utility-warning-low: var(--mds-color-utility-warning-yellow-300);
  --mds-background-adaptive-utility-warning-mid: var(--mds-color-utility-warning-yellow-900);
  --mds-background-adaptive-utility-warning-high: var(--mds-color-brand-duckling-yellow-1100);
  --mds-background-adaptive-utility-warning-highest: var(--mds-color-utility-warning-yellow-1300);
  --mds-background-adaptive-utility-success-lowest: var(--mds-color-utility-success-green-100);
  --mds-background-adaptive-utility-success-low: var(--mds-color-utility-success-green-300);
  --mds-background-adaptive-utility-success-mid: var(--mds-color-utility-success-green-600);
  --mds-background-adaptive-utility-success-high: var(--mds-color-utility-success-green-900);
  --mds-background-adaptive-utility-success-highest: var(--mds-color-utility-success-green-1300);
  --mds-background-adaptive-utility-static-white: var(--mds-color-utility-base-white);
  --mds-background-adaptive-utility-static-black: var(--mds-color-utility-base-black);
  --mds-background-adaptive-utility-inverse: var(--mds-color-utility-base-white);

  /** Text and Icon Colors **/
  --mds-text-and-icons-brand-neutral-default: var(--mds-color-brand-gray-1300);
  --mds-text-and-icons-brand-neutral-muted: var(--mds-color-brand-gray-900);
  --mds-text-and-icons-brand-neutral-disabled: var(--mds-color-brand-gray-700);
  --mds-text-and-icons-brand-primary-mid: var(--mds-color-brand-bay-blue-1000);
  --mds-text-and-icons-brand-secondary-mid: var(--mds-color-brand-berkshires-green-1000);
  --mds-text-and-icons-utility-informative-mid: var(--mds-color-utility-informative-blue-900);
  --mds-text-and-icons-utility-danger-mid: var(--mds-color-utility-danger-red-600);
  --mds-text-and-icons-utility-warning-mid: var(--mds-color-utility-warning-yellow-600);
  --mds-text-and-icons-utility-success-mid: var(--mds-color-utility-success-green-900);
  --mds-text-and-icons-utility-static-white: var(--mds-color-utility-base-white);
  --mds-text-and-icons-utility-static-black: var(--mds-color-utility-base-black);
  --mds-text-and-icons-utility-inverse: var(--mds-color-utility-base-white);

  /** Border Colors **/
  --mds-border-brand-neutral-lowest: var(--mds-color-brand-gray-200);
  --mds-border-brand-neutral-low: var(--mds-color-brand-gray-400);
  --mds-border-brand-neutral-mid: var(--mds-color-brand-gray-600);
  --mds-border-brand-neutral-high: var(--mds-color-brand-gray-750);
  --mds-border-brand-primary-lowest: var(--mds-color-brand-bay-blue-200);
  --mds-border-brand-primary-low: var(--mds-color-brand-bay-blue-400);
  --mds-border-brand-primary-mid: var(--mds-color-brand-bay-blue-1000);
  --mds-border-brand-primary-high: var(--mds-color-brand-bay-blue-1100);
  --mds-border-brand-primary-highest: var(--mds-color-brand-bay-blue-1300);
  --mds-border-brand-secondary-lowest: var(--mds-color-brand-berkshires-green-200);
  --mds-border-brand-secondary-low: var(--mds-color-brand-berkshires-green-600);
  --mds-border-brand-secondary-mid: var(--mds-color-brand-berkshires-green-900);
  --mds-border-brand-secondary-high: var(--mds-color-brand-berkshires-green-1100);
  --mds-border-brand-secondary-highest: var(--mds-color-brand-berkshires-green-1300);
  --mds-border-focus-on-light: var(--mds-color-utility-focus-blue-600);
  --mds-border-focus-on-dark: var(--mds-color-utility-focus-blue-300);
  --mds-border-utility-informative-low: var(--mds-color-utility-informative-blue-300);
  --mds-border-utility-informative-mid: var(--mds-color-utility-informative-blue-900);
  --mds-border-utility-danger-low: var(--mds-color-utility-danger-red-300);
  --mds-border-utility-danger-mid: var(--mds-color-utility-danger-red-600);
  --mds-border-utility-warning-low: var(--mds-color-utility-warning-yellow-300);
  --mds-border-utility-warning-mid: var(--mds-color-utility-warning-yellow-600);
  --mds-border-utility-success-low: var(--mds-color-utility-success-green-300);
  --mds-border-utility-success-mid: var(--mds-color-utility-success-green-600);
  --mds-border-utility-static-white: var(--mds-color-utility-base-white);
  --mds-border-utility-static-black: var(--mds-color-utility-base-black);
  --mds-border-utility-inverse: var(--mds-color-utility-base-white);

/** End color variables **/

/**
 * Corner (border radius) tokens used in the theme.
 */

  --mds-radius-xs: var(--mds-border-radius-25);
  --mds-radius-sm: var(--mds-border-radius-50);
  --mds-radius-md: var(--mds-border-radius-100);
  --mds-radius-max: var(--mds-border-radius-round);


/**
  * Elevation/Box shadow tokens
  **/

  --mds-shadow-container: var(--mds-elevation-offset-none) var(--mds-elevation-offset-100) var(--mds-elevation-blur-400) 0 var(--mds-shadow-container-opacity);
  --mds-shadow-modal: var(--mds-elevation-offset-none) var(--mds-elevation-offset-50) var(--mds-elevation-blur-300) 0 var(--mds-shadow-modal-opacity);
  --mds-shadow-hover-sm: var(--mds-elevation-offset-none) var(--mds-elevation-offset-50) var(--mds-elevation-blur-150) 0 var(--mds-shadow-hover-opacity);
  --mds-shadow-hover-md: var(--mds-elevation-offset-none) var(--mds-elevation-offset-100) var(--mds-elevation-blur-200) 0 var(--mds-shadow-hover-opacity);

/**
 * Spacing tokens
 */
  --mds-space-3xs: var(--mds-space-50);
  --mds-space-2xs: var(--mds-space-100);
  --mds-space-xs: var(--mds-space-150);
  --mds-space-sm: var(--mds-space-200);
  --mds-space-md: var(--mds-space-300);
  --mds-space-lg: var(--mds-space-400);
  --mds-space-xl: var(--mds-space-500);
  --mds-space-2xl: var(--mds-space-600);
  --mds-space-3xl: var(--mds-space-800);

/**
 * Line Height tokens
 */
  --mds-line-height-100: 1;
  --mds-line-height-110: 1.1;
  --mds-line-height-120: 1.2;
  --mds-line-height-130: 1.3;
  --mds-line-height-140: 1.4;
  --mds-line-height-180: 1.8;

/**
 * Typography size tokens
 *
 */

  /** Headings **/
  --mds-text-heading-2xs: var(--mds-font-weight-semibold) var(--mds-font-size-225)/var(--mds-line-height-140) var(--mds-font-family-headings);
  --mds-text-heading-xs: var(--mds-font-weight-semibold) var(--mds-font-size-275)/var(--mds-line-height-130) var(--mds-font-family-headings);
  --mds-text-heading-sm: var(--mds-font-weight-semibold) var(--mds-font-size-300)/var(--mds-line-height-130) var(--mds-font-family-headings);
  --mds-text-heading-md: var(--mds-font-weight-semibold) var(--mds-font-size-325)/var(--mds-line-height-120) var(--mds-font-family-headings);

  /** The 3 values below change based on screen sizes **/
  --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-450)/var(--mds-line-height-120) var(--mds-font-family-headings);
  --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-500)/var(--mds-line-height-120) var(--mds-font-family-headings);
  --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-550)/var(--mds-line-height-110) var(--mds-font-family-headings);

  /** Body text **/
  --mds-text-body: var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
  --mds-text-body-bold: var(--mds-font-weight-semibold) var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);

  /**** The 2 values below change based on screen sizes ****/
  --mds-text-body-lg: var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
  --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);

  /** Labels **/
  --mds-text-label-sm: var(--mds-font-weight-medium) var(--mds-font-size-175)/var(--mds-line-height-120) var(--mds-font-family);
  --mds-text-label: var(--mds-font-weight-medium) var(--mds-font-size-200)/var(--mds-line-height-120) var(--mds-font-family);
  --mds-text-label-md: var(--mds-font-weight-medium) var(--mds-font-size-225)/var(--mds-line-height-120) var(--mds-font-family);

  /**** The values below change based on screen sizes ****/
  --mds-text-label-lg: var(--mds-font-weight-medium) var(--mds-font-size-250)/var(--mds-line-height-120) var(--mds-font-family);
  --mds-text-label-xl: var(--mds-font-weight-medium) var(--mds-font-size-275)/var(--mds-line-height-120) var(--mds-font-family);

  /** Eyebrow text (uppercase text labels). Needs 1px Letter spacing **/
  --mds-text-eyebrow: var(--mds-font-weight-semibold) var(--mds-font-size-175)/var(--mds-line-height-100) var(--mds-font-family);
  --mds-text-eyebrow-md: var(--mds-font-weight-semibold) var(--mds-font-size-200)/var(--mds-line-height-100) var(--mds-font-family);

  /* uppercase must be set separately as a text-transform in addition to using these variables */
  --mds-text-transform-eyebrow: uppercase;
  --mds-text-letter-spacing-eyebrow: 1px;

  /** Caption text **/
  --mds-text-caption-sm: var(--mds-font-weight-regular) var(--mds-font-size-125)/var(--mds-line-height-130) var(--mds-font-family);
  --mds-text-caption: var(--mds-font-weight-regular) var(--mds-font-size-175)/var(--mds-line-height-130) var(--mds-font-family);
  --mds-text-caption-bold: var(--mds-font-weight-medium) var(--mds-font-size-175)/var(--mds-line-height-130) var(--mds-font-family);
  --mds-text-caption-md: var(--mds-font-weight-regular) var(--mds-font-size-200)/var(--mds-line-height-130) var(--mds-font-family);



/** These values change based on screen sizes **/

/** Default values are set for 1024px and above **/
  --mds-breakpoint-horizontal-space-columns: 12;
  --mds-breakpoint-horizontal-space-gutter: var(--mds-space-300);
  --mds-breakpoint-horizontal-space-margin: var(--mds-space-600);
}

/**
 * Spacing, typography, and grid tokens that change based on breakpoints.
 * Breakpoints (Use these as max-width in media queries):
  * 320  - XS breakpoint
  * 480  - SM breakpoint
  * 768  - MD breakpoint
  * 1024 - LG breakpoint
  * 1280 - XL breakpoint
*/

/** 769px-1024px **/
@media (max-width: 1024px) {
  :root {
    --mds-breakpoint-horizontal-space-columns: 12;
    --mds-breakpoint-horizontal-space-gutter: var(--mds-space-300);
    --mds-breakpoint-horizontal-space-margin: var(--mds-space-600);
    --mds-text-body-lg: var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
    --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
    --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-550)/var(--mds-line-height-110) var(--mds-font-family-headings);
    --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-500)/var(--mds-line-height-120) var(--mds-font-family-headings);
    --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-350)/var(--mds-line-height-120) var(--mds-font-family-headings);
  }
}

/** 481px-768px **/
@media (max-width: 768px) {
  :root {
    --mds-breakpoint-horizontal-space-columns: 6;
    --mds-breakpoint-horizontal-space-gutter: var(--mds-space-300);
    --mds-breakpoint-horizontal-space-margin: var(--mds-space-400);
    --mds-text-body-lg: var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
    --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
    --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-550)/var(--mds-line-height-110) var(--mds-font-family-headings);
    --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-450)/var(--mds-line-height-120) var(--mds-font-family-headings);
    --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-400)/var(--mds-line-height-120) var(--mds-font-family-headings);
  }
}

/** 321px-480px **/
@media (max-width: 480px) {
  :root {
    --mds-breakpoint-horizontal-space-columns: 6;
    --mds-breakpoint-horizontal-space-gutter: var(--mds-space-200);
    --mds-breakpoint-horizontal-space-margin: var(--mds-space-300);
    --mds-text-body-lg: var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
    --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
    --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-450)/var(--mds-line-height-110) var(--mds-font-family-headings);
    --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-400)/var(--mds-line-height-120) var(--mds-font-family-headings);
    --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-350)/var(--mds-line-height-120) var(--mds-font-family-headings);
  }
}


/** 0-320px **/
@media (max-width: 320px) {
  :root {
    --mds-breakpoint-horizontal-space-columns: 6;
    --mds-breakpoint-horizontal-space-gutter: var(--mds-space-200);
    --mds-breakpoint-horizontal-space-margin: var(--mds-space-200);
    --mds-text-body-lg: var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
    --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
    --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-450)/var(--mds-line-height-110) var(--mds-font-family-headings);
    --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-400)/var(--mds-line-height-120) var(--mds-font-family-headings);
    --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-350)/var(--mds-line-height-120) var(--mds-font-family-headings);
  }
}