/* DS Tokens — Entry point
 * Imports all token layers in the correct order.
 *
 * Usage:
 *   @import '@symfoniaenterprise/ds-core/tokens';
 */

/* DS Reset — baseline browser normalization
 *
 * Imported once globally via tokens/index.css.
 * Mirrors the Tailwind preflight behaviour used in packages/ds-figma/scaffold.
 *
 * Rules added here:
 *  - box-sizing: border-box  — fixes width calculations (most common layout bug)
 *  - body margin: 0          — removes default 8px browser margin
 *  - form element font       — native button/input/select/textarea don't inherit
 *                              font by default; without this DS font tokens are ignored
 *  - heading normalization   — h1–h6 get browser-default size/weight; reset to
 *                              inherit so DS component styles take full control
 *  - img block               — inline images create unexpected bottom gap
 *
 * NOT included (handled per-component in CSS Modules):
 *  - cursor: pointer on button  — set in Button.module.css / Input.module.css
 *  - padding: 0 on button       — set per-size in Button.module.css
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  line-height: inherit;
  margin: 0;
}

/* Normalize native form elements — without this they ignore CSS custom properties
   for font-family/size set on :root or body, so DS typography tokens don't work. */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font-family: inherit;
  font-feature-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

/* Headings carry browser-default sizes (h1 = 2em, h2 = 1.5em …).
   Reset to inherit so component-level styles have full control. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* Inline images create a ~4px bottom gap due to baseline alignment.
   Block removes it and is the expected behaviour in layout contexts. */
img,
svg,
video {
  display: block;
}


/* Brand-theme - Symfonia - color */
:root,
html[data-brand='symfonia'] {
  /* Symfonia-specific purple and yellow palettes (differ from ds-tokens defaults) */
  --colors-accent-purple-200: rgb(210 190 233 / 100%);
  --colors-accent-purple-300: rgb(186 156 222 / 100%);
  --colors-accent-purple-400: rgb(163 124 212 / 100%);
  --colors-accent-purple-500: rgb(141 94 202 / 100%);
  --colors-accent-purple-600: rgb(119 63 191 / 100%);
  --colors-accent-purple-700: rgb(92 49 148 / 100%);
  --colors-accent-purple-800: rgb(65 35 105 / 100%);
  --colors-accent-purple-900: rgb(29 18 45 / 100%);
  --colors-yellow-100: rgb(249 225 163 / 100%);
  --colors-yellow-200: rgb(241 187 47 / 100%);
  --colors-yellow-300: rgb(213 157 14 / 100%);
  --colors-yellow-400: rgb(179 132 15 / 100%);
  --colors-yellow-500: rgb(149 111 17 / 100%);
  --colors-yellow-600: rgb(121 89 11 / 100%);
  --colors-yellow-700: rgb(94 69 8 / 100%);
  --colors-yellow-800: rgb(68 50 6 / 100%);
  --colors-yellow-900: rgb(37 27 3 / 100%);
  --brand-050: #f4fcf3ff;
  --brand-100: #e5fce2ff;
  --brand-150: #bdeeb8ff;
  --brand-200: #9fe497ff;
  --brand-300: #3bbd2eff;
  --brand-400: #32a027ff;
  --brand-500: #2a8621ff;
  --brand-600: #226e1bff;
  --brand-700: #1b5615ff;
  --brand-800: #133e0fff;
  --brand-900: #0b2308ff;
  --brandSwitch-ING: false;
  --brandSwitch-Symfonia: true;
}

/* Brand-theme - ING */
html[data-brand='ing'] {
  --brand-050: #fffdfbff;
  --brand-100: #fef9f4ff;
  --brand-200: #ffcfb2ff;
  --brand-300: #ffa670ff;
  --brand-400: #ff7b2aff;
  --brand-500: #ff6200ff;
  --brand-600: #a53f00ff;
  --brand-700: #803609ff;
  --brand-800: #5e2807ff;
  --brand-900: #371704ff;
  --brandSwitch-ING: true;
  --brandSwitch-Symfonia: false;
}


/* DS Tokens — Typography primitive
 * Font face definitions and base font families.
 */

@font-face {
  font-display: swap;
  font-family: Quicksand;
  font-style: normal;
  font-weight: 300 700;
  src: url('./fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
}

:root {
  --font-family-base: 'Quicksand', system-ui, -apple-system, sans-serif;

  /* Monospace font used for code blocks and inline code globally */
  --font-family-mono:
    ui-monospace, 'sfmono-regular', menlo, monaco, 'roboto mono', 'courier new', monospace;

  /* Code block / inline code tokens (used globally for <pre> and <code>) */
  --code-bg: rgb(244 246 248 / 100%);
  --code-color: var(--text-default);
  --code-padding: var(--spacing-2);
  --code-border-radius: 6px;
}

/* Global styling for code elements — applied via tokens entrypoint */
pre,
code,
kbd,
samp {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-small);
}

pre {
  /* normalize default margins and apply code block visual styles */
  background-color: var(--code-bg);
  border-radius: var(--code-border-radius);
  margin: 0;
  overflow-wrap: break-word; /* allow wrapping in narrow containers like Storybook panels */
  padding: var(--code-padding);
  white-space: pre-wrap;
}

code {
  background-color: var(--code-bg);
  border-radius: calc(var(--code-border-radius) / 2);
  color: var(--code-color);
  padding: calc(var(--code-padding) / 2);
}

/* ================================================================
   DS Tokens — Typography Scale utility classes
   Source: Figma POC AI scaffold (packages/ds-figma/scaffold/src/styles/typography.css)
   Converted from Tailwind v4 @utility format to pure CSS classes.

   Font family: --font-family-base — defined in typography.css
   This file must be imported AFTER typography.css to resolve the variable.

   8 sizes × 2 weights (regular + bold) + 4 legacy aliases = 22 classes
   PREFIX: `typo-` (not `text-`) to avoid Tailwind color utility conflicts.
   ================================================================ */

/* === Body Ultra Small (10px) === */

.typo-body-ultrasmall {
  font-family: var(--font-family-base);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.24px;
  line-height: 0.75rem;
}

.typo-body-ultrasmall-bold {
  font-family: var(--font-family-base);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.24px;
  line-height: 0.75rem;
}

/* === Body XS (12px) === */

.typo-body-xs {
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.24px;
  line-height: 1rem;
}

.typo-body-xs-bold {
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24px;
  line-height: 1rem;
}

/* === Body XS Legacy (12px, tight line-height) === */

.typo-body-xs-legacy {
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.24px;
  line-height: 0.75rem;
}

/* === Body SM (14px) === */

.typo-body-sm {
  font-family: var(--font-family-base);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.14px;
  line-height: 1.5rem;
}

.typo-body-sm-bold {
  font-family: var(--font-family-base);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14px;
  line-height: 1.5rem;
}

/* === Body SM Legacy (14px, tight line-height) === */

.typo-body-sm-legacy {
  font-family: var(--font-family-base);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.14px;
  line-height: 1rem;
}

.typo-body-sm-legacy-bold {
  font-family: var(--font-family-base);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14px;
  line-height: 1rem;
}

/* === Body (16px) === */

.typo-body {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5rem;
}

.typo-body-bold {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.5rem;
}

/* === Body MD (16px, explicit alias of .typo-body) === */

.typo-body-md {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5rem;
}

/* === Subtitle (20px) === */

.typo-subtitle {
  font-family: var(--font-family-base);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 2rem;
}

.typo-subtitle-bold {
  font-family: var(--font-family-base);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 2rem;
}

/* === Subtitle Legacy (20px, tight line-height) === */

.typo-subtitle-legacy {
  font-family: var(--font-family-base);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5rem;
}

.typo-subtitle-legacy-bold {
  font-family: var(--font-family-base);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.5rem;
}

/* === Title SM (24px) === */

.typo-title-sm {
  font-family: var(--font-family-base);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 2rem;
}

.typo-title-sm-bold {
  font-family: var(--font-family-base);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 2rem;
}

/* === Title (32px) === */

.typo-title {
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 2.5rem;
}

.typo-title-bold {
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 2.5rem;
}

/* === Title LG (36px) === */

.typo-title-lg {
  font-family: var(--font-family-base);
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 3rem;
}

.typo-title-lg-bold {
  font-family: var(--font-family-base);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 3rem;
}

/* Core - Symfonia - color */
:root {
  --colors-accent-mint-050: #f0fcf6ff;
  --colors-accent-mint-100: #d4f3e3ff;
  --colors-accent-mint-200: #64e3a0ff;
  --colors-accent-mint-300: #17c769ff;
  --colors-accent-mint-400: #14aa5aff;
  --colors-accent-mint-500: #108848ff;
  --colors-accent-mint-600: #0c703bff;
  --colors-accent-mint-700: #09592eff;
  --colors-accent-mint-800: #064221ff;
  --colors-accent-mint-900: #072113ff;
  --colors-accent-neutral-blue-050: #f6f8f9ff;
  --colors-accent-neutral-blue-100: #e7ecf0ff;
  --colors-accent-neutral-blue-200: #becad5ff;
  --colors-accent-neutral-blue-300: #9aacbbff;
  --colors-accent-neutral-blue-400: #7a91a5ff;
  --colors-accent-neutral-blue-500: #60788eff;
  --colors-accent-neutral-blue-600: #4d6071ff;
  --colors-accent-neutral-blue-700: #3b4a57ff;
  --colors-accent-neutral-blue-800: #29333cff;
  --colors-accent-neutral-blue-900: #0f1316ff;
  --colors-accent-orange-050: #fff8f2ff;
  --colors-accent-orange-100: #ffd8b8ff;
  --colors-accent-orange-200: #ffaf6cff;
  --colors-accent-orange-300: #fd8520ff;
  --colors-accent-orange-400: #e36902ff;
  --colors-accent-orange-500: #bf5802ff;
  --colors-accent-orange-600: #9d4902ff;
  --colors-accent-orange-700: #7d3a02ff;
  --colors-accent-orange-800: #5c2b01ff;
  --colors-accent-orange-900: #1e140bff;
  --colors-accent-pale-blue-050: #f4f8fbff;
  --colors-accent-pale-blue-100: #e2ebf3ff;
  --colors-accent-pale-blue-200: #b4ccdfff;
  --colors-accent-pale-blue-300: #8aafcdff;
  --colors-accent-pale-blue-400: #6394bdff;
  --colors-accent-pale-blue-500: #477ba7ff;
  --colors-accent-pale-blue-600: #3a6488ff;
  --colors-accent-pale-blue-700: #2d4d69ff;
  --colors-accent-pale-blue-800: #20374aff;
  --colors-accent-pale-blue-900: #0f1921ff;
  --colors-accent-pale-green-050: #f5faf4ff;
  --colors-accent-pale-green-100: #e1f2e0ff;
  --colors-accent-pale-green-200: #a4d89eff;
  --colors-accent-pale-green-300: #69bf60ff;
  --colors-accent-pale-green-400: #4aa241ff;
  --colors-accent-pale-green-500: #3d8536ff;
  --colors-accent-pale-green-600: #316b2cff;
  --colors-accent-pale-green-700: #265322ff;
  --colors-accent-pale-green-800: #1a3a17ff;
  --colors-accent-pale-green-900: #0a1508ff;
  --colors-accent-pale-red-050: #fef0f4ff;
  --colors-accent-pale-red-100: #fdd9e2ff;
  --colors-accent-pale-red-200: #fbadc1ff;
  --colors-accent-pale-red-300: #f981a0ff;
  --colors-accent-pale-red-400: #f74e79ff;
  --colors-accent-pale-red-500: #ea094eff;
  --colors-accent-pale-red-600: #c20740ff;
  --colors-accent-pale-red-700: #9b0633ff;
  --colors-accent-pale-red-800: #730426ff;
  --colors-accent-pale-red-900: #360715ff;
  --colors-accent-pink-050: #ffeef8ff;
  --colors-accent-pink-100: #ffdaf4ff;
  --colors-accent-pink-200: #ffa8e4ff;
  --colors-accent-pink-300: #ff74d5ff;
  --colors-accent-pink-400: #ff2abfff;
  --colors-accent-pink-500: #df009cff;
  --colors-accent-pink-600: #b70080ff;
  --colors-accent-pink-700: #930067ff;
  --colors-accent-pink-800: #6f004eff;
  --colors-accent-pink-900: #24071bff;
  --colors-accent-purple-050: #f8f5fcff;
  --colors-accent-purple-100: #ede5f6ff;
  --colors-accent-purple-200: #d4b4fdff;
  --colors-accent-purple-300: #bf8ffcff;
  --colors-accent-purple-400: #aa6afbff;
  --colors-accent-purple-500: #9545faff;
  --colors-accent-purple-600: #7914f9ff;
  --colors-accent-purple-700: #5e05ceff;
  --colors-accent-purple-800: #46049aff;
  --colors-accent-purple-900: #2a035cff;
  --colors-blue-050: #f0f8ffff;
  --colors-blue-100: #cbe7ffff;
  --colors-blue-200: #8bcaffff;
  --colors-blue-300: #56adf6ff;
  --colors-blue-400: #2090eeff;
  --colors-blue-500: #1078ceff;
  --colors-blue-600: #0761abff;
  --colors-blue-700: #044c86ff;
  --colors-blue-800: #033761ff;
  --colors-blue-900: #011f37ff;
  --colors-green-050: #f1fff0ff;
  --colors-green-100: #a8f6a0ff;
  --colors-green-200: #13e300ff;
  --colors-green-300: #10c300ff;
  --colors-green-400: #0ea500ff;
  --colors-green-500: #0c8900ff;
  --colors-green-600: #0e6f06ff;
  --colors-green-700: #0b5805ff;
  --colors-green-800: #084104ff;
  --colors-green-900: #052502ff;
  --colors-grey-000: #ffffffff;
  --colors-grey-050: #f7f7f8ff;
  --colors-grey-075: #efeff1ff;
  --colors-grey-100: #e0e1e6ff;
  --colors-grey-150: #d5d6ddff;
  --colors-grey-200: #c2c3ccff;
  --colors-grey-300: #a5a6b6ff;
  --colors-grey-400: #898a9eff;
  --colors-grey-500: #72748bff;
  --colors-grey-600: #5f6073ff;
  --colors-grey-700: #4c4d5cff;
  --colors-grey-800: #3a3a47ff;
  --colors-grey-900: #23232aff;
  --colors-grey-950: #16161dff;
  --colors-grey-999: #0c0c0eff;
  --colors-red-050: #fff5f5ff;
  --colors-red-100: #fcd8d8ff;
  --colors-red-200: #f9aeaeff;
  --colors-red-300: #f68585ff;
  --colors-red-400: #f35656ff;
  --colors-red-500: #ec1111ff;
  --colors-red-600: #c00d0dff;
  --colors-red-700: #9b0a0aff;
  --colors-red-800: #750808ff;
  --colors-red-900: #4c0505ff;
  --colors-utility-semiTransparentBlack: #00000080;
  --colors-utility-semiTransparentWhite: #ffffff80;
  --colors-utility-shadowBlack: #0000001f;
  --colors-utility-shadowWhite: #ffffff1f;
  --colors-utility-transparentBlack: #00000003;
  --colors-utility-transparentWhite: #ffffff03;
  --colors-yellow-050: #fffaf2ff;
  --colors-yellow-100: #ffebc8ff;
  --colors-yellow-200: #ffc25aff;
  --colors-yellow-300: #f59b00ff;
  --colors-yellow-400: #d17900ff;
  --colors-yellow-500: #b36100ff;
  --colors-yellow-600: #935000ff;
  --colors-yellow-700: #733f00ff;
  --colors-yellow-800: #552f00ff;
  --colors-yellow-900: #331c00ff;
}

/* Core - Symfonia - number */
:root {
  --numbers-size-1: 1px;
  --numbers-size-2: 2px;
  --numbers-size-3: 3px;
  --numbers-size-4: 4px;
  --numbers-size-6: 6px;
  --numbers-size-8: 8px;
  --numbers-size-10: 10px;
  --numbers-size-12: 12px;
  --numbers-size-14: 14px;
  --numbers-size-16: 16px;
  --numbers-size-18: 18px;
  --numbers-size-20: 20px;
  --numbers-size-22: 22px;
  --numbers-size-24: 24px;
  --numbers-size-28: 28px;
  --numbers-size-32: 32px;
  --numbers-size-36: 36px;
  --numbers-size-40: 40px;
  --numbers-size-44: 44px;
  --numbers-size-48: 48px;
  --numbers-size-52: 52px;
  --numbers-size-56: 56px;
  --numbers-size-60: 60px;
  --numbers-size-64: 64px;
  --numbers-size-68: 68px;
  --numbers-size-72: 72px;
  --numbers-size-76: 76px;
  --numbers-size-80: 80px;
  --numbers-size-84: 84px;
  --numbers-size-96: 96px;

  /* weight */
  --numbers-weight-100: 100;
  --numbers-weight-200: 200;
  --numbers-weight-300: 300;
  --numbers-weight-400: 400;
  --numbers-weight-500: 500;
  --numbers-weight-600: 600;
  --numbers-weight-700: 700;
  --numbers-weight-800: 800;

  /* opacity */
  --numbers-opacity-50: 0.5;
  --numbers-opacity-60: 0.6;
  --numbers-opacity-70: 0.7;
}


