/* Register layers in the correct order */
/* 
* Browsers define layer order based on when they encounter @layer declarations.
* This file should be imported by all component styles, and other CSS entry points,
* to ensure that layers are registered in the correct order.
*/
@layer base, tokens, utilities, components, overrides;
/* Add component styles to component layer while preserving Stencil Scoped CSS */
@layer components {
  :host {
    /* SIZES */
    /* FOCUS STATE */
  }
  :host .headline-6xl,
  :host .headline-5xl,
  :host .headline-4xl,
  :host .headline-3xl,
  :host .headline-2xl,
  :host .headline-xl,
  :host .headline-l,
  :host .headline-m,
  :host .headline-s {
    color: var(--semantic-color-on-surface-primary-resting);
    font-style: normal;
    /* VARIANT */
    /* ACCENT */
  }
  :host .headline-6xl.primary,
  :host .headline-5xl.primary,
  :host .headline-4xl.primary,
  :host .headline-3xl.primary,
  :host .headline-2xl.primary,
  :host .headline-xl.primary,
  :host .headline-l.primary,
  :host .headline-m.primary,
  :host .headline-s.primary {
    color: var(--semantic-color-on-surface-primary-resting);
    /* INVERSE (Negative Region / Context Based) */
  }
  :host .headline-6xl.primary.inverse,
  :host .headline-5xl.primary.inverse,
  :host .headline-4xl.primary.inverse,
  :host .headline-3xl.primary.inverse,
  :host .headline-2xl.primary.inverse,
  :host .headline-xl.primary.inverse,
  :host .headline-l.primary.inverse,
  :host .headline-m.primary.inverse,
  :host .headline-s.primary.inverse {
    color: var(--semantic-color-on-surface-primary-inverse-resting);
  }
  :host .headline-6xl.secondary,
  :host .headline-5xl.secondary,
  :host .headline-4xl.secondary,
  :host .headline-3xl.secondary,
  :host .headline-2xl.secondary,
  :host .headline-xl.secondary,
  :host .headline-l.secondary,
  :host .headline-m.secondary,
  :host .headline-s.secondary {
    color: var(--semantic-color-on-surface-secondary-resting);
    /* INVERSE (Negative Region / Context Based) */
  }
  :host .headline-6xl.secondary.inverse,
  :host .headline-5xl.secondary.inverse,
  :host .headline-4xl.secondary.inverse,
  :host .headline-3xl.secondary.inverse,
  :host .headline-2xl.secondary.inverse,
  :host .headline-xl.secondary.inverse,
  :host .headline-l.secondary.inverse,
  :host .headline-m.secondary.inverse,
  :host .headline-s.secondary.inverse {
    color: var(--semantic-color-on-surface-secondary-inverse-resting);
  }
  :host .headline-6xl em,
  :host .headline-5xl em,
  :host .headline-4xl em,
  :host .headline-3xl em,
  :host .headline-2xl em,
  :host .headline-xl em,
  :host .headline-l em,
  :host .headline-m em,
  :host .headline-s em {
    font-style: normal;
  }
  :host .headline-6xl.headline-accent--yellow em,
  :host .headline-5xl.headline-accent--yellow em,
  :host .headline-4xl.headline-accent--yellow em,
  :host .headline-3xl.headline-accent--yellow em,
  :host .headline-2xl.headline-accent--yellow em,
  :host .headline-xl.headline-accent--yellow em,
  :host .headline-l.headline-accent--yellow em,
  :host .headline-m.headline-accent--yellow em,
  :host .headline-s.headline-accent--yellow em {
    color: var(--semantic-color-accent-attention-yellow-resting);
  }
  :host .headline-6xl.headline-accent--orange em,
  :host .headline-5xl.headline-accent--orange em,
  :host .headline-4xl.headline-accent--orange em,
  :host .headline-3xl.headline-accent--orange em,
  :host .headline-2xl.headline-accent--orange em,
  :host .headline-xl.headline-accent--orange em,
  :host .headline-l.headline-accent--orange em,
  :host .headline-m.headline-accent--orange em,
  :host .headline-s.headline-accent--orange em {
    color: var(--semantic-color-accent-attention-orange-resting);
  }
  :host .headline-6xl.headline-accent--red em,
  :host .headline-5xl.headline-accent--red em,
  :host .headline-4xl.headline-accent--red em,
  :host .headline-3xl.headline-accent--red em,
  :host .headline-2xl.headline-accent--red em,
  :host .headline-xl.headline-accent--red em,
  :host .headline-l.headline-accent--red em,
  :host .headline-m.headline-accent--red em,
  :host .headline-s.headline-accent--red em {
    color: var(--semantic-color-accent-attention-red-resting);
  }
  :host .headline-6xl.headline-accent--purple em,
  :host .headline-5xl.headline-accent--purple em,
  :host .headline-4xl.headline-accent--purple em,
  :host .headline-3xl.headline-accent--purple em,
  :host .headline-2xl.headline-accent--purple em,
  :host .headline-xl.headline-accent--purple em,
  :host .headline-l.headline-accent--purple em,
  :host .headline-m.headline-accent--purple em,
  :host .headline-s.headline-accent--purple em {
    color: var(--semantic-color-accent-attention-purple-resting);
  }
  :host .headline-6xl.headline-accent--aqua em,
  :host .headline-5xl.headline-accent--aqua em,
  :host .headline-4xl.headline-accent--aqua em,
  :host .headline-3xl.headline-accent--aqua em,
  :host .headline-2xl.headline-accent--aqua em,
  :host .headline-xl.headline-accent--aqua em,
  :host .headline-l.headline-accent--aqua em,
  :host .headline-m.headline-accent--aqua em,
  :host .headline-s.headline-accent--aqua em {
    color: var(--semantic-color-accent-attention-aqua-resting);
  }
  :host .headline-6xl.headline-accent--blue em,
  :host .headline-5xl.headline-accent--blue em,
  :host .headline-4xl.headline-accent--blue em,
  :host .headline-3xl.headline-accent--blue em,
  :host .headline-2xl.headline-accent--blue em,
  :host .headline-xl.headline-accent--blue em,
  :host .headline-l.headline-accent--blue em,
  :host .headline-m.headline-accent--blue em,
  :host .headline-s.headline-accent--blue em {
    color: var(--semantic-color-accent-attention-blue-resting);
  }
  :host .headline-6xl.headline-accent--teal em,
  :host .headline-5xl.headline-accent--teal em,
  :host .headline-4xl.headline-accent--teal em,
  :host .headline-3xl.headline-accent--teal em,
  :host .headline-2xl.headline-accent--teal em,
  :host .headline-xl.headline-accent--teal em,
  :host .headline-l.headline-accent--teal em,
  :host .headline-m.headline-accent--teal em,
  :host .headline-s.headline-accent--teal em {
    color: var(--semantic-color-accent-attention-teal-resting);
  }
  :host .headline-6xl.headline-accent--green em,
  :host .headline-5xl.headline-accent--green em,
  :host .headline-4xl.headline-accent--green em,
  :host .headline-3xl.headline-accent--green em,
  :host .headline-2xl.headline-accent--green em,
  :host .headline-xl.headline-accent--green em,
  :host .headline-l.headline-accent--green em,
  :host .headline-m.headline-accent--green em,
  :host .headline-s.headline-accent--green em {
    color: var(--semantic-color-accent-attention-green-resting);
  }
  :host .headline-6xl.inverse,
  :host .headline-5xl.inverse,
  :host .headline-4xl.inverse,
  :host .headline-3xl.inverse,
  :host .headline-2xl.inverse,
  :host .headline-xl.inverse,
  :host .headline-l.inverse,
  :host .headline-m.inverse,
  :host .headline-s.inverse {
    color: var(--semantic-color-action-primary-inverse-resting);
  }
  :host .headline-6xl.inverse.headline-accent--yellow em,
  :host .headline-5xl.inverse.headline-accent--yellow em,
  :host .headline-4xl.inverse.headline-accent--yellow em,
  :host .headline-3xl.inverse.headline-accent--yellow em,
  :host .headline-2xl.inverse.headline-accent--yellow em,
  :host .headline-xl.inverse.headline-accent--yellow em,
  :host .headline-l.inverse.headline-accent--yellow em,
  :host .headline-m.inverse.headline-accent--yellow em,
  :host .headline-s.inverse.headline-accent--yellow em {
    color: var(--semantic-color-accent-attention-inverse-yellow-resting);
  }
  :host .headline-6xl.inverse.headline-accent--orange em,
  :host .headline-5xl.inverse.headline-accent--orange em,
  :host .headline-4xl.inverse.headline-accent--orange em,
  :host .headline-3xl.inverse.headline-accent--orange em,
  :host .headline-2xl.inverse.headline-accent--orange em,
  :host .headline-xl.inverse.headline-accent--orange em,
  :host .headline-l.inverse.headline-accent--orange em,
  :host .headline-m.inverse.headline-accent--orange em,
  :host .headline-s.inverse.headline-accent--orange em {
    color: var(--semantic-color-accent-attention-inverse-orange-resting);
  }
  :host .headline-6xl.inverse.headline-accent--red em,
  :host .headline-5xl.inverse.headline-accent--red em,
  :host .headline-4xl.inverse.headline-accent--red em,
  :host .headline-3xl.inverse.headline-accent--red em,
  :host .headline-2xl.inverse.headline-accent--red em,
  :host .headline-xl.inverse.headline-accent--red em,
  :host .headline-l.inverse.headline-accent--red em,
  :host .headline-m.inverse.headline-accent--red em,
  :host .headline-s.inverse.headline-accent--red em {
    color: var(--semantic-color-accent-attention-inverse-red-resting);
  }
  :host .headline-6xl.inverse.headline-accent--purple em,
  :host .headline-5xl.inverse.headline-accent--purple em,
  :host .headline-4xl.inverse.headline-accent--purple em,
  :host .headline-3xl.inverse.headline-accent--purple em,
  :host .headline-2xl.inverse.headline-accent--purple em,
  :host .headline-xl.inverse.headline-accent--purple em,
  :host .headline-l.inverse.headline-accent--purple em,
  :host .headline-m.inverse.headline-accent--purple em,
  :host .headline-s.inverse.headline-accent--purple em {
    color: var(--semantic-color-accent-attention-inverse-purple-resting);
  }
  :host .headline-6xl.inverse.headline-accent--aqua em,
  :host .headline-5xl.inverse.headline-accent--aqua em,
  :host .headline-4xl.inverse.headline-accent--aqua em,
  :host .headline-3xl.inverse.headline-accent--aqua em,
  :host .headline-2xl.inverse.headline-accent--aqua em,
  :host .headline-xl.inverse.headline-accent--aqua em,
  :host .headline-l.inverse.headline-accent--aqua em,
  :host .headline-m.inverse.headline-accent--aqua em,
  :host .headline-s.inverse.headline-accent--aqua em {
    color: var(--semantic-color-accent-attention-inverse-aqua-resting);
  }
  :host .headline-6xl.inverse.headline-accent--blue em,
  :host .headline-5xl.inverse.headline-accent--blue em,
  :host .headline-4xl.inverse.headline-accent--blue em,
  :host .headline-3xl.inverse.headline-accent--blue em,
  :host .headline-2xl.inverse.headline-accent--blue em,
  :host .headline-xl.inverse.headline-accent--blue em,
  :host .headline-l.inverse.headline-accent--blue em,
  :host .headline-m.inverse.headline-accent--blue em,
  :host .headline-s.inverse.headline-accent--blue em {
    color: var(--semantic-color-accent-attention-inverse-blue-resting);
  }
  :host .headline-6xl.inverse.headline-accent--teal em,
  :host .headline-5xl.inverse.headline-accent--teal em,
  :host .headline-4xl.inverse.headline-accent--teal em,
  :host .headline-3xl.inverse.headline-accent--teal em,
  :host .headline-2xl.inverse.headline-accent--teal em,
  :host .headline-xl.inverse.headline-accent--teal em,
  :host .headline-l.inverse.headline-accent--teal em,
  :host .headline-m.inverse.headline-accent--teal em,
  :host .headline-s.inverse.headline-accent--teal em {
    color: var(--semantic-color-accent-attention-inverse-teal-resting);
  }
  :host .headline-6xl.inverse.headline-accent--green em,
  :host .headline-5xl.inverse.headline-accent--green em,
  :host .headline-4xl.inverse.headline-accent--green em,
  :host .headline-3xl.inverse.headline-accent--green em,
  :host .headline-2xl.inverse.headline-accent--green em,
  :host .headline-xl.inverse.headline-accent--green em,
  :host .headline-l.inverse.headline-accent--green em,
  :host .headline-m.inverse.headline-accent--green em,
  :host .headline-s.inverse.headline-accent--green em {
    color: var(--semantic-color-accent-attention-inverse-green-resting);
  }
  :host .headline-6xl {
    font: var(--semantic-text-headline-6xl);
    letter-spacing: var(--semantic-letter-spacing-headline-6xl);
  }
  :host .headline-5xl {
    font: var(--semantic-text-headline-5xl);
    letter-spacing: var(--semantic-letter-spacing-headline-5xl);
  }
  :host .headline-4xl {
    font: var(--semantic-text-headline-4xl);
    letter-spacing: var(--semantic-letter-spacing-headline-4xl);
  }
  :host .headline-3xl {
    font: var(--semantic-text-headline-3xl);
    letter-spacing: var(--semantic-letter-spacing-headline-3xl);
  }
  :host .headline-2xl {
    font: var(--semantic-text-headline-2xl);
    letter-spacing: var(--semantic-letter-spacing-headline-2xl);
  }
  :host .headline-xl {
    font: var(--semantic-text-headline-xl);
    letter-spacing: var(--semantic-letter-spacing-headline-xl);
  }
  :host .headline-l {
    font: var(--semantic-text-headline-l);
    letter-spacing: var(--semantic-letter-spacing-headline-l);
  }
  :host .headline-m {
    font: var(--semantic-text-headline-m);
    letter-spacing: var(--semantic-letter-spacing-headline-m);
  }
  :host .headline-s {
    font: var(--semantic-text-headline-s);
    letter-spacing: var(--semantic-letter-spacing-headline-s);
  }
  :host:focus {
    outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
    outline-offset: var(--semantic-spacing-focus-offset);
  }
  :host h1,
  :host h2,
  :host h3,
  :host h4,
  :host h5,
  :host h6,
  :host p {
    margin: 0;
  }
}