/* 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 p {
    border: none; /* reset browser default borders */
    font-style: normal;
    /* SIZE */
    /* VARIANT */
    /* FOCUS STATES */
  }
  :host p[disabled] {
    cursor: not-allowed;
  }
  :host p.s {
    font: var(--semantic-text-body-s);
    letter-spacing: var(--semantic-letter-spacing-body-s);
  }
  :host p.m {
    font: var(--semantic-text-body-m);
    letter-spacing: var(--semantic-letter-spacing-body-m);
  }
  :host p.l {
    font: var(--semantic-text-body-l);
    letter-spacing: var(--semantic-letter-spacing-body-l);
  }
  :host p.primary {
    color: var(--semantic-color-on-surface-primary-resting);
    /* INVERSE (Negative Region / Context Based) */
  }
  :host p.primary.inverse {
    color: var(--semantic-color-on-surface-primary-inverse-resting);
  }
  :host p.secondary {
    color: var(--semantic-color-on-surface-secondary-resting);
    /* INVERSE (Negative Region / Context Based) */
  }
  :host p.secondary.inverse {
    color: var(--semantic-color-on-surface-secondary-inverse-resting);
  }
  :host p:focus {
    outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
    outline-offset: var(--semantic-spacing-focus-offset);
  }
}