@charset "UTF-8";
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/light
 * The light-DOM composition root (DESYS-1379 D4), compiled to
 * `dist/iris/iris.css` by `scripts/build/compile-global-stylesheets.mjs` (which
 * runs after `stencil build` and owns the final `iris.css`). Composition order
 * (cascade order): box-model reset, fonts, the map-driven semantic-variable
 * tier, and the utilities + grid class layers.
 *
 * Content is the same set of layers the former single `global.scss` composed:
 * `iris.css` keeps its `@font-face` declarations, the light-DOM reset, the
 * semantic variables, and the `.iris-u-*` / typography / grid classes that
 * document-scope consumers rely on. The split moves the shadow-adopted subset
 * (reset + fonts + variables, no light-DOM classes) into `shadow.scss`, which is
 * what Stencil's `globalStyle` targets. Every `@use` is relative.
 */
/*
 * Box-model reset first, so it precedes every rule below and a consumer rule of
 * any specificity can still override it. Light-DOM counterpart to the
 * shadow-scoped reset (see base/_reset.scss).
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/base/_reset
 * Document-scope box-model reset — the light-DOM counterpart to the shadow-scoped reset
 * in `scss/mixins/shadow-dom/_component.scss`.
 *
 * Deliberately box-sizing-ONLY: the package light-DOM reset must not restyle a consumer's
 * page, so element resets (margins, form defaults, etc.) live in the shadow-scoped
 * `_component.scss` mixin inside each component instead.
 *
 * A `*` selector cannot cross a shadow boundary, so this protects the light DOM (slotted
 * consumer content, component host boxes, consumer markup composing the iris pad and gap
 * custom properties) while `_component.scss` protects shadow content. Neither substitutes
 * for the other.
 *
 * The bare `*` is deliberately unscoped — only an unscoped rule reaches content a consumer
 * puts INSIDE an iris component. Specificity (0,0,0) / (0,0,1) so any consumer selector wins.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/assets/_fonts
 * Variable-font @font-face declarations for SiemensSans Pro VF and Siemens Slab.
 * Each weight stop (Roman 400, SBold 600, Bold 700) is declared explicitly so the browser
 * maps named weights to the variable font's wght axis.
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * Asset URL prefix for font-face declarations.
 * The !default flag is an internal build-time escape hatch only; the supported consumer
 * contract is the precompiled iris.css whose @font-face URLs are relative to the stylesheet
 * (./assets/), so non-bundled consumers (plain <link>, CDN, SSR) resolve the co-located fonts
 * against the CSS file location rather than the web server root.
 * @type String
 */
/*
 * Per-asset-class subpaths under the asset prefix. Each class's location is expressed here
 * as config rather than hardcoded at each url() site, so a class can later be repointed to a
 * CDN base by editing this map alone.
 *
 * `fonts` MUST resolve to the asset prefix followed by `/fonts` byte-for-byte, because
 * `_fonts.scss` composes its 12 @font-face URLs from `$iris-asset-prefix` + `/fonts/…`;
 * keeping this entry equal to that keeps iris.css font URLs unchanged.
 * @type Map
 */
/* Sans Pro VF — Roman (400) */
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/fonts/SiemensSansProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: italic;
  font-weight: 400;
  src: url("./assets/fonts/SiemensSansProVF_Italics_W_Wght.woff2") format("woff2");
}
/* Sans Pro VF — SBold (600) */
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: normal;
  font-weight: 600;
  src: url("./assets/fonts/SiemensSansProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: italic;
  font-weight: 600;
  src: url("./assets/fonts/SiemensSansProVF_Italics_W_Wght.woff2") format("woff2");
}
/* Sans Pro VF — Bold (700) */
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: normal;
  font-weight: 700;
  src: url("./assets/fonts/SiemensSansProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SiemensSans Pro VF";
  font-style: italic;
  font-weight: 700;
  src: url("./assets/fonts/SiemensSansProVF_Italics_W_Wght.woff2") format("woff2");
}
/* Siemens Slab — Roman (400) */
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/fonts/SiemensSlabProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: italic;
  font-weight: 400;
  src: url("./assets/fonts/SiemensSlabProVF_Italics_W_Wght.woff2") format("woff2");
}
/* Siemens Slab — SBold (600) */
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: normal;
  font-weight: 600;
  src: url("./assets/fonts/SiemensSlabProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: italic;
  font-weight: 600;
  src: url("./assets/fonts/SiemensSlabProVF_Italics_W_Wght.woff2") format("woff2");
}
/* Siemens Slab — Bold (700) */
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: normal;
  font-weight: 700;
  src: url("./assets/fonts/SiemensSlabProVF_W_Wght.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Siemens Slab";
  font-style: italic;
  font-weight: 700;
  src: url("./assets/fonts/SiemensSlabProVF_Italics_W_Wght.woff2") format("woff2");
}
/*
 * The map-driven src/global tier. `variables/index` is the sole emitter of the
 * semantic token set: color under theme selectors (both `.iris-ui-theme-*` and
 * `[data-iris-theme]`), the flat component-spacing / size / typography / styles /
 * border / effect / gradient set, and the responsive `--iris-layout-*` +
 * `--iris-{sans,slab}-*` tiers (desktop `xxl` root with max-width overrides).
 *
 * The utilities and grid tiers compile here (so `iris.css` carries the `.iris-u-*`,
 * the composable typography classes `.iris-font-* / .iris-text-* / .iris-weight-*`,
 * and the grid classes) and also to their own standalone entrypoints
 * (`utilities.css` / `grid.css`). The composable typography classes are the
 * document-scope text-styling path for a consumer with no Sass toolchain or
 * framework wrapper. They emit light-DOM classes only — never shadow-scoped — so
 * this never touches a component's shadow-DOM CSS.
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/css-variables/_index
 * SASS→CSS conversion barrel. Composes the per-family emit mixins (now in
 * `../mixins/`, DESYS-1379 restructure) into the full `--iris-*` CSS custom-property
 * layer, in a fixed order so `iris.css` is byte-identical to the former
 * `tokens/_index` (was `variables/_index`) form:
 *   - color   -> --iris-<token> / --iris-surface-* (theme-scoped)
 *   - layout  -> flat layout + surface layout (:root) + breakpoint maps
 *   - typography -> responsive font tiers (:root desktop + below overrides)
 *   - styles  -> effect/gradient/border (:root)
 * The data maps live in `../tokens/`; this tier is the emit/compose step. Reference
 * tokens are SCSS-only (resolved by functions.ref() at compile time) and emit nothing.
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/functions/_functions
 * Helpers for parsing mapped SCSS variables into CSS custom properties. The
 * variable partials store everything in SCSS maps; these functions turn a map key
 * into a resolved reference VALUE (compile-time; reference tokens do not emit as
 * CSS variables) and build the emitted `--iris-*` custom-property names.
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * The CSS custom-property prefix for this build. iris-core is always `iris`
 * (the namespace contract — `css-variable-namespace-contract.md`).
 */
/*
 * Build a full CSS custom-property name from parts, e.g.
 * cssvar('action','fill','1') -> --iris-action-fill-1. Null and empty segments
 * are skipped.
 * @param {String...} $parts
 * @return {String} the `--iris-…` custom-property name
 */
/*
 * Resolve a REFERENCE-tier token to its literal value at COMPILE TIME.
 * Reference tokens are SCSS-only — they do NOT compile to `--iris-ref-*` CSS
 * custom properties; semantic tokens call ref('<key>') to inline the reference
 * value. Pass the ref key WITHOUT the `--iris-ref-` prefix (e.g.
 * 'colors-deep-blue-900', 'dimensions-dim16').
 * @param {String} $key - a key in reference.$reference
 * @return {*} the resolved literal value
 * @throw when the key is absent from the reference index
 */
/*
 * Look up a key in a map and require it to exist (fails loud on a typo).
 * @param {Map} $map
 * @param {String} $key
 * @return {*} the map value
 * @throw when the key is absent
 */
/*
 * Read the Nth entry of a per-mode / per-breakpoint list value, 1-indexed.
 * Used to pull one mode's value out of a 5-value color entry, or one
 * breakpoint's value out of a layout entry.
 * @param {List} $values
 * @param {Number} $index - 1-based
 * @return {*}
 */
/*
 * Spacing multiplier escape hatch. Returns a calc() over the --iris-spacing base
 * so an arbitrary step needs no new named token; the named gap and pad scale
 * stays the semantic default. e.g. iris-space(3) -> calc(var(--iris-spacing) * 3).
 * @param {Number} $n - the multiplier
 * @return {String} a calc() expression over var(--iris-spacing)
 */
/*
 * Convert a px value to rem against a root base. Extracts the px÷16 the pipeline
 * otherwise does inline into one named, unit-aware helper. Accepts a unitless
 * number or a px value; strips the unit before dividing.
 * @param {Number} $px - a px length (16px) or unitless number (16)
 * @param {Number} $base [16] - the root font-size the rem is relative to
 * @return {Number} a rem length
 */
/*
 * Select the entries of a flat map whose key begins with the prefix (e.g. `action-`),
 * returning a
 * sub-map with that prefix stripped from each key. Used to derive role sub-maps
 * (`$text`, `$base`, `$status`, `$action`, …) from the single authored `$color` map
 * without duplicating any value — the sub-maps are views, so they cannot drift from
 * the source and the emitter can keep iterating the full `$color` map for
 * byte-identical output.
 * @param {Map} $map - a flat map keyed `'<prefix>-<rest>'`
 * @param {String} $prefix - the role prefix, without the trailing hyphen
 * @return {Map} the matching entries, re-keyed with `'<prefix>-'` removed
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/mixins/_layout
 * Layout mixins. Two groups:
 *   • spacing helpers (stack / pad / pad-x) resolving a named key to the unified
 *     --iris-spacer-{px} scale via layout.$spacer-name-to-px;
 *   • media-query + theme-selector management for the map-driven variable compiler
 *     (below / above / theme), reading $breakpoints from the variables/_layout tier.
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/tokens/_layout
 * Layout + spacing maps. Carries the viewport scale ($breakpoints, $block-spacing, $vw,
 * $z-index, grid container/columns) and the spacing scale ($layout-block,
 * $component-spacing, $grid, $size, $spacing-base). Values with a reference token resolve
 * through functions.ref('dimensions-dimN'); raw exceptions (breakpoints, vw, z-index, grid,
 * and the viewport-layout values with no reference token) are noted inline and covered by
 * the test:semantic-refs exception set. _index.scss emits flat maps as --iris-* in :root and
 * breakpoint-keyed maps as --iris-layout-* (desktop at root, smaller via max-width overrides).
 */
/*
 * Breakpoints — raw px (the exception to reference indirection). The scalar is each
 * breakpoint's min-width, used by mixins/_layout above(). The max-width used by below() is
 * the next breakpoint's value minus 0.02px, computed inline in below() rather than stored.
 */
/*
 * block-spacing — one value per breakpoint. Keys are viewport tokens; each value is a
 * breakpoint-keyed map ('sm'…'xxl'). _index.scss emits the desktop ('xxl') value at :root
 * and overrides downward via max-width media queries, reading each breakpoint by key.
 */
/* vw — viewport-width fractions */
/* z-index scale — five stacking tiers descending by 100s to a 100 floor, plus a 110
   utility tier for one-off local raises above a tier. Emitted as --iris-z-<key>. */
/* Grid container / columns — raw values */
/* layout-block — per-breakpoint keyed map ('sm'…'xxl'). _index.scss reads each breakpoint
   by key ('xxl' at root, smaller keys via max-width overrides). */
/* component-spacing — width / height, resolved through reference dimensions.
   The former gap and pad keys moved to the unified $spacer scale (DESYS-1378 AC-C4). */
/*
 * spacer — the unified px-keyed spacing scale (DESYS-1378 AC-C4). Replaces the former
 * named gap/pad custom properties: the emitter iterates this map to emit one
 * `--iris-spacer-{px}` per distinct px value (union of the old gap + pad px), collapsing
 * every gap/pad collision to a single token. The px key is the literal pixel count;
 * the negative -2px value is keyed `neg-2` (a `--` in a custom-property name is illegal).
 * Values resolve through `dimensions-dimN` so the scale stays reference-backed.
 * Keys are ordered by px (negative first). `spacer-120` (dim120) extends the top of the
 * scale beyond any current gap/pad value for large-layout use.
 */
/*
 * spacer name→px lookup (DESYS-1378 AC-C4). Maps every former named gap/pad key to its
 * px key in $spacer so the public `stack()`/`pad()`/`pad-x()` mixins keep their named-key
 * signature (callers still pass `small`/`medium`/…) while resolving to `--iris-spacer-{px}`
 * internally. The value is the $spacer key (a string), e.g. `gap-small` → `'8'`.
 * gap and pad keys that resolve to the same px point at the same $spacer key (the collapse).
 */
/* grid — basic grid variables */
/* size — content-measure + fluid size scales. content-measure: readable line-length caps
   (ch-based) for the Center primitive. fluid: clamp()-based sizes interpolating between a
   mobile min and a desktop max. */
/* spacing multiplier base — iris-space($n) = calc(base * n); the named scale stays default */
/* 4px step */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * Flex column/row stack with a gap from the gap scale.
 * @param {String} $gap ['medium'] - a gap scale key (small, medium, large, x-large, …)
 * @param {String} $direction ['column'] - flex-direction
 */
/*
 * Uniform padding from the pad scale.
 * @param {String} $pad ['medium'] - a pad scale key
 */
/*
 * Symmetric inline padding from the pad scale.
 * @param {String} $pad ['x-large'] - a pad scale key
 */
/*
 * Emit a `max-width` media query for a breakpoint key. Desktop is the root
 * default; wrap smaller-viewport overrides in `@include below('md')`.
 * @param {String} $key - a key in layout.$breakpoints (e.g. 'md')
 * @throw when the key is unknown
 */
/*
 * Emit a `min-width` media query for a breakpoint key (desktop-up layering).
 * @param {String} $key - a key in layout.$breakpoints
 * @throw when the key is unknown
 */
