/**
 * Do not edit directly, this file was auto-generated.
 */

.ep-theme-spark {
  --spark-breakpoint-xs: 0; /** Our baseline "breakpoint"; not intended for explicit use in code unless using the `xs-only` Sass mixin. */
  --spark-breakpoint-sm: 31.5rem; /** Also available with `sm` and `sm-only` Sass mixins. */
  --spark-breakpoint-md: 48rem; /** Also available with `md` and `md-only` Sass mixins. */
  --spark-breakpoint-lg: 61.25rem; /** Also available with `lg` and `lg-only` Sass mixins. */
  --spark-breakpoint-xl: 73.125rem; /** Also available with `xl` Sass mixin. */
  --spark-breakpoint-content-width-sm: 23.4375rem;
  --spark-breakpoint-content-width-md: 31.25rem;
  --spark-breakpoint-content-width-lg: 50rem;
  --spark-_color-white: #ffffff;
  --spark-_color-black: #141817;
  --spark-_color-purple-10: #f5eefc;
  --spark-_color-purple-20: #eaddfa;
  --spark-_color-purple-30: #d5baf5;
  --spark-_color-purple-40: #c098ef;
  --spark-_color-purple-50: #b072f9;
  --spark-_color-purple-60: #9653E5;
  --spark-_color-purple-70: #7740b6;
  --spark-_color-purple-80: #65299d;
  --spark-_color-purple-90: #482077;
  --spark-_color-purple-100: #1e112e;
  --spark-_color-grey-10: #f0f2f1;
  --spark-_color-grey-20: #e0e4e3;
  --spark-_color-grey-30: #c2c9c8;
  --spark-_color-grey-40: #a3aeac;
  --spark-_color-grey-50: #859391;
  --spark-_color-grey-60: #667875;
  --spark-_color-grey-70: #52605e;
  --spark-_color-grey-80: #3d4846;
  --spark-_color-grey-90: #29302f;
  --spark-_color-grey-100: #141817;
  --spark-_color-beige-10: #f2f1ef;
  --spark-_color-beige-20: #e5e3df;
  --spark-_color-beige-30: #cac8bf;
  --spark-_color-beige-40: #b0ac9f;
  --spark-_color-beige-50: #95917f;
  --spark-_color-beige-60: #7b755f;
  --spark-_color-beige-70: #625e4c;
  --spark-_color-beige-80: #4a4639;
  --spark-_color-beige-90: #312f26;
  --spark-_color-beige-100: #191713;
  --spark-_color-mint-10: #e3f4f1;
  --spark-_color-mint-20: #c6eae3;
  --spark-_color-mint-30: #8cd4c6;
  --spark-_color-mint-40: #4fbda8;
  --spark-_color-mint-50: #21a38a;
  --spark-_color-mint-60: #2c8474;
  --spark-_color-mint-70: #23695c;
  --spark-_color-mint-80: #1a4f45;
  --spark-_color-mint-90: #12362f;
  --spark-_color-mint-100: #0a1f1b;
  --spark-_color-rose-10: #feecf1;
  --spark-_color-rose-20: #fddae2;
  --spark-_color-rose-30: #fbb3c4;
  --spark-_color-rose-40: #f989a4;
  --spark-_color-rose-50: #f6587e;
  --spark-_color-rose-60: #db335a;
  --spark-_color-rose-70: #ba123a;
  --spark-_color-rose-80: #8e0e2c;
  --spark-_color-rose-90: #630a1f;
  --spark-_color-rose-100: #3c0613;
  --spark-_color-orange-10: #feefe6;
  --spark-_color-orange-20: #fee0cc;
  --spark-_color-orange-30: #fdc19a;
  --spark-_color-orange-40: #fba167;
  --spark-_color-orange-50: #fa7412;
  --spark-_color-orange-60: #c6530a;
  --spark-_color-orange-70: #a14001;
  --spark-_color-orange-80: #732e01;
  --spark-_color-orange-90: #471d00;
  --spark-_color-orange-100: #321400;
  --spark-_color-teal-10: #e6f4f5;
  --spark-_color-teal-20: #cce9eb;
  --spark-_color-teal-30: #99d3d8;
  --spark-_color-teal-40: #66bcc4;
  --spark-_color-teal-50: #03aeb9;
  --spark-_color-teal-60: #00909d;
  --spark-_color-teal-70: #00737e;
  --spark-_color-teal-80: #00565e;
  --spark-_color-teal-90: #003a3f;
  --spark-_color-teal-100: #001d1f;
  --spark-_color-green: #4cb155;
  --spark-_color-red: #e03d2e;
  --spark-_color-yellow: #ffeb4c;
  --spark-_font-family-apercu-pro: 'Apercu Pro', 'Apercu Pro Helvetica Fallback', 'Apercu Pro Arial Fallback', sans-serif;
  --spark-_font-family-dm-sans: 'DM Sans', 'DM Sans Helvetica Fallback', 'DM Sans Arial Fallback', sans-serif;
  --spark-_font-weight-400: 400;
  --spark-_font-weight-500: 500;
  --spark-_font-weight-700: 700;
  --spark-_font-letter-spacing-normal: normal;
  --spark-_font-letter-spacing-0-0035: -0.0035rem;
  --spark-_font-letter-spacing-0-025: -0.025rem;
  --spark-_font-letter-spacing-0-03: -0.03rem;
  --spark-_font-line-height-1: 1;
  --spark-_font-line-height-2: 2;
  --spark-_font-line-height-1-2: 1.2;
  --spark-_font-line-height-1-25: 1.25;
  --spark-_font-line-height-1-33: 1.33;
  --spark-_font-line-height-1-5: 1.5;
  --spark-_font-size-2: 1rem;
  --spark-_font-size-3: 1.5rem;
  --spark-_font-size-4: 2rem;
  --spark-_font-size-1-5: 0.75rem;
  --spark-_font-size-1-625: 0.8125rem;
  --spark-_font-size-1-75: 0.875rem;
  --spark-_font-size-2-25: 1.125rem;
  --spark-_font-size-2-5: 1.25rem;
  --spark-_font-size-2-875: 1.4375rem;
  --spark-_font-size-3-25: 1.625rem;
  --spark-_font-size-3-625: 1.8125rem;
  --spark-_font-size-4-5: 2.25rem;
  --spark-_font-size-5-125: 2.5625rem;
  --spark-_font-size-5-25: 2.625rem;
  --spark-_font-size-6-5: 3.25rem;
  --spark-motion-timing-ease-in: cubic-bezier(0.42, 0, 1, 1); /** Starts off slowly, with the transition speed increasing until complete. */
  --spark-motion-timing-ease-out: cubic-bezier(0, 0, 0.58, 1); /** Starts transitioning quickly, slowing down as the transition continues. */
  --spark-motion-timing-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); /** Starts transitioning slowly, speeds up, and then slows down again. */
  --spark-motion-timing-ease: cubic-bezier(0.25, 0.1, 0.25, 1); /** Increases in velocity towards the middle of the transition, slowing back down at the end. */
  --spark-motion-timing-linear: cubic-bezier(0, 0, 1, 1); /** Transitions at an even speed. */
  --spark-motion-timing-speed-in: cubic-bezier(0.25, 0.9, 0.35, 1); /** Starts fast, slowing down at end. */
  --spark-motion-timing-rush-in: cubic-bezier(0.1, 1, 0.1, 1); /** Starts very fast, slowing down at end. */
  --spark-motion-duration-immediately: 100ms;
  --spark-motion-duration-quickly: 250ms;
  --spark-motion-duration-promptly: 500ms;
  --spark-motion-duration-slowly: 750ms;
  --spark-motion-keyframes-fade-in: fade-in;
  --spark-motion-keyframes-heartbeat: heartbeat;
  --spark-motion-animation-heartbeat: heartbeat 750ms cubic-bezier(0.1, 1, 0.1, 1) infinite;
  --spark-motion-transition-color: color 250ms, background-color 250ms, border-color 250ms; /** For color transitions on hover or focus. */
  --spark-motion-transition-overlay: opacity 500ms cubic-bezier(0.25, 0.9, 0.35, 1); /** For overlaying controls on an image, object, or page. */
  --spark-motion-transition-float: font-size 250ms, transform 250ms, left 250ms; /** For floating input labels. */
  --spark-motion-transition-shadow: box-shadow 250ms cubic-bezier(0.25, 0.1, 0.25, 1); /** For shadow transitions on hover or focus. */
  --spark-motion-transition-swipe: all 100ms cubic-bezier(0, 0, 0.58, 1); /** For swiping transitions with images or other content within a carousel. */
  --spark-_shadow-0: 0px 0px 10px 0px rgba(0, 0, 0, 0);
  --spark-_shadow-10: 0px 0px 10px 0px rgba(68, 89, 88, 0.10);
  --spark-_shadow-20: 0px 0.1px 11px 2px rgba(68, 89, 88, 0.11);
  --spark-_shadow-30: 0px 0.2px 12px 4px rgba(68, 89, 88, 0.12);
  --spark-_shadow-40: 0px 0.3px 13px 6px rgba(68, 89, 88, 0.13);
  --spark-_shadow-50: 0px 0.4px 14px 8px rgba(68, 89, 88, 0.14);
  --spark-_size-border-thin: 0.0625rem;
  --spark-_size-border-thick: 0.125rem;
  --spark-_size-border-thicker: 0.1875rem;
  --spark-_size-border-extra: 0.25rem;
  --spark-_size-radius-2: 0.125rem;
  --spark-_size-radius-4: 0.25rem;
  --spark-_size-radius-5: 0.3125rem;
  --spark-_size-radius-6: 0.375rem;
  --spark-_size-radius-8: 0.5rem;
  --spark-_size-radius-10: 0.625rem;
  --spark-_size-radius-16: 1rem;
  --spark-_size-radius-20: 1.25rem;
  --spark-_size-radius-pill: 100cqmax;
  --spark-_size-radius-circle: 50%;
  --spark-_size-width-1: 0.0625rem;
  --spark-_size-width-2: 0.125rem;
  --spark-_size-width-3: 0.1875rem;
  --spark-spacing-1: 0.5rem;
  --spark-spacing-2: 1rem;
  --spark-spacing-3: 1.5rem;
  --spark-spacing-4: 2rem;
  --spark-spacing-5: 2.5rem;
  --spark-spacing-6: 3rem;
  --spark-spacing-7: 3.5rem;
  --spark-spacing-8: 4rem;
  --spark-spacing-0-5: 0.25rem;
  --spark-spacing-1-25: 0.625rem;
  --spark-spacing-1-5: 0.75rem;
  --spark-spacing-1-75: 0.875rem;
  --spark-spacing-2-25: 1.125rem;
  --spark-spacing-2-5: 1.25rem;
  --spark-spacing-gap: 1rem; /** Our standard spacing between a stack of elements, such as cards. */
  --spark-color-background: #ffffff; /** Our default background color. */
  --spark-color-background-callout-cool: #f0f2f1; /** Cool neutral background color for calling attention to a specific area of the page. */
  --spark-color-background-callout-warm: #f2f1ef; /** Warm neutral background color for calling attention to a specific area of the page. */
  --spark-color-background-visited: #f5eefc; /** For indicating that a clickable element, such as a card, has previously been visited. */
  --spark-color-background-inverse: #29302f; /** Our default inverted background color. Often used for ad backgrounds, which can be replaced or overlaid with a photo. */
  --spark-color-background-inverse-strong: #141817; /** A darker variant of our inverted background color. */
  --spark-color-background-selected: #e0e4e3; /** For indicating that an item is selected, such as an accordion header. */
  --spark-color-background-sponsor: #3d4846; /** For sponsorship banners. */
  --spark-color-background-overlay: #141817bf; /** Our default semi-transparent overlay color. */
  --spark-color-background-overlay-weak: rgba(61, 72, 70, 0.5); /** A more transparent variant of our overlay color, for use as an overlay with a modal window which is usually asking for the user's attention in performing an action before continuing. */
  --spark-color-background-overlay-weaker: #1418178c; /** The most transparent variant of our overlay color, for use as a subtle, transparent overlay prevents users from rapidly interacting with form elements. */
  --spark-color-background-action-hero: #9653E5; /** For the hero button. */
  --spark-color-background-action: #141817; /** For primary buttons and ratings. */
  --spark-color-background-action-hover: #3d4846; /** For the hover state of primary buttons. */
  --spark-color-background-action-active: #141817; /** For the active state of primary buttons. */
  --spark-color-background-action-disabled: #e0e4e3; /** For the disabled state of primary buttons. */
  --spark-color-background-action-checked: #141817; /** For the checked state of primary buttons. */
  --spark-color-background-action-weak: #f0f2f1; /** For clickable elements with reduced emphasis. */
  --spark-color-background-action-weak-hover: #c2c9c8; /** For the hover state of clickable elements with reduced emphasis. */
  --spark-color-background-action-weak-active: #3d4846; /** For the active state of clickable elements with reduced emphasis. */
  --spark-color-background-action-weak-selected: #f0f2f1; /** For the selected state of clickable elements with reduced emphasis. */
  --spark-color-background-action-weak-disabled: #e0e4e3; /** For the disabled state of clickable elements with reduced emphasis. */
  --spark-color-background-action-icon: transparent; /** For clickable elements with reduced emphasis. */
  --spark-color-background-action-icon-hover: #f0f2f1; /** For the hover state of clickable elements with reduced emphasis. */
  --spark-color-background-action-icon-active: #f0f2f1; /** For the active state of clickable elements with reduced emphasis. */
  --spark-color-background-action-icon-selected: #f0f2f1; /** For the selected state of clickable elements with reduced emphasis. */
  --spark-color-background-action-icon-disabled: #e0e4e3; /** For the disabled state of clickable elements with reduced emphasis. */
  --spark-color-background-pricing-great: #f5eefc; /** For elements indicating great pricing. */
  --spark-color-background-pricing-good: #e3f4f1; /** For elements indicating good pricing. */
  --spark-color-background-pricing-fair: #feefe6; /** For elements indicating fair pricing. */
  --spark-color-background-feedback-error: #e03d2e;
  --spark-color-background-feedback-success: #4cb155;
  --spark-color-background-feedback-critical: #feecf1;
  --spark-color-background-feedback-attention: #feefe6;
  --spark-color-background-feedback-benefit: #e3f4f1;
  --spark-color-background-feedback-hero: #f5eefc;
  --spark-color-text: #141817; /** Our default text color on a light background. */
  --spark-color-text-weak: #3d4846; /** For text with less emphasis. */
  --spark-color-text-weaker: #52605e; /** For text with the least emphasis. */
  --spark-color-text-inverse: #ffffff; /** Our default text color on dark backgrounds. */
  --spark-color-text-inverse-weak: #c2c9c8; /** A lighter variant of our text color on dark backgrounds. */
  --spark-color-text-link: #141817; /** For buttons with light backgrounds. */
  --spark-color-text-link-hover: #141817; /** For the hover state of buttons with light backgrounds. */
  --spark-color-text-link-active: #141817; /** For the active state of buttons with light backgrounds. */
  --spark-color-text-link-disabled: #859391; /** For the disabled state of buttons with light backgrounds. */
  --spark-color-text-link-inverse: #ffffff; /** For buttons with dark backgrounds. */
  --spark-color-text-action: #141817;
  --spark-color-text-action-inverse: #ffffff;
  --spark-color-text-action-disabled: #859391;
  --spark-color-text-feedback-success: #2c8474; /** For success messages. */
  --spark-color-text-feedback-error: #e03d2e; /** For error messages. */
  --spark-color-text-feedback-critical: #ba123a;
  --spark-color-text-feedback-attention: #a14001;
  --spark-color-text-feedback-benefit: #23695c;
  --spark-color-text-feedback-hero: #7740b6;
  --spark-color-text-pricing-great: #7740b6;
  --spark-color-text-pricing-good: #23695c;
  --spark-color-text-pricing-fair: #a14001;
  --spark-color-decoration-line-link: currentColor;
  --spark-color-decoration-line-link-hover: #9653E5;
  --spark-color-decoration-line-link-active: #9653E5;
  --spark-color-border: #e0e4e3; /** Our default border color. */
  --spark-color-border-hover: #c2c9c8; /** For the hover state of elements with a border. */
  --spark-color-border-selected: #141817; /** For the selected state of elements with a border. */
  --spark-color-border-focus: #9653E5; /** For the focus state of an element. */
  --spark-color-border-focus-hero: #141817; /** An alternative focus color, typically used with purple buttons. */
  --spark-color-border-focus-inverse: #c098ef;
  --spark-color-border-focus-contrast: #ffffff; /** For adding contrast between an element and its focus ring */
  --spark-color-border-strong: #a3aeac; /** A darker variant of our default border color, commonly used for form elements. */
  --spark-color-border-stronger: #667875; /** An extra dark variant of our default border color. */
  --spark-color-border-strongest: #141817; /** The darkest variant of our default border color. */
  --spark-color-border-accent: #9653E5; /** A accent color border variant. */
  --spark-color-border-inverse: #859391;
  --spark-color-border-gradient: linear-gradient(-90deg, #9653E5, #03aeb9); /** Representing the matchmaker branding, this is used in small strips as separators, or for matchmaker content backgrounds. */
  --spark-color-border-action: #141817; /** Our default border for buttons. */
  --spark-color-border-action-hover: #141817; /** For the hover state of our default border for buttons. */
  --spark-color-border-action-active: #9653E5; /** For the active state of our default border for buttons. */
  --spark-color-border-action-disabled: #859391; /** For the disabled state of our default border for buttons. */
  --spark-color-border-action-weak: #e0e4e3; /** For clickable elements with reduced emphasis. */
  --spark-color-border-action-weak-hover: #667875; /** For the hover state of clickable elements with reduced emphasis. */
  --spark-color-border-action-weak-active: #667875; /** For the active state of clickable elements with reduced emphasis. */
  --spark-color-border-action-weak-selected: #667875; /** For the selected state of clickable elements with reduced emphasis. */
  --spark-color-border-action-weak-disabled: #f0f2f1; /** For the disabled state of clickable elements with reduced emphasis. */
  --spark-color-border-feedback-info: #859391; /** For elements containing informational messages. */
  --spark-color-border-feedback-success: #4cb155; /** For elements containing success messages. */
  --spark-color-border-feedback-warning: #ffeb4c; /** For elements containing warning messages. */
  --spark-color-border-feedback-error: #e03d2e; /** For elements containing error messages. */
  --spark-color-fill: #141817; /** Our default color for icons. */
  --spark-color-fill-inverse: #ffffff; /** Our default color for icons on dark backgrounds. */
  --spark-color-fill-weak: #52605e; /** For icons with less emphasis than our default color. */
  --spark-color-fill-accent: #9653E5; /** Our accent color variant for icons. */
  --spark-color-fill-accent-strong: #7740b6; /** A darker accent color variant for icons. */
  --spark-color-fill-accent-inverse: #c098ef; /** Our accent color variant for icons on dark backgrounds. */
  --spark-color-fill-feedback-info: #859391; /** For icons paired with informational messages. */
  --spark-color-fill-feedback-success: #4cb155; /** For icons paired with success messages. */
  --spark-color-fill-feedback-warning: #ffeb4c; /** For icons paried with warning messages. */
  --spark-color-fill-feedback-error: #e03d2e; /** For icons paired with error messages. */
  --spark-color-fill-social-facebook: #1778f2; /** For exclusive use with Facebook icons. */
  --spark-color-fill-social-twitter: #55acee; /** For exclusive use with Twitter icons. */
  --spark-color-fill-social-google: #bd081c; /** For exclusive use with Google icons. */
  --spark-color-fill-social-youtube: #FF0000; /** For exclusive use with YouTube icons. */
  --spark-color-fill-social-pinterest: #E60023; /** For exclusive use with Pinterest icons. */
  --spark-color-fill-social-linkedin: #2868b2; /** For exclusive use with LinkedIn icons. */
  --spark-color-fill-social-tiktok: #212121; /** For exclusive use with TikTok icons. */
  --spark-color-fill-social-instagram: #212121; /** For exclusive use with Instagram icons. */
  --spark-controls-color: #859391;
  --spark-controls-color-checked: #141817;
  --spark-controls-color-label: #3d4846;
  --spark-controls-color-text: #141817;
  --spark-controls-size: 1.25rem;
  --spark-controls-size-height: 3.5rem;
  --spark-controls-size-inner: 0.875rem;
  --spark-font-decoration-line: none;
  --spark-font-decoration-line-offset: 2px;;
  --spark-font-decoration-line-link: underline;
  --spark-font-decoration-line-link-active: underline;
  --spark-font-decoration-line-link-disabled: underline;
  --spark-font-decoration-line-link-hover: underline;
  --spark-font-family-heading-1: 'DM Sans', 'DM Sans Helvetica Fallback', 'DM Sans Arial Fallback', sans-serif;
  --spark-font-family-heading-2: 'DM Sans', 'DM Sans Helvetica Fallback', 'DM Sans Arial Fallback', sans-serif;
  --spark-font-family-heading-3: 'DM Sans', 'DM Sans Helvetica Fallback', 'DM Sans Arial Fallback', sans-serif;
  --spark-font-family-heading-4: 'DM Sans', 'DM Sans Helvetica Fallback', 'DM Sans Arial Fallback', sans-serif;
  --spark-font-family-heading-5: 'Apercu Pro', 'Apercu Pro Helvetica Fallback', 'Apercu Pro Arial Fallback', sans-serif;
  --spark-font-family-heading-6: 'Apercu Pro', 'Apercu Pro Helvetica Fallback', 'Apercu Pro Arial Fallback', sans-serif;
  --spark-font-family-body: 'Apercu Pro', 'Apercu Pro Helvetica Fallback', 'Apercu Pro Arial Fallback', sans-serif;
  --spark-font-line-height-heading: 1.2;
  --spark-font-line-height-body: 1.5;
  --spark-font-weight-heading-1: 700;
  --spark-font-weight-heading-2: 700;
  --spark-font-weight-heading-3: 700;
  --spark-font-weight-heading-4: 500;
  --spark-font-weight-heading-5: 400;
  --spark-font-weight-heading-6: 400;
  --spark-font-weight-body: 400;
  --spark-font-weight-body-semi-bold: 500;
  --spark-font-weight-body-bold: 700;
  --spark-font-letter-spacing-heading-1-lg: -0.03rem; /** Use at large (and greater) breakpoints. */
  --spark-font-letter-spacing-heading-1-md: -0.03rem; /** Use at a medium breakpoint. */
  --spark-font-letter-spacing-heading-1-sm: -0.03rem; /** Use at a small breakpoint. */
  --spark-font-letter-spacing-heading-2-lg: -0.03rem; /** Use at large (and greater) breakpoints. */
  --spark-font-letter-spacing-heading-2-md: -0.03rem; /** Use at a medium breakpoint. */
  --spark-font-letter-spacing-heading-2-sm: -0.03rem; /** Use at a small breakpoint. */
  --spark-font-letter-spacing-heading-3-lg: -0.03rem; /** Use at large (and greater) breakpoints. */
  --spark-font-letter-spacing-heading-3-md: -0.025rem; /** Use at a medium breakpoint. */
  --spark-font-letter-spacing-heading-3-sm: -0.025rem; /** Use at a small breakpoint. */
  --spark-font-letter-spacing-heading-4-lg: -0.0035rem; /** Use at large (and greater) breakpoints. */
  --spark-font-letter-spacing-heading-4-md: normal; /** Use at a medium breakpoint. */
  --spark-font-letter-spacing-heading-4-sm: normal; /** Use at a small breakpoint. */
  --spark-font-letter-spacing-heading-5-lg: normal; /** Use at large (and greater) breakpoints. */
  --spark-font-letter-spacing-heading-5-md: normal; /** Use at a medium breakpoint. */
  --spark-font-letter-spacing-heading-5-sm: normal; /** Use at a small breakpoint. */
  --spark-font-letter-spacing-heading-6-lg: normal; /** Use at large (and greater) breakpoints. */
  --spark-font-letter-spacing-heading-6-md: normal; /** Use at medium breakpoints. */
  --spark-font-letter-spacing-heading-6-sm: normal; /** Use at small breakpoints. */
  --spark-font-size-heading-1-lg: 3.25rem; /** Use at large (and greater) breakpoints. */
  --spark-font-size-heading-1-md: 2.5625rem; /** Use at a medium breakpoint. */
  --spark-font-size-heading-1-sm: 2rem; /** Use at an extra small or small breakpoint. */
  --spark-font-size-heading-2-lg: 2.25rem; /** Use at large (and greater) breakpoints. */
  --spark-font-size-heading-2-md: 1.8125rem; /** Use at a medium breakpoint. */
  --spark-font-size-heading-2-sm: 1.625rem; /** Use at an extra small or small breakpoint. */
  --spark-font-size-heading-3-lg: 1.625rem; /** Use at large (and greater) breakpoints. */
  --spark-font-size-heading-3-md: 1.4375rem; /** Use at a medium breakpoint. */
  --spark-font-size-heading-3-sm: 1.25rem; /** Use at an extra small or small breakpoint. */
  --spark-font-size-heading-4-lg: 0.875rem; /** Use at large (and greater) breakpoints. */
  --spark-font-size-heading-4-md: 0.8125rem; /** Use at medium (and greater) breakpoints. */
  --spark-font-size-heading-4-sm: 0.75rem; /** Use at a extra small or small breakpoint. */
  --spark-font-size-heading-5-lg: 1.25rem; /** Use at large (and greater) breakpoints. */
  --spark-font-size-heading-5-md: 1.25rem; /** Use at medium breakpoints. */
  --spark-font-size-heading-5-sm: 1.25rem; /** Use at extra small or small breakpoints. */
  --spark-font-size-heading-6-lg: 1.125rem; /** Use at large (and greater) breakpoints. */
  --spark-font-size-heading-6-md: 1.125rem; /** Use at medium breakpoints. */
  --spark-font-size-heading-6-sm: 1.125rem; /** Use at extra small or small breakpoints. */
  --spark-font-size-body-larger: 1.25rem;
  --spark-font-size-body-large: 1.125rem;
  --spark-font-size-body: 1rem;
  --spark-font-size-body-small: 0.875rem;
  --spark-font-size-body-smaller: 0.75rem;
  --spark-font-size-icon-large: 1.5rem; /** For standalone icons and icon-only buttons, when extra emphasis is needed. */
  --spark-font-size-icon: 1.25rem; /** For standalone icons and icon-only buttons. */
  --spark-shadow-card: 0px 0px 10px 0px rgba(68, 89, 88, 0.10); /** For cards or card-like components. */
  --spark-shadow-card-hover: 0px 0.2px 12px 4px rgba(68, 89, 88, 0.12); /** For cards or card-like components hover state. */
  --spark-shadow-tooltip: 2px 2px 6px rgba(0, 0, 0, 0.08); /** For tooltips or informational overlays */
  --spark-shadow-popover: 0px 0.4px 14px 8px rgba(68, 89, 88, 0.14); /** For non-modal popovers in place of a backdrop */
  --spark-shadow-bar-top: 0 4px 16px 0 rgba(40, 40, 40, 0.2); /** For top sticky bars on smaller screens. */
  --spark-shadow-bar-bottom: 0 -4px 16px 0 rgba(40, 40, 40, 0.2); /** For bottom sticky bars on smaller screens. */
  --spark-shadow-dot: 0 2px 2px 0 rgba(0, 0, 0, 0.5); /** For indicator dots, such as those used in a carousel. */
  --spark-shadow-menu-right: -4px 0 rgba(230, 230, 230, 0.71); /** For overlaid popout menus that appear on the right on smaller screens. */
  --spark-shadow-menu-left: 4px 0 rgba(230, 230, 230, 0.71); /** For overlaid popout menus that appear on the left on smaller screens. */
  --spark-size-decoration-line-link: 0.0625rem;
  --spark-size-decoration-line-link-hover: 0.1875rem;
  --spark-size-decoration-line-link-focus: 0.125rem;
  --spark-size-decoration-line-link-active: 0.1875rem;
  --spark-size-border: 0.0625rem; /** Our standard border size. */
  --spark-size-border-action: 0.0625rem; /** For clickable elements such as buttons. */
  --spark-size-border-card: 0.0625rem; /** For the top, left, and right edges of a card. */
  --spark-size-border-card-bottom: 0.125rem; /** For the bottom edge of a card. */
  --spark-size-border-focus: 0.125rem; /** Focus ring size. Typically applied as part of the `outline-width` or `outline` shorthand properties. */
  --spark-size-border-separator: 0.0625rem; /** Our thinnest border size for separating content. */
  --spark-size-border-separator-thick: 0.125rem; /** Our thicker border size for separating content. */
  --spark-size-border-separator-brick: 0.25rem; /** Our thickest border for separating content. */
  --spark-size-outline-offset-focus: 0.125rem; /** Focus ring offset from the focused element. Typically applied to the `outline-offset` property. */
  --spark-size-radius-card: 0.625rem;
  --spark-size-radius-modal: 1.25rem;
  --spark-size-radius-popover: 1.25rem;
  --spark-size-radius-label: 0.25rem; /** For elements such as labels, badges, or filter controls. */
  --spark-size-radius-popup: 0.375rem; /** For tooltips or popups. */
  --spark-size-radius-indicator: 0.3125rem; /** For overlaying indicators on photos or other media. */
  --spark-size-radius-input: 0.625rem; /** For form input controls. */
  --spark-size-radius-image: 0.625rem;
  --spark-size-radius-action: 100cqmax; /** For clickable elements such as buttons. */
  --spark-size-radius-action-icon: 50%; /** For icon-only buttons. */
}