@porsche-design-system/components-react/tailwindcss/index.css

Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.

@theme {
  --breakpoint-*: initial;
  --color-*: initial;
  --radius-*: initial;
  --shadow-*: initial;
  --text-*: initial;
  --color-black: #000;
  --color-white: #fff;
  --color-focus: var(--_color-focus-dynamic, light-dark(#1a44ea, #1a44ea));
  --color-canvas: var(
    --_color-canvas-dynamic,
    light-dark(#fff, hsl(225 66.7% 1.2%))
  );
  --color-surface: var(
    --_color-surface-dynamic,
    light-dark(hsl(240 10% 95%), hsl(240 2% 10%))
  );
  --color-frosted: var(
    --_color-frosted-dynamic,
    light-dark(hsl(240 5% 70% / 0.148), hsl(240 2% 43% / 0.228))
  );
  --color-frosted-soft: var(
    --_color-frosted-soft-dynamic,
    light-dark(hsl(234 9.8% 60% / 0.06), hsl(240 3.7% 26.5% / 0.154))
  );
  --color-frosted-strong: var(
    --_color-frosted-strong-dynamic,
    light-dark(hsl(236 6.5% 42% / 0.236), hsl(240 1.5% 61.8% / 0.302))
  );
  --color-backdrop: var(
    --_color-backdrop-dynamic,
    light-dark(hsl(240 5.3% 14.9% / 0.5), hsl(240 5.3% 14.9% / 0.5))
  );
  --color-contrast-lower: var(
    --_color-contrast-lower-dynamic,
    light-dark(hsl(234 6% 32.9% / 0.324), hsl(240 1.5% 61.8% / 0.302))
  );
  --color-contrast-low: var(
    --_color-contrast-low-dynamic,
    light-dark(hsl(240 5.3% 14.9% / 0.5), hsl(240 12.5% 96.9% / 0.45))
  );
  --color-contrast-medium: var(
    --_color-contrast-medium-dynamic,
    light-dark(hsl(240 6.1% 7% / 0.6), hsl(240 12.5% 96.9% / 0.56))
  );
  --color-contrast-high: var(
    --_color-contrast-high-dynamic,
    light-dark(hsl(240 7.1% 11% / 0.7), hsl(240 12.5% 96.9% / 0.67))
  );
  --color-contrast-higher: var(
    --_color-contrast-higher-dynamic,
    light-dark(hsl(240 8.7% 9% / 0.8), hsl(240 12.5% 96.9% / 0.78))
  );
  --color-primary: var(
    --_color-primary-dynamic,
    light-dark(hsl(225 66.7% 1.2%), hsl(225 100% 99%))
  );
  --color-success: var(
    --_color-success-dynamic,
    light-dark(hsl(115 77.5% 27.8%), hsl(157 84.9% 41.6%))
  );
  --color-success-low: var(
    --_color-success-low-dynamic,
    light-dark(hsl(115 77.5% 27.8% / 0.18), hsl(157 84.9% 41.6% / 0.18))
  );
  --color-success-medium: var(
    --_color-success-medium-dynamic,
    light-dark(hsl(115 77.5% 27.8% / 0.6), hsl(157 84.9% 41.6% / 0.6))
  );
  --color-success-frosted: var(
    --_color-success-frosted-dynamic,
    light-dark(hsl(109 100% 90% / 0.55), hsl(157 79% 20% / 0.66))
  );
  --color-success-frosted-soft: var(
    --_color-success-frosted-soft-dynamic,
    light-dark(hsl(109 80% 95% / 0.55), hsl(157 59% 15% / 0.66))
  );
  --color-warning: var(
    --_color-warning-dynamic,
    light-dark(hsl(28 97.7% 34.1%), hsl(28 90.2% 56.1%))
  );
  --color-warning-low: var(
    --_color-warning-low-dynamic,
    light-dark(hsl(28 97.7% 34.1% / 0.18), hsl(28 90.2% 56.1% / 0.18))
  );
  --color-warning-medium: var(
    --_color-warning-medium-dynamic,
    light-dark(hsl(28 97.7% 34.1% / 0.6), hsl(28 90.2% 56.1% / 0.6))
  );
  --color-warning-frosted: var(
    --_color-warning-frosted-dynamic,
    light-dark(hsl(40 100% 90% / 0.55), hsl(52 79% 20% / 0.66))
  );
  --color-warning-frosted-soft: var(
    --_color-warning-frosted-soft-dynamic,
    light-dark(hsl(40 80% 95% / 0.55), hsl(52 59% 15% / 0.66))
  );
  --color-error: var(
    --_color-error-dynamic,
    light-dark(hsl(357 78% 41%), hsl(0 96.9% 62%))
  );
  --color-error-low: var(
    --_color-error-low-dynamic,
    light-dark(hsl(357 78% 41% / 0.18), hsl(0 96.9% 62% / 0.18))
  );
  --color-error-medium: var(
    --_color-error-medium-dynamic,
    light-dark(hsl(357 78% 41% / 0.6), hsl(0 96.9% 62% / 0.6))
  );
  --color-error-frosted: var(
    --_color-error-frosted-dynamic,
    light-dark(hsl(0 100% 90% / 0.55), hsl(0 79% 20% / 0.66))
  );
  --color-error-frosted-soft: var(
    --_color-error-frosted-soft-dynamic,
    light-dark(hsl(0 80% 95% / 0.55), hsl(0 59% 15% / 0.66))
  );
  --color-info: var(
    --_color-info-dynamic,
    light-dark(hsl(228 83.2% 51%), hsl(210 100% 54.5%))
  );
  --color-info-low: var(
    --_color-info-low-dynamic,
    light-dark(hsl(228 83.2% 51% / 0.18), hsl(210 100% 54.5% / 0.18))
  );
  --color-info-medium: var(
    --_color-info-medium-dynamic,
    light-dark(hsl(228 83.2% 51% / 0.6), hsl(210 100% 54.5% / 0.6))
  );
  --color-info-frosted: var(
    --_color-info-frosted-dynamic,
    light-dark(hsl(211 100% 90% / 0.55), hsl(210 79% 20% / 0.66))
  );
  --color-info-frosted-soft: var(
    --_color-info-frosted-soft-dynamic,
    light-dark(hsl(211 80% 95% / 0.55), hsl(210 59% 15% / 0.66))
  );
  /* This variable might be prefixed by Tailwind (e.g., --tw-font-porsche-next). By pointing it to our dynamic variable, we create a stable link. */
  --font-porsche-next: var(--_font-porsche-next-dynamic);
  --font-sans: --theme(--font-porsche-next);
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-normal: calc(6px + 2.125ex);
  --text-2xs: 0.75rem;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
  --text-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
  --text-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
  --text-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
  --text-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
  --text-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
  --text-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
  --text-base: 1rem;
  --text-base--line-height: calc(6px + 2.125ex);
  --text-2xs--line-height: calc(6px + 2.125ex);
  --text-xs--line-height: calc(6px + 2.125ex);
  --text-sm--line-height: calc(6px + 2.125ex);
  --text-md--line-height: calc(6px + 2.125ex);
  --text-lg--line-height: calc(6px + 2.125ex);
  --text-xl--line-height: calc(6px + 2.125ex);
  --text-2xl--line-height: calc(6px + 2.125ex);
  --text-3xl--line-height: calc(6px + 2.125ex);
  --text-4xl--line-height: calc(6px + 2.125ex);
  --text-5xl--line-height: calc(6px + 2.125ex);
  --breakpoint-xs: 480px;
  --breakpoint-sm: 760px;
  --breakpoint-md: 1000px;
  --breakpoint-lg: 1300px;
  --breakpoint-xl: 1760px;
  --breakpoint-2xl: 1920px;
  --spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
  --spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
  --spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px);
  --spacing-fluid-lg: clamp(32px, 2.75vw + 23px, 76px);
  --spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
  --spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);
  --spacing-static-2xs: 1px;
  --spacing-static-xs: 4px;
  --spacing-static-sm: 8px;
  --spacing-static-md: 16px;
  --spacing-static-lg: 32px;
  --spacing-static-xl: 48px;
  --spacing-static-2xl: 80px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: calc(infinity * 1px);
  --default-border-width: 1px;
  /* alias (deprecated) */
  --border-width-regular: 2px;
  /* alias (deprecated) */
  --border-width-thin: 1px;
  --blur-frosted: 32px;
  --shadow-sm: 0px 3px 8px rgba(0, 0, 0, 0.16);
  --shadow-md: 0px 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.16);
  --default-outline-width: 2px;
  --transition-duration-sm: 0.25s;
  --transition-duration-md: 0.4s;
  --transition-duration-lg: 0.6s;
  --transition-duration-xl: 1.2s;
  --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in: cubic-bezier(0, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
  --default-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  --default-transition-duration: 0.25s;
  /* alias (deprecated) */
  --shadow-low: --theme(--shadow-sm);
  /* alias (deprecated) */
  --shadow-medium: --theme(--shadow-md);
  /* alias (deprecated) */
  --shadow-high: --theme(--shadow-lg);
  /* alias (deprecated) */
  --transition-duration-short: --theme(--transition-duration-sm);
  /* alias (deprecated) */
  --transition-duration-moderate: --theme(--transition-duration-md);
  /* alias (deprecated) */
  --transition-duration-long: --theme(--transition-duration-lg);
  /* alias (deprecated) */
  --transition-duration-very-long: --theme(--transition-duration-xl);
  --animate-skeleton: skeleton --theme(--transition-duration-xl)
    --theme(--ease-in-out) infinite;
  @keyframes skeleton {
    from {
      background-position-x: 100%;
    }
    to {
      background-position-x: -100%;
    }
  }
}

@layer base {
  /*
    Tailwind v4 won't add a prefix to variables defined outside the @theme block.
    We override the "Bridge Variable". Since the Tailwind theme variable
    points here, the font will update even if the utility class is prefixed.
  */
  :root,
  :host {
    --_font-porsche-next-dynamic:
      "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
  }
  /* Simplified Chinese */
  :lang(zh-Hans),
  :lang(zh-CN),
  :lang(zh-SG) {
    --_font-porsche-next-dynamic:
      "Porsche Next", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
      "Arial Narrow", Arial, sans-serif;
  }
  /* Traditional Chinese */
  :lang(zh-Hant),
  :lang(zh-TW),
  :lang(zh-HK),
  :lang(zh-MO) {
    --_font-porsche-next-dynamic:
      "Porsche Next", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
      "Arial Narrow", Arial, sans-serif;
  }
  /* Japanese */
  :lang(ja) {
    --_font-porsche-next-dynamic:
      "Porsche Next", "Hiragino Sans", "Yu Gothic", "Noto Sans JP",
      "Arial Narrow", Arial, sans-serif;
  }
  /* Korean */
  :lang(ko) {
    --_font-porsche-next-dynamic:
      "Porsche Next", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
      "Arial Narrow", Arial, sans-serif;
  }
}

@layer base {
  /*
    Fallback for browsers without light-dark() support.
    The :root rule provides defaults; the @utility scheme-* blocks below
    handle per-scheme overrides via class selectors. Defining them as utilities
    (instead of plain class selectors) ensures Tailwind applies its configured
    prefix (e.g. tw:scheme-dark).
  */
  @supports not (color: light-dark(white, black)) {
    :root,
    :host {
      --_color-focus-dynamic: #1a44ea;
      --_color-canvas-dynamic: #fff;
      --_color-surface-dynamic: hsl(240 10% 95%);
      --_color-frosted-dynamic: hsl(240 5% 70% / 0.148);
      --_color-frosted-soft-dynamic: hsl(234 9.8% 60% / 0.06);
      --_color-frosted-strong-dynamic: hsl(236 6.5% 42% / 0.236);
      --_color-backdrop-dynamic: hsl(240 5.3% 14.9% / 0.5);
      --_color-contrast-lower-dynamic: hsl(234 6% 32.9% / 0.324);
      --_color-contrast-low-dynamic: hsl(240 5.3% 14.9% / 0.5);
      --_color-contrast-medium-dynamic: hsl(240 6.1% 7% / 0.6);
      --_color-contrast-high-dynamic: hsl(240 7.1% 11% / 0.7);
      --_color-contrast-higher-dynamic: hsl(240 8.7% 9% / 0.8);
      --_color-primary-dynamic: hsl(225 66.7% 1.2%);
      --_color-success-dynamic: hsl(115 77.5% 27.8%);
      --_color-success-low-dynamic: hsl(115 77.5% 27.8% / 0.18);
      --_color-success-medium-dynamic: hsl(115 77.5% 27.8% / 0.6);
      --_color-success-frosted-dynamic: hsl(109 100% 90% / 0.55);
      --_color-success-frosted-soft-dynamic: hsl(109 80% 95% / 0.55);
      --_color-warning-dynamic: hsl(28 97.7% 34.1%);
      --_color-warning-low-dynamic: hsl(28 97.7% 34.1% / 0.18);
      --_color-warning-medium-dynamic: hsl(28 97.7% 34.1% / 0.6);
      --_color-warning-frosted-dynamic: hsl(40 100% 90% / 0.55);
      --_color-warning-frosted-soft-dynamic: hsl(40 80% 95% / 0.55);
      --_color-error-dynamic: hsl(357 78% 41%);
      --_color-error-low-dynamic: hsl(357 78% 41% / 0.18);
      --_color-error-medium-dynamic: hsl(357 78% 41% / 0.6);
      --_color-error-frosted-dynamic: hsl(0 100% 90% / 0.55);
      --_color-error-frosted-soft-dynamic: hsl(0 80% 95% / 0.55);
      --_color-info-dynamic: hsl(228 83.2% 51%);
      --_color-info-low-dynamic: hsl(228 83.2% 51% / 0.18);
      --_color-info-medium-dynamic: hsl(228 83.2% 51% / 0.6);
      --_color-info-frosted-dynamic: hsl(211 100% 90% / 0.55);
      --_color-info-frosted-soft-dynamic: hsl(211 80% 95% / 0.55);
    }
  }
}

@utility scheme-light {
  @supports not (color: light-dark(white, black)) {
    --_color-focus-dynamic: #1a44ea;
    --_color-canvas-dynamic: #fff;
    --_color-surface-dynamic: hsl(240 10% 95%);
    --_color-frosted-dynamic: hsl(240 5% 70% / 0.148);
    --_color-frosted-soft-dynamic: hsl(234 9.8% 60% / 0.06);
    --_color-frosted-strong-dynamic: hsl(236 6.5% 42% / 0.236);
    --_color-backdrop-dynamic: hsl(240 5.3% 14.9% / 0.5);
    --_color-contrast-lower-dynamic: hsl(234 6% 32.9% / 0.324);
    --_color-contrast-low-dynamic: hsl(240 5.3% 14.9% / 0.5);
    --_color-contrast-medium-dynamic: hsl(240 6.1% 7% / 0.6);
    --_color-contrast-high-dynamic: hsl(240 7.1% 11% / 0.7);
    --_color-contrast-higher-dynamic: hsl(240 8.7% 9% / 0.8);
    --_color-primary-dynamic: hsl(225 66.7% 1.2%);
    --_color-success-dynamic: hsl(115 77.5% 27.8%);
    --_color-success-low-dynamic: hsl(115 77.5% 27.8% / 0.18);
    --_color-success-medium-dynamic: hsl(115 77.5% 27.8% / 0.6);
    --_color-success-frosted-dynamic: hsl(109 100% 90% / 0.55);
    --_color-success-frosted-soft-dynamic: hsl(109 80% 95% / 0.55);
    --_color-warning-dynamic: hsl(28 97.7% 34.1%);
    --_color-warning-low-dynamic: hsl(28 97.7% 34.1% / 0.18);
    --_color-warning-medium-dynamic: hsl(28 97.7% 34.1% / 0.6);
    --_color-warning-frosted-dynamic: hsl(40 100% 90% / 0.55);
    --_color-warning-frosted-soft-dynamic: hsl(40 80% 95% / 0.55);
    --_color-error-dynamic: hsl(357 78% 41%);
    --_color-error-low-dynamic: hsl(357 78% 41% / 0.18);
    --_color-error-medium-dynamic: hsl(357 78% 41% / 0.6);
    --_color-error-frosted-dynamic: hsl(0 100% 90% / 0.55);
    --_color-error-frosted-soft-dynamic: hsl(0 80% 95% / 0.55);
    --_color-info-dynamic: hsl(228 83.2% 51%);
    --_color-info-low-dynamic: hsl(228 83.2% 51% / 0.18);
    --_color-info-medium-dynamic: hsl(228 83.2% 51% / 0.6);
    --_color-info-frosted-dynamic: hsl(211 100% 90% / 0.55);
    --_color-info-frosted-soft-dynamic: hsl(211 80% 95% / 0.55);
  }
}

@utility scheme-only-light {
  @supports not (color: light-dark(white, black)) {
    --_color-focus-dynamic: #1a44ea;
    --_color-canvas-dynamic: #fff;
    --_color-surface-dynamic: hsl(240 10% 95%);
    --_color-frosted-dynamic: hsl(240 5% 70% / 0.148);
    --_color-frosted-soft-dynamic: hsl(234 9.8% 60% / 0.06);
    --_color-frosted-strong-dynamic: hsl(236 6.5% 42% / 0.236);
    --_color-backdrop-dynamic: hsl(240 5.3% 14.9% / 0.5);
    --_color-contrast-lower-dynamic: hsl(234 6% 32.9% / 0.324);
    --_color-contrast-low-dynamic: hsl(240 5.3% 14.9% / 0.5);
    --_color-contrast-medium-dynamic: hsl(240 6.1% 7% / 0.6);
    --_color-contrast-high-dynamic: hsl(240 7.1% 11% / 0.7);
    --_color-contrast-higher-dynamic: hsl(240 8.7% 9% / 0.8);
    --_color-primary-dynamic: hsl(225 66.7% 1.2%);
    --_color-success-dynamic: hsl(115 77.5% 27.8%);
    --_color-success-low-dynamic: hsl(115 77.5% 27.8% / 0.18);
    --_color-success-medium-dynamic: hsl(115 77.5% 27.8% / 0.6);
    --_color-success-frosted-dynamic: hsl(109 100% 90% / 0.55);
    --_color-success-frosted-soft-dynamic: hsl(109 80% 95% / 0.55);
    --_color-warning-dynamic: hsl(28 97.7% 34.1%);
    --_color-warning-low-dynamic: hsl(28 97.7% 34.1% / 0.18);
    --_color-warning-medium-dynamic: hsl(28 97.7% 34.1% / 0.6);
    --_color-warning-frosted-dynamic: hsl(40 100% 90% / 0.55);
    --_color-warning-frosted-soft-dynamic: hsl(40 80% 95% / 0.55);
    --_color-error-dynamic: hsl(357 78% 41%);
    --_color-error-low-dynamic: hsl(357 78% 41% / 0.18);
    --_color-error-medium-dynamic: hsl(357 78% 41% / 0.6);
    --_color-error-frosted-dynamic: hsl(0 100% 90% / 0.55);
    --_color-error-frosted-soft-dynamic: hsl(0 80% 95% / 0.55);
    --_color-info-dynamic: hsl(228 83.2% 51%);
    --_color-info-low-dynamic: hsl(228 83.2% 51% / 0.18);
    --_color-info-medium-dynamic: hsl(228 83.2% 51% / 0.6);
    --_color-info-frosted-dynamic: hsl(211 100% 90% / 0.55);
    --_color-info-frosted-soft-dynamic: hsl(211 80% 95% / 0.55);
  }
}

@utility scheme-normal {
  @supports not (color: light-dark(white, black)) {
    --_color-focus-dynamic: #1a44ea;
    --_color-canvas-dynamic: #fff;
    --_color-surface-dynamic: hsl(240 10% 95%);
    --_color-frosted-dynamic: hsl(240 5% 70% / 0.148);
    --_color-frosted-soft-dynamic: hsl(234 9.8% 60% / 0.06);
    --_color-frosted-strong-dynamic: hsl(236 6.5% 42% / 0.236);
    --_color-backdrop-dynamic: hsl(240 5.3% 14.9% / 0.5);
    --_color-contrast-lower-dynamic: hsl(234 6% 32.9% / 0.324);
    --_color-contrast-low-dynamic: hsl(240 5.3% 14.9% / 0.5);
    --_color-contrast-medium-dynamic: hsl(240 6.1% 7% / 0.6);
    --_color-contrast-high-dynamic: hsl(240 7.1% 11% / 0.7);
    --_color-contrast-higher-dynamic: hsl(240 8.7% 9% / 0.8);
    --_color-primary-dynamic: hsl(225 66.7% 1.2%);
    --_color-success-dynamic: hsl(115 77.5% 27.8%);
    --_color-success-low-dynamic: hsl(115 77.5% 27.8% / 0.18);
    --_color-success-medium-dynamic: hsl(115 77.5% 27.8% / 0.6);
    --_color-success-frosted-dynamic: hsl(109 100% 90% / 0.55);
    --_color-success-frosted-soft-dynamic: hsl(109 80% 95% / 0.55);
    --_color-warning-dynamic: hsl(28 97.7% 34.1%);
    --_color-warning-low-dynamic: hsl(28 97.7% 34.1% / 0.18);
    --_color-warning-medium-dynamic: hsl(28 97.7% 34.1% / 0.6);
    --_color-warning-frosted-dynamic: hsl(40 100% 90% / 0.55);
    --_color-warning-frosted-soft-dynamic: hsl(40 80% 95% / 0.55);
    --_color-error-dynamic: hsl(357 78% 41%);
    --_color-error-low-dynamic: hsl(357 78% 41% / 0.18);
    --_color-error-medium-dynamic: hsl(357 78% 41% / 0.6);
    --_color-error-frosted-dynamic: hsl(0 100% 90% / 0.55);
    --_color-error-frosted-soft-dynamic: hsl(0 80% 95% / 0.55);
    --_color-info-dynamic: hsl(228 83.2% 51%);
    --_color-info-low-dynamic: hsl(228 83.2% 51% / 0.18);
    --_color-info-medium-dynamic: hsl(228 83.2% 51% / 0.6);
    --_color-info-frosted-dynamic: hsl(211 100% 90% / 0.55);
    --_color-info-frosted-soft-dynamic: hsl(211 80% 95% / 0.55);
  }
}

@utility scheme-dark {
  @supports not (color: light-dark(white, black)) {
    --_color-focus-dynamic: #1a44ea;
    --_color-canvas-dynamic: hsl(225 66.7% 1.2%);
    --_color-surface-dynamic: hsl(240 2% 10%);
    --_color-frosted-dynamic: hsl(240 2% 43% / 0.228);
    --_color-frosted-soft-dynamic: hsl(240 3.7% 26.5% / 0.154);
    --_color-frosted-strong-dynamic: hsl(240 1.5% 61.8% / 0.302);
    --_color-backdrop-dynamic: hsl(240 5.3% 14.9% / 0.5);
    --_color-contrast-lower-dynamic: hsl(240 1.5% 61.8% / 0.302);
    --_color-contrast-low-dynamic: hsl(240 12.5% 96.9% / 0.45);
    --_color-contrast-medium-dynamic: hsl(240 12.5% 96.9% / 0.56);
    --_color-contrast-high-dynamic: hsl(240 12.5% 96.9% / 0.67);
    --_color-contrast-higher-dynamic: hsl(240 12.5% 96.9% / 0.78);
    --_color-primary-dynamic: hsl(225 100% 99%);
    --_color-success-dynamic: hsl(157 84.9% 41.6%);
    --_color-success-low-dynamic: hsl(157 84.9% 41.6% / 0.18);
    --_color-success-medium-dynamic: hsl(157 84.9% 41.6% / 0.6);
    --_color-success-frosted-dynamic: hsl(157 79% 20% / 0.66);
    --_color-success-frosted-soft-dynamic: hsl(157 59% 15% / 0.66);
    --_color-warning-dynamic: hsl(28 90.2% 56.1%);
    --_color-warning-low-dynamic: hsl(28 90.2% 56.1% / 0.18);
    --_color-warning-medium-dynamic: hsl(28 90.2% 56.1% / 0.6);
    --_color-warning-frosted-dynamic: hsl(52 79% 20% / 0.66);
    --_color-warning-frosted-soft-dynamic: hsl(52 59% 15% / 0.66);
    --_color-error-dynamic: hsl(0 96.9% 62%);
    --_color-error-low-dynamic: hsl(0 96.9% 62% / 0.18);
    --_color-error-medium-dynamic: hsl(0 96.9% 62% / 0.6);
    --_color-error-frosted-dynamic: hsl(0 79% 20% / 0.66);
    --_color-error-frosted-soft-dynamic: hsl(0 59% 15% / 0.66);
    --_color-info-dynamic: hsl(210 100% 54.5%);
    --_color-info-low-dynamic: hsl(210 100% 54.5% / 0.18);
    --_color-info-medium-dynamic: hsl(210 100% 54.5% / 0.6);
    --_color-info-frosted-dynamic: hsl(210 79% 20% / 0.66);
    --_color-info-frosted-soft-dynamic: hsl(210 59% 15% / 0.66);
  }
}

@utility scheme-only-dark {
  @supports not (color: light-dark(white, black)) {
    --_color-focus-dynamic: #1a44ea;
    --_color-canvas-dynamic: hsl(225 66.7% 1.2%);
    --_color-surface-dynamic: hsl(240 2% 10%);
    --_color-frosted-dynamic: hsl(240 2% 43% / 0.228);
    --_color-frosted-soft-dynamic: hsl(240 3.7% 26.5% / 0.154);
    --_color-frosted-strong-dynamic: hsl(240 1.5% 61.8% / 0.302);
    --_color-backdrop-dynamic: hsl(240 5.3% 14.9% / 0.5);
    --_color-contrast-lower-dynamic: hsl(240 1.5% 61.8% / 0.302);
    --_color-contrast-low-dynamic: hsl(240 12.5% 96.9% / 0.45);
    --_color-contrast-medium-dynamic: hsl(240 12.5% 96.9% / 0.56);
    --_color-contrast-high-dynamic: hsl(240 12.5% 96.9% / 0.67);
    --_color-contrast-higher-dynamic: hsl(240 12.5% 96.9% / 0.78);
    --_color-primary-dynamic: hsl(225 100% 99%);
    --_color-success-dynamic: hsl(157 84.9% 41.6%);
    --_color-success-low-dynamic: hsl(157 84.9% 41.6% / 0.18);
    --_color-success-medium-dynamic: hsl(157 84.9% 41.6% / 0.6);
    --_color-success-frosted-dynamic: hsl(157 79% 20% / 0.66);
    --_color-success-frosted-soft-dynamic: hsl(157 59% 15% / 0.66);
    --_color-warning-dynamic: hsl(28 90.2% 56.1%);
    --_color-warning-low-dynamic: hsl(28 90.2% 56.1% / 0.18);
    --_color-warning-medium-dynamic: hsl(28 90.2% 56.1% / 0.6);
    --_color-warning-frosted-dynamic: hsl(52 79% 20% / 0.66);
    --_color-warning-frosted-soft-dynamic: hsl(52 59% 15% / 0.66);
    --_color-error-dynamic: hsl(0 96.9% 62%);
    --_color-error-low-dynamic: hsl(0 96.9% 62% / 0.18);
    --_color-error-medium-dynamic: hsl(0 96.9% 62% / 0.6);
    --_color-error-frosted-dynamic: hsl(0 79% 20% / 0.66);
    --_color-error-frosted-soft-dynamic: hsl(0 59% 15% / 0.66);
    --_color-info-dynamic: hsl(210 100% 54.5%);
    --_color-info-low-dynamic: hsl(210 100% 54.5% / 0.18);
    --_color-info-medium-dynamic: hsl(210 100% 54.5% / 0.6);
    --_color-info-frosted-dynamic: hsl(210 79% 20% / 0.66);
    --_color-info-frosted-soft-dynamic: hsl(210 59% 15% / 0.66);
  }
}

@utility scheme-light-dark {
  @supports not (color: light-dark(white, black)) {
    --_color-focus-dynamic: #1a44ea;
    --_color-canvas-dynamic: #fff;
    --_color-surface-dynamic: hsl(240 10% 95%);
    --_color-frosted-dynamic: hsl(240 5% 70% / 0.148);
    --_color-frosted-soft-dynamic: hsl(234 9.8% 60% / 0.06);
    --_color-frosted-strong-dynamic: hsl(236 6.5% 42% / 0.236);
    --_color-backdrop-dynamic: hsl(240 5.3% 14.9% / 0.5);
    --_color-contrast-lower-dynamic: hsl(234 6% 32.9% / 0.324);
    --_color-contrast-low-dynamic: hsl(240 5.3% 14.9% / 0.5);
    --_color-contrast-medium-dynamic: hsl(240 6.1% 7% / 0.6);
    --_color-contrast-high-dynamic: hsl(240 7.1% 11% / 0.7);
    --_color-contrast-higher-dynamic: hsl(240 8.7% 9% / 0.8);
    --_color-primary-dynamic: hsl(225 66.7% 1.2%);
    --_color-success-dynamic: hsl(115 77.5% 27.8%);
    --_color-success-low-dynamic: hsl(115 77.5% 27.8% / 0.18);
    --_color-success-medium-dynamic: hsl(115 77.5% 27.8% / 0.6);
    --_color-success-frosted-dynamic: hsl(109 100% 90% / 0.55);
    --_color-success-frosted-soft-dynamic: hsl(109 80% 95% / 0.55);
    --_color-warning-dynamic: hsl(28 97.7% 34.1%);
    --_color-warning-low-dynamic: hsl(28 97.7% 34.1% / 0.18);
    --_color-warning-medium-dynamic: hsl(28 97.7% 34.1% / 0.6);
    --_color-warning-frosted-dynamic: hsl(40 100% 90% / 0.55);
    --_color-warning-frosted-soft-dynamic: hsl(40 80% 95% / 0.55);
    --_color-error-dynamic: hsl(357 78% 41%);
    --_color-error-low-dynamic: hsl(357 78% 41% / 0.18);
    --_color-error-medium-dynamic: hsl(357 78% 41% / 0.6);
    --_color-error-frosted-dynamic: hsl(0 100% 90% / 0.55);
    --_color-error-frosted-soft-dynamic: hsl(0 80% 95% / 0.55);
    --_color-info-dynamic: hsl(228 83.2% 51%);
    --_color-info-low-dynamic: hsl(228 83.2% 51% / 0.18);
    --_color-info-medium-dynamic: hsl(228 83.2% 51% / 0.6);
    --_color-info-frosted-dynamic: hsl(211 100% 90% / 0.55);
    --_color-info-frosted-soft-dynamic: hsl(211 80% 95% / 0.55);
    @media (prefers-color-scheme: dark) {
      --_color-focus-dynamic: #1a44ea;
      --_color-canvas-dynamic: hsl(225 66.7% 1.2%);
      --_color-surface-dynamic: hsl(240 2% 10%);
      --_color-frosted-dynamic: hsl(240 2% 43% / 0.228);
      --_color-frosted-soft-dynamic: hsl(240 3.7% 26.5% / 0.154);
      --_color-frosted-strong-dynamic: hsl(240 1.5% 61.8% / 0.302);
      --_color-backdrop-dynamic: hsl(240 5.3% 14.9% / 0.5);
      --_color-contrast-lower-dynamic: hsl(240 1.5% 61.8% / 0.302);
      --_color-contrast-low-dynamic: hsl(240 12.5% 96.9% / 0.45);
      --_color-contrast-medium-dynamic: hsl(240 12.5% 96.9% / 0.56);
      --_color-contrast-high-dynamic: hsl(240 12.5% 96.9% / 0.67);
      --_color-contrast-higher-dynamic: hsl(240 12.5% 96.9% / 0.78);
      --_color-primary-dynamic: hsl(225 100% 99%);
      --_color-success-dynamic: hsl(157 84.9% 41.6%);
      --_color-success-low-dynamic: hsl(157 84.9% 41.6% / 0.18);
      --_color-success-medium-dynamic: hsl(157 84.9% 41.6% / 0.6);
      --_color-success-frosted-dynamic: hsl(157 79% 20% / 0.66);
      --_color-success-frosted-soft-dynamic: hsl(157 59% 15% / 0.66);
      --_color-warning-dynamic: hsl(28 90.2% 56.1%);
      --_color-warning-low-dynamic: hsl(28 90.2% 56.1% / 0.18);
      --_color-warning-medium-dynamic: hsl(28 90.2% 56.1% / 0.6);
      --_color-warning-frosted-dynamic: hsl(52 79% 20% / 0.66);
      --_color-warning-frosted-soft-dynamic: hsl(52 59% 15% / 0.66);
      --_color-error-dynamic: hsl(0 96.9% 62%);
      --_color-error-low-dynamic: hsl(0 96.9% 62% / 0.18);
      --_color-error-medium-dynamic: hsl(0 96.9% 62% / 0.6);
      --_color-error-frosted-dynamic: hsl(0 79% 20% / 0.66);
      --_color-error-frosted-soft-dynamic: hsl(0 59% 15% / 0.66);
      --_color-info-dynamic: hsl(210 100% 54.5%);
      --_color-info-low-dynamic: hsl(210 100% 54.5% / 0.18);
      --_color-info-medium-dynamic: hsl(210 100% 54.5% / 0.6);
      --_color-info-frosted-dynamic: hsl(210 79% 20% / 0.66);
      --_color-info-frosted-soft-dynamic: hsl(210 59% 15% / 0.66);
    }
  }
}

/* Gradient */
@utility bg-fade-to-t {
  background-image: linear-gradient(
    to top,
    hsla(0, 0%, 0%, 0.8) 0%,
    hsla(0, 0%, 0%, 0.8) 8.1%,
    hsla(0, 0%, 0%, 0.8) 15.5%,
    hsla(0, 0%, 0%, 0.8) 22.5%,
    hsla(0, 0%, 0%, 0.78) 29%,
    hsla(0, 0%, 0%, 0.73) 35.3%,
    hsla(0, 0%, 0%, 0.67) 41.2%,
    hsla(0, 0%, 0%, 0.6) 47.1%,
    hsla(0, 0%, 0%, 0.52) 52.9%,
    hsla(0, 0%, 0%, 0.44) 58.8%,
    hsla(0, 0%, 0%, 0.33) 64.7%,
    hsla(0, 0%, 0%, 0.22) 71%,
    hsla(0, 0%, 0%, 0.12) 77.5%,
    hsla(0, 0%, 0%, 0.05) 84.5%,
    hsla(0, 0%, 0%, 0.011) 91.9%,
    hsla(0, 0%, 0%, 0) 100%
  );
}

@utility bg-fade-to-r {
  background-image: linear-gradient(
    to right,
    hsla(0, 0%, 0%, 0.8) 0%,
    hsla(0, 0%, 0%, 0.8) 8.1%,
    hsla(0, 0%, 0%, 0.8) 15.5%,
    hsla(0, 0%, 0%, 0.8) 22.5%,
    hsla(0, 0%, 0%, 0.78) 29%,
    hsla(0, 0%, 0%, 0.73) 35.3%,
    hsla(0, 0%, 0%, 0.67) 41.2%,
    hsla(0, 0%, 0%, 0.6) 47.1%,
    hsla(0, 0%, 0%, 0.52) 52.9%,
    hsla(0, 0%, 0%, 0.44) 58.8%,
    hsla(0, 0%, 0%, 0.33) 64.7%,
    hsla(0, 0%, 0%, 0.22) 71%,
    hsla(0, 0%, 0%, 0.12) 77.5%,
    hsla(0, 0%, 0%, 0.05) 84.5%,
    hsla(0, 0%, 0%, 0.011) 91.9%,
    hsla(0, 0%, 0%, 0) 100%
  );
}

@utility bg-fade-to-b {
  background-image: linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0.8) 0%,
    hsla(0, 0%, 0%, 0.8) 8.1%,
    hsla(0, 0%, 0%, 0.8) 15.5%,
    hsla(0, 0%, 0%, 0.8) 22.5%,
    hsla(0, 0%, 0%, 0.78) 29%,
    hsla(0, 0%, 0%, 0.73) 35.3%,
    hsla(0, 0%, 0%, 0.67) 41.2%,
    hsla(0, 0%, 0%, 0.6) 47.1%,
    hsla(0, 0%, 0%, 0.52) 52.9%,
    hsla(0, 0%, 0%, 0.44) 58.8%,
    hsla(0, 0%, 0%, 0.33) 64.7%,
    hsla(0, 0%, 0%, 0.22) 71%,
    hsla(0, 0%, 0%, 0.12) 77.5%,
    hsla(0, 0%, 0%, 0.05) 84.5%,
    hsla(0, 0%, 0%, 0.011) 91.9%,
    hsla(0, 0%, 0%, 0) 100%
  );
}