/*
 * Wrap declarations in a color-theme selector. `light` targets `:root` (the
 * default mode). Every other mode targets BOTH iris's `.iris-ui-theme-<mode>`
 * class (kept as public API) and the nestable `[data-iris-theme="<mode>"]`
 * attribute form, so a subtree can switch mode rather than only the root.
 * @param {String} $mode - light | dark | sand | wireframe | dark-brand
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/mixins/_color
 * Theme-aware color styles applied from the emitted --iris-* CSS variables. Because the
 * values render under theme selectors (light = :root, others via theme()), a mixin
 * applied to a selector automatically re-themes with no per-mode duplication here.
 * This is the map-driven color mixin set (surface/border/focus-ring), additive to
 * ../_mixins.scss (which keeps iris-core's existing iris-focus-ring / iris-focus-ring-inset /
 * iris-transition mixins used by the shipped components); this file does not touch those.
 */
/*
 * Apply a surface (fill + content) pair.
 * @param {String} $fill    - a color var name segment, e.g. 'base-fill-1'
 * @param {String} $content - a color var name segment, e.g. 'text-primary'
 */
/*
 * Apply a border color (width bound separately to a semantic dimension var).
 * @param {String} $color - a color var name segment, e.g. 'ui-3'
 * @param {String} $width ['border-width-small'] - a dimension var name segment
 */
/* Standard keyboard focus ring using the semantic focus color. */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/mixins/_typography
 * Composite type styles applied from the emitted --iris-* CSS variables (map-driven in
 * variables/_typography.scss). The four axes: family (sans|slab), group (display|title|
 * body|intro|quote|topline), size, weight (roman|sbold|bold), plus a reserved italic axis.
 * This is the map-driven type() API, additive to the generated composite mixins in
 * ../_typography-mixins.scss; this file does not touch or replace that one.
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/tokens/_typography
 * Typography maps consumed by _index.scss.
 *   $font-size — style-roles (display/title/body/intro/quote/topline); each carries
 *                font-size / line-height / letter-spacing pointing at reference font
 *                tokens via functions.ref(). Roles are family-agnostic; sans and slab
 *                share them and both are emitted.
 *   $fonts     — font families grouped sans / slab, with font-family + font-weights.
 */
/*
 * font-size — role -> (font-size, line-height, letter-spacing) per breakpoint.
 * Each property is a breakpoint-keyed map ('xs'…'xxl'), the low edge of each viewport
 * range. This map holds only RAW reference values via functions.ref(); it does no
 * calculation. _index.scss emits the widest ('xxl') at :root and overrides downward via
 * max-width below($bp) queries, computing the px->rem font-size and the lh÷fs line-height
 * ratio at apply time. letter-spacing is the raw px; paragraph-spacing (body-medium only)
 * is raw, has no CSS property, and is exported for consumers to read.
 */
/* fonts — family group -> (font-family, weights) */
/*
 * Apply a composite type style.
 * @param {String} $family ['sans']  - 'sans' | 'slab'
 * @param {String} $group  ['body']  - 'display' | 'title' | 'body' | 'intro' | 'quote' | 'topline'
 * @param {String} $size   ['medium']- group-dependent size key; ignored for topline (no size axis).
 * @param {String} $weight ['roman'] - 'roman' | 'sbold' | 'bold'
 * @param {Bool}   $italic [false]   - reserved: emits font-style: italic. No italic faces
 *                                     exist in the iris token set yet, so this is a no-op
 *                                     surface until they do (kept so callers are ready).
 */
/* Shorthand for the common body-medium text. */
/* ─── Block / editorial styles as their own mixins ─────────────────────────── */
/* Block-quote / pull-quote style. */
/* Intro / lead paragraph style. */
/* Topline / eyebrow label style (no size axis). */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/mixins/_styles
 * CSS-variable emit for the styles families (box-shadow, gradient, border-width,
 * border-radius). Moved from tokens/_emit-styles (DESYS-1379 restructure).
 * Declaration-only — called inside css-variables' shared :root, preserving the
 * original emission order. Consumed by css-variables/_effects.scss and
 * css-variables/_border.scss.
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/tokens/_styles
 * Composite style maps: box-shadow, gradient, and borders (width + radius). Border
 * width/radius resolve through reference dimensions via functions.ref('dimensions-dimN').
 * _index.scss emits each entry as an --iris-* custom property in :root.
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/tokens/_effects
 * GENERATED by scripts/sync-iris-design-tokens/generators/generate-reference-scss.mjs — do
 * not edit. Box-shadow composites from the committed REST styles artifact
 * (iris-design-tokens/styles/rest/styles.json), emitted per the effectEmit rule in
 * packages/core/tokens/reference-scss.config.mjs (colorBound=literal) and
 * consumed by the hand-authored _styles.scss (`effects.$box-shadow`).
 */
/* box-shadow — composites re-exported from the generated _effects.scss (effects.$box-shadow),
   keyed name -> value; the shape _index.scss consumes is name -> value. */
/* gradient */
/* borders — width + radius, resolved through reference dimensions */
/* Mode order of every color entry's 5-value list. */
/* Breakpoint order (ascending), used to resolve a below($bp) override to the key it
   carries in the keyed layout/typography maps. */
/* Color + surface-color maps -> theme selectors (light = :root). */
:root {
  --iris-action-border-1: #000028;
  --iris-action-border-1-active: #000028;
  --iris-action-border-1-hover: #000028;
  --iris-action-border-2: var(--iris-action-content-2);
  --iris-action-border-2-active: var(--iris-action-content-2-active);
  --iris-action-border-2-hover: var(--iris-action-content-2-hover);
  --iris-action-border-3: #66667e;
  --iris-action-border-disabled: #9999a9;
  --iris-action-border-transparent: rgba(255, 255, 255, 0);
  --iris-action-content-1: #000;
  --iris-action-content-2: #017878;
  --iris-action-content-2-active: #005c6c;
  --iris-action-content-2-hover: #003d55;
  --iris-action-content-3: #000;
  --iris-action-content-danger: var(--iris-text-danger);
  --iris-action-content-disabled: #66667e;
  --iris-action-content-visited: #005c6c;
  --iris-action-fill-1: #00c1b6;
  --iris-action-fill-1-active: #00e5aa;
  --iris-action-fill-1-hover: #00ffb9;
  --iris-action-fill-2: rgba(255, 255, 255, 0);
  --iris-action-fill-2-active: var(--iris-base-3);
  --iris-action-fill-2-hover: var(--iris-base-1);
  --iris-action-fill-2-selected: var(--iris-base-selected);
  --iris-action-fill-3: #ebebee;
  --iris-action-fill-3-active: #ebebee;
  --iris-action-fill-3-hover: #d9d9df;
  --iris-action-fill-4: #000028;
  --iris-action-fill-4-solid-active: #005c6c;
  --iris-action-fill-4-solid-hover: #003d55;
  --iris-action-fill-bdp-active: #62eec7;
  --iris-action-fill-bdp-hover: #c5ffef;
  --iris-action-fill-commerce: #faa50a;
  --iris-action-fill-commerce-active: #eb780a;
  --iris-action-fill-commerce-hover: #eb780a;
  --iris-action-fill-danger: #b81e31;
  --iris-action-fill-danger-active: #b81e31;
  --iris-action-fill-danger-hover: #961934;
  --iris-action-fill-disabled: #f5f5f6;
  --iris-base-0: #fff;
  --iris-base-1: #f3f3f0;
  --iris-base-2: #f8f8f6;
  --iris-base-3: #e9e9e4;
  --iris-base-caution: #fffbea;
  --iris-base-danger: #fff4f5;
  --iris-base-disabled: #f5f5f6;
  --iris-base-featured: #ccebeb;
  --iris-base-fill-1: #f3f3f0;
  --iris-base-fill-1-hover: #f8f8f6;
  --iris-base-hover: #e8e8e3;
  --iris-base-info: #f2fcfd;
  --iris-base-inverse-0: #000028;
  --iris-base-inverse-1: #00183b;
  --iris-base-inverse-2: #00314f;
  --iris-base-inverse-3: #003d59;
  --iris-base-inverse-selected: #005c6c;
  --iris-base-raised: #fff;
  --iris-base-selected: #ccebeb;
  --iris-base-success: #f2fdf7;
  --iris-base-warning: #fff4e5;
  --iris-constant-bold-green: #00ffb9;
  --iris-constant-deep-blue: #000028;
  --iris-constant-white: #fff;
  --iris-forms-border-1: #66667e;
  --iris-opacity-box-shadow: rgba(0, 0, 40, 0.08);
  --iris-opacity-contrast-0: rgba(0, 0, 40, 0);
  --iris-opacity-contrast-1: rgba(0, 0, 40, 0.08);
  --iris-opacity-contrast-2: rgba(0, 0, 40, 0.12);
  --iris-opacity-contrast-3: rgba(0, 0, 40, 0.24);
  --iris-opacity-contrast-4: rgba(0, 0, 40, 0.48);
  --iris-opacity-contrast-5: rgba(0, 0, 40, 0.72);
  --iris-opacity-contrast-6: #000028;
  --iris-opacity-fade-0: rgba(255, 255, 255, 0);
  --iris-opacity-fade-1: rgba(255, 255, 255, 0.08);
  --iris-opacity-fade-2: rgba(255, 255, 255, 0.12);
  --iris-opacity-fade-3: rgba(255, 255, 255, 0.24);
  --iris-opacity-fade-4: rgba(255, 255, 255, 0.48);
  --iris-opacity-fade-5: rgba(255, 255, 255, 0.72);
  --iris-opacity-fade-6: #fff;
  --iris-status-caution: #ffd732;
  --iris-status-danger: #b81e31;
  --iris-status-featured: #00e6dc;
  --iris-status-information: #007eb1;
  --iris-status-success: #01893a;
  --iris-status-warning: #e96401;
  --iris-text-1: #000028;
  --iris-text-2: #4c4c68;
  --iris-text-3: #737389;
  --iris-text-caution: var(--iris-text-1);
  --iris-text-danger: #b81e31;
  --iris-text-disabled: #9999a9;
  --iris-text-featured-info: var(--iris-text-1);
  --iris-text-highlight-interactive: #017878;
  --iris-text-highlight-interactive-hover: #003d55;
  --iris-text-info: #00557c;
  --iris-text-inverse-1: #fff;
  --iris-text-inverse-2: #b3b3be;
  --iris-text-inverse-highlight-interactive: #00c1b6;
  --iris-text-inverse-highlight-interactive-hover: #00ffb9;
  --iris-text-primary: #000028;
  --iris-text-secondary: #4c4c68;
  --iris-text-success: #016035;
  --iris-text-warning: #a5470d;
  --iris-ui-1: #000028;
  --iris-ui-2: #7d8099;
  --iris-ui-3: #ccccd4;
  --iris-ui-4: #017878;
  --iris-ui-disabled: #9999a9;
  --iris-ui-focus: #1491eb;
  --iris-ui-interactive-1: #005c6c;
  --iris-ui-interactive-2: #003d55;
  --iris-ui-inverse-1: #fff;
  --iris-ui-inverse-2: #66667e;
  --iris-ui-inverse-interactive-1: #00c1b6;
  --iris-ui-inverse-interactive-2: #00ffb9;
}

.iris-ui-theme-dark,
[data-iris-theme=dark] {
  --iris-action-border-1: #fff;
  --iris-action-border-1-active: #fff;
  --iris-action-border-1-hover: #fff;
  --iris-action-border-2: var(--iris-action-content-2);
  --iris-action-border-2-active: var(--iris-action-content-2-active);
  --iris-action-border-2-hover: var(--iris-action-content-2-hover);
  --iris-action-border-3: #b3b3be;
  --iris-action-border-disabled: #9999a9;
  --iris-action-border-transparent: rgba(255, 255, 255, 0);
  --iris-action-content-1: #000028;
  --iris-action-content-2: #0cc;
  --iris-action-content-2-active: #00e5aa;
  --iris-action-content-2-hover: #00ffb9;
  --iris-action-content-3: #fff;
  --iris-action-content-danger: #ff7687;
  --iris-action-content-disabled: #737389;
  --iris-action-content-visited: #00a3ab;
  --iris-action-fill-1: #0cc;
  --iris-action-fill-1-active: #00e5aa;
  --iris-action-fill-1-hover: #00ffb9;
  --iris-action-fill-2: rgba(0, 0, 40, 0);
  --iris-action-fill-2-active: var(--iris-base-3);
  --iris-action-fill-2-hover: var(--iris-base-2);
  --iris-action-fill-2-selected: #00ffb9;
  --iris-action-fill-3: #333353;
  --iris-action-fill-3-active: #262648;
  --iris-action-fill-3-hover: #4c4c68;
  --iris-action-fill-4: #fff;
  --iris-action-fill-4-solid-active: #00e5aa;
  --iris-action-fill-4-solid-hover: #00ffb9;
  --iris-action-fill-bdp-active: #00e5aa;
  --iris-action-fill-bdp-hover: #c5ffef;
  --iris-action-fill-commerce: #faa50a;
  --iris-action-fill-commerce-active: #eb780a;
  --iris-action-fill-commerce-hover: #eb780a;
  --iris-action-fill-danger: #b81e31;
  --iris-action-fill-danger-active: #b81e31;
  --iris-action-fill-danger-hover: #d72339;
  --iris-action-fill-disabled: #4c4c68;
  --iris-base-0: #000028;
  --iris-base-1: #00183b;
  --iris-base-2: #00314f;
  --iris-base-3: #003d59;
  --iris-base-caution: #4b433a;
  --iris-base-danger: #410b2d;
  --iris-base-disabled: #4c4c68;
  --iris-base-featured: #002949;
  --iris-base-fill-1: #00183b;
  --iris-base-fill-1-hover: #00314f;
  --iris-base-hover: #002949;
  --iris-base-info: #002949;
  --iris-base-inverse-0: #fff;
  --iris-base-inverse-1: #f3f3f0;
  --iris-base-inverse-2: #f8f8f6;
  --iris-base-inverse-3: #e9e9e4;
  --iris-base-inverse-selected: #00ffb9;
  --iris-base-raised: #00183b;
  --iris-base-selected: #003345;
  --iris-base-success: #004037;
  --iris-base-warning: #5d2818;
  --iris-constant-bold-green: #00ffb9;
  --iris-constant-deep-blue: #000028;
  --iris-constant-white: #fff;
  --iris-forms-border-1: #b3b3be;
  --iris-opacity-box-shadow: rgba(0, 0, 40, 0);
  --iris-opacity-contrast-0: rgba(255, 255, 255, 0);
  --iris-opacity-contrast-1: rgba(255, 255, 255, 0.08);
  --iris-opacity-contrast-2: rgba(255, 255, 255, 0.12);
  --iris-opacity-contrast-3: rgba(255, 255, 255, 0.24);
  --iris-opacity-contrast-4: rgba(255, 255, 255, 0.48);
  --iris-opacity-contrast-5: rgba(255, 255, 255, 0.72);
  --iris-opacity-contrast-6: #fff;
  --iris-opacity-fade-0: rgba(0, 0, 40, 0);
  --iris-opacity-fade-1: rgba(0, 0, 40, 0.08);
  --iris-opacity-fade-2: rgba(0, 0, 40, 0.12);
  --iris-opacity-fade-3: rgba(0, 0, 40, 0.24);
  --iris-opacity-fade-4: rgba(0, 0, 40, 0.48);
  --iris-opacity-fade-5: rgba(0, 0, 40, 0.72);
  --iris-opacity-fade-6: #000028;
  --iris-status-caution: #ffd732;
  --iris-status-danger: #ff7687;
  --iris-status-featured: #00e6dc;
  --iris-status-information: #0087be;
  --iris-status-success: #01d65a;
  --iris-status-warning: #ff9000;
  --iris-text-1: #fff;
  --iris-text-2: #b3b3be;
  --iris-text-3: #7d8099;
  --iris-text-caution: var(--iris-text-1);
  --iris-text-danger: #fcccd7;
  --iris-text-disabled: #737389;
  --iris-text-featured-info: var(--iris-text-1);
  --iris-text-highlight-interactive: #0cc;
  --iris-text-highlight-interactive-hover: #00ffb9;
  --iris-text-info: #ccf2f8;
  --iris-text-inverse-1: #000028;
  --iris-text-inverse-2: #4c4c68;
  --iris-text-inverse-highlight-interactive: #017878;
  --iris-text-inverse-highlight-interactive-hover: #003d55;
  --iris-text-primary: #fff;
  --iris-text-secondary: #b3b3be;
  --iris-text-success: #ccf7de;
  --iris-text-warning: #fff4e5;
  --iris-ui-1: #fff;
  --iris-ui-2: #66667e;
  --iris-ui-3: #333353;
  --iris-ui-4: #0cc;
  --iris-ui-disabled: #737389;
  --iris-ui-focus: #1491eb;
  --iris-ui-interactive-1: #00ffb9;
  --iris-ui-interactive-2: #00e5aa;
  --iris-ui-inverse-1: #000028;
  --iris-ui-inverse-2: #737389;
  --iris-ui-inverse-interactive-1: #005c6c;
  --iris-ui-inverse-interactive-2: #003d55;
}