/* numeric - Mode 1 - number */
:root {
  /* border */
  --border-thick: var(--numbers-size-2);
  --border-x-thick: var(--numbers-size-1);
  --focus-ring-width: var(--numbers-size-4);

  /* effect */
  --effect-blur: var(--numbers-size-16);
  --effect-position-x: 0;
  --effect-position-y: var(--numbers-size-8);
  --effect-spread: 0;

  /* font size */
  --font-size-xxs: var(--numbers-size-10);
  --font-size-small: var(--numbers-size-14);
  --font-size-default: var(--numbers-size-16);
  --font-size-subtitle: var(--numbers-size-20);
  --font-size-title-small: var(--numbers-size-24);
  --font-size-title: var(--numbers-size-32);
  --font-size-title-big: var(--numbers-size-36);
  --font-size-x-small: var(--numbers-size-12);

  /* font weight */
  --font-weight-light: var(--numbers-weight-200);
  --font-weight-medium: var(--numbers-weight-400);
  --font-weight-semibold: var(--numbers-weight-600);
  --font-weight-bold: var(--numbers-weight-700);

  /* letter spacing */
  --letter-spacing-tight: 0.24px;
  --letter-spacing-normal: 0.14px;
  --letter-spacing-none: normal;

  /* line height */
  --line-height-densest: var(--numbers-size-12);
  --line-height-denser: var(--numbers-size-16);
  --line-height-dense: var(--numbers-size-24);
  --line-height-normal: var(--numbers-size-32);
  --line-height-compact: var(--numbers-size-40);
  --line-height-relaxed: var(--numbers-size-48);
  --line-height-tight: var(--numbers-size-56);
  --line-height-loose: var(--numbers-size-84); /* TODO 84px */

  /* icon */
  --icon-xs: var(--numbers-size-20);
  --icon-sm: var(--numbers-size-16);
  --icon-md: var(--numbers-size-24);
  --icon-lg: var(--numbers-size-32);

  /* radius */
  --radius-large: var(--numbers-size-16);
  --radius-medium: var(--numbers-size-8);
  --radius-round: var(--numbers-size-40);
  --radius-x-small: var(--numbers-size-6);
  --radius-small: var(--numbers-size-4);

  /* spacing */
  --spacing-0-5: var(--numbers-size-2);
  --spacing-1: var(--numbers-size-4);
  --spacing-1-5: var(--numbers-size-6);
  --spacing-2: var(--numbers-size-8);
  --spacing-3: var(--numbers-size-12);
  --spacing-3-5: var(--numbers-size-14);
  --spacing-4: var(--numbers-size-16);
  --spacing-5: var(--numbers-size-20);
  --spacing-6: var(--numbers-size-24);
  --spacing-7: var(--numbers-size-32);
  --spacing-8: var(--numbers-size-40);
  --spacing-9: var(--numbers-size-48);
  --spacing-10: var(--numbers-size-64);
  --spacing-11: var(--numbers-size-80);

  /* stroke */
  --stroke-width-1: 1;
  --stroke-width-2: 2;
  --stroke-width-4: 4;

  /* grid */
  --spacing-unit: var(--numbers-size-8);
  --gap-1: calc(var(--spacing-unit) * 1); /* 8px */
  --gap-2: calc(var(--spacing-unit) * 2); /* 16px */
  --gap-3: calc(var(--spacing-unit) * 3); /* 24px */
  --gap-4: calc(var(--spacing-unit) * 4); /* 32px */
  --gap-5: calc(var(--spacing-unit) * 5); /* 40px */
  --gap-6: calc(var(--spacing-unit) * 6); /* 48px */
  --gap-8: calc(var(--spacing-unit) * 8); /* 64px */
  --gap-10: calc(var(--spacing-unit) * 10); /* 80px */
  --gap-12: calc(var(--spacing-unit) * 12); /* 96px */

  /* dodatki */
  --opacity-muted: var(--numbers-opacity-70);
}

/* breakpoints - Mode 1 - number */
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1440px;
  --breakpoint-tablet: 768px;
  --breakpoint-tablet-max: 1023px;
}

@custom-media --sm (max-width: 640px);
@custom-media --md (max-width: 900px);
@custom-media --lg (max-width: 1200px);
@custom-media --above-sm (min-width: 641px);
@custom-media --above-md (min-width: 901px);
@custom-media --above-lg (min-width: 1201px);
@custom-media --below-tablet (max-width: 767px);
@custom-media --tablet-range (min-width: 768px) and (max-width: 1023px);

/* Elevation & Layering - Semantic */
:root {
  /* Shadow tokens */
  --shadow-small: 0 1px 3px rgb(0 0 0 / 12%);
  --shadow-small-hover: 0 4px 6px rgb(0 0 0 / 16%);
  --shadow-medium: 0 4px 12px rgb(0 0 0 / 8%);
  --shadow-medium-hover: 0 4px 12px rgb(0 0 0 / 12%);
  --shadow-medium-strong: 0 4px 12px rgb(0 0 0 / 16%);
  --shadow-large: 0 8px 16px rgb(0 0 0 / 12%);
  --shadow-large-strong: 0 8px 16px 0 #0000001f;
  --shadow-xlarge: 0 8px 24px 0 rgb(16 24 40 / 16%);

  /* Z-index layers */
  --z-index-sticky: 900;
  --z-index-dropdown: 1000;
  --z-index-popover: 1050;
  --z-index-overlay: 1100;
  --z-index-drawer: 1150;
  --z-index-modal: 1200;

  /* Popupy portalowane obok modala (Select/Autocomplete) — muszą leżeć nad nim,
   * ale pod tooltipem i toastem. Zapas nad --z-index-modal pokrywa też warstwę
   * modala zagnieżdżonego (--modal-nested-z-index). */
  --z-index-popup-over-modal: 1250;
  --z-index-tooltip: 1300;
  --z-index-toast: 1400;

  /* Filters */
  --filter-brightness-hover: brightness(0.92);
}

/* Timing & Animation — Semantic */
:root {
  --transition-duration-fast: 0.15s;
  --transition-duration-default: 0.2s;
}

/* color - Light - color */
html[data-color='light'] {
  --backdrop-default: var(--colors-utility-semiTransparentBlack);
  --backdrop-soft: rgb(0 0 0 / 35%);
  --skeleton-shimmer-base: rgb(0 0 0 / 6%);
  --skeleton-shimmer-fade: rgb(0 0 0 / 4%);
  --background-accent-black-active: var(--colors-grey-000);
  --background-accent-black-default: var(--colors-grey-900);
  --background-accent-black-hover: var(--colors-grey-700);
  --background-accent-black-soft: var(--colors-grey-150);
  --background-accent-black-softest: var(--colors-grey-100);
  --background-accent-blue-active: var(--colors-blue-800);
  --background-accent-blue-default: var(--colors-blue-600);
  --background-accent-blue-hover: var(--colors-blue-700);
  --background-accent-blue-soft: var(--colors-blue-100);
  --background-accent-blue-softest: var(--colors-blue-050);
  --background-accent-mint-active: var(--colors-accent-mint-700);
  --background-accent-mint-default: var(--colors-accent-mint-500);
  --background-accent-mint-hover: var(--colors-accent-mint-600);
  --background-accent-mint-soft: var(--colors-accent-mint-100);
  --background-accent-mint-softest: var(--colors-accent-mint-050);
  --background-accent-neon-green-active: var(--colors-green-400);
  --background-accent-neon-green-default: var(--colors-green-200);
  --background-accent-neon-green-hover: var(--colors-green-300);
  --background-accent-neon-green-soft: var(--colors-green-100);
  --background-accent-neon-green-softest: var(--colors-green-050);
  --background-accent-neutral-blue-active: var(--colors-accent-neutral-blue-700);
  --background-accent-neutral-blue-default: var(--colors-accent-neutral-blue-500);
  --background-accent-neutral-blue-hover: var(--colors-accent-neutral-blue-600);
  --background-accent-neutral-blue-soft: var(--colors-accent-neutral-blue-100);
  --background-accent-neutral-blue-softest: var(--colors-accent-neutral-blue-050);
  --background-accent-orange-active: var(--colors-accent-orange-700);
  --background-accent-orange-default: var(--colors-accent-orange-500);
  --background-accent-orange-hover: var(--colors-accent-orange-600);
  --background-accent-orange-soft: var(--colors-accent-orange-100);
  --background-accent-orange-softest: var(--colors-accent-orange-050);
  --background-accent-pale-blue-active: var(--colors-accent-pale-blue-700);
  --background-accent-pale-blue-default: var(--colors-accent-pale-blue-500);
  --background-accent-pale-blue-hover: var(--colors-accent-pale-blue-600);
  --background-accent-pale-blue-soft: var(--colors-accent-pale-blue-100);
  --background-accent-pale-blue-softest: var(--colors-accent-pale-blue-050);
  --background-accent-pale-green-active: var(--colors-accent-pale-green-700);
  --background-accent-pale-green-default: var(--colors-accent-pale-green-500);
  --background-accent-pale-green-hover: var(--colors-accent-pale-green-600);
  --background-accent-pale-green-soft: var(--colors-accent-pale-green-100);
  --background-accent-pale-green-softest: var(--colors-accent-pale-green-050);
  --background-accent-pale-red-active: var(--colors-accent-pale-red-700);
  --background-accent-pale-red-default: var(--colors-accent-pale-red-500);
  --background-accent-pale-red-hover: var(--colors-accent-pale-red-600);
  --background-accent-pale-red-soft: var(--colors-accent-pale-red-100);
  --background-accent-pale-red-softest: var(--colors-accent-pale-red-050);
  --background-accent-pink-active: var(--colors-accent-pink-700);
  --background-accent-pink-default: var(--colors-accent-pink-500);
  --background-accent-pink-hover: var(--colors-accent-pink-600);
  --background-accent-pink-soft: var(--colors-accent-pink-100);
  --background-accent-pink-softest: var(--colors-accent-pink-050);
  --background-accent-purple-active: var(--colors-accent-purple-700);
  --background-accent-purple-default: var(--colors-accent-purple-500);
  --background-accent-purple-hover: var(--colors-accent-purple-600);
  --background-accent-purple-soft: var(--colors-accent-purple-100);
  --background-accent-purple-softest: var(--colors-accent-purple-050);
  --background-accent-white-active: var(--colors-grey-100);
  --background-accent-white-default: var(--colors-grey-000);
  --background-accent-white-hover: var(--colors-grey-075);
  --background-accent-white-soft: var(--colors-grey-150);
  --background-accent-white-softest: var(--colors-grey-050);
  --background-accent-yellow-active: var(--colors-yellow-400);
  --background-accent-yellow-default: var(--colors-yellow-200);
  --background-accent-yellow-hover: var(--colors-yellow-300);
  --background-accent-yellow-soft: var(--colors-yellow-100);
  --background-accent-yellow-softest: var(--colors-yellow-050);
  --background-default: var(--colors-grey-000);
  --background-destructive-active: var(--colors-red-700);
  --background-destructive-default: var(--colors-red-500);
  --background-destructive-hover: var(--colors-red-600);
  --background-destructive-soft: var(--colors-red-100);
  --background-destructive-softest: var(--colors-red-050);
  --background-disabled-default: var(--colors-grey-100);
  --background-disabled-stronger: var(--colors-grey-300);
  --background-disabled-strongest: var(--colors-grey-500);
  --background-informative-active: var(--colors-blue-700);
  --background-informative-default: var(--colors-blue-500);
  --background-informative-hover: var(--colors-blue-600);
  --background-informative-soft: var(--colors-blue-100);
  --background-informative-softest: var(--colors-blue-050);
  --background-inverted: var(--colors-grey-950);
  --background-neutral: var(--colors-grey-050);
  --background-primary-active: var(--brand-700);
  --background-primary-default: var(--brand-500);
  --background-primary-hover: var(--brand-600);
  --background-primary-soft: var(--brand-100);
  --background-primary-softest: var(--brand-050);
  --background-soft: var(--colors-grey-075);
  --background-success-active: var(--colors-green-700);
  --background-success-default: var(--colors-green-500);
  --background-success-hover: var(--colors-green-600);
  --background-success-soft: var(--colors-green-100);
  --background-success-softest: var(--colors-green-050);
  --background-supportive: var(--colors-grey-100);
  --background-transparent: var(--colors-utility-transparentWhite);
  --background-warning-active: var(--colors-yellow-700);
  --background-warning-default: var(--colors-yellow-500);
  --background-warning-hover: var(--colors-yellow-600);
  --background-warning-soft: var(--colors-yellow-100);
  --background-warning-softest: var(--colors-yellow-050);
  --border-bold: var(--colors-grey-400);
  --border-default: var(--colors-grey-200);
  --border-destructive-active: var(--colors-red-700);
  --border-destructive-default: var(--colors-red-500);
  --border-destructive-hover: var(--colors-red-600);
  --border-destructive-soft: var(--colors-red-200);
  --border-disabled-default: var(--colors-grey-500);
  --border-disabled-soft: var(--colors-grey-300);
  --border-informative-active: var(--colors-blue-700);
  --border-informative-default: var(--colors-blue-500);
  --border-informative-hover: var(--colors-blue-600);
  --border-informative-soft: var(--colors-blue-200);
  --border-inverted: var(--colors-grey-000);
  --border-mint-default: var(--colors-accent-mint-500);
  --border-neutral-blue-default: var(--colors-accent-neutral-blue-500);
  --border-orange-default: var(--colors-accent-orange-500);
  --border-pale-blue-default: var(--colors-accent-pale-blue-500);
  --border-pale-green-default: var(--colors-accent-pale-green-500);
  --border-pale-red-default: var(--colors-accent-pale-red-500);
  --border-pink-default: var(--colors-accent-pink-500);
  --border-primary-active: var(--brand-700);
  --border-primary-default: var(--brand-500);
  --border-primary-hover: var(--brand-600);
  --border-purple-default: var(--colors-accent-purple-500);
  --border-softest: var(--colors-grey-100);
  --border-success-active: var(--colors-green-700);
  --border-success-default: var(--colors-green-500);
  --border-success-hover: var(--colors-green-600);
  --border-success-soft: var(--colors-green-200);
  --border-warning-active: var(--colors-yellow-700);
  --border-warning-default: var(--colors-yellow-500);
  --border-warning-hover: var(--colors-yellow-600);
  --border-warning-soft: var(--colors-yellow-200);
  --icon-default: var(--colors-grey-900);
  --icon-destructive-active: var(--colors-red-800);
  --icon-destructive-default: var(--colors-red-600);
  --icon-destructive-hover: var(--colors-red-700);
  --icon-destructive-strong: var(--colors-red-800);
  --icon-disabled-default: var(--colors-grey-300);
  --icon-disabled-strongest: var(--colors-grey-500);
  --icon-informative-active: var(--colors-blue-800);
  --icon-informative-default: var(--colors-blue-600);
  --icon-informative-hover: var(--colors-blue-700);
  --icon-informative-strong: var(--colors-blue-800);
  --icon-inverted: var(--colors-grey-000);
  --icon-mint-default: var(--colors-accent-mint-500);
  --icon-neutral-blue-default: var(--colors-accent-neutral-blue-500);
  --icon-orange-default: var(--colors-accent-orange-500);
  --icon-pale-blue-default: var(--colors-accent-pale-blue-500);
  --icon-pale-green-default: var(--colors-accent-pale-green-500);
  --icon-pale-red-default: var(--colors-accent-pale-red-500);
  --icon-pink-default: var(--colors-accent-pink-500);
  --icon-primary-active: var(--brand-700);
  --icon-primary-default: var(--brand-500);
  --icon-primary-hover: var(--brand-600);
  --icon-primary-stronger: var(--brand-600);
  --icon-primary-strongest: var(--brand-800);
  --icon-purple-default: var(--colors-accent-purple-500);
  --icon-soft: var(--colors-grey-300);
  --icon-strong: var(--colors-grey-600);
  --icon-success-active: var(--colors-green-800);
  --icon-success-default: var(--colors-green-600);
  --icon-success-hover: var(--colors-green-700);
  --icon-success-strong: var(--colors-green-800);
  --icon-warning-active: var(--colors-yellow-800);
  --icon-warning-default: var(--colors-yellow-600);
  --icon-warning-hover: var(--colors-yellow-700);
  --icon-warning-strong: var(--colors-yellow-800);
  --icon-white: var(--colors-grey-000);
  --shadow-default: var(--colors-utility-shadowBlack);
  --shadow-focus: var(--brand-600);
  --shadow-focus-outline: var(--colors-grey-000);
  --shadow-focus-destructive: rgb(208 48 48 / 12%);
  --focus-ring-color: var(--shadow-focus);
  --text-default: var(--colors-grey-900);
  --text-destructive-active: var(--colors-red-800);
  --text-destructive-default: var(--colors-red-600);
  --text-destructive-hover: var(--colors-red-700);
  --text-destructive-strong: var(--colors-red-800);
  --text-disabled-default: var(--colors-grey-500);
  --text-disabled-stronger: var(--colors-grey-700);
  --text-helper: var(--colors-grey-700);
  --text-informative-active: var(--colors-blue-800);
  --text-informative-default: var(--colors-blue-600);
  --text-informative-hover: var(--colors-blue-700);
  --text-informative-strong: var(--colors-blue-800);
  --text-inverted: var(--colors-grey-000);
  --text-mint-strong: var(--colors-accent-mint-800);
  --text-neutral-blue-strong: var(--colors-accent-neutral-blue-800);
  --text-orange-strong: var(--colors-accent-orange-800);
  --text-pale-blue-strong: var(--colors-accent-pale-blue-800);
  --text-pale-green-strong: var(--colors-accent-pale-green-800);
  --text-pale-red-strong: var(--colors-accent-pale-red-800);
  --text-pink-strong: var(--colors-accent-pink-800);
  --text-placeholder: var(--colors-grey-500);
  --text-softer: var(--colors-grey-200);
  --text-primary-active: var(--brand-800);
  --text-primary-default: var(--brand-600);
  --text-primary-hover: var(--brand-700);
  --text-primary-strong: var(--brand-800);
  --text-purple-default: var(--colors-accent-purple-500);
  --text-purple-strong: var(--colors-accent-purple-800);
  --text-success-active: var(--colors-green-800);
  --text-success-default: var(--colors-green-600);
  --text-success-hover: var(--colors-green-700);
  --text-success-strong: var(--colors-green-800);
  --text-warning-active: var(--colors-yellow-800);
  --text-warning-default: var(--colors-yellow-600);
  --text-warning-hover: var(--colors-yellow-700);
  --text-warning-strong: var(--colors-yellow-800);
  --text-white: var(--colors-grey-000);

  /* hover effects */
  --background-hover-overlay-subtle: rgb(0 0 0 / 5%);
}