@utility bg-fade-to-l {
  background-image: linear-gradient(
    to left,
    hsla(0, 0%, 0%, 0.8) 0%,
    hsla(0, 0%, 0%, 0.8) 8.1%,
    hsla(0, 0%, 0%, 0.8) 15.5%,
    hsla(0, 0%, 0%, 0.8) 22.5%,
    hsla(0, 0%, 0%, 0.78) 29%,
    hsla(0, 0%, 0%, 0.73) 35.3%,
    hsla(0, 0%, 0%, 0.67) 41.2%,
    hsla(0, 0%, 0%, 0.6) 47.1%,
    hsla(0, 0%, 0%, 0.52) 52.9%,
    hsla(0, 0%, 0%, 0.44) 58.8%,
    hsla(0, 0%, 0%, 0.33) 64.7%,
    hsla(0, 0%, 0%, 0.22) 71%,
    hsla(0, 0%, 0%, 0.12) 77.5%,
    hsla(0, 0%, 0%, 0.05) 84.5%,
    hsla(0, 0%, 0%, 0.011) 91.9%,
    hsla(0, 0%, 0%, 0) 100%
  );
}

/* Grid */
@utility grid-template {
  --pds-internal-grid-safe-zone: max(22px, 10.625vw - 12px);
  --_pds-grid-col: minmax(
    0,
    var(
      --pds-internal-grid-outer-column,
      calc(var(--pds-internal-grid-safe-zone) - --theme(--spacing-fluid-md))
    )
  );
  display: grid;
  grid-template-columns: [full-start] var(
      --_pds-grid-col
    ) [wide-start extended-start basic-start narrow-start] repeat(
      6,
      minmax(0, 1fr)
    ) [narrow-end basic-end extended-end wide-end] var(
      --_pds-grid-col
    ) [full-end];
  gap: --theme(--spacing-fluid-md);
  min-width: var(--pds-internal-grid-width-min, 320px);
  max-width: var(--pds-internal-grid-width-max, 2560px);
  box-sizing: content-box;
  margin-inline: var(--pds-internal-grid-margin, 0);
  padding-inline: calc(50% - var(--pds-internal-grid-margin, 0px) - 2560px / 2);

  @media (width >= 760px) {
    --pds-internal-grid-safe-zone: calc(5vw - 16px);
    grid-template-columns: [full-start] var(
        --_pds-grid-col
      ) [wide-start] minmax(0, 1fr) [extended-start] minmax(
        0,
        1fr
      ) [basic-start] repeat(2, minmax(0, 1fr)) [narrow-start] repeat(
        8,
        minmax(0, 1fr)
      ) [narrow-end] repeat(2, minmax(0, 1fr)) [basic-end] minmax(
        0,
        1fr
      ) [extended-end] minmax(0, 1fr) [wide-end] var(
        --_pds-grid-col
      ) [full-end];
  }

  @media (width >= 1920px) {
    --pds-internal-grid-safe-zone: min(50vw - 880px, 400px);
  }
}