.iris-ui-theme-sand,
[data-iris-theme=sand] {
  --iris-action-border-1: #000028;
  --iris-action-border-1-active: #000028;
  --iris-action-border-1-hover: #000028;
  --iris-action-border-2: var(--iris-action-content-2);
  --iris-action-border-2-active: var(--iris-action-content-2-active);
  --iris-action-border-2-hover: var(--iris-action-content-2-hover);
  --iris-action-border-3: #66667e;
  --iris-action-border-disabled: #9999a9;
  --iris-action-border-transparent: rgba(255, 255, 255, 0);
  --iris-action-content-1: #000;
  --iris-action-content-2: #017878;
  --iris-action-content-2-active: #005c6c;
  --iris-action-content-2-hover: #003d55;
  --iris-action-content-3: #000;
  --iris-action-content-danger: var(--iris-text-danger);
  --iris-action-content-disabled: #9999a9;
  --iris-action-content-visited: #005c6c;
  --iris-action-fill-1: #00c1b6;
  --iris-action-fill-1-active: #005c6c;
  --iris-action-fill-1-hover: #003d55;
  --iris-action-fill-2: rgba(255, 255, 255, 0);
  --iris-action-fill-2-active: var(--iris-base-3);
  --iris-action-fill-2-hover: var(--iris-base-1);
  --iris-action-fill-2-selected: var(--iris-base-selected);
  --iris-action-fill-3: #d9d9df;
  --iris-action-fill-3-active: #ebebee;
  --iris-action-fill-3-hover: #ccccd4;
  --iris-action-fill-4: #000028;
  --iris-action-fill-4-solid-active: #005c6c;
  --iris-action-fill-4-solid-hover: #003d55;
  --iris-action-fill-bdp-active: #62eec7;
  --iris-action-fill-bdp-hover: #c5ffef;
  --iris-action-fill-commerce: #faa50a;
  --iris-action-fill-commerce-active: #eb780a;
  --iris-action-fill-commerce-hover: #eb780a;
  --iris-action-fill-danger: #b81e31;
  --iris-action-fill-danger-active: #b81e31;
  --iris-action-fill-danger-hover: #961934;
  --iris-action-fill-disabled: #b3b3be;
  --iris-base-0: #f3f3f0;
  --iris-base-1: #e9e9e4;
  --iris-base-2: #ededea;
  --iris-base-3: #e2e2dd;
  --iris-base-caution: #fff3c6;
  --iris-base-danger: #fcccd7;
  --iris-base-disabled: #ccccd4;
  --iris-base-featured: #ccebeb;
  --iris-base-fill-1: #00183b;
  --iris-base-fill-1-hover: #002949;
  --iris-base-hover: #d8d8d4;
  --iris-base-info: #ccf2f8;
  --iris-base-inverse-0: #000028;
  --iris-base-inverse-1: #000028;
  --iris-base-inverse-2: #19193d;
  --iris-base-inverse-3: #333353;
  --iris-base-inverse-selected: #003d55;
  --iris-base-raised: #f8f8f6;
  --iris-base-selected: #ccebeb;
  --iris-base-success: #ccf7de;
  --iris-base-warning: #ffdeb2;
  --iris-constant-bold-green: #00ffb9;
  --iris-constant-deep-blue: #000028;
  --iris-constant-white: #fff;
  --iris-forms-border-1: #66667e;
  --iris-opacity-box-shadow: rgba(0, 0, 40, 0.08);
  --iris-opacity-contrast-0: rgba(0, 0, 40, 0);
  --iris-opacity-contrast-1: rgba(0, 0, 40, 0.08);
  --iris-opacity-contrast-2: rgba(0, 0, 40, 0.12);
  --iris-opacity-contrast-3: rgba(0, 0, 40, 0.24);
  --iris-opacity-contrast-4: rgba(0, 0, 40, 0.48);
  --iris-opacity-contrast-5: rgba(0, 0, 40, 0.72);
  --iris-opacity-contrast-6: #000028;
  --iris-opacity-fade-0: rgba(255, 255, 255, 0);
  --iris-opacity-fade-1: rgba(255, 255, 255, 0.08);
  --iris-opacity-fade-2: rgba(255, 255, 255, 0.12);
  --iris-opacity-fade-3: rgba(255, 255, 255, 0.24);
  --iris-opacity-fade-4: rgba(255, 255, 255, 0.48);
  --iris-opacity-fade-5: rgba(255, 255, 255, 0.72);
  --iris-opacity-fade-6: #fff;
  --iris-status-caution: #ffd732;
  --iris-status-danger: #b81e31;
  --iris-status-featured: #00e6dc;
  --iris-status-information: #007eb1;
  --iris-status-success: #01893a;
  --iris-status-warning: #e96401;
  --iris-text-1: #000028;
  --iris-text-2: #4c4c68;
  --iris-text-3: #66667e;
  --iris-text-caution: var(--iris-text-1);
  --iris-text-danger: #b81e31;
  --iris-text-disabled: #9999a9;
  --iris-text-featured-info: var(--iris-text-1);
  --iris-text-highlight-interactive: #017878;
  --iris-text-highlight-interactive-hover: #003d55;
  --iris-text-info: #00557c;
  --iris-text-inverse-1: #fff;
  --iris-text-inverse-2: #b3b3be;
  --iris-text-inverse-highlight-interactive: #00c1b6;
  --iris-text-inverse-highlight-interactive-hover: #00ffb9;
  --iris-text-primary: #fff;
  --iris-text-secondary: #b3b3be;
  --iris-text-success: #016035;
  --iris-text-warning: #a5470d;
  --iris-ui-1: #000028;
  --iris-ui-2: #737389;
  --iris-ui-3: #b3b3be;
  --iris-ui-4: #017878;
  --iris-ui-disabled: #9999a9;
  --iris-ui-focus: #1491eb;
  --iris-ui-interactive-1: #003d55;
  --iris-ui-interactive-2: #001f39;
  --iris-ui-inverse-1: #fff;
  --iris-ui-inverse-2: #66667e;
  --iris-ui-inverse-interactive-1: #00c1b6;
  --iris-ui-inverse-interactive-2: #00ffb9;
}

.iris-ui-theme-wireframe,
[data-iris-theme=wireframe] {
  --iris-action-border-1: #000028;
  --iris-action-border-1-active: #000028;
  --iris-action-border-1-hover: #000028;
  --iris-action-border-2: #66667e;
  --iris-action-border-2-active: #66667e;
  --iris-action-border-2-hover: #4c4c68;
  --iris-action-border-3: #66667e;
  --iris-action-border-disabled: #9999a9;
  --iris-action-border-transparent: rgba(255, 255, 255, 0);
  --iris-action-content-1: #fff;
  --iris-action-content-2: #737389;
  --iris-action-content-2-active: #4c4c68;
  --iris-action-content-2-hover: #333353;
  --iris-action-content-3: #000028;
  --iris-action-content-danger: #333353;
  --iris-action-content-disabled: #9999a9;
  --iris-action-content-visited: #4c4c68;
  --iris-action-fill-1: #737389;
  --iris-action-fill-1-active: #4c4c68;
  --iris-action-fill-1-hover: #333353;
  --iris-action-fill-2: rgba(255, 255, 255, 0);
  --iris-action-fill-2-active: #ebebee;
  --iris-action-fill-2-hover: #d9d9df;
  --iris-action-fill-2-selected: var(--iris-base-selected);
  --iris-action-fill-3: #d9d9df;
  --iris-action-fill-3-active: #ebebee;
  --iris-action-fill-3-hover: #ccccd4;
  --iris-action-fill-4: #000028;
  --iris-action-fill-4-solid-active: #66667e;
  --iris-action-fill-4-solid-hover: #333353;
  --iris-action-fill-bdp-active: #9999a9;
  --iris-action-fill-bdp-hover: #ccccd4;
  --iris-action-fill-commerce: #b3b3be;
  --iris-action-fill-commerce-active: #7d8099;
  --iris-action-fill-commerce-hover: #7d8099;
  --iris-action-fill-danger: #66667e;
  --iris-action-fill-danger-active: #66667e;
  --iris-action-fill-danger-hover: #333353;
  --iris-action-fill-disabled: #b3b3be;
  --iris-base-0: #d9d9df;
  --iris-base-1: #ebebee;
  --iris-base-2: #f5f5f6;
  --iris-base-3: #d9d9df;
  --iris-base-caution: #d9d9df;
  --iris-base-danger: #d9d9df;
  --iris-base-disabled: #ccccd4;
  --iris-base-featured: #d9d9df;
  --iris-base-fill-1: #ebebee;
  --iris-base-fill-1-hover: #f5f5f6;
  --iris-base-hover: #ccccd4;
  --iris-base-info: #d9d9df;
  --iris-base-inverse-0: #000028;
  --iris-base-inverse-1: #000028;
  --iris-base-inverse-2: #4c4c68;
  --iris-base-inverse-3: #66667e;
  --iris-base-inverse-selected: #333353;
  --iris-base-raised: #f5f5f6;
  --iris-base-selected: #f5f5f6;
  --iris-base-success: #d9d9df;
  --iris-base-warning: #d9d9df;
  --iris-constant-bold-green: #737389;
  --iris-constant-deep-blue: #000028;
  --iris-constant-white: #fff;
  --iris-forms-border-1: #4c4c68;
  --iris-opacity-box-shadow: rgba(0, 0, 40, 0.08);
  --iris-opacity-contrast-0: rgba(0, 0, 40, 0);
  --iris-opacity-contrast-1: rgba(0, 0, 40, 0.08);
  --iris-opacity-contrast-2: rgba(0, 0, 40, 0.12);
  --iris-opacity-contrast-3: rgba(0, 0, 40, 0.24);
  --iris-opacity-contrast-4: rgba(0, 0, 40, 0.48);
  --iris-opacity-contrast-5: rgba(0, 0, 40, 0.72);
  --iris-opacity-contrast-6: #000028;
  --iris-opacity-fade-0: rgba(255, 255, 255, 0);
  --iris-opacity-fade-1: rgba(255, 255, 255, 0.08);
  --iris-opacity-fade-2: rgba(255, 255, 255, 0.12);
  --iris-opacity-fade-3: rgba(255, 255, 255, 0.24);
  --iris-opacity-fade-4: rgba(255, 255, 255, 0.48);
  --iris-opacity-fade-5: rgba(255, 255, 255, 0.72);
  --iris-opacity-fade-6: #fff;
  --iris-status-caution: #b3b3be;
  --iris-status-danger: #4c4c68;
  --iris-status-featured: #b3b3be;
  --iris-status-information: #7d8099;
  --iris-status-success: #737389;
  --iris-status-warning: #66667e;
  --iris-text-1: #000028;
  --iris-text-2: #4c4c68;
  --iris-text-3: #66667e;
  --iris-text-caution: #000028;
  --iris-text-danger: #4c4c68;
  --iris-text-disabled: #9999a9;
  --iris-text-featured-info: #000028;
  --iris-text-highlight-interactive: #737389;
  --iris-text-highlight-interactive-hover: #333353;
  --iris-text-info: #4c4c68;
  --iris-text-inverse-1: #fff;
  --iris-text-inverse-2: #b3b3be;
  --iris-text-inverse-highlight-interactive: #9999a9;
  --iris-text-inverse-highlight-interactive-hover: #d9d9df;
  --iris-text-primary: #000028;
  --iris-text-secondary: #4c4c68;
  --iris-text-success: #4c4c68;
  --iris-text-warning: #66667e;
  --iris-ui-1: #000028;
  --iris-ui-2: #737389;
  --iris-ui-3: #b3b3be;
  --iris-ui-4: #66667e;
  --iris-ui-disabled: #9999a9;
  --iris-ui-focus: #737389;
  --iris-ui-interactive-1: #333353;
  --iris-ui-interactive-2: #262648;
  --iris-ui-inverse-1: #fff;
  --iris-ui-inverse-2: #66667e;
  --iris-ui-inverse-interactive-1: #9999a9;
  --iris-ui-inverse-interactive-2: #d9d9df;
}

