/**
 * 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-800);
  --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);

/**
 * Motion/Animation tokens
 *
 */

  /** Duration **/
  --mds-motion-duration-fastest: var(--mds-motion-duration-100);
  --mds-motion-duration-faster: var(--mds-motion-duration-200);
  --mds-motion-duration-fast: var(--mds-motion-duration-300);
  --mds-motion-duration-mid: var(--mds-motion-duration-400);
  --mds-motion-duration-slow: var(--mds-motion-duration-500);
  --mds-motion-duration-slower: var(--mds-motion-duration-600);
  --mds-motion-duration-slowest: var(--mds-motion-duration-800);

  /** Easing **/
  --mds-motion-ease-linear: var(--mds-motion-ease-curve-linear);
  --mds-motion-ease-in: var(--mds-motion-ease-curve-accelerate);
  --mds-motion-ease-out: var(--mds-motion-ease-curve-decelerate);
  --mds-motion-ease-in-out: var(--mds-motion-ease-curve-standard);

  /** Delay **/
  --mds-motion-delay-shortest: var(--mds-motion-delay-60);
  --mds-motion-delay-short: var(--mds-motion-delay-150);
  --mds-motion-delay-long: var(--mds-motion-delay-2000);
  --mds-motion-delay-longer: var(--mds-motion-delay-5000);
  --mds-motion-delay-longest: var(--mds-motion-delay-8000);

  /** Distance (how far an element travels) **/
  --mds-motion-distance-2xs: var(--mds-space-50);
  --mds-motion-distance-xs: var(--mds-space-100);
  --mds-motion-distance-sm: var(--mds-space-200);
  --mds-motion-distance-md: var(--mds-space-300);
  --mds-motion-distance-lg: var(--mds-space-600);
  --mds-motion-distance-xl: var(--mds-space-1200);

/**
 * Typography tokens
 *
 */

  /** Font families **/
  --mds-text-heading-font-family: var(--mds-font-family-headings);
  --mds-text-body-font-family: var(--mds-font-family-body);
  --mds-text-label-font-family: var(--mds-font-family-label);
  --mds-text-eyebrow-font-family: var(--mds-font-family-utility);
  --mds-text-caption-font-family: var(--mds-font-family-utility);

  /** Font weights **/
  --mds-text-heading-font-weight: var(--mds-font-weight-semibold);
  --mds-text-body-font-weight: var(--mds-font-weight-regular);
  --mds-text-body-font-weight-bold: var(--mds-font-weight-semibold);
  --mds-text-label-font-weight: var(--mds-font-weight-medium);
  --mds-text-eyebrow-font-weight: var(--mds-font-weight-semibold);
  --mds-text-caption-font-weight: var(--mds-font-weight-regular);
  --mds-text-caption-font-weight-bold: var(--mds-font-weight-medium);

  /** Line heights **/
  --mds-text-heading-line-height-2xs: var(--mds-line-height-140);
  --mds-text-heading-line-height-xs: var(--mds-line-height-130);
  --mds-text-heading-line-height-sm: var(--mds-line-height-130);
  --mds-text-heading-line-height-md: var(--mds-line-height-120);
  --mds-text-heading-line-height-lg: var(--mds-line-height-120);
  --mds-text-heading-line-height-xl: var(--mds-line-height-120);
  --mds-text-heading-line-height-2xl: var(--mds-line-height-110);
  --mds-text-body-line-height: var(--mds-line-height-180);
  --mds-text-body-line-height-lg: var(--mds-line-height-180);
  --mds-text-label-line-height-sm: var(--mds-line-height-120);
  --mds-text-label-line-height: var(--mds-line-height-120);
  --mds-text-label-line-height-md: var(--mds-line-height-120);
  --mds-text-label-line-height-lg: var(--mds-line-height-120);
  --mds-text-label-line-height-xl: var(--mds-line-height-120);
  --mds-text-eyebrow-line-height: var(--mds-line-height-100);
  --mds-text-eyebrow-line-height-md: var(--mds-line-height-100);
  --mds-text-caption-line-height-sm: var(--mds-line-height-130);
  --mds-text-caption-line-height: var(--mds-line-height-130);
  --mds-text-caption-line-height-md: var(--mds-line-height-130);

  /** Font sizes **/
  --mds-text-heading-font-size-2xs: var(--mds-font-size-225);
  --mds-text-heading-font-size-xs: var(--mds-font-size-275);
  --mds-text-heading-font-size-sm: var(--mds-font-size-300);
  --mds-text-heading-font-size-md: var(--mds-font-size-325);
  --mds-text-heading-font-size-lg: var(--mds-font-size-450); /* responsive */
  --mds-text-heading-font-size-xl: var(--mds-font-size-500); /* responsive */
  --mds-text-heading-font-size-2xl: var(--mds-font-size-550); /* responsive */
  --mds-text-body-font-size: var(--mds-font-size-200);
  --mds-text-body-font-size-lg: var(--mds-font-size-225); /* responsive */
  --mds-text-label-font-size-sm: var(--mds-font-size-175);
  --mds-text-label-font-size: var(--mds-font-size-200);
  --mds-text-label-font-size-md: var(--mds-font-size-225);
  --mds-text-label-font-size-lg: var(--mds-font-size-250);
  --mds-text-label-font-size-xl: var(--mds-font-size-275);
  --mds-text-eyebrow-font-size: var(--mds-font-size-175);
  --mds-text-eyebrow-font-size-md: var(--mds-font-size-200);
  --mds-text-caption-font-size-sm: var(--mds-font-size-125);
  --mds-text-caption-font-size: var(--mds-font-size-175);
  --mds-text-caption-font-size-md: var(--mds-font-size-200);

/**
 * Breakpoint-specific tokens for handling responsive sizing
 *
 */

/** 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);
  }
}

/** 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-heading-font-size-lg: var(--mds-font-size-400);
    --mds-text-heading-font-size-xl: var(--mds-font-size-450);
  }
}

/** 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-font-size-lg: var(--mds-font-size-200);
    --mds-text-heading-font-size-lg: var(--mds-font-size-350);
    --mds-text-heading-font-size-xl: var(--mds-font-size-400);
    --mds-text-heading-font-size-2xl: var(--mds-font-size-450);
  }
}


/** 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);
  }
}