/* Grid: Area Narrow */
@utility col-narrow {
  --_pds-grid-one-half: 3;
  grid-column: narrow;

  @media (width >= 760px) {
    --_pds-grid-one-half: 4;
  }
}

@utility col-start-narrow {
  --_pds-grid-one-half: 3;
  grid-column-start: narrow-start;

  @media (width >= 760px) {
    --_pds-grid-one-half: 4;
  }
}

@utility col-end-narrow {
  --_pds-grid-one-half: 3;
  grid-column-end: narrow-end;

  @media (width >= 760px) {
    --_pds-grid-one-half: 4;
  }
}

/* Grid: Area Basic */
@utility col-basic {
  --_pds-grid-one-half: 3;
  --_pds-grid-one-third: 2;
  --_pds-grid-two-thirds: 4;
  grid-column: basic;

  @media (width >= 760px) {
    --_pds-grid-one-half: 6;
    --_pds-grid-one-third: 4;
    --_pds-grid-two-thirds: 8;
  }
}

@utility col-start-basic {
  --_pds-grid-one-half: 3;
  --_pds-grid-one-third: 2;
  --_pds-grid-two-thirds: 4;
  grid-column-start: basic-start;

  @media (width >= 760px) {
    --_pds-grid-one-half: 6;
    --_pds-grid-one-third: 4;
    --_pds-grid-two-thirds: 8;
  }
}