.iris-ui-theme-dark-brand,
[data-iris-theme=dark-brand] {
  --iris-action-border-1: #fff;
  --iris-action-border-1-active: #fff;
  --iris-action-border-1-hover: #fff;
  --iris-action-border-2: var(--iris-action-content-2);
  --iris-action-border-2-active: var(--iris-action-content-2-active);
  --iris-action-border-2-hover: var(--iris-action-content-2-hover);
  --iris-action-border-3: #b3b3be;
  --iris-action-border-disabled: #9999a9;
  --iris-action-border-transparent: rgba(255, 255, 255, 0);
  --iris-action-content-1: #000028;
  --iris-action-content-2: #00e6dc;
  --iris-action-content-2-active: #099;
  --iris-action-content-2-hover: #00ffb9;
  --iris-action-content-3: #fff;
  --iris-action-content-danger: #ff7687;
  --iris-action-content-disabled: #737389;
  --iris-action-content-visited: #00a3ab;
  --iris-action-fill-1: #00e6dc;
  --iris-action-fill-1-active: #099;
  --iris-action-fill-1-hover: #00ffb9;
  --iris-action-fill-2: rgba(0, 0, 40, 0);
  --iris-action-fill-2-active: var(--iris-base-3);
  --iris-action-fill-2-hover: var(--iris-base-2);
  --iris-action-fill-2-selected: #00ffb9;
  --iris-action-fill-3: #333353;
  --iris-action-fill-3-active: #262648;
  --iris-action-fill-3-hover: #4c4c68;
  --iris-action-fill-4: #fff;
  --iris-action-fill-4-solid-active: #00e5aa;
  --iris-action-fill-4-solid-hover: #00ffb9;
  --iris-action-fill-bdp-active: #00e5aa;
  --iris-action-fill-bdp-hover: #c5ffef;
  --iris-action-fill-commerce: #faa50a;
  --iris-action-fill-commerce-active: #eb780a;
  --iris-action-fill-commerce-hover: #eb780a;
  --iris-action-fill-danger: #b81e31;
  --iris-action-fill-danger-active: #b81e31;
  --iris-action-fill-danger-hover: #d72339;
  --iris-action-fill-disabled: #4c4c68;
  --iris-base-0: #000028;
  --iris-base-1: #00183b;
  --iris-base-2: #00314f;
  --iris-base-3: #003d59;
  --iris-base-caution: #4b433a;
  --iris-base-danger: #410b2d;
  --iris-base-disabled: #4c4c68;
  --iris-base-featured: #002949;
  --iris-base-fill-1: #00183b;
  --iris-base-fill-1-hover: #00314f;
  --iris-base-hover: #002949;
  --iris-base-info: #002949;
  --iris-base-inverse-0: #fff;
  --iris-base-inverse-1: #fff;
  --iris-base-inverse-2: #f3f3f0;
  --iris-base-inverse-3: #e9e9e4;
  --iris-base-inverse-selected: #00ffb9;
  --iris-base-raised: #00183b;
  --iris-base-selected: #003345;
  --iris-base-success: #004037;
  --iris-base-warning: #5d2818;
  --iris-constant-bold-green: #00ffb9;
  --iris-constant-deep-blue: #000028;
  --iris-constant-white: #fff;
  --iris-forms-border-1: inherit;
  --iris-opacity-box-shadow: rgba(0, 0, 40, 0);
  --iris-opacity-contrast-0: rgba(255, 255, 255, 0);
  --iris-opacity-contrast-1: rgba(255, 255, 255, 0.08);
  --iris-opacity-contrast-2: rgba(255, 255, 255, 0.12);
  --iris-opacity-contrast-3: rgba(255, 255, 255, 0.24);
  --iris-opacity-contrast-4: rgba(255, 255, 255, 0.48);
  --iris-opacity-contrast-5: rgba(255, 255, 255, 0.72);
  --iris-opacity-contrast-6: #fff;
  --iris-opacity-fade-0: rgba(0, 0, 40, 0);
  --iris-opacity-fade-1: rgba(0, 0, 40, 0.08);
  --iris-opacity-fade-2: rgba(0, 0, 40, 0.12);
  --iris-opacity-fade-3: rgba(0, 0, 40, 0.24);
  --iris-opacity-fade-4: rgba(0, 0, 40, 0.48);
  --iris-opacity-fade-5: rgba(0, 0, 40, 0.72);
  --iris-opacity-fade-6: #000028;
  --iris-status-caution: #ffd732;
  --iris-status-danger: #ff7687;
  --iris-status-featured: #00e6dc;
  --iris-status-information: #0087be;
  --iris-status-success: #01d65a;
  --iris-status-warning: #ff9000;
  --iris-text-1: #fff;
  --iris-text-2: #b3b3be;
  --iris-text-3: #7d8099;
  --iris-text-caution: var(--iris-text-1);
  --iris-text-danger: #fcccd7;
  --iris-text-disabled: #737389;
  --iris-text-featured-info: var(--iris-text-1);
  --iris-text-highlight-interactive: #00e6dc;
  --iris-text-highlight-interactive-hover: #00ffb9;
  --iris-text-info: #ccf2f8;
  --iris-text-inverse-1: #000028;
  --iris-text-inverse-2: #4c4c68;
  --iris-text-inverse-highlight-interactive: #017878;
  --iris-text-inverse-highlight-interactive-hover: #003d55;
  --iris-text-primary: #fff;
  --iris-text-secondary: #b3b3be;
  --iris-text-success: #ccf7de;
  --iris-text-warning: #fff4e5;
  --iris-ui-1: #fff;
  --iris-ui-2: #66667e;
  --iris-ui-3: #333353;
  --iris-ui-4: #00e6dc;
  --iris-ui-disabled: #737389;
  --iris-ui-focus: #00e6dc;
  --iris-ui-interactive-1: #00e6dc;
  --iris-ui-interactive-2: #00ffb9;
  --iris-ui-inverse-1: #000028;
  --iris-ui-inverse-2: #737389;
  --iris-ui-inverse-interactive-1: #017878;
  --iris-ui-inverse-interactive-2: #003d55;
}

:root {
  --iris-surface-forms-fill: #fff;
  --iris-surface-forms-fill-disabled: #f5f5f6;
  --iris-surface-forms-fill-hover: #ebebee;
  --iris-surface-forms-fill-interactive: var(--iris-base-selected);
  --iris-surface-forms-fill-interactive-2: #62eec7;
  --iris-surface-forms-fill-transparent: rgba(255, 255, 255, 0);
  --iris-surface-forms-ui: #4c4c68;
  --iris-surface-forms-ui-disabled: #9999a9;
  --iris-surface-forms-ui-interactive-1: #099;
  --iris-surface-forms-ui-interactive-2: var(--iris-ui-interactive-2);
  --iris-surface-forms-ui-placeholder: var(--iris-text-3);
  --iris-surface-table-row-fill: #f8f8f6;
  --iris-surface-table-row-fill-2: #f3f3f0;
  --iris-surface-table-row-fill-hover: #f5f5f6;
  --iris-surface-scrollbar-thumb: #d9d9df;
  --iris-surface-scrollbar-track: #f5f5f6;
}

.iris-ui-theme-dark,
[data-iris-theme=dark] {
  --iris-surface-forms-fill: #000028;
  --iris-surface-forms-fill-disabled: #262648;
  --iris-surface-forms-fill-hover: #262648;
  --iris-surface-forms-fill-interactive: #001f39;
  --iris-surface-forms-fill-interactive-2: #005159;
  --iris-surface-forms-fill-transparent: rgba(255, 255, 255, 0);
  --iris-surface-forms-ui: #b3b3be;
  --iris-surface-forms-ui-disabled: #737389;
  --iris-surface-forms-ui-interactive-1: #00e6dc;
  --iris-surface-forms-ui-interactive-2: #00ffb9;
  --iris-surface-forms-ui-placeholder: var(--iris-text-3);
  --iris-surface-table-row-fill: #001034;
  --iris-surface-table-row-fill-2: #00183b;
  --iris-surface-table-row-fill-hover: #002949;
  --iris-surface-scrollbar-thumb: #4c4c68;
  --iris-surface-scrollbar-track: #262648;
}

.iris-ui-theme-sand,
[data-iris-theme=sand] {
  --iris-surface-forms-fill: #f3f3f0;
  --iris-surface-forms-fill-disabled: #e8e8e3;
  --iris-surface-forms-fill-hover: #e2e2dd;
  --iris-surface-forms-fill-interactive: var(--iris-base-selected);
  --iris-surface-forms-fill-interactive-2: #62eec7;
  --iris-surface-forms-fill-transparent: rgba(255, 255, 255, 0);
  --iris-surface-forms-ui: #4c4c68;
  --iris-surface-forms-ui-disabled: #9999a9;
  --iris-surface-forms-ui-interactive-1: #099;
  --iris-surface-forms-ui-interactive-2: var(--iris-ui-interactive-2);
  --iris-surface-forms-ui-placeholder: var(--iris-text-3);
  --iris-surface-table-row-fill: #ededea;
  --iris-surface-table-row-fill-2: #dfdfd9;
  --iris-surface-table-row-fill-hover: #f8f8f6;
  --iris-surface-scrollbar-thumb: #e8e8e3;
  --iris-surface-scrollbar-track: #f8f8f6;
}

.iris-ui-theme-wireframe,
[data-iris-theme=wireframe] {
  --iris-surface-forms-fill: #ebebee;
  --iris-surface-forms-fill-disabled: #d9d9df;
  --iris-surface-forms-fill-hover: #d9d9df;
  --iris-surface-forms-fill-interactive: var(--iris-base-selected);
  --iris-surface-forms-fill-interactive-2: #b3b3be;
  --iris-surface-forms-fill-transparent: rgba(255, 255, 255, 0);
  --iris-surface-forms-ui: #4c4c68;
  --iris-surface-forms-ui-disabled: #9999a9;
  --iris-surface-forms-ui-interactive-1: #66667e;
  --iris-surface-forms-ui-interactive-2: #262648;
  --iris-surface-forms-ui-placeholder: #66667e;
  --iris-surface-table-row-fill: #d9d9df;
  --iris-surface-table-row-fill-2: #ccccd4;
  --iris-surface-table-row-fill-hover: #d9d9df;
  --iris-surface-scrollbar-thumb: #d9d9df;
  --iris-surface-scrollbar-track: #f5f5f6;
}

.iris-ui-theme-dark-brand,
[data-iris-theme=dark-brand] {
  --iris-surface-forms-fill: inherit;
  --iris-surface-forms-fill-disabled: #262648;
  --iris-surface-forms-fill-hover: #262648;
  --iris-surface-forms-fill-interactive: var(--iris-base-selected);
  --iris-surface-forms-fill-interactive-2: #003d55;
  --iris-surface-forms-fill-transparent: rgba(255, 255, 255, 0);
  --iris-surface-forms-ui: inherit;
  --iris-surface-forms-ui-disabled: #737389;
  --iris-surface-forms-ui-interactive-1: #00c1b6;
  --iris-surface-forms-ui-interactive-2: #00ffb9;
  --iris-surface-forms-ui-placeholder: var(--iris-text-3);
  --iris-surface-table-row-fill: var(--iris-base-0);
  --iris-surface-table-row-fill-2: var(--iris-base-2);
  --iris-surface-table-row-fill-hover: var(--iris-base-1);
  --iris-surface-scrollbar-thumb: #4c4c68;
  --iris-surface-scrollbar-track: #262648;
}