/* color - Grey - color */
html[data-color='grey'] {
  --backdrop-default: var(--colors-utility-semiTransparentBlack);
  --backdrop-soft: rgb(0 0 0 / 35%);
  --skeleton-shimmer-base: rgb(0 0 0 / 6%);
  --skeleton-shimmer-fade: rgb(0 0 0 / 4%);
  --background-accent-black-active: var(--colors-grey-000);
  --background-accent-black-default: var(--colors-grey-900);
  --background-accent-black-hover: var(--colors-grey-700);
  --background-accent-black-soft: var(--colors-grey-150);
  --background-accent-black-softest: var(--colors-grey-100);
  --background-accent-blue-active: var(--colors-blue-800);
  --background-accent-blue-default: var(--colors-blue-600);
  --background-accent-blue-hover: var(--colors-blue-700);
  --background-accent-blue-soft: var(--colors-blue-100);
  --background-accent-blue-softest: var(--colors-blue-050);
  --background-accent-mint-active: var(--colors-accent-mint-700);
  --background-accent-mint-default: var(--colors-accent-mint-500);
  --background-accent-mint-hover: var(--colors-accent-mint-600);
  --background-accent-mint-soft: var(--colors-accent-mint-100);
  --background-accent-mint-softest: var(--colors-accent-mint-050);
  --background-accent-neon-green-active: var(--colors-green-400);
  --background-accent-neon-green-default: var(--colors-green-200);
  --background-accent-neon-green-hover: var(--colors-green-300);
  --background-accent-neon-green-soft: var(--colors-green-100);
  --background-accent-neon-green-softest: var(--colors-green-050);
  --background-accent-neutral-blue-active: var(--colors-accent-neutral-blue-700);
  --background-accent-neutral-blue-default: var(--colors-accent-neutral-blue-500);
  --background-accent-neutral-blue-hover: var(--colors-accent-neutral-blue-600);
  --background-accent-neutral-blue-soft: var(--colors-accent-neutral-blue-100);
  --background-accent-neutral-blue-softest: var(--colors-accent-neutral-blue-050);
  --background-accent-orange-active: var(--colors-accent-orange-700);
  --background-accent-orange-default: var(--colors-accent-orange-500);
  --background-accent-orange-hover: var(--colors-accent-orange-600);
  --background-accent-orange-soft: var(--colors-accent-orange-100);
  --background-accent-orange-softest: var(--colors-accent-orange-050);
  --background-accent-pale-blue-active: var(--colors-accent-pale-blue-700);
  --background-accent-pale-blue-default: var(--colors-accent-pale-blue-500);
  --background-accent-pale-blue-hover: var(--colors-accent-pale-blue-600);
  --background-accent-pale-blue-soft: var(--colors-accent-pale-blue-100);
  --background-accent-pale-blue-softest: var(--colors-accent-pale-blue-050);
  --background-accent-pale-green-active: var(--colors-accent-pale-green-700);
  --background-accent-pale-green-default: var(--colors-accent-pale-green-500);
  --background-accent-pale-green-hover: var(--colors-accent-pale-green-600);
  --background-accent-pale-green-soft: var(--colors-accent-pale-green-100);
  --background-accent-pale-green-softest: var(--colors-accent-pale-green-050);
  --background-accent-pale-red-active: var(--colors-accent-pale-red-700);
  --background-accent-pale-red-default: var(--colors-accent-pale-red-500);
  --background-accent-pale-red-hover: var(--colors-accent-pale-red-600);
  --background-accent-pale-red-soft: var(--colors-accent-pale-red-100);
  --background-accent-pale-red-softest: var(--colors-accent-pale-red-050);
  --background-accent-pink-active: var(--colors-accent-pink-700);
  --background-accent-pink-default: var(--colors-accent-pink-500);
  --background-accent-pink-hover: var(--colors-accent-pink-600);
  --background-accent-pink-soft: var(--colors-accent-pink-100);
  --background-accent-pink-softest: var(--colors-accent-pink-050);
  --background-accent-purple-active: var(--colors-accent-purple-700);
  --background-accent-purple-default: var(--colors-accent-purple-500);
  --background-accent-purple-hover: var(--colors-accent-purple-600);
  --background-accent-purple-soft: var(--colors-accent-purple-100);
  --background-accent-purple-softest: var(--colors-accent-purple-050);
  --background-accent-white-active: var(--colors-grey-100);
  --background-accent-white-default: var(--colors-grey-000);
  --background-accent-white-hover: var(--colors-grey-075);
  --background-accent-white-soft: var(--colors-grey-150);
  --background-accent-white-softest: var(--colors-grey-050);
  --background-accent-yellow-active: var(--colors-yellow-400);
  --background-accent-yellow-default: var(--colors-yellow-200);
  --background-accent-yellow-hover: var(--colors-yellow-300);
  --background-accent-yellow-soft: var(--colors-yellow-100);
  --background-accent-yellow-softest: var(--colors-yellow-050);
  --background-default: var(--colors-grey-050);
  --background-destructive-active: var(--colors-red-700);
  --background-destructive-default: var(--colors-red-500);
  --background-destructive-hover: var(--colors-red-600);
  --background-destructive-soft: var(--colors-red-100);
  --background-destructive-softest: var(--colors-red-050);
  --background-disabled-default: var(--colors-grey-150);
  --background-disabled-stronger: var(--colors-grey-400);
  --background-disabled-strongest: var(--colors-grey-600);
  --background-informative-active: var(--colors-blue-700);
  --background-informative-default: var(--colors-blue-500);
  --background-informative-hover: var(--colors-blue-600);
  --background-informative-soft: var(--colors-blue-100);
  --background-informative-softest: var(--colors-blue-050);
  --background-inverted: var(--colors-grey-999);
  --background-neutral: var(--colors-grey-100);
  --background-primary-active: var(--brand-700);
  --background-primary-default: var(--brand-500);
  --background-primary-hover: var(--brand-600);
  --background-primary-soft: var(--brand-100);
  --background-primary-softest: var(--brand-050);
  --background-soft: var(--colors-grey-100);
  --background-success-active: var(--colors-green-700);
  --background-success-default: var(--colors-green-500);
  --background-success-hover: var(--colors-green-600);
  --background-success-soft: var(--colors-green-100);
  --background-success-softest: var(--colors-green-050);
  --background-supportive: var(--colors-grey-150);
  --background-transparent: var(--colors-utility-transparentWhite);
  --background-warning-active: var(--colors-yellow-700);
  --background-warning-default: var(--colors-yellow-500);
  --background-warning-hover: var(--colors-yellow-600);
  --background-warning-soft: var(--colors-yellow-100);
  --background-warning-softest: var(--colors-yellow-050);
  --border-bold: var(--colors-grey-400);
  --border-default: var(--colors-grey-300);
  --border-destructive-active: var(--colors-red-700);
  --border-destructive-default: var(--colors-red-500);
  --border-destructive-hover: var(--colors-red-600);
  --border-destructive-soft: var(--colors-red-300);
  --border-disabled-default: var(--colors-grey-600);
  --border-disabled-soft: var(--colors-grey-400);
  --border-informative-active: var(--colors-blue-700);
  --border-informative-default: var(--colors-blue-500);
  --border-informative-hover: var(--colors-blue-600);
  --border-informative-soft: var(--colors-blue-300);
  --border-inverted: var(--colors-grey-075);
  --border-mint-default: var(--colors-accent-mint-500);
  --border-neutral-blue-default: var(--colors-accent-neutral-blue-500);
  --border-orange-default: var(--colors-accent-orange-500);
  --border-pale-blue-default: var(--colors-accent-pale-blue-500);
  --border-pale-green-default: var(--colors-accent-pale-green-500);
  --border-pale-red-default: var(--colors-accent-pale-red-500);
  --border-pink-default: var(--colors-accent-pink-500);
  --border-primary-active: var(--brand-700);
  --border-primary-default: var(--brand-500);
  --border-primary-hover: var(--brand-600);
  --border-purple-default: var(--colors-accent-purple-500);
  --border-softest: var(--colors-grey-200);
  --border-success-active: var(--colors-green-700);
  --border-success-default: var(--colors-green-500);
  --border-success-hover: var(--colors-green-600);
  --border-success-soft: var(--colors-green-300);
  --border-warning-active: var(--colors-yellow-700);
  --border-warning-default: var(--colors-yellow-500);
  --border-warning-hover: var(--colors-yellow-600);
  --border-warning-soft: var(--colors-yellow-300);
  --icon-default: var(--colors-grey-900);
  --icon-destructive-active: var(--colors-red-800);
  --icon-destructive-default: var(--colors-red-600);
  --icon-destructive-hover: var(--colors-red-700);
  --icon-destructive-strong: var(--colors-red-800);
  --icon-disabled-default: var(--colors-grey-400);
  --icon-disabled-strongest: var(--colors-grey-400);
  --icon-informative-active: var(--colors-blue-800);
  --icon-informative-default: var(--colors-blue-600);
  --icon-informative-hover: var(--colors-blue-700);
  --icon-informative-strong: var(--colors-blue-800);
  --icon-inverted: var(--colors-grey-075);
  --icon-mint-default: var(--colors-accent-mint-500);
  --icon-neutral-blue-default: var(--colors-accent-neutral-blue-500);
  --icon-orange-default: var(--colors-accent-orange-500);
  --icon-pale-blue-default: var(--colors-accent-pale-blue-500);
  --icon-pale-green-default: var(--colors-accent-pale-green-500);
  --icon-pale-red-default: var(--colors-accent-pale-red-500);
  --icon-pink-default: var(--colors-accent-pink-500);
  --icon-primary-active: var(--brand-700);
  --icon-primary-default: var(--brand-500);
  --icon-primary-hover: var(--brand-600);
  --icon-primary-stronger: var(--brand-600);
  --icon-primary-strongest: var(--brand-800);
  --icon-purple-default: var(--colors-accent-purple-500);
  --icon-soft: var(--colors-grey-600);
  --icon-strong: var(--colors-grey-700);
  --icon-success-active: var(--colors-green-800);
  --icon-success-default: var(--colors-green-600);
  --icon-success-hover: var(--colors-green-700);
  --icon-success-strong: var(--colors-green-800);
  --icon-warning-active: var(--colors-yellow-800);
  --icon-warning-default: var(--colors-yellow-600);
  --icon-warning-hover: var(--colors-yellow-700);
  --icon-warning-strong: var(--colors-yellow-800);
  --icon-white: var(--colors-grey-000);
  --shadow-default: var(--colors-utility-shadowBlack);
  --shadow-focus: var(--brand-600);
  --shadow-focus-destructive: rgb(208 48 48 / 12%);
  --shadow-focus-outline: var(--colors-grey-050);
  --focus-ring-color: var(--shadow-focus);
  --text-default: var(--colors-grey-950);
  --text-destructive-active: var(--colors-red-800);
  --text-destructive-default: var(--colors-red-600);
  --text-destructive-hover: var(--colors-red-700);
  --text-destructive-strong: var(--colors-red-800);
  --text-disabled-default: var(--colors-grey-600);
  --text-disabled-stronger: var(--colors-grey-700);
  --text-helper: var(--colors-grey-700);
  --text-informative-active: var(--colors-blue-800);
  --text-informative-default: var(--colors-blue-600);
  --text-informative-hover: var(--colors-blue-700);
  --text-informative-strong: var(--colors-blue-800);
  --text-inverted: var(--colors-grey-075);
  --text-mint-strong: var(--colors-accent-mint-800);
  --text-neutral-blue-strong: var(--colors-accent-neutral-blue-800);
  --text-orange-strong: var(--colors-accent-orange-800);
  --text-pale-blue-strong: var(--colors-accent-pale-blue-800);
  --text-pale-green-strong: var(--colors-accent-pale-green-800);
  --text-pale-red-strong: var(--colors-accent-pale-red-800);
  --text-pink-strong: var(--colors-accent-pink-800);
  --text-placeholder: var(--colors-grey-500);
  --text-softer: var(--colors-grey-200);
  --text-primary-active: var(--brand-800);
  --text-primary-default: var(--brand-600);
  --text-primary-hover: var(--brand-700);
  --text-primary-strong: var(--brand-800);
  --text-purple-default: var(--colors-accent-purple-800);
  --text-purple-strong: var(--colors-accent-purple-800);
  --text-success-active: var(--colors-green-800);
  --text-success-default: var(--colors-green-600);
  --text-success-hover: var(--colors-green-700);
  --text-success-strong: var(--colors-green-800);
  --text-warning-active: var(--colors-yellow-800);
  --text-warning-default: var(--colors-yellow-600);
  --text-warning-hover: var(--colors-yellow-700);
  --text-warning-strong: var(--colors-yellow-800);
  --text-white: var(--colors-grey-000);

  /* hover effects */
  --background-hover-overlay-subtle: rgb(0 0 0 / 6%);
}