@utility col-end-basic {
  --_pds-grid-one-half: 3;
  --_pds-grid-one-third: 2;
  --_pds-grid-two-thirds: 4;
  grid-column-end: basic-end;

  @media (width >= 760px) {
    --_pds-grid-one-half: 6;
    --_pds-grid-one-third: 4;
    --_pds-grid-two-thirds: 8;
  }
}

/* Grid: Area Extended */
@utility col-extended {
  --_pds-grid-one-half: 3;
  grid-column: extended;

  @media (width >= 760px) {
    --_pds-grid-one-half: 7;
  }
}

@utility col-start-extended {
  --_pds-grid-one-half: 3;
  grid-column-start: extended-start;

  @media (width >= 760px) {
    --_pds-grid-one-half: 7;
  }
}

@utility col-end-extended {
  --_pds-grid-one-half: 3;
  grid-column-end: extended-end;

  @media (width >= 760px) {
    --_pds-grid-one-half: 7;
  }
}

/* Grid: Area Wide */
@utility col-wide {
  --_pds-grid-one-half: 3;
  grid-column: wide;

  @media (width >= 760px) {
    --_pds-grid-one-half: 8;
  }
}

@utility col-start-wide {
  --_pds-grid-one-half: 3;
  grid-column-start: wide-start;

  @media (width >= 760px) {
    --_pds-grid-one-half: 8;
  }
}