/* Flat semantic maps -> --iris-* in :root (declaration-only families, in order). */
:root {
  /* Unified spacer scale (DESYS-1378 AC-C4): one --iris-spacer-{px} per distinct px. */
  --iris-spacer-neg-2: -2px;
  --iris-spacer-1: 1px;
  --iris-spacer-2: 2px;
  --iris-spacer-3: 3px;
  --iris-spacer-4: 4px;
  --iris-spacer-6: 6px;
  --iris-spacer-8: 8px;
  --iris-spacer-12: 12px;
  --iris-spacer-16: 16px;
  --iris-spacer-20: 20px;
  --iris-spacer-24: 24px;
  --iris-spacer-28: 28px;
  --iris-spacer-32: 32px;
  --iris-spacer-40: 40px;
  --iris-spacer-80: 80px;
  --iris-spacer-120: 120px;
  --iris-width-4: 4px;
  --iris-width-8: 8px;
  --iris-width-12: 12px;
  --iris-width-16: 16px;
  --iris-width-20: 20px;
  --iris-width-24: 24px;
  --iris-width-32: 32px;
  --iris-width-40: 40px;
  --iris-width-48: 48px;
  --iris-height-4: 4px;
  --iris-height-8: 8px;
  --iris-height-12: 12px;
  --iris-height-16: 16px;
  --iris-height-20: 20px;
  --iris-height-24: 24px;
  --iris-height-32: 32px;
  --iris-height-40: 40px;
  --iris-height-48: 48px;
  --iris-height-56: 56px;
  --iris-grid-gutter-width: 32px;
  --iris-grid-grid-columns: 12;
  --iris-size-content-small: 55ch;
  --iris-size-content-medium: 68ch;
  --iris-size-content-large: 80ch;
  --iris-size-fluid-small: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --iris-size-fluid-medium: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --iris-size-fluid-large: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  /* Single-value surface layout tokens (Component-Layout `surface/forms`) -> --iris-surface-* */
  --iris-surface-input-height: 48px;
  --iris-spacing: 4px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-display-large-font-size: 3.75rem;
  --iris-display-large-line-height: 1.2;
  --iris-display-large-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-display-medium-font-size: 3.5rem;
  --iris-display-medium-line-height: 1.2142857143;
  --iris-display-medium-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-display-small-font-size: 2.75rem;
  --iris-display-small-line-height: 1.2727272727;
  --iris-display-small-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-title-large-font-size: 2.5rem;
  --iris-title-large-line-height: 1.2;
  --iris-title-large-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-title-medium-font-size: 2.25rem;
  --iris-title-medium-line-height: 1.2222222222;
  --iris-title-medium-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-title-small-font-size: 1.75rem;
  --iris-title-small-line-height: 1.2857142857;
  --iris-title-small-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-body-x-large-font-size: 1.375rem;
  --iris-body-x-large-line-height: 1.4545454545;
  --iris-body-x-large-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-body-large-font-size: 1.25rem;
  --iris-body-large-line-height: 1.6;
  --iris-body-large-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-body-medium-font-size: 1.125rem;
  --iris-body-medium-line-height: 1.5555555556;
  --iris-body-medium-letter-spacing: 0px;
  /* unitless (no CSS property; consumers read it). Strip the px the ref carries. */
  --iris-body-medium-paragraph-spacing: 16;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-body-small-font-size: 1rem;
  --iris-body-small-line-height: 1.5;
  --iris-body-small-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-body-x-small-font-size: 0.875rem;
  --iris-body-x-small-line-height: 1.4285714286;
  --iris-body-x-small-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-intro-large-font-size: 1.5rem;
  --iris-intro-large-line-height: 1.3333333333;
  --iris-intro-large-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-intro-medium-font-size: 1.375rem;
  --iris-intro-medium-line-height: 1.4545454545;
  --iris-intro-medium-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-quote-large-font-size: 2.5rem;
  --iris-quote-large-line-height: 1.2;
  --iris-quote-large-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-quote-medium-font-size: 2.25rem;
  --iris-quote-medium-line-height: 1.2222222222;
  --iris-quote-medium-letter-spacing: 0px;
  /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
  --iris-topline-font-size: 1rem;
  --iris-topline-line-height: 1.5;
  --iris-topline-letter-spacing: 0px;
  --iris-sans-font-family: SiemensSans Pro VF, sans-serif;
  --iris-sans-font-weight-roman: 400;
  --iris-sans-font-weight-sbold: 600;
  --iris-sans-font-weight-bold: 700;
  --iris-slab-font-family: Siemens Slab, serif;
  --iris-slab-font-weight-roman: 400;
  --iris-slab-font-weight-sbold: 600;
  --iris-slab-font-weight-bold: 700;
  --iris-effect-shadow-large: 0 16px 24px rgba(0, 0, 40, 0.08);
  --iris-effect-shadow-medium: 0 8px 16px rgba(0, 0, 40, 0.08);
  --iris-effect-shadow-small: 1px 4px 8px rgba(0, 0, 40, 0.08);
  --iris-effect-gradient-fade-down: linear-gradient(180deg, rgba(0, 0, 40, 0) 0%, rgba(0, 0, 40, 0.08) 100%);
  --iris-effect-gradient-brand: linear-gradient(90deg, #00ffb9 0%, #00e6dc 100%);
  --iris-border-width-small: 1px;
  --iris-border-width-medium: 2px;
  --iris-border-width-large: 3px;
  --iris-border-width-x-large: 4px;
  --iris-border-radius-xx-small: 2px;
  --iris-border-radius-x-small: 4px;
  --iris-border-radius-small: 8px;
  --iris-border-radius-medium: 12px;
  --iris-border-radius-large: 16px;
  --iris-border-radius-x-large: 24px;
  --iris-border-radius-xx-large: 32px;
  --iris-border-radius-round: 9999px;
  --iris-vw-100: 100vw;
  --iris-vw-80: 80vw;
  --iris-vw-60: 60vw;
  --iris-vw-40: 40vw;
  --iris-vw-20: 20vw;
  --iris-z-500: 500;
  --iris-z-400: 400;
  --iris-z-300: 300;
  --iris-z-200: 200;
  --iris-z-100: 100;
  --iris-z-110: 110;
  --iris-grid-container: 1280px;
  --iris-grid-cols: 12;
}

/* Breakpoint-keyed layout maps: desktop at :root + max-width down-level overrides. */
:root {
  --iris-layout-block-container-space-sm: 24px;
  --iris-layout-block-container-space-md: 32px;
  --iris-layout-block-container-space-lg: 40px;
  --iris-layout-block-horizontal-space-sm: 24px;
  --iris-layout-block-horizontal-space-md: 32px;
  --iris-layout-block-horizontal-space-lg: 80px;
  --iris-layout-block-vertical-space-sm: 48px;
  --iris-layout-block-vertical-space-md: 64px;
  --iris-layout-block-vertical-space-lg: 120px;
  --iris-layout-viewport-vp-content-gutter: 32px;
  --iris-layout-viewport-vp-content-margin: 0px;
  --iris-layout-viewport-vp-content-max: 1600px;
  --iris-layout-viewport-vp-width-min: 1680px;
  --iris-layout-viewport-vp-width-max: 5120px;
  --iris-layout-grid-content-width: 1600px;
}

@media (max-width: 1343.98px) {
  :root {
    --iris-layout-block-container-space-sm: 16px;
    --iris-layout-block-container-space-md: 24px;
    --iris-layout-block-container-space-lg: 32px;
    --iris-layout-block-horizontal-space-sm: 16px;
    --iris-layout-block-horizontal-space-md: 32px;
    --iris-layout-block-horizontal-space-lg: 56px;
    --iris-layout-block-vertical-space-sm: 32px;
    --iris-layout-block-vertical-space-md: 48px;
    --iris-layout-block-vertical-space-lg: 80px;
    --iris-layout-viewport-vp-content-gutter: 32px;
    --iris-layout-viewport-vp-content-margin: 0px;
    --iris-layout-viewport-vp-content-max: 1280px;
    --iris-layout-viewport-vp-width-min: 1344px;
    --iris-layout-viewport-vp-width-max: 1679px;
    --iris-layout-grid-content-width: 1280px;
  }
}
@media (max-width: 991.98px) {
  :root {
    --iris-layout-block-container-space-sm: 16px;
    --iris-layout-block-container-space-md: 24px;
    --iris-layout-block-container-space-lg: 24px;
    --iris-layout-block-horizontal-space-sm: 16px;
    --iris-layout-block-horizontal-space-md: 32px;
    --iris-layout-block-horizontal-space-lg: 40px;
    --iris-layout-block-vertical-space-sm: 32px;
    --iris-layout-block-vertical-space-md: 40px;
    --iris-layout-block-vertical-space-lg: 64px;
    --iris-layout-viewport-vp-content-gutter: 32px;
    --iris-layout-viewport-vp-content-margin: 32px;
    --iris-layout-viewport-vp-content-max: 1280px;
    --iris-layout-viewport-vp-width-min: 992px;
    --iris-layout-viewport-vp-width-max: 1343px;
    --iris-layout-grid-content-width: 1280px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --iris-layout-block-container-space-sm: 16px;
    --iris-layout-block-container-space-md: 16px;
    --iris-layout-block-container-space-lg: 24px;
    --iris-layout-block-horizontal-space-sm: 16px;
    --iris-layout-block-horizontal-space-md: 32px;
    --iris-layout-block-horizontal-space-lg: 32px;
    --iris-layout-block-vertical-space-sm: 32px;
    --iris-layout-block-vertical-space-md: 32px;
    --iris-layout-block-vertical-space-lg: 56px;
    --iris-layout-viewport-vp-content-gutter: 32px;
    --iris-layout-viewport-vp-content-margin: 32px;
    --iris-layout-viewport-vp-content-max: 1280px;
    --iris-layout-viewport-vp-width-min: 768px;
    --iris-layout-viewport-vp-width-max: 991px;
    --iris-layout-grid-content-width: 1280px;
  }
}
@media (max-width: 543.98px) {
  :root {
    --iris-layout-block-container-space-sm: 16px;
    --iris-layout-block-container-space-md: 16px;
    --iris-layout-block-container-space-lg: 16px;
    --iris-layout-block-horizontal-space-sm: 16px;
    --iris-layout-block-horizontal-space-md: 32px;
    --iris-layout-block-horizontal-space-lg: 24px;
    --iris-layout-block-vertical-space-sm: 32px;
    --iris-layout-block-vertical-space-md: 32px;
    --iris-layout-block-vertical-space-lg: 48px;
    --iris-layout-viewport-vp-content-gutter: 32px;
    --iris-layout-viewport-vp-content-margin: 32px;
    --iris-layout-viewport-vp-content-max: 1280px;
    --iris-layout-viewport-vp-width-min: 544px;
    --iris-layout-viewport-vp-width-max: 767px;
    --iris-layout-grid-content-width: 1280px;
  }
}
/* Responsive typography overrides, desktop-down across all 5 breakpoints. */
@media (max-width: 1679.98px) {
  :root {
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-large-font-size: 3.75rem;
    --iris-display-large-line-height: 1.2;
    --iris-display-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-medium-font-size: 3rem;
    --iris-display-medium-line-height: 1.1666666667;
    --iris-display-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-small-font-size: 2.5rem;
    --iris-display-small-line-height: 1.2;
    --iris-display-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-large-font-size: 2.25rem;
    --iris-title-large-line-height: 1.3333333333;
    --iris-title-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-medium-font-size: 2rem;
    --iris-title-medium-line-height: 1.375;
    --iris-title-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-small-font-size: 1.5rem;
    --iris-title-small-line-height: 1.3333333333;
    --iris-title-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-x-large-font-size: 1.25rem;
    --iris-body-x-large-line-height: 1.4;
    --iris-body-x-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-large-font-size: 1.125rem;
    --iris-body-large-line-height: 1.5555555556;
    --iris-body-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-medium-font-size: 1rem;
    --iris-body-medium-line-height: 1.5;
    --iris-body-medium-letter-spacing: 0px;
    /* unitless (no CSS property; consumers read it). Strip the px the ref carries. */
    --iris-body-medium-paragraph-spacing: 12;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-small-font-size: 0.875rem;
    --iris-body-small-line-height: 1.4285714286;
    --iris-body-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-x-small-font-size: 0.75rem;
    --iris-body-x-small-line-height: 1.3333333333;
    --iris-body-x-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-intro-large-font-size: 1.375rem;
    --iris-intro-large-line-height: 1.4545454545;
    --iris-intro-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-intro-medium-font-size: 1.25rem;
    --iris-intro-medium-line-height: 1.4;
    --iris-intro-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-quote-large-font-size: 2.25rem;
    --iris-quote-large-line-height: 1.3333333333;
    --iris-quote-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-quote-medium-font-size: 2rem;
    --iris-quote-medium-line-height: 1.375;
    --iris-quote-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-topline-font-size: 0.875rem;
    --iris-topline-line-height: 1.4285714286;
    --iris-topline-letter-spacing: 0px;
  }
}
@media (max-width: 1343.98px) {
  :root {
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-large-font-size: 3.25rem;
    --iris-display-large-line-height: 1.3076923077;
    --iris-display-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-medium-font-size: 2.5rem;
    --iris-display-medium-line-height: 1.2;
    --iris-display-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-small-font-size: 2.25rem;
    --iris-display-small-line-height: 1.3333333333;
    --iris-display-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-large-font-size: 2rem;
    --iris-title-large-line-height: 1.375;
    --iris-title-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-medium-font-size: 1.75rem;
    --iris-title-medium-line-height: 1.2857142857;
    --iris-title-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-small-font-size: 1.5rem;
    --iris-title-small-line-height: 1.3333333333;
    --iris-title-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-x-large-font-size: 1.25rem;
    --iris-body-x-large-line-height: 1.4;
    --iris-body-x-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-large-font-size: 1.125rem;
    --iris-body-large-line-height: 1.5555555556;
    --iris-body-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-medium-font-size: 1rem;
    --iris-body-medium-line-height: 1.5;
    --iris-body-medium-letter-spacing: 0px;
    /* unitless (no CSS property; consumers read it). Strip the px the ref carries. */
    --iris-body-medium-paragraph-spacing: 12;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-small-font-size: 0.875rem;
    --iris-body-small-line-height: 1.4285714286;
    --iris-body-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-x-small-font-size: 0.75rem;
    --iris-body-x-small-line-height: 1.3333333333;
    --iris-body-x-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-intro-large-font-size: 1.125rem;
    --iris-intro-large-line-height: 1.5555555556;
    --iris-intro-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-intro-medium-font-size: 1.25rem;
    --iris-intro-medium-line-height: 1.4;
    --iris-intro-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-quote-large-font-size: 2rem;
    --iris-quote-large-line-height: 1.375;
    --iris-quote-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-quote-medium-font-size: 1.75rem;
    --iris-quote-medium-line-height: 1.2857142857;
    --iris-quote-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-topline-font-size: 0.875rem;
    --iris-topline-line-height: 1.4285714286;
    --iris-topline-letter-spacing: 0px;
  }
}
@media (max-width: 991.98px) {
  :root {
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-large-font-size: 3.25rem;
    --iris-display-large-line-height: 1.3076923077;
    --iris-display-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-medium-font-size: 2.5rem;
    --iris-display-medium-line-height: 1.2;
    --iris-display-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-small-font-size: 2.25rem;
    --iris-display-small-line-height: 1.3333333333;
    --iris-display-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-large-font-size: 2rem;
    --iris-title-large-line-height: 1.375;
    --iris-title-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-medium-font-size: 1.75rem;
    --iris-title-medium-line-height: 1.2857142857;
    --iris-title-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-small-font-size: 1.5rem;
    --iris-title-small-line-height: 1.1666666667;
    --iris-title-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-x-large-font-size: 1.25rem;
    --iris-body-x-large-line-height: 1.4;
    --iris-body-x-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-large-font-size: 1.125rem;
    --iris-body-large-line-height: 1.5555555556;
    --iris-body-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-medium-font-size: 1rem;
    --iris-body-medium-line-height: 1.5;
    --iris-body-medium-letter-spacing: 0px;
    /* unitless (no CSS property; consumers read it). Strip the px the ref carries. */
    --iris-body-medium-paragraph-spacing: 12;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-small-font-size: 0.875rem;
    --iris-body-small-line-height: 1.4285714286;
    --iris-body-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-x-small-font-size: 0.75rem;
    --iris-body-x-small-line-height: 1.3333333333;
    --iris-body-x-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-intro-large-font-size: 1.125rem;
    --iris-intro-large-line-height: 1.5555555556;
    --iris-intro-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-intro-medium-font-size: 1.25rem;
    --iris-intro-medium-line-height: 1.4;
    --iris-intro-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-quote-large-font-size: 2rem;
    --iris-quote-large-line-height: 1.375;
    --iris-quote-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-quote-medium-font-size: 1.75rem;
    --iris-quote-medium-line-height: 1.2857142857;
    --iris-quote-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-topline-font-size: 0.875rem;
    --iris-topline-line-height: 1.4285714286;
    --iris-topline-letter-spacing: 0px;
  }
}
@media (max-width: 767.98px) {
  :root {
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-large-font-size: 2.5rem;
    --iris-display-large-line-height: 1.2;
    --iris-display-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-medium-font-size: 2.25rem;
    --iris-display-medium-line-height: 1.2222222222;
    --iris-display-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-small-font-size: 2rem;
    --iris-display-small-line-height: 1.375;
    --iris-display-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-large-font-size: 1.75rem;
    --iris-title-large-line-height: 1.2857142857;
    --iris-title-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-medium-font-size: 1.5rem;
    --iris-title-medium-line-height: 1.3333333333;
    --iris-title-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-small-font-size: 1.25rem;
    --iris-title-small-line-height: 1.4;
    --iris-title-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-x-large-font-size: 1.25rem;
    --iris-body-x-large-line-height: 1.4;
    --iris-body-x-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-large-font-size: 1.125rem;
    --iris-body-large-line-height: 1.5555555556;
    --iris-body-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-medium-font-size: 1rem;
    --iris-body-medium-line-height: 1.5;
    --iris-body-medium-letter-spacing: 0px;
    /* unitless (no CSS property; consumers read it). Strip the px the ref carries. */
    --iris-body-medium-paragraph-spacing: 12;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-small-font-size: 0.875rem;
    --iris-body-small-line-height: 1.4285714286;
    --iris-body-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-x-small-font-size: 0.75rem;
    --iris-body-x-small-line-height: 1.3333333333;
    --iris-body-x-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-intro-large-font-size: 1.125rem;
    --iris-intro-large-line-height: 1.5555555556;
    --iris-intro-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-intro-medium-font-size: 1.25rem;
    --iris-intro-medium-line-height: 1.4;
    --iris-intro-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-quote-large-font-size: 1.75rem;
    --iris-quote-large-line-height: 1.2857142857;
    --iris-quote-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-quote-medium-font-size: 1.5rem;
    --iris-quote-medium-line-height: 1.3333333333;
    --iris-quote-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-topline-font-size: 0.875rem;
    --iris-topline-line-height: 1.4285714286;
    --iris-topline-letter-spacing: 0px;
  }
}
@media (max-width: 543.98px) {
  :root {
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-large-font-size: 2.5rem;
    --iris-display-large-line-height: 1.2;
    --iris-display-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-medium-font-size: 2.25rem;
    --iris-display-medium-line-height: 1.2222222222;
    --iris-display-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-display-small-font-size: 2rem;
    --iris-display-small-line-height: 1.375;
    --iris-display-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-large-font-size: 1.75rem;
    --iris-title-large-line-height: 1.2857142857;
    --iris-title-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-medium-font-size: 1.5rem;
    --iris-title-medium-line-height: 1.3333333333;
    --iris-title-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-title-small-font-size: 1.25rem;
    --iris-title-small-line-height: 1.4;
    --iris-title-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-x-large-font-size: 1.25rem;
    --iris-body-x-large-line-height: 1.4;
    --iris-body-x-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-large-font-size: 1.125rem;
    --iris-body-large-line-height: 1.5555555556;
    --iris-body-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-medium-font-size: 1rem;
    --iris-body-medium-line-height: 1.5;
    --iris-body-medium-letter-spacing: 0px;
    /* unitless (no CSS property; consumers read it). Strip the px the ref carries. */
    --iris-body-medium-paragraph-spacing: 12;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-small-font-size: 0.875rem;
    --iris-body-small-line-height: 1.4285714286;
    --iris-body-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-body-x-small-font-size: 0.75rem;
    --iris-body-x-small-line-height: 1.3333333333;
    --iris-body-x-small-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-intro-large-font-size: 1.125rem;
    --iris-intro-large-line-height: 1.5555555556;
    --iris-intro-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-intro-medium-font-size: 1.25rem;
    --iris-intro-medium-line-height: 1.4;
    --iris-intro-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-quote-large-font-size: 1.75rem;
    --iris-quote-large-line-height: 1.2857142857;
    --iris-quote-large-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-quote-medium-font-size: 1.5rem;
    --iris-quote-medium-line-height: 1.3333333333;
    --iris-quote-medium-letter-spacing: 0px;
    /* Family-agnostic size vars (identical across sans/slab), emitted once per role/step. */
    --iris-topline-font-size: 0.875rem;
    --iris-topline-line-height: 1.4285714286;
    --iris-topline-letter-spacing: 0px;
  }
}
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/utilities/_index
 * SUIT-style utility barrel — forwards the generated typography utilities plus the display /
 * spacing / text / sizing / color families, all on the `.iris-*` namespace.
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/utilities/_typography
 * Composable light-DOM typography utility classes, GENERATED from the variable maps. Instead
 * of 84 monolithic classes (one frozen family+size+weight each), emit ~21 composable classes
 * across three axes that compose to ≥84 combinations:
 *   • family: 2   .iris-font-{sans,slab}
 *   • size/role: 16  .iris-text-<role>   (font-size + line-height + letter-spacing)
 *   • weight: 3   .iris-weight-{roman,sbold,bold}
 * e.g. class="iris-font-sans iris-text-title-medium iris-weight-bold".
 *
 * Generated single-source from variables/_typography.scss ($font-size roles, $fonts families)
 * so the class set tracks the maps — a new role/family is one map entry, not N hand-authored
 * classes. Bound to the emitted --iris-* vars. These are UTILITY classes and already carry the
 * `iris-` root, so the namespace is unchanged.
 */
/* Family axis (2) */
.iris-font-sans {
  font-family: var(--iris-sans-font-family);
}

.iris-font-slab {
  font-family: var(--iris-slab-font-family);
}

/*
 * Weight axis (3)
 * Bound per family via a CSS var so a weight class works under either family class.
 * --iris-<family>-font-weight-<w> exists per family; default to sans, override under slab.
 */
.iris-weight-roman {
  font-weight: var(--iris-sans-font-weight-roman);
}

.iris-font-slab.iris-weight-roman,
.iris-font-slab .iris-weight-roman {
  font-weight: var(--iris-slab-font-weight-roman);
}

.iris-weight-sbold {
  font-weight: var(--iris-sans-font-weight-sbold);
}

.iris-font-slab.iris-weight-sbold,
.iris-font-slab .iris-weight-sbold {
  font-weight: var(--iris-slab-font-weight-sbold);
}

.iris-weight-bold {
  font-weight: var(--iris-sans-font-weight-bold);
}

.iris-font-slab.iris-weight-bold,
.iris-font-slab .iris-weight-bold {
  font-weight: var(--iris-slab-font-weight-bold);
}

/*
 * Size / role axis (16)
 * One class per style-role from $font-size; sets size + line-height + letter-spacing. The
 * size-role vars are family-agnostic (DESYS-1378) — identical across sans/slab — so a single
 * family-less class per role is correct and the former .iris-font-slab size override is dropped
 * (it set identical values). topline has no size sub-key but is still one role class.
 */
.iris-text-display-large {
  font-size: var(--iris-display-large-font-size);
  letter-spacing: var(--iris-display-large-letter-spacing);
  line-height: var(--iris-display-large-line-height);
}

.iris-text-display-medium {
  font-size: var(--iris-display-medium-font-size);
  letter-spacing: var(--iris-display-medium-letter-spacing);
  line-height: var(--iris-display-medium-line-height);
}

.iris-text-display-small {
  font-size: var(--iris-display-small-font-size);
  letter-spacing: var(--iris-display-small-letter-spacing);
  line-height: var(--iris-display-small-line-height);
}

.iris-text-title-large {
  font-size: var(--iris-title-large-font-size);
  letter-spacing: var(--iris-title-large-letter-spacing);
  line-height: var(--iris-title-large-line-height);
}

.iris-text-title-medium {
  font-size: var(--iris-title-medium-font-size);
  letter-spacing: var(--iris-title-medium-letter-spacing);
  line-height: var(--iris-title-medium-line-height);
}

.iris-text-title-small {
  font-size: var(--iris-title-small-font-size);
  letter-spacing: var(--iris-title-small-letter-spacing);
  line-height: var(--iris-title-small-line-height);
}

.iris-text-body-x-large {
  font-size: var(--iris-body-x-large-font-size);
  letter-spacing: var(--iris-body-x-large-letter-spacing);
  line-height: var(--iris-body-x-large-line-height);
}

.iris-text-body-large {
  font-size: var(--iris-body-large-font-size);
  letter-spacing: var(--iris-body-large-letter-spacing);
  line-height: var(--iris-body-large-line-height);
}

.iris-text-body-medium {
  font-size: var(--iris-body-medium-font-size);
  letter-spacing: var(--iris-body-medium-letter-spacing);
  line-height: var(--iris-body-medium-line-height);
}

.iris-text-body-small {
  font-size: var(--iris-body-small-font-size);
  letter-spacing: var(--iris-body-small-letter-spacing);
  line-height: var(--iris-body-small-line-height);
}

.iris-text-body-x-small {
  font-size: var(--iris-body-x-small-font-size);
  letter-spacing: var(--iris-body-x-small-letter-spacing);
  line-height: var(--iris-body-x-small-line-height);
}

.iris-text-intro-large {
  font-size: var(--iris-intro-large-font-size);
  letter-spacing: var(--iris-intro-large-letter-spacing);
  line-height: var(--iris-intro-large-line-height);
}

.iris-text-intro-medium {
  font-size: var(--iris-intro-medium-font-size);
  letter-spacing: var(--iris-intro-medium-letter-spacing);
  line-height: var(--iris-intro-medium-line-height);
}

.iris-text-quote-large {
  font-size: var(--iris-quote-large-font-size);
  letter-spacing: var(--iris-quote-large-letter-spacing);
  line-height: var(--iris-quote-large-line-height);
}

.iris-text-quote-medium {
  font-size: var(--iris-quote-medium-font-size);
  letter-spacing: var(--iris-quote-medium-letter-spacing);
  line-height: var(--iris-quote-medium-line-height);
}

.iris-text-topline {
  font-size: var(--iris-topline-font-size);
  letter-spacing: var(--iris-topline-letter-spacing);
  line-height: var(--iris-topline-line-height);
}

/*
 * Folded from the former _text.scss (AC-C5): non-duplicate hand-authored text utilities —
 * text alignment, overflow, and semantic text color. The three weight shorthands and the
 * small-size shorthand were DROPPED as duplicates of the composable weight classes and the
 * body-small role class above. The former inherit-only muted/primary shorthands were already
 * dropped (they resolved to nothing); use .iris-u-textColor-* (from the $text map) for a
 * themed text color.
 */
.iris-u-textCenter {
  text-align: center !important;
}

.iris-u-textLeft {
  text-align: left !important;
}

.iris-u-textRight {
  text-align: right !important;
}

.iris-u-textTruncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.iris-u-textBreak {
  overflow-wrap: break-word !important;
}

.iris-u-textNoWrap {
  white-space: nowrap !important;
}

.iris-u-textDisabled {
  color: var(--iris-text-disabled) !important;
}

.iris-u-textDanger {
  color: var(--iris-text-caution) !important;
}

.iris-u-textSuccess {
  color: var(--iris-status-success) !important;
}

/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/utilities/_spacing
 * SUIT-style spacing utilities, derived DIRECTLY from the $spacer / $component-spacing maps
 * in tokens/_layout.scss — no hand-picked class list. One spacer utility family
 * (.iris-u-spacer-{px}) is keyed on the unified $spacer px scale and sets `gap` from the
 * matching --iris-spacer-{px} var (DESYS-1378; replaces the former named-key
 * .iris-u-gap-{name} / .iris-u-pad-{name} families that resolved into this same scale).
 * width/height utilities bind to the matching emitted --iris-<family>-* token, on the
 * `.iris-u-*` namespace.
 */
.iris-u-spacer-neg-2 {
  gap: var(--iris-spacer-neg-2) !important;
}

.iris-u-spacer-1 {
  gap: var(--iris-spacer-1) !important;
}

.iris-u-spacer-2 {
  gap: var(--iris-spacer-2) !important;
}

.iris-u-spacer-3 {
  gap: var(--iris-spacer-3) !important;
}

.iris-u-spacer-4 {
  gap: var(--iris-spacer-4) !important;
}

.iris-u-spacer-6 {
  gap: var(--iris-spacer-6) !important;
}

.iris-u-spacer-8 {
  gap: var(--iris-spacer-8) !important;
}

.iris-u-spacer-12 {
  gap: var(--iris-spacer-12) !important;
}

.iris-u-spacer-16 {
  gap: var(--iris-spacer-16) !important;
}

.iris-u-spacer-20 {
  gap: var(--iris-spacer-20) !important;
}

.iris-u-spacer-24 {
  gap: var(--iris-spacer-24) !important;
}

.iris-u-spacer-28 {
  gap: var(--iris-spacer-28) !important;
}

.iris-u-spacer-32 {
  gap: var(--iris-spacer-32) !important;
}

.iris-u-spacer-40 {
  gap: var(--iris-spacer-40) !important;
}

.iris-u-spacer-80 {
  gap: var(--iris-spacer-80) !important;
}

.iris-u-spacer-120 {
  gap: var(--iris-spacer-120) !important;
}

.iris-u-width-4 {
  width: var(--iris-width-4) !important;
}

.iris-u-width-8 {
  width: var(--iris-width-8) !important;
}

.iris-u-width-12 {
  width: var(--iris-width-12) !important;
}

.iris-u-width-16 {
  width: var(--iris-width-16) !important;
}

.iris-u-width-20 {
  width: var(--iris-width-20) !important;
}

.iris-u-width-24 {
  width: var(--iris-width-24) !important;
}

.iris-u-width-32 {
  width: var(--iris-width-32) !important;
}

.iris-u-width-40 {
  width: var(--iris-width-40) !important;
}

.iris-u-width-48 {
  width: var(--iris-width-48) !important;
}

.iris-u-height-4 {
  height: var(--iris-height-4) !important;
}

.iris-u-height-8 {
  height: var(--iris-height-8) !important;
}

.iris-u-height-12 {
  height: var(--iris-height-12) !important;
}

.iris-u-height-16 {
  height: var(--iris-height-16) !important;
}

.iris-u-height-20 {
  height: var(--iris-height-20) !important;
}

.iris-u-height-24 {
  height: var(--iris-height-24) !important;
}

.iris-u-height-32 {
  height: var(--iris-height-32) !important;
}

.iris-u-height-40 {
  height: var(--iris-height-40) !important;
}

.iris-u-height-48 {
  height: var(--iris-height-48) !important;
}

.iris-u-height-56 {
  height: var(--iris-height-56) !important;
}

/* Zero shorthands (no token — a literal 0 is the canonical reset, not a scale value). */
.iris-u-margin0 {
  margin: 0 !important;
}

.iris-u-padding0 {
  padding: 0 !important;
}

/* Owl-selector stacks for non-flex flow content, derived from the gap scale. */
.iris-u-stack-xxx-small > * + * {
  margin-block-start: var(--iris-spacer-neg-2) !important;
}

.iris-u-stack-xx-small > * + * {
  margin-block-start: var(--iris-spacer-2) !important;
}

.iris-u-stack-x-small > * + * {
  margin-block-start: var(--iris-spacer-4) !important;
}

.iris-u-stack-small > * + * {
  margin-block-start: var(--iris-spacer-8) !important;
}

.iris-u-stack-medium > * + * {
  margin-block-start: var(--iris-spacer-12) !important;
}

.iris-u-stack-large > * + * {
  margin-block-start: var(--iris-spacer-16) !important;
}

.iris-u-stack-x-large > * + * {
  margin-block-start: var(--iris-spacer-20) !important;
}

.iris-u-stack-xx-large > * + * {
  margin-block-start: var(--iris-spacer-24) !important;
}

.iris-u-stack-xxx-large > * + * {
  margin-block-start: var(--iris-spacer-28) !important;
}

.iris-u-stack-xxxx-large > * + * {
  margin-block-start: var(--iris-spacer-32) !important;
}

/* Sizing utilities — folded in from the former _sizing.scss (DESYS-1378 N-3). */
.iris-u-sizeFull {
  width: 100% !important;
}

.iris-u-sizeHalf {
  width: 50% !important;
}

.iris-u-sizeAuto {
  width: auto !important;
}

.iris-u-maxSizeFull {
  max-width: 100% !important;
}

.iris-u-heightFull {
  height: 100% !important;
}

.iris-u-heightAuto {
  height: auto !important;
}

/* Display utilities — folded in from the former _display.scss (DESYS-1378 N-6). */
.iris-u-block {
  display: block !important;
}

.iris-u-inlineBlock {
  display: inline-block !important;
}

.iris-u-inline {
  display: inline !important;
}

.iris-u-flex {
  display: flex !important;
}

.iris-u-inlineFlex {
  display: inline-flex !important;
}

.iris-u-grid {
  display: grid !important;
}

.iris-u-hidden {
  display: none !important;
}

.iris-u-visible {
  visibility: visible !important;
}

.iris-u-invisible {
  visibility: hidden !important;
}

/* Block-space padding utilities — bind the emitted --iris-layout-block-* tokens
   (DESYS-1378 AC-18). horizontal → padding-inline, vertical → padding-block,
   container → padding; each at the sm/md/lg block scale. */
.iris-u-blockHorizontalSpace-sm {
  padding-inline: var(--iris-layout-block-horizontal-space-sm) !important;
}

.iris-u-blockHorizontalSpace-md {
  padding-inline: var(--iris-layout-block-horizontal-space-md) !important;
}

.iris-u-blockHorizontalSpace-lg {
  padding-inline: var(--iris-layout-block-horizontal-space-lg) !important;
}

.iris-u-blockVerticalSpace-sm {
  padding-block: var(--iris-layout-block-vertical-space-sm) !important;
}

.iris-u-blockVerticalSpace-md {
  padding-block: var(--iris-layout-block-vertical-space-md) !important;
}

.iris-u-blockVerticalSpace-lg {
  padding-block: var(--iris-layout-block-vertical-space-lg) !important;
}

.iris-u-blockContainerSpace-sm {
  padding: var(--iris-layout-block-container-space-sm) !important;
}

.iris-u-blockContainerSpace-md {
  padding: var(--iris-layout-block-container-space-md) !important;
}

.iris-u-blockContainerSpace-lg {
  padding: var(--iris-layout-block-container-space-lg) !important;
}

/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/utilities/_color
 * iris-u-textColor-* / iris-u-bg-* utility classes, derived DIRECTLY from the $text and $base
 * role sub-maps in variables/_color.scss — no hand-maintained role list. Each utility binds
 * to the matching emitted --iris-text-* / --iris-base-* custom property. Keys whose light-mode
 * value is `inherit` (e.g. text-primary, text-secondary — intentionally context-inherited, not
 * a themed color) emit no utility: an .iris-u-textColor-* that resolves to nothing is worse than
 * its absence.
 */
/* A role key is utility-eligible unless its light-mode value is `inherit`. */
/* Text-color utilities — one per non-inherit key of the $text sub-map. */
.iris-u-textColor-1 {
  color: var(--iris-text-1) !important;
}

.iris-u-textColor-2 {
  color: var(--iris-text-2) !important;
}

.iris-u-textColor-3 {
  color: var(--iris-text-3) !important;
}

.iris-u-textColor-caution {
  color: var(--iris-text-caution) !important;
}

.iris-u-textColor-danger {
  color: var(--iris-text-danger) !important;
}

.iris-u-textColor-disabled {
  color: var(--iris-text-disabled) !important;
}

.iris-u-textColor-featured-info {
  color: var(--iris-text-featured-info) !important;
}

.iris-u-textColor-highlight-interactive {
  color: var(--iris-text-highlight-interactive) !important;
}

.iris-u-textColor-highlight-interactive-hover {
  color: var(--iris-text-highlight-interactive-hover) !important;
}

.iris-u-textColor-info {
  color: var(--iris-text-info) !important;
}

.iris-u-textColor-inverse-1 {
  color: var(--iris-text-inverse-1) !important;
}

.iris-u-textColor-inverse-2 {
  color: var(--iris-text-inverse-2) !important;
}

.iris-u-textColor-inverse-highlight-interactive {
  color: var(--iris-text-inverse-highlight-interactive) !important;
}

.iris-u-textColor-inverse-highlight-interactive-hover {
  color: var(--iris-text-inverse-highlight-interactive-hover) !important;
}

.iris-u-textColor-primary {
  color: var(--iris-text-primary) !important;
}

.iris-u-textColor-secondary {
  color: var(--iris-text-secondary) !important;
}

.iris-u-textColor-success {
  color: var(--iris-text-success) !important;
}

.iris-u-textColor-warning {
  color: var(--iris-text-warning) !important;
}

/* Background (surface) utilities — one per non-inherit key of the $base sub-map. */
.iris-u-bg-0 {
  background-color: var(--iris-base-0) !important;
}

.iris-u-bg-1 {
  background-color: var(--iris-base-1) !important;
}

.iris-u-bg-2 {
  background-color: var(--iris-base-2) !important;
}

.iris-u-bg-3 {
  background-color: var(--iris-base-3) !important;
}

.iris-u-bg-caution {
  background-color: var(--iris-base-caution) !important;
}

.iris-u-bg-danger {
  background-color: var(--iris-base-danger) !important;
}

.iris-u-bg-disabled {
  background-color: var(--iris-base-disabled) !important;
}

.iris-u-bg-featured {
  background-color: var(--iris-base-featured) !important;
}

.iris-u-bg-fill-1 {
  background-color: var(--iris-base-fill-1) !important;
}

.iris-u-bg-fill-1-hover {
  background-color: var(--iris-base-fill-1-hover) !important;
}

.iris-u-bg-hover {
  background-color: var(--iris-base-hover) !important;
}

.iris-u-bg-info {
  background-color: var(--iris-base-info) !important;
}

.iris-u-bg-inverse-0 {
  background-color: var(--iris-base-inverse-0) !important;
}

.iris-u-bg-inverse-1 {
  background-color: var(--iris-base-inverse-1) !important;
}

.iris-u-bg-inverse-2 {
  background-color: var(--iris-base-inverse-2) !important;
}

.iris-u-bg-inverse-3 {
  background-color: var(--iris-base-inverse-3) !important;
}

.iris-u-bg-inverse-selected {
  background-color: var(--iris-base-inverse-selected) !important;
}

.iris-u-bg-raised {
  background-color: var(--iris-base-raised) !important;
}

.iris-u-bg-selected {
  background-color: var(--iris-base-selected) !important;
}

.iris-u-bg-success {
  background-color: var(--iris-base-success) !important;
}

.iris-u-bg-warning {
  background-color: var(--iris-base-warning) !important;
}

/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/grid/_index
 * Grid barrel — forwards the flexbox grid, CSS Grid mode, and the layout primitive.
 *
 * Layout decision tree — three ways to build a layout; pick in this order:
 *   1. The .iris-Group flex primitive first (_primitives.scss) — reach for it for almost
 *      everything: it needs no breakpoint logic and adapts to content. Tune it with the
 *      --vertical / --horizontal / --wrap / --noWrap / align* / justify* / --between /
 *      --center / --gap-sm / --gap-lg / --gap-xl modifiers.
 *   2. CSS Grid (.iris-CssGrid / .iris-CssGrid--autoFit / .iris-CssGrid--bento,
 *      _css-grid.scss) for card grids and dashboards where you want equal tracks that wrap.
 *   3. FlexGrid spans (.iris-FlexGrid, _flex-grid.scss) ONLY for explicitly columnar,
 *      12-col layouts that need named column spans per breakpoint.
 *   The .iris-Content container (_content-container.scss) wraps ANY of the above: it
 *      centers a max-width content column (viewport tokens vp-content-max / vp-content-margin)
 *      and is used alongside a grid or Group, not instead of one.
 * Arbitrary spacing step without a new token: functions.iris-space($n).
 */
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/grid/_flex-grid
 * SUIT flexbox grid: modern gap gutter, gap-aware calc cells, 5 breakpoints. De-conflicted
 * block `.iris-FlexGrid` (css-grid uses `.iris-CssGrid`) so a page may load both.
 */
.iris-FlexGrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iris-grid-gutter-width, var(--iris-spacer-12));
}