/* color - Dark - color */
html[data-color='dark'] {
  --backdrop-default: var(--colors-utility-semiTransparentWhite);
  --backdrop-soft: rgb(255 255 255 / 20%);
  --skeleton-shimmer-base: rgb(255 255 255 / 8%);
  --skeleton-shimmer-fade: rgb(255 255 255 / 5%);
  --background-accent-black-active: var(--colors-grey-000);
  --background-accent-black-default: var(--colors-grey-900);
  --background-accent-black-hover: var(--colors-grey-700);
  --background-accent-black-soft: var(--colors-grey-150);
  --background-accent-black-softest: var(--colors-grey-100);
  --background-accent-blue-active: var(--colors-blue-800);
  --background-accent-blue-default: var(--colors-blue-600);
  --background-accent-blue-hover: var(--colors-blue-700);
  --background-accent-blue-soft: var(--colors-blue-100);
  --background-accent-blue-softest: var(--colors-blue-050);
  --background-accent-mint-active: var(--colors-accent-mint-700);
  --background-accent-mint-default: var(--colors-accent-mint-500);
  --background-accent-mint-hover: var(--colors-accent-mint-600);
  --background-accent-mint-soft: var(--colors-accent-mint-900);
  --background-accent-mint-softest: var(--colors-accent-mint-800);
  --background-accent-neon-green-active: var(--colors-green-400);
  --background-accent-neon-green-default: var(--colors-green-200);
  --background-accent-neon-green-hover: var(--colors-green-300);
  --background-accent-neon-green-soft: var(--colors-green-100);
  --background-accent-neon-green-softest: var(--colors-green-050);
  --background-accent-neutral-blue-active: var(--colors-accent-neutral-blue-300);
  --background-accent-neutral-blue-default: var(--colors-accent-neutral-blue-500);
  --background-accent-neutral-blue-hover: var(--colors-accent-neutral-blue-400);
  --background-accent-neutral-blue-soft: var(--colors-accent-neutral-blue-900);
  --background-accent-neutral-blue-softest: var(--colors-accent-neutral-blue-800);
  --background-accent-orange-active: var(--colors-accent-orange-300);
  --background-accent-orange-default: var(--colors-accent-orange-500);
  --background-accent-orange-hover: var(--colors-accent-orange-400);
  --background-accent-orange-soft: var(--colors-accent-orange-900);
  --background-accent-orange-softest: var(--colors-accent-orange-800);
  --background-accent-pale-blue-active: var(--colors-accent-pale-blue-300);
  --background-accent-pale-blue-default: var(--colors-accent-pale-blue-500);
  --background-accent-pale-blue-hover: var(--colors-accent-pale-blue-400);
  --background-accent-pale-blue-soft: var(--colors-accent-neutral-blue-900);
  --background-accent-pale-blue-softest: var(--colors-accent-pale-blue-800);
  --background-accent-pale-green-active: var(--colors-accent-pale-green-300);
  --background-accent-pale-green-default: var(--colors-accent-pale-green-500);
  --background-accent-pale-green-hover: var(--colors-accent-pale-green-400);
  --background-accent-pale-green-soft: var(--colors-accent-pale-green-900);
  --background-accent-pale-green-softest: var(--colors-accent-pale-green-800);
  --background-accent-pale-red-active: var(--colors-accent-pale-red-300);
  --background-accent-pale-red-default: var(--colors-accent-pale-red-500);
  --background-accent-pale-red-hover: var(--colors-accent-pale-red-400);
  --background-accent-pale-red-soft: var(--colors-accent-pale-red-900);
  --background-accent-pale-red-softest: var(--colors-accent-pale-red-800);
  --background-accent-pink-active: var(--colors-accent-pink-300);
  --background-accent-pink-default: var(--colors-accent-pink-500);
  --background-accent-pink-hover: var(--colors-accent-pink-400);
  --background-accent-pink-soft: var(--colors-accent-pink-900);
  --background-accent-pink-softest: var(--colors-accent-pink-800);
  --background-accent-purple-active: var(--colors-accent-purple-300);
  --background-accent-purple-default: var(--colors-accent-purple-500);
  --background-accent-purple-hover: var(--colors-accent-purple-400);
  --background-accent-purple-soft: var(--colors-accent-purple-900);
  --background-accent-purple-softest: var(--colors-accent-purple-800);
  --background-accent-white-active: var(--colors-grey-100);
  --background-accent-white-default: var(--colors-grey-000);
  --background-accent-white-hover: var(--colors-grey-075);
  --background-accent-white-soft: var(--colors-grey-150);
  --background-accent-white-softest: var(--colors-grey-050);
  --background-accent-yellow-active: var(--colors-yellow-400);
  --background-accent-yellow-default: var(--colors-yellow-200);
  --background-accent-yellow-hover: var(--colors-yellow-300);
  --background-accent-yellow-soft: var(--colors-yellow-100);
  --background-accent-yellow-softest: var(--colors-yellow-050);
  --background-default: var(--colors-grey-900);
  --background-destructive-active: var(--colors-red-700);
  --background-destructive-default: var(--colors-red-500);
  --background-destructive-hover: var(--colors-red-600);
  --background-destructive-soft: var(--colors-red-700);
  --background-destructive-softest: var(--colors-red-800);
  --background-disabled-default: var(--colors-grey-800);
  --background-disabled-stronger: var(--colors-grey-600);
  --background-disabled-strongest: var(--colors-grey-400);
  --background-informative-active: var(--colors-blue-300);
  --background-informative-default: var(--colors-blue-500);
  --background-informative-hover: var(--colors-blue-400);
  --background-informative-soft: var(--colors-blue-700);
  --background-informative-softest: var(--colors-blue-800);
  --background-inverted: var(--colors-grey-050);
  --background-neutral: var(--colors-grey-950);
  --background-primary-active: var(--brand-300);
  --background-primary-default: var(--brand-500);
  --background-primary-hover: var(--brand-400);
  --background-primary-soft: var(--brand-700);
  --background-primary-softest: var(--brand-800);
  --background-soft: var(--colors-grey-800);
  --background-success-active: var(--colors-green-700);
  --background-success-default: var(--colors-green-500);
  --background-success-hover: var(--colors-green-600);
  --background-success-soft: var(--colors-green-700);
  --background-success-softest: var(--colors-green-800);
  --background-supportive: var(--colors-grey-800);
  --background-transparent: var(--colors-utility-transparentBlack);
  --background-warning-active: var(--colors-yellow-300);
  --background-warning-default: var(--colors-yellow-500);
  --background-warning-hover: var(--colors-yellow-400);
  --background-warning-soft: var(--colors-yellow-700);
  --background-warning-softest: var(--colors-yellow-800);
  --border-bold: var(--colors-grey-100);
  --border-default: var(--colors-grey-600);
  --border-destructive-active: var(--colors-red-300);
  --border-destructive-default: var(--colors-red-500);
  --border-destructive-hover: var(--colors-red-400);
  --border-destructive-soft: var(--colors-red-700);
  --border-disabled-default: var(--colors-grey-400);
  --border-disabled-soft: var(--colors-grey-200);
  --border-informative-active: var(--colors-blue-300);
  --border-informative-default: var(--colors-blue-500);
  --border-informative-hover: var(--colors-blue-400);
  --border-informative-soft: var(--colors-blue-700);
  --border-inverted: var(--colors-grey-950);
  --border-mint-default: var(--colors-accent-mint-500);
  --border-neutral-blue-default: var(--colors-accent-neutral-blue-500);
  --border-orange-default: var(--colors-accent-orange-500);
  --border-pale-blue-default: var(--colors-accent-pale-blue-500);
  --border-pale-green-default: var(--colors-accent-pale-green-500);
  --border-pale-red-default: var(--colors-accent-pale-red-500);
  --border-pink-default: var(--colors-accent-pink-500);
  --border-primary-active: var(--brand-300);
  --border-primary-default: var(--brand-500);
  --border-primary-hover: var(--brand-400);
  --border-purple-default: var(--colors-accent-purple-500);
  --border-softest: var(--colors-grey-700);
  --border-success-active: var(--colors-green-300);
  --border-success-default: var(--colors-green-500);
  --border-success-hover: var(--colors-green-400);
  --border-success-soft: var(--colors-green-700);
  --border-warning-active: var(--colors-yellow-300);
  --border-warning-default: var(--colors-yellow-500);
  --border-warning-hover: var(--colors-yellow-400);
  --border-warning-soft: var(--colors-yellow-700);
  --icon-default: var(--colors-grey-050);
  --icon-destructive-active: var(--colors-red-200);
  --icon-destructive-default: var(--colors-red-400);
  --icon-destructive-hover: var(--colors-red-300);
  --icon-destructive-strong: var(--colors-red-100);
  --icon-disabled-default: var(--colors-grey-400);
  --icon-disabled-strongest: var(--colors-grey-600);
  --icon-informative-active: var(--colors-blue-200);
  --icon-informative-default: var(--colors-blue-400);
  --icon-informative-hover: var(--colors-blue-300);
  --icon-informative-strong: var(--colors-blue-100);
  --icon-inverted: var(--colors-grey-950);
  --icon-mint-default: var(--colors-accent-mint-500);
  --icon-neutral-blue-default: var(--colors-accent-neutral-blue-500);
  --icon-orange-default: var(--colors-accent-orange-500);
  --icon-pale-blue-default: var(--colors-accent-pale-blue-500);
  --icon-pale-green-default: var(--colors-accent-pale-green-500);
  --icon-pale-red-default: var(--colors-accent-pale-red-500);
  --icon-pink-default: var(--colors-accent-pink-500);
  --icon-primary-active: var(--brand-300);
  --icon-primary-default: var(--brand-500);
  --icon-primary-hover: var(--brand-400);
  --icon-primary-stronger: var(--brand-400);
  --icon-primary-strongest: var(--brand-100);
  --icon-purple-default: var(--colors-accent-purple-500);
  --icon-soft: var(--colors-grey-600);
  --icon-strong: var(--colors-grey-400);
  --icon-success-active: var(--colors-green-200);
  --icon-success-default: var(--colors-green-400);
  --icon-success-hover: var(--colors-green-300);
  --icon-success-strong: var(--colors-green-100);
  --icon-warning-active: var(--colors-yellow-200);
  --icon-warning-default: var(--colors-yellow-400);
  --icon-warning-hover: var(--colors-yellow-300);
  --icon-warning-strong: var(--colors-yellow-100);
  --icon-white: var(--colors-grey-000);
  --shadow-default: var(--colors-utility-shadowWhite);
  --shadow-focus: var(--brand-400);
  --shadow-focus-destructive: rgb(208 48 48 / 12%);
  --shadow-focus-outline: var(--colors-grey-900);
  --focus-ring-color: var(--shadow-focus);
  --text-default: var(--colors-grey-050);
  --text-destructive-active: var(--colors-red-200);
  --text-destructive-default: var(--colors-red-400);
  --text-destructive-hover: var(--colors-red-300);
  --text-destructive-strong: var(--colors-red-200);
  --text-disabled-default: var(--colors-grey-400);
  --text-disabled-stronger: var(--colors-grey-300);
  --text-helper: var(--colors-grey-150);
  --text-informative-active: var(--colors-blue-200);
  --text-informative-default: var(--colors-blue-400);
  --text-informative-hover: var(--colors-blue-300);
  --text-informative-strong: var(--colors-blue-200);
  --text-inverted: var(--colors-grey-950);
  --text-mint-strong: var(--colors-accent-mint-100);
  --text-neutral-blue-strong: var(--colors-accent-neutral-blue-100);
  --text-orange-strong: var(--colors-accent-orange-100);
  --text-pale-blue-strong: var(--colors-accent-pale-blue-100);
  --text-pale-green-strong: var(--colors-accent-pale-green-100);
  --text-pale-red-strong: var(--colors-accent-pale-red-100);
  --text-pink-strong: var(--colors-accent-pink-100);
  --text-placeholder: var(--colors-grey-500);
  --text-softer: var(--colors-grey-800);
  --text-primary-active: var(--brand-200);
  --text-primary-default: var(--brand-400);
  --text-primary-hover: var(--brand-200);
  --text-primary-strong: var(--brand-100);
  --text-purple-default: var(--colors-accent-purple-100);
  --text-purple-strong: var(--colors-accent-purple-100);
  --text-success-active: var(--colors-green-200);
  --text-success-default: var(--colors-green-400);
  --text-success-hover: var(--colors-green-300);
  --text-success-strong: var(--colors-green-200);
  --text-warning-active: var(--colors-yellow-200);
  --text-warning-default: var(--colors-yellow-400);
  --text-warning-hover: var(--colors-yellow-300);
  --text-warning-strong: var(--colors-yellow-200);
  --text-white: var(--colors-grey-000);

  /* hover effects */
  --background-hover-overlay-subtle: rgb(255 255 255 / 8%);
}


:root {
  /* Size-related component tokens (moved from components-color.css)
	 These tokens describe widths, heights, padding, gaps, radii and similar
	 measurements used by components. */

  /* Input sizing */
  --input-padding-x-sm: var(--spacing-4);
  --input-padding-y-sm: var(--spacing-2);
  --input-padding-x-md: var(--spacing-4);
  --input-padding-y-md: var(--spacing-2);

  /* Typografia wartości/placeholdera w kontrolkach wejściowych jest
   * NIEZALEŻNA od rozmiaru — `sm` różni się od `md` wyłącznie paddingiem
   * (i wysokością kontrolki). Dlatego komponenty używają zawsze
   * `--input-font-size-md`.
   * @deprecated `--input-font-size-sm` — zachowany wyłącznie dla
   * kompatybilności wstecznej integracji; nie używać w nowym kodzie. */
  --input-font-size-sm: var(--font-size-default);
  --input-font-size-md: var(--font-size-default);

  /* Label — typografia skalowana wraz z rozmiarem pola (parity z ds-scaffold:
   * md = typo-body 16/24, sm = typo-body-sm-legacy 14/16). */
  --label-font-size-sm: var(--font-size-small);
  --label-font-size-md: var(--font-size-default);
  --label-line-height-sm: var(--line-height-denser);
  --label-line-height-md: var(--line-height-dense);
  --label-letter-spacing-sm: var(--letter-spacing-normal);
  --label-letter-spacing-md: var(--letter-spacing-none);

  /* Odstep miedzy labelem a kontrolka (Input/Select) — 8px, bez dodatkowych
   * marginesow i paddingow na samym labelu. */
  --label-gap: var(--spacing-2);

  /* Card / shadow sizes */
  --card-shadow-blur: var(--spacing-4);
  --card-shadow-position-x: 0;
  --card-shadow-position-y: var(--spacing-2);
  --card-shadow-spread: 0;

  /* TabList / shadow sizes */
  --tabList-element-shadow-position-x: 0;
  --tabList-element-shadow-position-y: var(--spacing-2);
  --tabList-element-shadow-blur: var(--spacing-4);
  --tabList-element-shadow-spread: 0;

  /* Modal / dialog sizing */
  --modal-overlay-width: 100vw;
  --modal-overlay-height: 100vh;
  --modal-overlay-z-index: var(--z-index-modal);
  --modal-padding: var(--spacing-6);
  --modal-radius: var(--radius-medium);
  --modal-gap: var(--spacing-6);
  --modal-z-index: 1;

  /* Offset popupu modala zagnieżdżonego — musi leżeć nad popupem rodzica
   * (--modal-z-index), z ktorym jest rodzeństwem w `document.body`. */
  --modal-nested-z-index: 2;
  --modal-max-height: 90vh;
  --modal-width-offset: var(--spacing-9);
  --modal-max-width-sm: 480px;
  --modal-max-width-md: 760px;
  --modal-max-width-lg: 980px;
  --modal-icon-scale-hover: 1.05;
  --modal-footer-gap: var(--spacing-4);

  /* Footer sizing */
  --footer-padding-x: var(--spacing-5);
  --footer-padding-y: var(--spacing-3);
  --footer-radius: var(--radius-medium);
  --footer-centered-max-width: 1216px;
  --footer-inner-gap: var(--spacing-3);
  --footer-inner-gap-wide: var(--spacing-6);
  --footer-content-gap: var(--spacing-1);

  /* Kanban sizing */
  --kanban-column-width: 320px;
  --kanban-column-gap: var(--spacing-4);
  --kanban-column-padding: var(--spacing-4);
  --kanban-column-content-gap: var(--spacing-2);
  --kanban-column-content-padding: var(--spacing-2);
  --kanban-column-radius: var(--radius-medium);
  --kanban-card-gap: var(--spacing-1);
  --kanban-card-padding: var(--spacing-4);
  --kanban-card-radius: var(--radius-medium);
  --kanban-count-height: var(--spacing-6);
  --kanban-count-min-width: var(--numbers-size-28);
  --kanban-count-padding: 0 var(--spacing-2);
  --kanban-count-radius: var(--radius-small);

  /* Toggle / ToggleGroup sizing */
  --toggle-size-sm: var(--numbers-size-28);
  --toggle-size-md: var(--numbers-size-36);
  --toggle-size-lg: var(--numbers-size-44);
  --toggleGroup-item-size: var(--numbers-size-36);

  /* Toggle button (ToggleGroup item) geometry per size */
  --toggle-button-height-sm: var(--toggle-size-sm);
  --toggle-button-height-md: var(--toggle-size-md);
  --toggle-button-height-lg: var(--toggle-size-lg);
  --toggle-button-min-width-sm: var(--toggle-size-sm);
  --toggle-button-min-width-md: var(--toggle-size-md);
  --toggle-button-min-width-lg: var(--toggle-size-lg);
  --toggle-button-font-size-sm: var(--font-size-x-small);
  --toggle-button-font-size-md: var(--font-size-small);
  --toggle-button-font-size-lg: var(--font-size-default);
  --toggle-button-line-height: var(--line-height-denser);

  /* Switch (toggle control) geometry — md */
  --switch-thumb-size-md: var(--spacing-6);
  --switch-track-height-md: var(--numbers-size-32);
  --switch-track-width-md: var(--numbers-size-64);
  --switch-thumb-gap-md: var(--numbers-size-3);
  --switch-thumb-travel-md: var(--spacing-7);

  /* Switch (toggle control) geometry — sm */
  --switch-thumb-size-sm: var(--spacing-4);
  --switch-track-height-sm: var(--numbers-size-24);
  --switch-track-width-sm: var(--numbers-size-48);
  --switch-thumb-gap-sm: var(--numbers-size-3);
  --switch-thumb-travel-sm: var(--spacing-6);

  /* Checkbox control geometry */
  --checkbox-control-size-sm: var(--numbers-size-18);
  --checkbox-control-size-md: var(--numbers-size-24);

  /* Radio control geometry */
  --radio-control-size-sm: var(--numbers-size-18);
  --radio-control-size-md: var(--numbers-size-24);

  /* Tooltip arrow geometry */
  --tooltip-arrow-size: var(--spacing-2);

  /* Accordion panel grid-template-rows start value (animated by Base UI) */
  --accordion-panel-height-collapsed: 0fr;

  /* FormRow label column width */
  --form-row-label-width: 10rem;

  /* AppShell sizing */

  /* Backdrop musi być pod .header (--z-index-dropdown) żeby mobile-toggle zostawał
     klikalny i header nie był przygaszany przez backdrop, gdy sidebar mobilny jest otwarty. */
  --appShell-backdrop-z-index: calc(var(--z-index-dropdown) - 1);

  /* MobileDrawer sizing */
  --mobileDrawer-panel-max-width: 320px;
  --mobileDrawer-z-index: 200;

  /* NotificationList sizing */
  --notificationList-width: 479px;

  /* SideNav sizing */
  --sideNav-width: 240px; /* default sidebar width */
  --sideNav-expanded-width: 192px;
  --sideNav-collapsed-width: 96px;
  --sideNav-item-padding-y: var(--spacing-2); /* vertical padding */
  --sideNav-item-padding-x: var(--spacing-3); /* horizontal padding */
  --sideNav-icon-gap: var(--spacing-3);
  --sideNav-font-size: var(--font-size-small);
  --sideNav-items-gap: var(--spacing-0-5);
  --sideNav-dropdown-inner-padding: var(--spacing-1-5);
  --sideNav-button-label-vertical-font-size: 11px;

  /* InputOTP slot sizing */
  --inputOtp-slot-size: var(--numbers-size-36);

  /* Calendar / date-picker cell sizing (32px, matching ds-scaffold reference) */
  --calendar-cell-size: var(--numbers-size-32);
  --calendar-nav-btn-size: var(--spacing-7);

  /* DataTable icon button sizing */
  --dataTable-icon-btn-size: var(--spacing-7);
  --dataTable-skeleton-bar-height-lg: var(--spacing-6);
  --dataTable-skeleton-bar-height-sm: var(--icon-sm);
  --dataTable-mobile-scroll-hint-width: var(--spacing-7);
  --dataTable-card-row-min-height: var(--spacing-6);
  --dataTable-order-btn-size: var(--spacing-6);

  /* Kanban card sizing */
  --kanban-badge-icon-size: var(--font-size-small);
  --kanban-action-btn-size: var(--spacing-6);

  /* Slider local geometry */
  --slider-thumb-size: var(--icon-sm);
  --slider-track-height: var(--numbers-size-4);

  /* ScrollArea scrollbar width */
  --scrollArea-scrollbar-size: var(--numbers-size-6);

  /* Select item checkbox size (18px — between icon-sm:16 and spacing-5:20) */
  --select-item-checkbox-size: var(--numbers-size-28);

  /* Logotype font sizes */
  --logotype-font-size-xs: var(--font-size-x-small);
  --logotype-font-size-sm: var(--font-size-small);
  --logotype-font-size-md: var(--numbers-size-18);
  --logotype-font-size-lg: var(--font-size-title-small);

  /* AvatarMenu popup width */
  --avatarMenu-popup-width: 288px;

  /* ResizablePanel handle */
  --resizable-handle-height: var(--icon-sm);
  --resizable-handle-width: var(--spacing-3);

  /* DraggableItem */
  --draggable-item-min-height-md: var(--spacing-9);

  /* DraggableItem icon padding sm */
  --draggable-icon-padding-sm: var(--numbers-size-2);

  /* Select / Autocomplete popup sizing */
  --select-popup-min-width: var(--anchor-width);
  --autocomplete-popup-min-width: var(--anchor-width);

  /* TopNav sizing */
  --topNav-centered-max-width: 1216px;
  --topNav-min-height: var(--spacing-8);
  --topNav-company-select-max-width: 240px;
  --topNav-inner-padding-x: var(--spacing-4);
  --topNav-gap: var(--spacing-3);
  --topNav-left-gap: var(--spacing-4);
  --topNav-actions-gap: var(--spacing-2);
  --topNav-action-height: var(--numbers-size-36);
  --topNav-action-padding-x: var(--spacing-2);
  --topNav-focus-radius: var(--radius-medium);
  --topNav-icon-size: var(--font-size-small);
  --topNav-brandDot-size: var(--font-size-xxs);
  --topNav-tab-height: var(--spacing-8);
  --topNav-tab-padding-x: var(--spacing-3);
  --topNav-tab-gap: var(--spacing-1);
  --topNav-tab-active-border-height: var(--numbers-size-2);
  --topNav-dropdown-radius: var(--radius-medium);
  --topNav-dropdown-padding: var(--spacing-2);
  --topNav-dropdown-offset-y: var(--spacing-1);
  --topNav-dropdown-title-padding-y: var(--spacing-1);
  --topNav-dropdown-title-padding-x: var(--spacing-2);
  --topNav-dropdown-item-padding: var(--spacing-2);
  --topNav-appSwitcher-min-width: 240px;
  --topNav-appSwitcher-width: 404px;
  --topNav-appSwitcher-search-padding-x: var(--spacing-4);
  --topNav-appSwitcher-search-padding-y: var(--spacing-5);
  --topNav-appSwitcher-title-padding-x: var(--spacing-4);
  --topNav-appSwitcher-title-padding-y: var(--spacing-4);

  /*
   * Wysokosc listy aplikacji ograniczona do max. 5 widocznych elementow,
   * kolejne przewijane scrollem (ScrollArea z ds-ui).
   * Wyliczenie: 5 x wysokosc elementu (40px badge + 2x4px padding = 48px)
   * + 4 x odstep miedzy elementami (--spacing-1 = 4px)
   * + 2 x padding gora/dol listy (--spacing-4 = 16px)
   * = 5*48 + 4*4 + 2*16 = 240 + 16 + 32 = 288px.
   */
  --topNav-appSwitcher-list-max-height: 288px;
  --topNav-moreMenu-min-width: 160px;
  --topNav-moreMenu-padding: var(--spacing-1);
  --topNav-appBadge-radius: var(--radius-small);
  --topNav-appBadge-font-size: var(--font-size-xxs);
  --topNav-appBadge-min-width: var(--numbers-size-28);
  --topNav-appBadge-padding-y: var(--numbers-size-2);
  --topNav-appBadge-padding-x: var(--spacing-1);
  --topNav-notificationBadge-font-size: var(--font-size-xxs);
  --topNav-notificationBadge-height: var(--spacing-4);
  --topNav-notificationBadge-min-width: var(--spacing-4);
  --topNav-notificationBadge-padding-x: var(--spacing-1);
  --topNav-avatar-size: var(--numbers-size-28);
  --topNav-mobile-panel-max-width: 320px;
  --topNav-mobile-panel-padding: var(--spacing-4);
  --topNav-mobile-header-margin-bottom: var(--spacing-4);
  --topNav-z-index-dropdown: var(--z-index-dropdown);
  --topNav-z-index-mobile: var(--z-index-drawer);

  /* CompanySelectDropdown sizing */
  --companySelect-dropdown-width: 320px;

  /* AvatarMenu wide sub-view width (theme/org select) */
  --avatarMenu-popup-width-wide: 320px;
}