@utility col-end-wide {
  --_pds-grid-one-half: 3;
  grid-column-end: wide-end;

  @media (width >= 760px) {
    --_pds-grid-one-half: 8;
  }
}

/* Grid: Area Full */
@utility col-full {
  grid-column: full;
}

@utility col-start-full {
  grid-column-start: full-start;
}

@utility col-end-full {
  grid-column-end: full-end;
}

/* Grid: Division */
@utility col-span-one-half {
  grid-column: span var(--_pds-grid-one-half, 1) / span
    var(--_pds-grid-one-half, 1);
}

@utility col-span-one-third {
  grid-column: span var(--_pds-grid-one-third, 1) / span
    var(--_pds-grid-one-third, 1);
}

@utility col-span-two-thirds {
  grid-column: span var(--_pds-grid-two-thirds, 1) / span
    var(--_pds-grid-two-thirds, 1);
}

/* Skeleton */
@utility skeleton {
  animation: --theme(--animate-skeleton);
  display: block;
  border-radius: --theme(--radius-sm);
  background-color: transparent;
  background-image: linear-gradient(
    to right,
    --theme(--color-frosted) 0%,
    --theme(--color-frosted-strong) 50%,
    --theme(--color-frosted) 100%
  );
  background-position: 0 0;
  background-size: 200% 100%;
}