/* Alignment */
.iris-FlexGrid--alignCenter {
  align-items: center;
}

.iris-FlexGrid--alignEnd {
  align-items: flex-end;
}

.iris-FlexGrid--alignStretch {
  align-items: stretch;
}

.iris-FlexGrid--justifyCenter {
  justify-content: center;
}

.iris-FlexGrid--justifyBetween {
  justify-content: space-between;
}

.iris-FlexGrid--justifyEnd {
  justify-content: flex-end;
}

.iris-FlexGrid-cell {
  box-sizing: border-box;
}

/*
 * Fractional widths — normalized to `{x}of12` (AC-C6). A cell of `x` columns is
 * `x/12` of the row, minus its share of the `(12 - x)/12` gap gutters between the
 * 12 tracks. Base 1of12…12of12, then the same set per breakpoint as `{bp}-{x}of12`.
 * The loop iterates 1…12 and $breakpoints in map order (sm→xxl) — deterministic.
 */
.iris-FlexGrid-cell--1of12 {
  flex: 0 0 calc(8.3333333333% - 0.9166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--2of12 {
  flex: 0 0 calc(16.6666666667% - 0.8333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--3of12 {
  flex: 0 0 calc(25% - 0.75 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--4of12 {
  flex: 0 0 calc(33.3333333333% - 0.6666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--5of12 {
  flex: 0 0 calc(41.6666666667% - 0.5833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--6of12 {
  flex: 0 0 calc(50% - 0.5 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--7of12 {
  flex: 0 0 calc(58.3333333333% - 0.4166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--8of12 {
  flex: 0 0 calc(66.6666666667% - 0.3333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--9of12 {
  flex: 0 0 calc(75% - 0.25 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--10of12 {
  flex: 0 0 calc(83.3333333333% - 0.1666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--11of12 {
  flex: 0 0 calc(91.6666666667% - 0.0833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

.iris-FlexGrid-cell--12of12 {
  flex: 0 0 calc(100% - 0 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
}

@media (min-width: 544px) {
  .iris-FlexGrid-cell--sm-1of12 {
    flex: 0 0 calc(8.3333333333% - 0.9166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-2of12 {
    flex: 0 0 calc(16.6666666667% - 0.8333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-3of12 {
    flex: 0 0 calc(25% - 0.75 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-4of12 {
    flex: 0 0 calc(33.3333333333% - 0.6666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-5of12 {
    flex: 0 0 calc(41.6666666667% - 0.5833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-6of12 {
    flex: 0 0 calc(50% - 0.5 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-7of12 {
    flex: 0 0 calc(58.3333333333% - 0.4166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-8of12 {
    flex: 0 0 calc(66.6666666667% - 0.3333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-9of12 {
    flex: 0 0 calc(75% - 0.25 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-10of12 {
    flex: 0 0 calc(83.3333333333% - 0.1666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-11of12 {
    flex: 0 0 calc(91.6666666667% - 0.0833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--sm-12of12 {
    flex: 0 0 calc(100% - 0 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
}
@media (min-width: 768px) {
  .iris-FlexGrid-cell--md-1of12 {
    flex: 0 0 calc(8.3333333333% - 0.9166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-2of12 {
    flex: 0 0 calc(16.6666666667% - 0.8333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-3of12 {
    flex: 0 0 calc(25% - 0.75 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-4of12 {
    flex: 0 0 calc(33.3333333333% - 0.6666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-5of12 {
    flex: 0 0 calc(41.6666666667% - 0.5833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-6of12 {
    flex: 0 0 calc(50% - 0.5 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-7of12 {
    flex: 0 0 calc(58.3333333333% - 0.4166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-8of12 {
    flex: 0 0 calc(66.6666666667% - 0.3333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-9of12 {
    flex: 0 0 calc(75% - 0.25 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-10of12 {
    flex: 0 0 calc(83.3333333333% - 0.1666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-11of12 {
    flex: 0 0 calc(91.6666666667% - 0.0833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--md-12of12 {
    flex: 0 0 calc(100% - 0 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
}
@media (min-width: 992px) {
  .iris-FlexGrid-cell--lg-1of12 {
    flex: 0 0 calc(8.3333333333% - 0.9166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-2of12 {
    flex: 0 0 calc(16.6666666667% - 0.8333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-3of12 {
    flex: 0 0 calc(25% - 0.75 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-4of12 {
    flex: 0 0 calc(33.3333333333% - 0.6666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-5of12 {
    flex: 0 0 calc(41.6666666667% - 0.5833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-6of12 {
    flex: 0 0 calc(50% - 0.5 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-7of12 {
    flex: 0 0 calc(58.3333333333% - 0.4166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-8of12 {
    flex: 0 0 calc(66.6666666667% - 0.3333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-9of12 {
    flex: 0 0 calc(75% - 0.25 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-10of12 {
    flex: 0 0 calc(83.3333333333% - 0.1666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-11of12 {
    flex: 0 0 calc(91.6666666667% - 0.0833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--lg-12of12 {
    flex: 0 0 calc(100% - 0 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
}
@media (min-width: 1344px) {
  .iris-FlexGrid-cell--xl-1of12 {
    flex: 0 0 calc(8.3333333333% - 0.9166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-2of12 {
    flex: 0 0 calc(16.6666666667% - 0.8333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-3of12 {
    flex: 0 0 calc(25% - 0.75 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-4of12 {
    flex: 0 0 calc(33.3333333333% - 0.6666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-5of12 {
    flex: 0 0 calc(41.6666666667% - 0.5833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-6of12 {
    flex: 0 0 calc(50% - 0.5 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-7of12 {
    flex: 0 0 calc(58.3333333333% - 0.4166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-8of12 {
    flex: 0 0 calc(66.6666666667% - 0.3333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-9of12 {
    flex: 0 0 calc(75% - 0.25 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-10of12 {
    flex: 0 0 calc(83.3333333333% - 0.1666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-11of12 {
    flex: 0 0 calc(91.6666666667% - 0.0833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xl-12of12 {
    flex: 0 0 calc(100% - 0 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
}
@media (min-width: 1680px) {
  .iris-FlexGrid-cell--xxl-1of12 {
    flex: 0 0 calc(8.3333333333% - 0.9166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-2of12 {
    flex: 0 0 calc(16.6666666667% - 0.8333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-3of12 {
    flex: 0 0 calc(25% - 0.75 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-4of12 {
    flex: 0 0 calc(33.3333333333% - 0.6666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-5of12 {
    flex: 0 0 calc(41.6666666667% - 0.5833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-6of12 {
    flex: 0 0 calc(50% - 0.5 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-7of12 {
    flex: 0 0 calc(58.3333333333% - 0.4166666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-8of12 {
    flex: 0 0 calc(66.6666666667% - 0.3333333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-9of12 {
    flex: 0 0 calc(75% - 0.25 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-10of12 {
    flex: 0 0 calc(83.3333333333% - 0.1666666667 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-11of12 {
    flex: 0 0 calc(91.6666666667% - 0.0833333333 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
  .iris-FlexGrid-cell--xxl-12of12 {
    flex: 0 0 calc(100% - 0 * var(--iris-grid-gutter-width, var(--iris-spacer-12)));
  }
}
.iris-FlexGrid-cell--full {
  flex: 0 0 100%;
}

.iris-FlexGrid-cell--auto {
  flex: 1 1 0;
  min-width: 0;
}

/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/grid/_css-grid
 * SUIT CSS Grid mode + bento. De-conflicted block `.iris-CssGrid` (flex-grid uses
 * `.iris-FlexGrid`) so a page may load both without class collisions.
 */
.iris-CssGrid {
  display: grid;
  gap: var(--iris-grid-gutter-width, var(--iris-spacer-12));
  grid-template-columns: repeat(var(--iris-grid-cols), minmax(0, 1fr));
}

/*
 * Column spans — normalized to `{x}of12` (AC-C6). Base 1of12…12of12, then the same set
 * per breakpoint as `{bp}-{x}of12`. The loop iterates 1…12 and $breakpoints in map order
 * (sm→xxl), so emission is deterministic.
 */
.iris-CssGrid-cell--1of12 {
  grid-column: span 1;
}

.iris-CssGrid-cell--2of12 {
  grid-column: span 2;
}

.iris-CssGrid-cell--3of12 {
  grid-column: span 3;
}

.iris-CssGrid-cell--4of12 {
  grid-column: span 4;
}

.iris-CssGrid-cell--5of12 {
  grid-column: span 5;
}

.iris-CssGrid-cell--6of12 {
  grid-column: span 6;
}

.iris-CssGrid-cell--7of12 {
  grid-column: span 7;
}

.iris-CssGrid-cell--8of12 {
  grid-column: span 8;
}

.iris-CssGrid-cell--9of12 {
  grid-column: span 9;
}

.iris-CssGrid-cell--10of12 {
  grid-column: span 10;
}

.iris-CssGrid-cell--11of12 {
  grid-column: span 11;
}

.iris-CssGrid-cell--12of12 {
  grid-column: span 12;
}

@media (min-width: 544px) {
  .iris-CssGrid-cell--sm-1of12 {
    grid-column: span 1;
  }
  .iris-CssGrid-cell--sm-2of12 {
    grid-column: span 2;
  }
  .iris-CssGrid-cell--sm-3of12 {
    grid-column: span 3;
  }
  .iris-CssGrid-cell--sm-4of12 {
    grid-column: span 4;
  }
  .iris-CssGrid-cell--sm-5of12 {
    grid-column: span 5;
  }
  .iris-CssGrid-cell--sm-6of12 {
    grid-column: span 6;
  }
  .iris-CssGrid-cell--sm-7of12 {
    grid-column: span 7;
  }
  .iris-CssGrid-cell--sm-8of12 {
    grid-column: span 8;
  }
  .iris-CssGrid-cell--sm-9of12 {
    grid-column: span 9;
  }
  .iris-CssGrid-cell--sm-10of12 {
    grid-column: span 10;
  }
  .iris-CssGrid-cell--sm-11of12 {
    grid-column: span 11;
  }
  .iris-CssGrid-cell--sm-12of12 {
    grid-column: span 12;
  }
}
@media (min-width: 768px) {
  .iris-CssGrid-cell--md-1of12 {
    grid-column: span 1;
  }
  .iris-CssGrid-cell--md-2of12 {
    grid-column: span 2;
  }
  .iris-CssGrid-cell--md-3of12 {
    grid-column: span 3;
  }
  .iris-CssGrid-cell--md-4of12 {
    grid-column: span 4;
  }
  .iris-CssGrid-cell--md-5of12 {
    grid-column: span 5;
  }
  .iris-CssGrid-cell--md-6of12 {
    grid-column: span 6;
  }
  .iris-CssGrid-cell--md-7of12 {
    grid-column: span 7;
  }
  .iris-CssGrid-cell--md-8of12 {
    grid-column: span 8;
  }
  .iris-CssGrid-cell--md-9of12 {
    grid-column: span 9;
  }
  .iris-CssGrid-cell--md-10of12 {
    grid-column: span 10;
  }
  .iris-CssGrid-cell--md-11of12 {
    grid-column: span 11;
  }
  .iris-CssGrid-cell--md-12of12 {
    grid-column: span 12;
  }
}
@media (min-width: 992px) {
  .iris-CssGrid-cell--lg-1of12 {
    grid-column: span 1;
  }
  .iris-CssGrid-cell--lg-2of12 {
    grid-column: span 2;
  }
  .iris-CssGrid-cell--lg-3of12 {
    grid-column: span 3;
  }
  .iris-CssGrid-cell--lg-4of12 {
    grid-column: span 4;
  }
  .iris-CssGrid-cell--lg-5of12 {
    grid-column: span 5;
  }
  .iris-CssGrid-cell--lg-6of12 {
    grid-column: span 6;
  }
  .iris-CssGrid-cell--lg-7of12 {
    grid-column: span 7;
  }
  .iris-CssGrid-cell--lg-8of12 {
    grid-column: span 8;
  }
  .iris-CssGrid-cell--lg-9of12 {
    grid-column: span 9;
  }
  .iris-CssGrid-cell--lg-10of12 {
    grid-column: span 10;
  }
  .iris-CssGrid-cell--lg-11of12 {
    grid-column: span 11;
  }
  .iris-CssGrid-cell--lg-12of12 {
    grid-column: span 12;
  }
}
@media (min-width: 1344px) {
  .iris-CssGrid-cell--xl-1of12 {
    grid-column: span 1;
  }
  .iris-CssGrid-cell--xl-2of12 {
    grid-column: span 2;
  }
  .iris-CssGrid-cell--xl-3of12 {
    grid-column: span 3;
  }
  .iris-CssGrid-cell--xl-4of12 {
    grid-column: span 4;
  }
  .iris-CssGrid-cell--xl-5of12 {
    grid-column: span 5;
  }
  .iris-CssGrid-cell--xl-6of12 {
    grid-column: span 6;
  }
  .iris-CssGrid-cell--xl-7of12 {
    grid-column: span 7;
  }
  .iris-CssGrid-cell--xl-8of12 {
    grid-column: span 8;
  }
  .iris-CssGrid-cell--xl-9of12 {
    grid-column: span 9;
  }
  .iris-CssGrid-cell--xl-10of12 {
    grid-column: span 10;
  }
  .iris-CssGrid-cell--xl-11of12 {
    grid-column: span 11;
  }
  .iris-CssGrid-cell--xl-12of12 {
    grid-column: span 12;
  }
}
@media (min-width: 1680px) {
  .iris-CssGrid-cell--xxl-1of12 {
    grid-column: span 1;
  }
  .iris-CssGrid-cell--xxl-2of12 {
    grid-column: span 2;
  }
  .iris-CssGrid-cell--xxl-3of12 {
    grid-column: span 3;
  }
  .iris-CssGrid-cell--xxl-4of12 {
    grid-column: span 4;
  }
  .iris-CssGrid-cell--xxl-5of12 {
    grid-column: span 5;
  }
  .iris-CssGrid-cell--xxl-6of12 {
    grid-column: span 6;
  }
  .iris-CssGrid-cell--xxl-7of12 {
    grid-column: span 7;
  }
  .iris-CssGrid-cell--xxl-8of12 {
    grid-column: span 8;
  }
  .iris-CssGrid-cell--xxl-9of12 {
    grid-column: span 9;
  }
  .iris-CssGrid-cell--xxl-10of12 {
    grid-column: span 10;
  }
  .iris-CssGrid-cell--xxl-11of12 {
    grid-column: span 11;
  }
  .iris-CssGrid-cell--xxl-12of12 {
    grid-column: span 12;
  }
}
/* Row spans (bento) */
.iris-CssGrid-cell--rowSpan2 {
  grid-row: span 2;
}

.iris-CssGrid-cell--rowSpan3 {
  grid-row: span 3;
}

/* Auto-fit (intrinsic, no media queries) */
.iris-CssGrid--autoFit {
  display: grid;
  gap: var(--iris-grid-gutter-width, var(--iris-spacer-12));
  grid-template-columns: repeat(auto-fit, minmax(var(--iris-grid-min-cell, 16rem), 1fr));
}

/* Bento */
.iris-CssGrid--bento {
  display: grid;
  gap: var(--iris-grid-gutter-width, var(--iris-spacer-12));
  grid-auto-flow: dense;
  grid-auto-rows: var(--iris-bento-row-height, 180px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.iris-CssGrid--bento .iris-CssGrid-cell--hero {
  grid-column: span 2;
  grid-row: span 2;
}

.iris-CssGrid--bento .iris-CssGrid-cell--wide {
  grid-column: span 2;
}

@media (max-width: 767.98px) {
  .iris-CssGrid--bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 543.98px) {
  .iris-CssGrid--bento {
    grid-auto-rows: auto;
    grid-template-columns: 1fr;
  }
  .iris-CssGrid--bento .iris-CssGrid-cell--hero,
  .iris-CssGrid--bento .iris-CssGrid-cell--wide {
    grid-column: auto;
    grid-row: auto;
  }
}
/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/grid/_primitives
 * The single flex layout primitive, .iris-Group (token-bound). Replaces the former
 * Stack/Cluster pair and folds the flexbox utility intent in as modifiers; the eight
 * Every-Layout primitives below Cluster (Sidebar, Switcher, Center, Reel, Cover, Box,
 * Frame, Imposter) were removed under AC-C7. CSS-Grid lives in _css-grid.scss. The gap
 * knob is the --iris-group-space custom property with a token fallback.
 */
/* Group — one flex primitive; wraps by default (the former Cluster shape) */
.iris-Group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iris-group-space, var(--iris-spacer-8));
}

/* Direction (folds the former flex row/column utilities) */
.iris-Group--horizontal {
  flex-direction: row;
}

.iris-Group--vertical {
  flex-direction: column;
}

/* Gap sizes (folds the former Stack --sm/--lg/--xl) */
.iris-Group--gap-sm {
  --iris-group-space: var(--iris-spacer-8);
}

.iris-Group--gap-lg {
  --iris-group-space: var(--iris-spacer-16);
}

.iris-Group--gap-xl {
  --iris-group-space: var(--iris-spacer-20);
}

/* Wrap (folds the former flex wrap/no-wrap utilities) */
.iris-Group--wrap {
  flex-wrap: wrap;
}

.iris-Group--noWrap {
  flex-wrap: nowrap;
}

/* Align-items (folds the former flex align utilities) */
.iris-Group--alignStart {
  align-items: flex-start;
}

.iris-Group--alignCenter {
  align-items: center;
}

.iris-Group--alignEnd {
  align-items: flex-end;
}

.iris-Group--alignStretch {
  align-items: stretch;
}

/* Justify-content (folds the former flex justify utilities + Cluster between/center) */
.iris-Group--justifyStart {
  justify-content: flex-start;
}

.iris-Group--justifyCenter {
  justify-content: center;
}

.iris-Group--justifyEnd {
  justify-content: flex-end;
}

.iris-Group--between {
  justify-content: space-between;
}

/* Center — both axes (folds the former flex center utility) */
.iris-Group--center {
  align-items: center;
  justify-content: center;
}

/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */
/*
 * @module global/grid/_content-container
 * The page content container, .iris-Content. Centers a max-width content column and
 * gutters it at smaller viewports. Both knobs are the responsive viewport tokens, which
 * the layout root re-declares per breakpoint — so the container carries no media queries
 * of its own:
 *   - max-width  ← --iris-layout-viewport-vp-content-max    (1280px sm–xl, 1600px xxl)
 *   - gutters    ← --iris-layout-viewport-vp-content-margin  (0 at the base tiers, 32px from mid up)
 * Centered via margin-inline: auto. Use alongside the grid and layout primitives
 * (.iris-CssGrid / .iris-FlexGrid / .iris-Group): the container bounds and centers the
 * column; a grid or Group lays out the content inside it.
 */
.iris-Content {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--iris-layout-viewport-vp-content-max);
  padding-inline: var(--iris-layout-viewport-vp-content-margin);
  width: 100%;
}