/* Components - Light */
:root {
  /* Collapsible */
  --collapsible-border-color-default: var(--border-softest);
  --collapsible-border-color-hover: var(--border-primary-hover);
  --collapsible-border-color-disabled: var(--border-disabled-soft);
  --collapsible-background-color-default: var(--background-default);

  /* Accordion */
  --accordion-background-color-default: var(--background-transparent);
  --accordion-border-color-collapsed: var(--border-softest);
  --accordion-border-color-disabled: var(--border-disabled-soft);
  --accordion-border-color-expanded: var(--border-primary-default);
  --accordion-border-color-hover: var(--border-primary-hover);
  --accordion-icon-color-default: var(--icon-default);
  --accordion-icon-color-disabled: var(--icon-disabled-default);
  --accordion-icon-color-hover: var(--icon-primary-hover);
  --accordion-text-color-default: var(--text-default);
  --accordion-text-color-disabled: var(--text-disabled-default);
  --accordion-text-color-hover: var(--text-primary-hover);

  /* Alert Block */
  --alertBlock-error-background-color-default: var(--background-destructive-softest);
  --alertBlock-error-border-color-default: var(--border-destructive-soft);
  --alertBlock-error-description-color-default: var(--text-destructive-strong);
  --alertBlock-error-icon-color-default: var(--icon-destructive-strong);
  --alertBlock-error-text-color-default: var(--text-destructive-strong);
  --alertBlock-error-title-color-default: var(--text-destructive-strong);
  --alertBlock-info-background-color-default: var(--background-informative-softest);
  --alertBlock-info-border-color-default: var(--border-informative-soft);
  --alertBlock-info-description-color-default: var(--text-informative-strong);
  --alertBlock-info-icon-color-default: var(--icon-informative-strong);
  --alertBlock-info-text-color-default: var(--text-informative-strong);
  --alertBlock-info-title-color-default: var(--text-informative-strong);
  --alertBlock-success-background-color-default: var(--background-success-softest);
  --alertBlock-success-border-color-default: var(--border-success-soft);
  --alertBlock-success-description-color-default: var(--text-success-strong);
  --alertBlock-success-icon-color-default: var(--icon-success-strong);
  --alertBlock-success-text-color-default: var(--text-success-strong);
  --alertBlock-success-title-color-default: var(--text-success-strong);
  --alertBlock-warning-background-color-default: var(--background-warning-softest);
  --alertBlock-warning-border-color-default: var(--border-warning-soft);
  --alertBlock-warning-description-color-default: var(--text-warning-strong);
  --alertBlock-warning-icon-color-default: var(--icon-warning-strong);
  --alertBlock-warning-text-color-default: var(--text-warning-strong);
  --alertBlock-warning-title-color-default: var(--text-warning-strong);

  /* Alert Dialog */
  --alertDialog-background-color-default: var(--background-default);
  --alertDialog-border-color-default: var(--border-softest);
  --alertDialog-description-color-default: var(--text-helper);
  --alertDialog-title-color-default: var(--text-default);

  /* Avatar Block */
  --avatarBlock-subtitle-color-default: var(--text-default);
  --avatarBlock-title-color-default: var(--text-default);

  /* Avatar Circle */
  --avatarCircle-background-color-brand: var(--background-primary-softest);
  --avatarCircle-background-color-default: var(--background-neutral);
  --avatarCircle-border-color-default: var(--border-softest);
  --avatarCircle-icon-color-brand: var(--icon-primary-default);
  --avatarCircle-icon-color-default: var(--icon-strong);
  --avatarCircle-text-color-default: var(--text-primary-active);

  /* Avatar Menu */
  --avatarMenu-background-color-default: var(--background-default);
  --avatarMenu-border-color-default: var(--border-default);
  --avatarMenu-divider-color: var(--border-softest);
  --avatarMenu-header-text-color: var(--text-default);
  --avatarMenu-label-color: var(--text-default);
  --avatarMenu-shadow: var(--shadow-large);
  --avatarMenu-trigger-background-hover: var(--background-primary-softest);
  --avatarMenu-trigger-focus-outline-color: var(--shadow-focus-outline);
  --avatarMenu-trigger-focus-ring-color: var(--shadow-focus);
  --avatarMenu-user-email-color: var(--text-helper);
  --avatarMenu-user-name-color: var(--text-default);

  /* AvatarMenu - scoffold */
  --avatarMenu-org-background-color: var(--background-default);
  --avatarMenu-org-border-color: var(--border-default);
  --avatarMenu-org-text-color: var(--text-default);
  --avatarMenu-org-icon-color: var(--icon-primary-default);

  /* Badge */
  --badge-background-color-default: var(--background-primary-default);
  --badge-border-color-defaut: var(--border-inverted);
  --badge-border-color-default: var(--badge-border-color-defaut);
  --badge-text-color-default: var(--text-inverted);

  /* Bottom Sheet */
  --bottomsheet-background-color-default: var(--background-default);
  --bottomsheet-btnTopCollapse-background-color-default: var(--background-supportive);
  --bottomsheet-title-color-default: var(--text-default);

  /* Breadcrumb */
  --breadcrumb-background-color-default: var(--background-transparent);
  --breadcrumb-icon-color-default: var(--icon-primary-default);
  --breadcrumb-text-color-current: var(--text-disabled-default);
  --breadcrumb-text-color-default: var(--text-default);
  --breadcrumb-text-color-hover: var(--text-primary-hover);

  /* Button Link */
  --btn-link-text-active: var(--text-primary-active);
  --btn-link-text-disabled: var(--text-disabled-default);
  --btn-link-text-hover: var(--text-primary-hover);
  --btn-link-text: var(--text-primary-default);

  /* Button Utility */
  --btn-utility-bg-active: var(--background-primary-soft);
  --btn-utility-bg-hover: var(--buttonUtility-background-color-hover);
  --btn-utility-destructive-bg-active: var(--background-destructive-soft);
  --btn-utility-destructive-bg-hover: var(--background-destructive-softest);
  --btn-utility-destructive-icon-active: var(--icon-destructive-active);
  --btn-utility-destructive-icon-hover: var(--icon-destructive-hover);
  --btn-utility-destructive-icon: var(--icon-destructive-default);
  --btn-utility-destructive-text-active: var(--text-destructive-active);
  --btn-utility-destructive-text-hover: var(--text-destructive-hover);
  --btn-utility-destructive-text: var(--text-destructive-default);
  --btn-utility-icon-active: var(--buttonUtility-icon-color-default);
  --btn-utility-icon-disabled: var(--icon-disabled-default);
  --btn-utility-icon-hover: var(--icon-primary-hover);
  --btn-utility-icon: var(--buttonUtility-icon-color-default);
  --btn-utility-text-active: var(--text-primary-active);
  --btn-utility-text-disabled: var(--buttonUtility-text-color-disabled);
  --btn-utility-text-hover: var(--buttonUtility-text-color-hover);
  --btn-utility-text: var(--text-default);

  /* Bullet List */
  --bulletList-icon-color-default: var(--icon-primary-default);
  --bulletList-text-color-default: var(--text-default);

  /* Button Alert */
  --buttonAlert-background-color: var(--background-transparent);
  --buttonAlert-disabled-icon-color-disabled: var(--icon-disabled-default);
  --buttonAlert-disabled-text-color-disabled: var(--text-disabled-default);
  --buttonAlert-error-icon-color-active: var(--icon-destructive-active);
  --buttonAlert-error-icon-color-default: var(--icon-destructive-default);
  --buttonAlert-error-icon-color-disabled: var(--icon-disabled-strongest);
  --buttonAlert-error-icon-color-hover: var(--icon-destructive-hover);
  --buttonAlert-error-text-color-active: var(--text-destructive-active);
  --buttonAlert-error-text-color-default: var(--text-destructive-default);
  --buttonAlert-error-text-color-disabled: var(--text-disabled-default);
  --buttonAlert-error-text-color-hover: var(--text-destructive-hover);
  --buttonAlert-info-icon-color-active: var(--icon-informative-active);
  --buttonAlert-info-icon-color-default: var(--icon-informative-default);
  --buttonAlert-info-icon-color-disabled: var(--icon-disabled-strongest);
  --buttonAlert-info-icon-color-hover: var(--icon-informative-hover);
  --buttonAlert-info-text-color-active: var(--text-informative-active);
  --buttonAlert-info-text-color-default: var(--text-informative-default);
  --buttonAlert-info-text-color-disabled: var(--text-disabled-default);
  --buttonAlert-info-text-color-hover: var(--text-informative-hover);
  --buttonAlert-success-icon-color-active: var(--icon-success-active);
  --buttonAlert-success-icon-color-default: var(--icon-success-default);
  --buttonAlert-success-icon-color-disabled: var(--icon-disabled-strongest);
  --buttonAlert-success-icon-color-hover: var(--icon-success-hover);
  --buttonAlert-success-text-color-active: var(--text-success-strong);
  --buttonAlert-success-text-color-default: var(--text-success-default);
  --buttonAlert-success-text-color-disabled: var(--text-disabled-default);
  --buttonAlert-success-text-color-hover: var(--text-success-hover);
  --buttonAlert-warning-icon-color-active: var(--icon-warning-active);
  --buttonAlert-warning-icon-color-default: var(--icon-warning-default);
  --buttonAlert-warning-icon-color-disabled: var(--icon-disabled-strongest);
  --buttonAlert-warning-icon-color-hover: var(--icon-warning-hover);
  --buttonAlert-warning-text-color-active: var(--text-warning-active);
  --buttonAlert-warning-text-color-default: var(--text-warning-default);
  --buttonAlert-warning-text-color-disabled: var(--text-disabled-default);
  --buttonAlert-warning-text-color-hover: var(--text-warning-hover);

  /* Button Group Block */
  --buttonGroupBlock-border-color-default: var(--border-primary-default);

  /* Button Group Element */
  --buttonGroupElement-background-color-active: var(--background-primary-default);
  --buttonGroupElement-background-color-default: var(--background-default);
  --buttonGroupElement-background-color-disabled: var(--background-disabled-default);
  --buttonGroupElement-background-color-hover: var(--background-primary-default);
  --buttonGroupElement-border-color-default: var(--border-primary-default);
  --buttonGroupElement-icon-color-active: var(--icon-white);
  --buttonGroupElement-icon-color-default: var(--icon-primary-default);
  --buttonGroupElement-icon-color-disabled: var(--icon-disabled-strongest);
  --buttonGroupElement-icon-color-hover: var(--icon-white);
  --buttonGroupElement-text-color-active: var(--text-white);
  --buttonGroupElement-text-color-default: var(--text-primary-default);
  --buttonGroupElement-text-color-disabled: var(--text-disabled-strongest);
  --buttonGroupElement-text-color-hover: var(--text-white);

  /* Button Link Primary */
  --buttonLink-primary-background-color-default: var(--background-transparent);
  --buttonLink-primary-text-color-active: var(--text-primary-active);
  --buttonLink-primary-text-color-default: var(--text-primary-default);
  --buttonLink-primary-text-color-disabled: var(--text-disabled-default);
  --buttonLink-primary-text-color-hover: var(--text-primary-hover);

  /* Button Pagination */
  --buttonPagination-background-color-active: var(--background-primary-soft);
  --buttonPagination-background-color-default: var(--background-default);
  --buttonPagination-text-color-active: var(--text-primary-active);
  --buttonPagination-text-color-default: var(--text-primary-default);
  --buttonPagination-text-color-disabled: var(--text-disabled-default);
  --buttonPagination-text-color-hover: var(--text-primary-hover);

  /* Button Primary */
  --buttonPrimary-background-color-active: var(--background-primary-active);
  --buttonPrimary-background-color-default: var(--background-primary-default);
  --buttonPrimary-background-color-disabled: var(--background-disabled-default);
  --buttonPrimary-background-color-hover: var(--background-primary-hover);
  --buttonPrimary-destructive-background-color-active: var(--background-destructive-active);
  --buttonPrimary-destructive-background-color-default: var(--background-destructive-default);
  --buttonPrimary-destructive-background-color-hover: var(--background-destructive-hover);
  --buttonPrimary-destructive-icon-color-default: var(--icon-white);
  --buttonPrimary-destructive-text-color-default: var(--text-white);
  --buttonPrimary-icon-color-default: var(--icon-white);
  --buttonPrimary-icon-color-disabled: var(--icon-disabled-strongest);
  --buttonPrimary-text-color-default: var(--text-white);
  --buttonPrimary-text-color-disabled: var(--text-disabled-default);

  /* Button Secondary */
  --buttonSecondary-background-color-active: var(--background-primary-hover);
  --buttonSecondary-background-color-default: var(--background-transparent);
  --buttonSecondary-background-color-hover: var(--background-primary-default);
  --buttonSecondary-border-color-default: var(--border-primary-default);
  --buttonSecondary-border-color-disabled: var(--border-disabled-default);
  --buttonSecondary-destructive-background-color-active: var(--background-destructive-hover);
  --buttonSecondary-destructive-background-color-hover: var(--background-destructive-default);
  --buttonSecondary-destructive-border-color-default: var(--border-destructive-default);
  --buttonSecondary-destructive-icon-color-active: var(--icon-white);
  --buttonSecondary-destructive-icon-color-default: var(--icon-destructive-default);
  --buttonSecondary-destructive-icon-color-hover: var(--icon-white);
  --buttonSecondary-destructive-text-color-active: var(--text-white);
  --buttonSecondary-destructive-text-color-default: var(--text-destructive-default);
  --buttonSecondary-destructive-text-color-hover: var(--text-white);
  --buttonSecondary-icon-color-active: var(--icon-white);
  --buttonSecondary-icon-color-default: var(--icon-primary-default);
  --buttonSecondary-icon-color-disabled: var(--icon-disabled-strongest);
  --buttonSecondary-icon-color-hover: var(--icon-white);
  --buttonSecondary-text-color-active: var(--text-white);
  --buttonSecondary-text-color-default: var(--text-primary-default);
  --buttonSecondary-text-color-disabled: var(--text-disabled-default);
  --buttonSecondary-text-color-hover: var(--text-white);

  /* Button Tertiary */
  --buttonTertiary-background-color-active: var(--background-primary-default);
  --buttonTertiary-background-color-default: var(--background-transparent);
  --buttonTertiary-background-color-hover: var(--background-primary-softest);
  --buttonTertiary-background-color-inverted: var(--background-default);
  --buttonTertiary-icon-color-active: var(--icon-primary-active);
  --buttonTertiary-icon-color-default: var(--icon-primary-default);
  --buttonTertiary-icon-color-disabled: var(--icon-disabled-strongest);
  --buttonTertiary-icon-color-hover: var(--icon-primary-hover);
  --buttonTertiary-icon-color-inverted: var(--icon-inverted);
  --buttonTertiary-text-color-active: var(--text-white);
  --buttonTertiary-text-color-default: var(--text-primary-default);
  --buttonTertiary-text-color-disabled: var(--text-disabled-default);
  --buttonTertiary-text-color-hover: var(--text-primary-hover);
  --buttonTertiary-text-color-inverted: var(--text-inverted);

  /* Button Utility */
  --buttonUtility-background-color-active: var(--background-primary-soft);
  --buttonUtility-background-color-default: var(--background-transparent);
  --buttonUtility-background-color-disabled: var(--background-disabled-default);
  --buttonUtility-background-color-hover: var(--background-primary-softest);
  --buttonUtility-background-destructive-color-active: var(--background-destructive-soft);
  --buttonUtility-background-destructive-color-default: var(--background-default);
  --buttonUtility-background-destructive-color-hover: var(--background-destructive-softest);
  --buttonUtility-background-disabled-default: var(--background-disabled-default);
  --buttonUtility-background-focus-color-default: var(--background-transparent);
  --buttonUtility-background-primary-color-active: var(--background-primary-soft);
  --buttonUtility-background-primary-color-default: var(--background-default);
  --buttonUtility-background-primary-color-hover: var(--background-primary-softest);
  --buttonUtility-cta-text-destructive-color-active: var(--text-destructive-active);
  --buttonUtility-cta-text-destructive-color-default: var(--text-destructive-default);
  --buttonUtility-cta-text-destructive-color-hover: var(--text-destructive-hover);
  --buttonUtility-cta-text-disabled-color-disabled: var(--text-disabled-default);
  --buttonUtility-cta-text-primary-color-active: var(--text-primary-active);
  --buttonUtility-cta-text-primary-color-default: var(--text-default);
  --buttonUtility-cta-text-primary-color-hover: var(--text-primary-hover);
  --buttonUtility-destructive-background-color-active: var(--background-destructive-soft);
  --buttonUtility-destructive-background-color-default: var(--background-default);
  --buttonUtility-destructive-background-color-hover: var(--background-destructive-softest);
  --buttonUtility-destructive-icon-color-active: var(--icon-destructive-active);
  --buttonUtility-destructive-icon-color-default: var(--icon-destructive-default);
  --buttonUtility-destructive-icon-color-hover: var(--icon-destructive-hover);
  --buttonUtility-destructive-text-color-active: var(--text-destructive-active);
  --buttonUtility-destructive-text-color-default: var(--text-destructive-default);
  --buttonUtility-destructive-text-color-hover: var(--text-destructive-hover);
  --buttonUtility-icon-color-active: var(--icon-primary-active);
  --buttonUtility-icon-color-default: var(--icon-default);
  --buttonUtility-icon-color-disabled: var(--icon-disabled-default);
  --buttonUtility-icon-color-hover: var(--icon-primary-hover);
  --buttonUtility-icon-destructive-color-active: var(--icon-destructive-active);
  --buttonUtility-icon-destructive-color-default: var(--icon-destructive-default);
  --buttonUtility-icon-destructive-color-hover: var(--icon-destructive-hover);
  --buttonUtility-icon-disabled-color-default: var(--icon-disabled-default);
  --buttonUtility-icon-primary-color-active: var(--icon-primary-active);
  --buttonUtility-icon-primary-color-default: var(--icon-primary-default);
  --buttonUtility-icon-primary-color-hover: var(--icon-primary-hover);
  --buttonUtility-text-color-active: var(--text-primary-active);
  --buttonUtility-text-color-default: var(--text-default);
  --buttonUtility-text-color-disabled: var(--text-disabled-default);
  --buttonUtility-text-color-hover: var(--text-primary-hover);

  /* Utility button component-level aliases (background/color/icon-color cascade per state) */
  --utility-button-background-default: var(--background-transparent);
  --utility-button-background-hover: var(--buttonUtility-background-color-hover);
  --utility-button-background-active: var(--buttonUtility-background-color-active);
  --utility-button-background-disabled: var(--buttonUtility-background-color-disabled);
  --utility-button-background-destructive-hover: var(
    --buttonUtility-destructive-background-color-hover
  );
  --utility-button-background-destructive-active: var(
    --buttonUtility-destructive-background-color-active
  );
  --utility-button-color-default: var(--buttonUtility-text-color-default);
  --utility-button-color-hover: var(--buttonUtility-text-color-hover);
  --utility-button-color-active: var(--buttonUtility-text-color-active);
  --utility-button-color-disabled: var(--buttonUtility-text-color-disabled);
  --utility-button-color-destructive-default: var(--buttonUtility-destructive-text-color-default);
  --utility-button-color-destructive-hover: var(--buttonUtility-destructive-text-color-hover);
  --utility-button-color-destructive-active: var(--buttonUtility-destructive-text-color-active);
  --utility-button-icon-color-default: var(--buttonUtility-icon-color-default);
  --utility-button-icon-color-hover: var(--buttonUtility-icon-color-hover);
  --utility-button-icon-color-active: var(--buttonUtility-icon-color-active);
  --utility-button-icon-color-disabled: var(--buttonUtility-icon-color-disabled);
  --utility-button-icon-color-destructive-default: var(
    --buttonUtility-destructive-icon-color-default
  );
  --utility-button-icon-color-destructive-hover: var(--buttonUtility-destructive-icon-color-hover);
  --utility-button-icon-color-destructive-active: var(
    --buttonUtility-destructive-icon-color-active
  );

  /* Calendar */
  --calendar-background-color-default: var(--background-default);
  --calendar-border-color-default: var(--border-softest);

  /* Calendar Day */
  --calendarDay-background-color-active: var(--background-primary-default);
  --calendarDay-background-color-default: var(--background-default);
  --calendarDay-background-color-hover: var(--background-primary-soft);
  --calendarDay-background-color-pressed: var(--background-primary-active);
  --calendarDay-border-color-current: var(--border-primary-default);
  --calendarDay-border-color-today: var(--border-primary-default);
  --calendarDay-range-background-color-default: var(--background-primary-softest);
  --calendarDay-range-background-color-hover: var(--background-primary-soft);
  --calendarDay-range-text-color-default: var(--text-primary-default);
  --calendarDay-selected-background-color-active: var(--background-primary-active);
  --calendarDay-selected-background-color-default: var(--background-primary-default);
  --calendarDay-selected-background-color-hover: var(--background-primary-hover);
  --calendarDay-selected-text-color-default: var(--text-inverted);
  --calendarDay-text-color-active: var(--text-inverted);
  --calendarDay-text-color-default: var(--text-default);
  --calendarDay-text-color-disabled: var(--text-disabled-default);
  --calendarDay-text-color-hover: var(--text-primary-hover);
  --calendarDay-text-color-outside: var(--text-disabled-default);

  /* Calendar Header */
  --calendarHeader-text-color-default: var(--text-default);

  /* Calendar Weekday */
  --calendarWeekday-text-color-default: var(--text-helper);

  /* Calendar Nav */
  --calendarNav-background-color-default: var(--background-transparent);
  --calendarNav-border-color-default: var(--border-default);
  --calendarNav-border-color-disabled: var(--border-disabled-soft);
  --calendarNav-border-color-hover: var(--border-primary-hover);
  --calendarNav-icon-color-default: var(--icon-primary-default);
  --calendarNav-icon-color-disabled: var(--icon-disabled-default);
  --calendarNav-icon-color-hover: var(--icon-primary-hover);

  /* Card Block */
  --cardBlock-background-color-default: var(--background-default);
  --cardBlock-border-color-default: var(--border-softest);
  --cardBlock-description-text-color-default: var(--text-helper);
  --cardBlock-icon-color-default: var(--icon-primary-default);
  --cardBlock-iconWrapper-background-color-default: var(--background-primary-soft);
  --cardBlock-title-text-color-default: var(--text-default);

  /* Card */
  --card-shadow-color: var(--shadow-default);

  /* Carousel Arrow */
  --carouselArrow-background-color-default: var(--background-transparent);
  --carouselArrow-border-color-active: var(--border-primary-active);
  --carouselArrow-border-color-default: var(--border-default);
  --carouselArrow-border-color-disabled: var(--border-disabled-soft);
  --carouselArrow-border-color-error: var(--border-destructive-default);
  --carouselArrow-border-color-hover: var(--border-primary-hover);
  --carouselArrow-icon-color-default: var(--icon-primary-default);
  --carouselArrow-icon-color-disabled: var(--icon-disabled-default);
  --carouselArrow-icon-color-error: var(--icon-destructive-default);

  /* Carousel Dot */
  --carouselDot-background-color-default: var(--background-transparent);
  --carouselDot-border-color-active: var(--border-primary-active);
  --carouselDot-border-color-default: var(--border-default);
  --carouselDot-border-color-hover: var(--border-primary-hover);
  --carouselDot-indicator-color-active: var(--background-primary-default);
  --carouselDot-indicator-color-hover: var(--background-primary-hover);
  --carouselDot-indicator-color-inactive: var(--background-supportive);

  /* Checkbox */
  --checkbox-background-color-hover: var(--background-primary-softest);
  --checkbox-control-notSelected-background-color-default: var(--background-default);
  --checkbox-control-notSelected-background-color-disabled: var(--background-disabled-default);
  --checkbox-control-notSelected-border-color-default: var(--border-primary-default);
  --checkbox-control-notSelected-border-color-disabled: var(--border-disabled-default);
  --checkbox-control-notSelected-border-color-error: var(--border-destructive-default);
  --checkbox-control-notSelected-border-color-hover: var(--border-primary-hover);
  --checkbox-control-selected-background-color-default: var(--background-primary-default);
  --checkbox-control-selected-background-color-disabled: var(--background-disabled-strongest);
  --checkbox-control-selected-background-color-error: var(--background-destructive-default);
  --checkbox-control-selected-background-color-hover: var(--background-primary-hover);
  --checkbox-control-selected-border-color-default: var(--border-primary-default);
  --checkbox-control-selected-border-color-disabled: var(--border-disabled-default);
  --checkbox-control-selected-border-color-error: var(--border-destructive-default);
  --checkbox-control-selected-border-color-hover: var(--border-primary-hover);
  --checkbox-control-selected-icon-color-default: var(--icon-white);
  --checkbox-text-color-default: var(--text-default);
  --checkbox-text-color-disabled: var(--text-disabled-default);
  --checkbox-text-color-error: var(--text-destructive-default);
  --checkbox-text-color-hover: var(--text-primary-hover);

  /* Checkbox Group - scaffold */
  --checkboxGroup-label-color-default: var(--text-default);
  --checkboxGroup-description-color-default: var(--text-helper);

  /* Command - scaffold */
  --command-background-color-default: var(--background-default);
  --command-border-color-default: var(--border-softest);
  --command-shadow: var(--shadow-large);
  --command-input-placeholder-color: var(--text-placeholder);
  --command-item-hover-background: var(--background-primary-softest);

  /* Company Select */
  --companySelect-dropdown-background: var(--background-default);
  --companySelect-dropdown-border-color: var(--border-softest);
  --companySelect-dropdown-shadow: var(--shadow-xlarge);
  --companySelect-footer-divider-color: var(--border-softest);
  --companySelect-item-background-hover: var(--background-primary-softest);
  --companySelect-item-focus-outline-color: var(--border-inverted);
  --companySelect-item-focus-ring-color: var(--border-primary-default);
  --companySelect-item-nip-text-color: var(--text-helper);
  --companySelect-item-text-color: var(--text-default);
  --companySelect-search-divider-color: var(--border-softest);
  --companySelect-trigger-background-hover: var(--background-primary-softest);
  --companySelect-trigger-focus-outline-color: var(--border-inverted);
  --companySelect-trigger-focus-ring-color: var(--border-primary-default);
  --companySelect-trigger-icon-color: var(--icon-default);
  --companySelect-trigger-text-color: var(--text-default);

  /* Context Menu - scaffold */
  --contextMenu-background-color-default: var(--background-default);
  --contextMenu-border-color-default: var(--border-default);
  --contextMenu-shadow: var(--shadow-medium);
  --contextMenu-item-hover-background: var(--background-primary-softest);
  --contextMenu-item-text-color: var(--text-default);

  /* Counter */
  --counter-text-color-default: var(--text-helper);

  /* Date Picker */
  --datePicker-background-color-default: var(--background-default);
  --datePicker-background-color-focus: var(--background-transparent);
  --datePicker-border-color-active: var(--border-primary-active);
  --datePicker-border-color-default: var(--border-default);
  --datePicker-border-color-disabled: var(--border-disabled-soft);
  --datePicker-border-color-error: var(--border-destructive-default);
  --datePicker-border-color-hover: var(--border-primary-hover);
  --datePicker-calendarIcon-color-default: var(--icon-primary-default);
  --datePicker-calendarIcon-color-disabled: var(--icon-disabled-default);
  --datePicker-calendarIcon-color-error: var(--icon-destructive-default);
  --datePicker-popup-shadow: var(--shadow-xlarge);
  --datePicker-separatorIcon-color-default: var(--icon-strong);
  --datePicker-separatorIcon-color-disabled: var(--icon-disabled-default);
  --datePicker-value-color-disabled: var(--text-disabled-default);
  --datePicker-value-color-filled: var(--text-default);
  --datePicker-value-color-placeholder: var(--text-placeholder);

  /* Dialog */
  --dialog-background-color-default: var(--background-default);
  --dialog-border-color-default: var(--border-softest);
  --dialog-description-color-default: var(--text-helper);
  --dialog-overlay-color: var(--colors-utility-semiTransparentBlack);
  --dialog-shadow: var(--shadow-large-strong);
  --dialog-title-color-default: var(--text-default);

  /* Draggable Element */
  --draggableElement-background-color-active: var(--background-primary-soft);
  --draggableElement-background-color-drag: var(--background-primary-softest);
  --draggableElement-background-color-focus: var(--background-transparent);
  --draggableElement-background-color-hover: var(--background-primary-softest);
  --draggableElement-icon-color-default: var(--icon-default);
  --draggableElement-icon-color-disabled: var(--icon-disabled-default);
  --draggableElement-icon-color-drag: var(--icon-primary-hover);
  --draggableElement-icon-color-hover: var(--icon-primary-hover);
  --draggableElement-shadow-drag: var(--shadow-medium-strong);
  --draggableElement-text-color-active: var(--text-primary-active);
  --draggableElement-text-color-default: var(--text-default);
  --draggableElement-text-color-disabled: var(--text-disabled-default);
  --draggableElement-text-color-drag: var(--text-primary-hover);
  --draggableElement-text-color-focused: var(--text-primary-hover);
  --draggableElement-text-color-hover: var(--text-primary-hover);

  /* Drawer - scoffold */
  --drawer-background-color-default: var(--background-default);
  --drawer-handle-color: var(--background-supportive);

  /* Dropdown Element */
  --dropdownElement-background-color-active: var(--background-primary-soft);
  --dropdownElement-background-color-default: var(--background-transparent);
  --dropdownElement-background-color-hover: var(--background-primary-softest);
  --dropdownElement-subtitle-color-active: var(--text-primary-active);
  --dropdownElement-subtitle-color-default: var(--text-helper);
  --dropdownElement-subtitle-color-disabled: var(--text-disabled-default);
  --dropdownElement-subtitle-color-focused: var(--text-primary-hover);
  --dropdownElement-subtitle-color-hover: var(--text-primary-hover);
  --dropdownElement-title-color-active: var(--text-primary-active);
  --dropdownElement-title-color-default: var(--text-default);
  --dropdownElement-title-color-disabled: var(--text-disabled-default);
  --dropdownElement-title-color-focused: var(--text-primary-hover);
  --dropdownElement-title-color-hover: var(--text-primary-hover);

  /* Dropdown Input */
  --dropdownInput-background-color-default: var(--background-default);
  --dropdownInput-background-color-focus: var(--background-transparent);
  --dropdownInput-border-color-active: var(--border-primary-active);
  --dropdownInput-border-color-default: var(--border-default);
  --dropdownInput-border-color-disabled: var(--border-disabled-soft);
  --dropdownInput-border-color-error: var(--border-destructive-default);
  --dropdownInput-border-color-hover: var(--border-primary-hover);
  --dropdownInput-icon-right-color-default: var(--icon-primary-default);
  --dropdownInput-iconRight-color-default: var(--icon-primary-default);
  --dropdownInput-icon-right-color-disabled: var(--icon-disabled-default);
  --dropdownInput-iconRight-color-disabled: var(--icon-disabled-default);
  --dropdownInput-icon-right-color-error: var(--icon-destructive-default);
  --dropdownInput-iconRight-color-error: var(--icon-destructive-default);
  --dropdownInput-value-color-disabled: var(--text-disabled-default);
  --dropdownInput-value-color-filled: var(--text-default);
  --dropdownInput-value-color-placeholder: var(--text-placeholder);

  /* Dropdown List */
  --dropdownlist-background-color-default: var(--background-default);
  --dropdownlist-border-color-default: var(--border-default);
  --dropdownlist-shadow: var(--shadow-medium);

  /* Editable Cell */
  --editableCell-border-color-default: var(--border-softest);
  --editableCell-border-color-disabled: var(--border-disabled-soft);
  --editableCell-border-color-error: var(--border-destructive-default);
  --editableCell-border-color-focus: var(--border-primary-active);
  --editableCell-border-color-hover: var(--border-primary-hover);
  --editableCell-icon-color-default: var(--icon-primary-default);
  --editableCell-icon-color-disabled: var(--icon-disabled-default);
  --editableCell-icon-color-error: var(--icon-destructive-default);
  --editableCell-text-color-disabled: var(--text-disabled-default);
  --editableCell-text-color-error: var(--text-destructive-default);
  --editableCell-text-color-filled: var(--text-default);
  --editableCell-text-color-placeholder: var(--text-placeholder);

  /* Empty State */
  --emptyState-background-color-default: var(--background-default);
  --emptyState-description-color-default: var(--text-helper);
  --emptyState-heading-color-default: var(--text-default);

  /* Footer */
  --footer-background-color-default: var(--background-default);
  --footer-border-color-default: var(--border-softest);
  --footer-copyright-text-color-default: var(--text-default);

  /* Hover Card - scaffold */
  --hoverCard-background-color-default: var(--background-default);
  --hoverCard-border-color-default: var(--border-default);
  --hoverCard-shadow: var(--shadow-medium);

  /* Input */
  --input-background-color-default: var(--background-default);
  --input-border-color-active: var(--border-primary-active);
  --input-border-color-default: var(--border-default);
  --input-border-color-disabled: var(--border-disabled-soft);
  --input-border-color-error: var(--border-destructive-default);
  --input-border-color-hover: var(--border-primary-hover);
  --input-iconLeft-color-default: var(--icon-soft);
  --input-iconLeft-color-disabled: var(--icon-disabled-default);
  --input-iconLeft-color-error: var(--icon-destructive-default);
  --input-iconRight-color-default: var(--icon-primary-default);
  --input-iconRight-color-disabled: var(--icon-disabled-default);
  --input-iconRight-color-error: var(--icon-destructive-default);
  --input-value-color-disabled: var(--text-disabled-default);
  --input-value-color-filled: var(--text-default);
  --input-value-color-placeholder: var(--text-placeholder);

  /* Kanban */
  --kanban-card-background-color-default: var(--background-default);
  --kanban-card-shadow-default: var(--shadow-small);
  --kanban-card-shadow-hover: var(--shadow-small-hover);
  --kanban-column-background-color-default: var(--background-neutral);
  --kanban-column-border-color-default: var(--border-default);
  --kanban-column-header-background-color-default: var(--background-neutral);
  --kanban-drop-indicator-color: var(--background-primary-default);

  /* Label */
  --label-text-color-default: var(--text-default);
  --label-text-color-disabled: var(--text-disabled-default);
  --label-text-color-obligatory: var(--text-destructive-default);
  --label-tooltip-icon-color-active: var(--icon-primary-active);
  --label-tooltip-icon-color-default: var(--icon-primary-default);
  --label-tooltip-icon-color-hover: var(--icon-primary-hover);

  /* Loader */
  --loader-icon-color-default: var(--icon-default);
  --loader-progressIndicator-background-color-default: var(--background-primary-softest);
  --loader-progressIndicator-background-color-error: var(--background-destructive-softest);
  --loader-progressIndicator-background-color-success: var(--background-success-softest);
  --loader-progressIndicator-progress-color-default: var(--background-primary-default);
  --loader-progressIndicator-progress-color-error: var(--background-destructive-default);
  --loader-progressIndicator-progress-color-success: var(--background-success-default);
  --loader-text-color-default: var(--text-default);

  /* MobileDrawer */
  --mobileDrawer-overlay-background: rgb(0 0 0 / 40%);
  --mobileDrawer-panel-background: var(--background-default);

  /* Menubar - scoffold */
  --menubar-background-color-default: var(--background-default);
  --menubar-border-color-default: var(--border-default);
  --menubar-item-hover-background: var(--background-primary-softest);

  /* Modal */
  --modal-background-color-default: var(--background-default);
  --modal-border-color-default: var(--border-softest);
  --modal-description-color-default: var(--text-helper);
  --modal-icon-color-default: var(--icon-default);
  --modal-icon-color-hover: var(--icon-primary-default);
  --modal-icon-transition: all 0.3s;
  --modal-overlay-background: var(--colors-utility-semiTransparentBlack);
  --modal-overlay-color: var(--colors-utility-semiTransparentBlack);
  --modal-shadow: var(--shadow-large-strong);
  --modal-title-color-default: var(--text-default);
  --modal-transition: opacity 0.3s;

  /* Nav Button */
  --navButton-background-color-active: var(--background-transparent);
  --navButton-background-color-default: var(--background-transparent);
  --navButton-background-color-disabled: var(--background-neutral);
  --navButton-background-color-hover: var(--background-primary-softest);
  --navButton-chevron-color-active: var(--icon-primary-default);
  --navButton-chevron-color-default: var(--icon-soft);
  --navButton-icon-color-active: var(--icon-primary-default);
  --navButton-icon-color-default: var(--icon-strong);
  --navButton-icon-color-disabled: var(--icon-disabled-default);
  --navButton-icon-color-hover: var(--icon-primary-default);
  --navButton-text-color-active: var(--text-primary-default);
  --navButton-text-color-default: var(--text-helper);
  --navButton-text-color-disabled: var(--text-disabled-default);
  --navButton-text-color-hover: var(--text-primary-default);

  /* Navigation */
  --navigation-navList-background: var(--background-default);
  --navigation-navList-label-default: var(--text-default);
  --navigation-navList-label-hover: var(--text-primary-default);
  --navigation-navTab-border-color-active: var(--border-primary-default);
  --navigation-navTab-icon-color-active: var(--icon-primary-default);
  --navigation-navTab-icon-color-default: var(--icon-default);
  --navigation-navTab-text-color-active: var(--text-primary-default);
  --navigation-navTab-text-color-default: var(--text-default);

  /* Navigation Menu - scaffold */
  --navigationMenu-background-color-default: var(--background-default);
  --navigationMenu-link-hover-background: var(--background-primary-softest);
  --navigationMenu-link-text-color: var(--text-default);
  --navigationMenu-link-text-color-hover: var(--text-primary-hover);

  /* Notification */
  --notification-info-icon-color-default: var(--background-informative-default);
  --notification-info-text-color-default: var(--text-informative-strong);

  /* Notification List */
  --notificationList-background-color-default: var(--background-default);
  --notificationList-border-color-default: var(--border-softest);
  --notificationList-item-border-color-default: var(--border-softest);
  --notificationList-item-date-color-default: var(--text-helper);
  --notificationList-item-description-color-default: var(--text-helper);
  --notificationList-item-focus-outline-color: var(--shadow-focus-outline);
  --notificationList-item-focus-ring-color: var(--shadow-focus);
  --notificationList-item-title-color-default: var(--text-default);
  --notificationList-statusBar-destructive-bg: var(--background-destructive-default);
  --notificationList-statusBar-destructive-icon: var(--icon-white);
  --notificationList-statusBar-informative-bg: var(--background-informative-default);
  --notificationList-statusBar-informative-icon: var(--icon-white);
  --notificationList-statusBar-read-bg: var(--background-soft);
  --notificationList-statusBar-read-icon: var(--icon-soft);

  /* Notification (additional) */
  --notification-negative-icon-color-default: var(--background-destructive-default);
  --notification-negative-text-color-default: var(--text-destructive-strong);
  --notification-positive-icon-color-default: var(--background-success-default);
  --notification-positive-text-color-default: var(--text-success-strong);
  --notification-warning-icon-color-default: var(--background-warning-default);
  --notification-warning-text-color-default: var(--text-warning-strong);

  /* Pagination */
  --pagination-background-color-active: var(--background-primary-soft);
  --pagination-background-color-hover: var(--background-primary-softest);
  --pagination-border-color-active: var(--border-primary-default);
  --pagination-ellipsis-color: var(--text-helper);
  --pagination-icon-color-default: var(--icon-primary-default);
  --pagination-icon-color-disabled: var(--icon-disabled-default);
  --pagination-text-color-active: var(--text-primary-active);
  --pagination-text-color-default: var(--text-primary-default);
  --pagination-text-color-disabled: var(--text-disabled-default);
  --pagination-text-color-hover: var(--text-primary-hover);

  /* Popover */
  --popover-background-color-default: var(--background-default);
  --popover-border-color-default: var(--border-default);

  /* Prefix Suffix Input */
  --prefixSuffixInput-background-color-default: var(--background-default);
  --prefixSuffixInput-background-color-focus: var(--background-transparent);
  --prefixSuffixInput-border-color-active: var(--border-primary-active);
  --prefixSuffixInput-border-color-default: var(--border-default);
  --prefixSuffixInput-border-color-disabled: var(--border-disabled-soft);
  --prefixSuffixInput-border-color-error: var(--border-destructive-default);
  --prefixSuffixInput-border-color-hover: var(--border-primary-hover);
  --prefixSuffixInput-iconLeft-color-default: var(--icon-soft);
  --prefixSuffixInput-iconLeft-color-disabled: var(--icon-disabled-default);
  --prefixSuffixInput-iconLeft-color-error: var(--icon-destructive-default);
  --prefixSuffixInput-iconRight-color-default: var(--icon-primary-default);
  --prefixSuffixInput-iconRight-color-disabled: var(--icon-disabled-default);
  --prefixSuffixInput-iconRight-color-error: var(--icon-destructive-default);
  --prefixSuffixInput-value-color-disabled: var(--text-disabled-default);
  --prefixSuffixInput-value-color-filled: var(--text-default);
  --prefixSuffixInput-value-color-placeholder: var(--text-placeholder);

  /* Prefix Suffix Select */
  --prefixSuffixSelect-background-color-default: var(--background-default);
  --prefixSuffixSelect-background-color-focus: var(--background-transparent);
  --prefixSuffixSelect-border-color-active: var(--border-primary-active);
  --prefixSuffixSelect-border-color-default: var(--border-default);
  --prefixSuffixSelect-border-color-disabled: var(--border-disabled-soft);
  --prefixSuffixSelect-border-color-error: var(--border-destructive-default);
  --prefixSuffixSelect-border-color-hover: var(--border-primary-hover);
  --prefixSuffixSelect-expandIcon-color-default: var(--icon-primary-default);
  --prefixSuffixSelect-expandIcon-color-disabled: var(--icon-disabled-default);
  --prefixSuffixSelect-expandIcon-color-error: var(--icon-destructive-default);
  --prefixSuffixSelect-value-color-disabled: var(--text-disabled-default);
  --prefixSuffixSelect-value-color-filled: var(--text-default);
  --prefixSuffixSelect-value-color-placeholder: var(--text-placeholder);

  /* Progress - scoffold */
  --progress-background-color-default: var(--background-primary-softest);
  --progress-indicator-color-default: var(--background-primary-default);

  /* Radio */
  --radio-background-color-hover: var(--background-primary-softest);
  --radio-control-notSelected-background-color-default: var(--background-default);
  --radio-control-notSelected-background-color-disabled: var(--background-disabled-default);
  --radio-control-notSelected-border-color-default: var(--border-primary-default);
  --radio-control-notSelected-border-color-disabled: var(--border-disabled-default);
  --radio-control-notSelected-border-color-error: var(--border-destructive-default);
  --radio-control-notSelected-border-color-hover: var(--border-primary-hover);
  --radio-control-selected-background-color-default: var(--background-primary-default);
  --radio-control-selected-background-color-disabled: var(--background-disabled-strongest);
  --radio-control-selected-background-color-error: var(--background-destructive-default);
  --radio-control-selected-background-color-hover: var(--background-primary-hover);
  --radio-control-selected-border-color-default: var(--border-primary-default);
  --radio-control-selected-border-color-disabled: var(--border-disabled-default);
  --radio-control-selected-border-color-error: var(--border-destructive-default);
  --radio-control-selected-border-color-hover: var(--border-primary-hover);
  --radio-control-selected-icon-color-default: var(--icon-white);
  --radio-text-color-default: var(--text-default);
  --radio-text-color-disabled: var(--text-disabled-default);
  --radio-text-color-error: var(--text-destructive-default);
  --radio-text-color-hover: var(--text-primary-hover);

  /* Radio Field Group - scaffold */
  --radioFieldGroup-label-color-default: var(--text-default);
  --radioFieldGroup-description-color-default: var(--text-helper);

  /* Resizable */
  --resizable-border-color-default: var(--border-softest);
  --resizable-handle-color-default: var(--border-softest);
  --resizable-handle-color-hover: var(--border-primary-hover);

  /* Scroll Area */
  --scrollArea-scrollbar-background: var(--background-neutral);
  --scrollArea-thumb-background: var(--background-supportive);

  /* Scroll */
  --scroll-background-color-default: var(--background-neutral);
  --scroll-control-background-color-default: var(--background-supportive);

  /* Select - scoffold */
  --select-background-color-default: var(--background-default);
  --select-border-color-default: var(--border-default);
  --select-border-color-hover: var(--border-primary-hover);
  --select-border-color-active: var(--border-primary-active);
  --select-border-color-disabled: var(--border-disabled-soft);
  --select-border-color-error: var(--border-destructive-default);
  --select-icon-color-default: var(--icon-primary-default);
  --select-icon-color-disabled: var(--icon-disabled-default);
  --select-icon-color-error: var(--icon-destructive-default);
  --select-value-color-placeholder: var(--text-placeholder);
  --select-value-color-filled: var(--text-default);
  --select-value-color-disabled: var(--text-disabled-default);
  --select-item-background-color-hover: var(--background-primary-softest);
  --select-item-background-color-active: var(--background-primary-soft);

  /* Select List Item */
  --selectListItem-background-default: var(--background-transparent);
  --selectListItem-background-highlighted: var(--background-primary-softest);
  --selectListItem-background-hover: var(--background-primary-softest);
  --selectListItem-background-selected: var(--shadow-focus-outline);
  --selectListItem-focus-outline-color: var(--border-inverted);
  --selectListItem-focus-ring-color: var(--shadow-focus);
  --selectListItem-text-color-default: var(--text-default);
  --selectListItem-text-color-helper-default: var(--text-helper);
  --selectListItem-text-color-helper-selected: var(--text-primary-hover);
  --selectListItem-text-color-selected: var(--text-primary-active);

  /* Separator */
  --separator-bold: var(--border-thick);
  --separator-border-color-default: var(--border-softest);
  --separator-thick: var(--border-x-thick);

  /* Side Nav */
  --sideNav-background-color: var(--background-default);
  --sideNav-border-color: var(--border-softest);
  --sideNav-dropdown-background: var(--background-default);
  --sideNav-dropdown-border-color: var(--border-softest);
  --sideNav-dropdown-shadow: var(--shadow-medium);
  --sideNav-dropdown-title-color: var(--text-helper);
  --sideNav-footer-border-color: var(--border-softest);
  --sideNav-section-title-color: var(--text-helper);
  --sideNav-submenu-border-color: var(--border-softest);

  /* Skeleton */
  --skeleton-background-color-default: var(--background-supportive);

  /* Slot */
  --slot-background-color-default: var(--background-accent-purple-soft);
  --slot-border-color-default: var(--background-accent-purple-default);
  --slot-icon-wrapper-color-default: var(--icon-default);
  --slot-label-color-default: var(--background-accent-purple-default);

  /* Step */
  --step-background-color-active: var(--background-primary-soft);
  --step-background-color-filled: var(--background-default);
  --step-background-color-not-filled: var(--background-default);
  --step-border-color-filled: var(--border-success-default);
  --step-border-color-not-filled: var(--border-default);
  --step-icon-color-filled: var(--text-success-active);
  --step-label-text-color-filled: var(--text-success-active);
  --step-label-text-color-not-filled: var(--text-disabled-default);

  /* Stepper */
  --stepper-dot-background-color-active-hover: var(--background-success-softest);
  --stepper-dot-background-color-active: var(--background-default);
  --stepper-dot-background-color-completed-hover: var(--background-success-softest);
  --stepper-dot-background-color-completed: var(--background-default);
  --stepper-dot-background-color-disabled: var(--background-disabled-default);
  --stepper-dot-background-color-incomplete-hover: var(--background-neutral);
  --stepper-dot-background-color-incomplete: var(--background-default);
  --stepper-dot-border-color-active: var(--text-success-default);
  --stepper-dot-border-color-completed: var(--icon-success-default);
  --stepper-dot-border-color-disabled: var(--border-disabled-default);
  --stepper-dot-border-color-incomplete-hover: var(--border-success-default);
  --stepper-dot-border-color-incomplete: var(--border-default);
  --stepper-dot-icon-color-completed: var(--icon-success-default);
  --stepper-dot-icon-color-disabled: var(--icon-disabled-default);
  --stepper-dot-text-color-active-hover: var(--text-success-strong);
  --stepper-dot-text-color-active: var(--text-primary-default);
  --stepper-dot-text-color-disabled: var(--text-disabled-default);
  --stepper-dot-text-color-incomplete-hover: var(--text-success-strong);
  --stepper-dot-text-color-incomplete: var(--text-default);
  --stepper-separator-color-completed: var(--background-success-default);
  --stepper-separator-color-incomplete: var(--border-softest);
  --stepper-separator-color-incomplete-vertical: var(--border-default);
  --stepper-title-text-color-active: var(--text-success-default);
  --stepper-title-text-color-default: var(--text-helper);
  --stepper-title-text-color-disabled: var(--text-disabled-default);
  --stepper-title-text-color-optional: var(--text-helper);

  /* Sub Nav Button */
  --subNavButton-background-color-default: var(--background-transparent);
  --subNavButton-background-color-hover: var(--background-primary-softest);
  --subNavButton-text-color-active: var(--text-primary-default);
  --subNavButton-text-color-default: var(--text-helper);
  --subNavButton-text-color-hover: var(--text-primary-active);

  /* System Search */
  --systemSearch-divider-color: var(--border-softest);
  --systemSearch-empty-text-color: var(--text-helper);
  --systemSearch-item-icon-color: var(--icon-default);
  --systemSearch-popover-background: var(--background-default);
  --systemSearch-popover-border-color: var(--border-softest);
  --systemSearch-popover-shadow: var(--shadow-xlarge);

  /* Tab */
  --tab-background-color-default: var(--background-transparent);
  --tab-border-color-active: var(--border-primary-default);
  --tab-border-color-default: var(--border-softest);
  --tab-border-color-disabled: var(--border-disabled-default);

  /* Table */
  --table-background-color-default: var(--background-default);
  --table-border-color-default: var(--border-softest);

  /* Table Cell */
  --tableCell-border-color-default: var(--border-softest);
  --tableCell-text-color-default: var(--text-default);

  /* Table Cell — scaffold-specific tokens (ds-tokens equivalent: --table-tableCell-text-color-prefix/suffix: var(--text-helper)) */
  --tableCell-text-color-prefix: var(--text-default);
  --tableCell-text-color-suffix: var(--text-default);

  /* Table Editable Cell */
  --table-editableCell-background-color-default: var(--background-default);
  --table-editableCell-background-color-disabled: var(--background-default);
  --table-editableCell-border-color-active: var(--border-primary-hover);
  --table-editableCell-border-color-default: var(--border-softest);
  --table-editableCell-border-color-error: var(--border-destructive-default);
  --table-editableCell-border-color-hover: var(--border-primary-default);
  --table-editableCell-icon-color-default: var(--icon-primary-default);
  --table-editableCell-icon-color-error: var(--icon-destructive-default);
  --table-editableCell-text-color-default: var(--text-default);
  --table-editableCell-text-color-disabled: var(--text-disabled-default);
  --table-editableCell-text-color-error: var(--text-destructive-default);
  --table-editableCell-text-color-placeholder: var(--text-placeholder);

  /* Table Cell Action */
  --tableCellAction-background-color-hover: var(--background-primary-softest);
  --tableCellAction-icon-color-default: var(--icon-strong);
  --tableCellAction-icon-color-destructive: var(--icon-destructive-default);
  --tableCellAction-icon-color-destructive-hover: var(--icon-destructive-hover);
  --tableCellAction-icon-color-hover: var(--icon-primary-hover);

  /* Table Filter Row */
  --tableFilterRow-background-color-default: var(--background-neutral);
  --tableFilterRow-border-color-default: var(--border-softest);
  --tableFilterRow-icon-color-default: var(--icon-success-default);
  --tableFilterRow-text-color-active: var(--text-default);
  --tableFilterRow-text-color-default: var(--text-softer);

  /* Table Group Row */
  --tableGroupRow-background-color-default: var(--background-neutral);
  --tableGroupRow-border-color-collapsed: var(--border-softest);
  --tableGroupRow-border-color-expanded: var(--border-primary-default);
  --tableGroupRow-border-color-hover: var(--border-primary-hover);
  --tableGroupRow-icon-color-default: var(--icon-default);
  --tableGroupRow-icon-color-hover: var(--icon-primary-hover);
  --tableGroupRow-text-color-default: var(--text-default);
  --tableGroupRow-text-color-hover: var(--text-primary-hover);

  /* Table Header */
  --table-header-background-color-default: var(--background-neutral);
  --tableHeader-background-color-default: var(--background-neutral);
  --table-header-background-color-hover: var(--background-supportive);
  --table-header-border-color-default: var(--border-softest);
  --tableHeader-border-color-default: var(--border-softest);
  --table-header-border-default: var(--border-default);
  --table-header-border-pinned: var(--border-bold);
  --table-header-resizeHandle-color-active: var(--border-primary-active);
  --table-header-resizeHandle-color-default: var(--border-default);
  --table-header-resizeHandle-color-hover: var(--border-primary-hover);
  --table-header-sorting-icon-color-active: var(--icon-primary-default);
  --table-header-sorting-icon-color-inactive: var(--icon-disabled-default);
  --table-header-text-color-default: var(--text-default);
  --tableHeader-text-color-default: var(--text-default);

  /* Table Header — scaffold-specific tokens */
  --tableHeader-icon-color-default: var(--icon-strong);
  --tableHeader-icon-color-hover: var(--icon-primary-hover);
  --tableHeader-resizeHandle-color-default: var(--background-transparent);
  --tableHeader-resizeHandle-color-hover: var(--border-primary-default);
  --tableHeader-resizeHandle-color-active: var(--border-primary-active);

  /* Table Options Popover */
  --tableOptionsPopover-background-color-default: var(--background-default);
  --tableOptionsPopover-background-color-hover: var(--background-primary-softest);
  --tableOptionsPopover-border-color-default: var(--border-softest);
  --tableOptionsPopover-icon-color-default: var(--icon-default);
  --tableOptionsPopover-shadow: var(--shadow-xlarge);
  --tableOptionsPopover-text-color-default: var(--text-default);
  --tableOptionsPopover-text-color-hover: var(--text-primary-hover);

  /* Table Popover */
  --table-popover-background-color-default: var(--background-default);
  --table-popover-border-color-default: var(--border-softest);

  /* Table Row */
  --tableRow-background-color-default: var(--background-default);
  --tableRow-background-color-striped: var(--background-neutral);

  /* Table Row — scaffold-specific states */
  --tableRow-background-color-hover: var(--background-primary-softest);
  --tableRow-background-color-selected: var(--background-primary-soft);

  /* Table Action Bar */
  --table-tableActionBar-background-color-default: var(--background-neutral);
  --table-tableActionBar-border-color-default: var(--border-softest);
  --table-tableActionBar-border-color-left-bar: var(--border-primary-default);
  --table-tableActionBar-text-color-default: var(--text-default);

  /* Table Cell (additional) */
  --table-tableCell-background-color-default: var(--background-default);
  --table-tableCell-background-color-footer: var(--background-soft);
  --table-tableCell-background-color-selected: var(--background-primary-softest);
  --table-tableCell-border-color-default: var(--border-softest);
  --table-tableCell-border-color-group-open: var(--border-primary-default);
  --table-tableCell-icon-color-default: var(--icon-strong);
  --table-tableCell-text-color-default: var(--text-default);
  --table-tableCell-text-color-prefix: var(--text-helper);
  --table-tableCell-text-color-suffix: var(--text-helper);

  /* Tab List */
  --tabList-element-background-color-active: var(--background-default);
  --tabList-element-background-color-default: var(--background-neutral);
  --tabList-element-background-color-focus: var(--background-primary-softest);
  --tabList-element-border-color-default: var(--border-default);
  --tabList-element-focus-outline-color: var(--border-inverted);
  --tabList-element-focus-ring-color: var(--border-primary-default);
  --tabList-element-font-family: var(--font-family-base);
  --tabList-element-icon-color-active: var(--icon-primary-default);
  --tabList-element-icon-color-default: var(--icon-default);
  --tabList-element-icon-color-disabled: var(--icon-disabled-default);
  --tabList-element-icon-color-hover: var(--icon-primary-hover);
  --tabList-element-shadow-active: var(--tabList-element-shadow-position-x)
    var(--tabList-element-shadow-position-y) var(--tabList-element-shadow-blur)
    var(--tabList-element-shadow-spread) rgb(0 0 0 / 12%);
  --tabList-element-shadow-color: rgb(0 0 0 / 12%);
  --tabList-element-text-color-active: var(--text-primary-default);
  --tabList-element-text-color-default: var(--text-default);
  --tabList-element-text-color-disabled: var(--text-disabled-default);
  --tabList-element-text-color-hover: var(--text-primary-hover);
  --tabList-element-text-weight-active: 700;
  --tabList-element-text-weight-default: 400;
  --tabList-list-background-color-default: var(--background-accent-white-softest);

  /* Tab Title */
  --tab-title-text-color-active: var(--text-primary-default);
  --tab-title-text-color-default: var(--text-default);
  --tab-title-text-color-disabled: var(--text-disabled-default);
  --tab-title-text-color-hover: var(--text-primary-hover);

  /* Tag */
  --tag-disabled-background-color-default: var(--background-disabled-default);
  --tag-disabled-icon-color-default: var(--icon-disabled-default);
  --tag-disabled-text-color-default: var(--text-disabled-default);
  --tag-filter-background-default: var(--background-transparent);
  --tag-filter-border-color-destructive: var(--border-destructive-default);
  --tag-filter-border-color-info: var(--border-informative-default);
  --tag-filter-border-color-mint: var(--border-mint-default);
  --tag-filter-border-color-neutral-blue: var(--border-neutral-blue-default);
  --tag-filter-border-color-orange: var(--border-orange-default);
  --tag-filter-border-color-pale-blue: var(--border-pale-blue-default);
  --tag-filter-border-color-pale-green: var(--border-pale-green-default);
  --tag-filter-border-color-pale-red: var(--border-pale-red-default);
  --tag-filter-border-color-positive: var(--border-success-default);
  --tag-filter-border-color-primary: var(--border-primary-default);
  --tag-filter-border-color-purple: var(--border-purple-default);
  --tag-filter-border-color-warning: var(--border-warning-default);
  --tag-light-blue-default: var(--background-informative-softest);
  --tag-light-blue-hover: var(--background-accent-pale-blue-soft);
  --tag-light-destructive-default: var(--background-destructive-softest);
  --tag-light-destructive-hover: var(--background-destructive-soft);
  --tag-light-destructive-text-color-default: var(--text-destructive-strong);
  --tag-light-info-text-color-default: var(--text-informative-strong);
  --tag-light-mint-default: var(--background-accent-mint-softest);
  --tag-light-mint-hover: var(--background-accent-mint-soft);
  --tag-light-neutral-blue-default: var(--background-accent-neutral-blue-softest);
  --tag-light-neutral-blue-hover: var(--background-accent-neutral-blue-soft);
  --tag-light-orange-default: var(--background-accent-orange-softest);
  --tag-light-orange-hover: var(--background-accent-orange-soft);
  --tag-light-pale-blue-default: var(--background-accent-pale-blue-softest);
  --tag-light-pale-blue-hover: var(--background-accent-pale-blue-soft);
  --tag-light-pale-green-default: var(--background-accent-pale-green-softest);
  --tag-light-pale-green-hover: var(--background-accent-pale-green-soft);
  --tag-light-pale-red-default: var(--background-accent-pale-red-softest);
  --tag-light-pale-red-hover: var(--background-accent-pale-red-soft);
  --tag-light-positive-default: var(--background-success-softest);
  --tag-light-positive-hover: var(--background-success-soft);
  --tag-light-positive-text-color-default: var(--text-success-strong);
  --tag-light-primary-background-color-default: var(--background-primary-softest);
  --tag-light-primary-background-color-hover: var(--background-primary-soft);
  --tag-light-primary-text-color-default: var(--text-primary-strong);
  --tag-light-purple-default: var(--background-accent-purple-softest);
  --tag-light-purple-hover: var(--background-accent-purple-soft);
  --tag-light-warning-default: var(--background-warning-softest);
  --tag-light-warning-hover: var(--background-warning-soft);
  --tag-light-warning-text-color-default: var(--text-warning-strong);
  --tag-strong-destructive-background-color-default: var(--background-destructive-default);
  --tag-strong-destructive-background-color-hover: var(--background-destructive-hover);
  --tag-strong-info-background-background-color-default: var(--background-accent-orange-default);
  --tag-strong-info-background-background-color-hover: var(--background-accent-orange-hover);
  --tag-strong-info-background-color-default: var(--background-informative-default);
  --tag-strong-info-background-color-hover: var(--background-informative-hover);
  --tag-strong-mint-background-color-default: var(--background-accent-mint-default);
  --tag-strong-mint-background-color-hover: var(--background-accent-mint-hover);
  --tag-strong-neutral-blue-background-color-default: var(--background-accent-neutral-blue-default);
  --tag-strong-neutral-blue-background-color-hover: var(--background-accent-neutral-blue-hover);
  --tag-strong-orange-background-color-default: var(--background-accent-orange-default);
  --tag-strong-orange-background-color-hover: var(--background-accent-orange-hover);
  --tag-strong-pale-blue-background-color-default: var(--background-accent-pale-blue-default);
  --tag-strong-pale-blue-background-color-hover: var(--background-accent-pale-blue-hover);
  --tag-strong-pale-green-background-color-default: var(--background-accent-pale-green-default);
  --tag-strong-pale-green-background-color-hover: var(--background-accent-pale-green-hover);
  --tag-strong-pale-red-background-color-default: var(--background-accent-pale-red-default);
  --tag-strong-pale-red-background-color-hover: var(--background-accent-pale-red-hover);
  --tag-strong-positive-background-color-default: var(--background-success-default);
  --tag-strong-positive-background-color-hover: var(--background-success-hover);
  --tag-strong-primary-background-color-default: var(--background-primary-default);
  --tag-strong-primary-background-color-hover: var(--background-primary-hover);
  --tag-strong-purple-background-color-default: var(--background-accent-purple-default);
  --tag-strong-purple-background-color-hover: var(--background-accent-purple-hover);
  --tag-strong-text-color-default: var(--text-white);
  --tag-strong-warning-background-color-default: var(--background-warning-default);
  --tag-strong-warning-background-color-hover: var(--background-warning-active);

  /* Text Area */
  --textArea-background-color-default: var(--background-default);
  --textArea-background-color-focus: var(--background-transparent);
  --textArea-border-color-active: var(--border-primary-active);
  --textArea-border-color-default: var(--border-default);
  --textArea-border-color-disabled: var(--border-disabled-soft);
  --textArea-border-color-error: var(--border-destructive-default);
  --textArea-border-color-hover: var(--border-primary-hover);
  --textArea-expander-color-default: var(--icon-primary-default);
  --textArea-expander-color-disabled: var(--icon-disabled-default);
  --textArea-expander-color-error: var(--icon-destructive-default);
  --textArea-value-color-disabled: var(--text-disabled-default);
  --textArea-value-color-filled: var(--text-default);
  --textArea-value-color-placeholder: var(--text-placeholder);

  /* Thumbnail */
  --thumbnail-background-color-default: var(--background-supportive);
  --thumbnail-icon-color-default: var(--icon-strong);

  /* Tile */
  --tile-background-color-default: var(--background-default);
  --tile-description-text-color-default: var(--text-helper);
  --tile-title-text-color-default: var(--text-default);
  --tile-topText-text-color-default: var(--text-helper);

  /* Toast */
  --toast-content-body-color-default: var(--background-default);
  --toast-content-description-text-color-default: var(--text-helper);
  --toast-content-title-text-color-default: var(--text-default);
  --toast-number-border: var(--radius-medium);
  --toast-shadow: var(--shadow-large-strong);
  --toast-stateBar-background-color-alert: var(--background-destructive-default);
  --toast-stateBar-background-color-info: var(--background-informative-default);
  --toast-stateBar-background-color-success: var(--background-success-default);
  --toast-stateBar-background-color-warning: var(--background-warning-default);
  --toast-stateBar-body-color-alert: var(--background-destructive-default);
  --toast-stateBar-body-color-info: var(--background-informative-default);
  --toast-stateBar-body-color-success: var(--background-success-default);
  --toast-stateBar-body-color-warning: var(--background-warning-default);
  --toast-stateBar-icon-color-default: var(--icon-white);
  --toast-title: var(--text-default);

  /* Toggle */
  --toggle-control-indicator-notSwitched-background-color-default: var(
    --background-primary-default
  );
  --toggle-control-indicator-notSwitched-background-color-disabled: var(
    --background-disabled-strongest
  );
  --toggle-control-indicator-notSwitched-background-color-error: var(
    --background-destructive-default
  );
  --toggle-control-indicator-notSwitched-background-color-hover: var(--background-primary-hover);
  --toggle-control-indicator-switched-background-color-default: var(--icon-white);
  --toggle-control-notSwitched-background-color-default: var(--background-default);
  --toggle-control-notSwitched-border-color-default: var(--background-primary-default);
  --toggle-control-notSwitched-border-color-disabled: var(--border-disabled-default);
  --toggle-control-notSwitched-border-color-error: var(--background-destructive-default);
  --toggle-control-notSwitched-border-color-hover: var(--background-primary-hover);
  --toggle-control-switched-background-color-default: var(--background-primary-default);
  --toggle-control-switched-background-color-disabled: var(--background-disabled-stronger);
  --toggle-control-switched-background-color-error: var(--background-destructive-default);
  --toggle-control-switched-background-color-hover: var(--background-primary-hover);
  --toggle-text-color-default: var(--text-default);

  /* Toggle button (ToggleGroup item) colors */
  --toggle-button-background-default: var(--background-transparent);
  --toggle-button-background-hover: var(--background-primary-softest);
  --toggle-button-background-active: var(--background-primary-soft);
  --toggle-button-border-default: var(--border-default);
  --toggle-button-border-disabled: var(--border-disabled-default);
  --toggle-button-text-default: var(--text-default);
  --toggle-button-text-hover: var(--text-primary-hover);
  --toggle-button-text-active: var(--text-primary-default);
  --toggle-button-text-disabled: var(--text-disabled-default);

  /* Toggle - scaffold */
  --toggleButton-background-color-default: var(--background-transparent);
  --toggleButton-background-color-active: var(--background-primary-softest);
  --toggleButton-border-color-default: var(--border-default);
  --toggleButton-text-color-default: var(--text-default);
  --toggleButton-text-color-active: var(--text-primary-default);

  /* Tooltip */
  --tooltip-icon-color-active: var(--icon-primary-active);
  --tooltip-icon-color-default: var(--icon-primary-default);
  --tooltip-icon-color-hover: var(--icon-primary-hover);
  --tooltip-prompt-background-color-default: var(--background-inverted);
  --tooltip-prompt-text-color-default: var(--text-inverted);

  /* Top Nav */
  --topNav-appSwitch-background-hover: var(--background-primary-softest);
  --topNav-appSwitcher-background: var(--background-default);
  --topNav-appSwitcher-border-color: var(--border-default);
  --topNav-appSwitcher-item-background-hover: var(--background-primary-softest);
  --topNav-appSwitcher-item-focus-outline-color: var(--shadow-focus-outline);
  --topNav-appSwitcher-item-focus-ring-color: var(--shadow-focus);
  --topNav-appSwitcher-item-text-color: var(--text-default);
  --topNav-appSwitcher-shadow: var(--shadow-large);
  --topNav-appSwitcher-title-color: var(--text-helper);
  --topNav-appSwitch-focus-outline-color: var(--border-inverted);
  --topNav-appSwitch-focus-ring-color: var(--shadow-focus);
  --topNav-appSwitch-icon-color: var(--icon-default);
  --topNav-appSwitch-text-color: var(--text-default);
  --topNav-avatar-background-color: var(--background-supportive);
  --topNav-avatar-background-hover: var(--background-primary-softest);
  --topNav-avatar-focus-outline-color: var(--shadow-focus-outline);
  --topNav-avatar-focus-ring-color: var(--shadow-focus);
  --topNav-avatar-text-color: var(--text-default);
  --topNav-background-color: var(--background-default);
  --topNav-border-color: var(--border-softest);
  --topNav-brandDot-background-color: var(--background-success-default);
  --topNav-companySelect-background-hover: var(--background-primary-softest);
  --topNav-companySelect-focus-outline-color: var(--shadow-focus-outline);
  --topNav-companySelect-focus-ring-color: var(--shadow-focus);
  --topNav-companySelect-icon-color: var(--icon-default);
  --topNav-companySelect-text-color: var(--text-default);
  --topNav-mobileOverlay-background: var(--colors-utility-semiTransparentBlack);
  --topNav-notificationBadge-background: var(--background-destructive-default);
  --topNav-notificationBadge-text-color: var(--text-white);
  --topNav-tab-border-color-active: var(--border-primary-default);
  --topNav-tab-focus-outline-color: var(--border-inverted);
  --topNav-tab-focus-ring-color: var(--shadow-focus);
  --topNav-tab-text-color-active: var(--text-primary-active);
  --topNav-tab-text-color-default: var(--text-default);
  --topNav-tab-text-color-hover: var(--text-primary-hover);

  /* Input OTP */
  --inputOtp-border-color-default: var(--border-default);
  --inputOtp-border-color-active: var(--border-primary-active);
  --inputOtp-text-color-default: var(--text-default);

  /* Slider */
  --slider-track-color-default: var(--border-default);
  --slider-track-color-disabled: var(--background-disabled-stronger);
  --slider-indicator-color-default: var(--background-primary-default);
  --slider-indicator-color-disabled: var(--background-disabled-strongest);
  --slider-thumb-background-color-default: var(--background-default);
  --slider-thumb-background-color-disabled: var(--background-disabled-default);
  --slider-thumb-border-color-default: var(--border-primary-default);
  --slider-thumb-border-color-hover: var(--border-primary-hover);
  --slider-thumb-border-color-disabled: var(--border-disabled-default);

  /* Slider - scaffold */
  --slider-track-background-color-default: var(--background-supportive);
  --slider-range-background-color-default: var(--background-primary-default);

  /* VirtualList */
  --virtualList-border-color-default: var(--border-softest);
  --virtualList-empty-text-color: var(--text-helper);
}