/* Typography: Text */
@utility prose-text-2xs {
  font: --theme(--font-weight-normal) --theme(--text-2xs) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-text-xs {
  font: --theme(--font-weight-normal) --theme(--text-xs) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-text-sm {
  font: --theme(--font-weight-normal) --theme(--text-sm) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-text-md {
  font: --theme(--font-weight-normal) --theme(--text-md) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-text-lg {
  font: --theme(--font-weight-normal) --theme(--text-lg) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-text-xl {
  font: --theme(--font-weight-normal) --theme(--text-xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-text-2xl {
  font: --theme(--font-weight-normal) --theme(--text-2xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-text-3xl {
  font: --theme(--font-weight-normal) --theme(--text-3xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-text-4xl {
  font: --theme(--font-weight-normal) --theme(--text-4xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-text-5xl {
  font: --theme(--font-weight-normal) --theme(--text-5xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

/* Typography: Heading */
@utility prose-heading-2xs {
  font: --theme(--font-weight-semibold) --theme(--text-2xs) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-heading-xs {
  font: --theme(--font-weight-semibold) --theme(--text-xs) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-heading-sm {
  font: --theme(--font-weight-semibold) --theme(--text-sm) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-heading-md {
  font: --theme(--font-weight-normal) --theme(--text-md) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-heading-lg {
  font: --theme(--font-weight-normal) --theme(--text-lg) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-heading-xl {
  font: --theme(--font-weight-normal) --theme(--text-xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-heading-2xl {
  font: --theme(--font-weight-normal) --theme(--text-2xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-heading-3xl {
  font: --theme(--font-weight-normal) --theme(--text-3xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-heading-4xl {
  font: --theme(--font-weight-normal) --theme(--text-4xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-heading-5xl {
  font: --theme(--font-weight-normal) --theme(--text-5xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

/* Typography: Display */
@utility prose-display-sm {
  font: --theme(--font-weight-normal) --theme(--text-3xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-display-md {
  font: --theme(--font-weight-normal) --theme(--text-4xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}

@utility prose-display-lg {
  font: --theme(--font-weight-normal) --theme(--text-5xl) /
    --theme(--leading-normal) --theme(--font-porsche-next);
  color: --theme(--color-primary);
}