/* ========================================
 * Theme: light / members
 * DO NOT EDIT — regenerate with: node transform-tokens.js
 * Version: 1.0.0
 * ======================================== */

[data-brand="members"] {

  /* ── Colors ── */
  --ds-color-primary: #365F56; /* Primary brand color - main interactive color. Do NOT use for error/danger states — use error tokens instead */
  --ds-color-link: #365F56; /* Link/breadcrumb text color — defaults to primary per brand, but brand-overridable (MEADOW keeps links at the AA-safe mid-green while primary is the deeper green #024205, Q9/A11Y-01) */
  --ds-color-linkHover: #365F56; /* Link hover color — aliases color.link for now (pixel-neutral promotion of the fallback-only var in DsProse); brands may override with a darker hover shade */
  --ds-color-primaryHover: #2C4F47; /* Primary color hover state - slightly darker */
  --ds-color-primaryActive: #223E38; /* Primary color active/pressed state - darkest */
  --ds-color-primarySubtle: #C9E3DD; /* Subtle primary background - light brand tint */
  --ds-color-primarySubtleHover: #A1CEC4; /* Subtle primary hover - slightly more saturated */
  --ds-color-primarySubtleActive: #72B6A7; /* Subtle primary active - most saturated subtle state */
  --ds-color-primaryEmphasis: #4D9484; /* Primary emphasis - for borders and icons on primary surfaces */
  --ds-color-primaryContainer: #C9E3DD; /* Primary container background */
  --ds-color-onPrimary: #FFFFFF; /* Text/icons on primary color - ensures contrast */
  --ds-color-onPrimaryContainer: #142421; /* Text/icons on primary container */
  --ds-color-onPrimarySubtle: #142421; /* Text/icons on subtle primary backgrounds */
  --ds-color-primarySurface: #E4F1EE; /* Very light primary tint - page backgrounds, large surfaces */
  --ds-color-primarySurfaceVariant: #F5FAF9; /* Near-white primary wash - lightest brand background */
  --ds-color-secondary: #475569; /* Secondary interactive color - less prominent than primary */
  --ds-color-secondaryHover: #334155; /* Secondary hover state */
  --ds-color-secondaryActive: #1E293B; /* Secondary active/pressed state */
  --ds-color-secondarySubtle: #F7F0DC; /* Subtle secondary background */
  --ds-color-secondarySubtleHover: #E2E8F0; /* Subtle secondary hover */
  --ds-color-secondarySubtleActive: #CBD5E1; /* Subtle secondary active */
  --ds-color-secondaryEmphasis: #94A3B8; /* Secondary emphasis color */
  --ds-color-secondaryContainer: #F7F0DC; /* Secondary container background */
  --ds-color-onSecondary: #FFFDF2; /* Text/icons on secondary color */
  --ds-color-onSecondaryContainer: #0F172A; /* Text/icons on secondary container */
  --ds-color-onSecondarySubtle: #0F172A; /* Text/icons on subtle secondary backgrounds */
  --ds-color-surface: #FFFDF2; /* Main surface color — primary background for cards and content areas. Do NOT use brand colors directly as backgrounds — use primarySurface for branded backgrounds */
  --ds-color-surfaceVariant: #FDF8E9; /* Variant surface — brand-overridable, defaults to neutral.050 */
  --ds-color-surfaceContainer: #F7F0DC; /* Container on surface — brand-overridable, defaults to neutral.100. The base step of the M3 surface-container tonal scale (Low < this < High < Highest). */
  --ds-color-surfaceContainerLow: #FDF8E9; /* Lowest-elevation surface container — one tonal step below surfaceContainer (closer to the base surface). For barely-raised fills like progress tracks and resting chips. */
  --ds-color-surfaceContainerHigh: #F7F0DC; /* Higher-elevation surface container — one tonal step above surfaceContainer. For hover rows, kebab menus, and nested cards that need to read as raised. */
  --ds-color-surfaceContainerHighest: #F0E7CF; /* Highest-elevation surface container — the most raised tonal step. For the topmost stacked surfaces (active menu items, emphasized chips). */
  --ds-color-surfaceContainerHover: #E2E8F0; /* Container hover state */
  --ds-color-surfaceContainerActive: #CBD5E1; /* Container active/pressed state — one neutral step above hover, completing the container interaction-state set. Reconciled from the main branch. */
  --ds-color-onSurface: #0F172A; /* Primary text on surface — highest contrast text color. Do NOT use on colored/primary backgrounds — use onPrimary or onSecondary instead */
  --ds-color-onSurfaceVariant: #475569; /* Secondary text on surface */
  --ds-color-onSurfaceSubtle: #64748B; /* Tertiary text on surface — soft body copy and tertiary labels. Bumped from neutral.400 to neutral.500 on 2026-04-27 so 'DsTypography color=subtle' meets WCAG AA 4.5:1 on white surfaces (was 2.56:1 at #94A3B8, now ~5.0:1 at #64748B). Placeholder duty unaffected — input placeholders remain visibly lighter than typed text via the onSurface ↔ onSurfaceSubtle delta. */
  --ds-color-errorSurface: #FFF1F2; /* Near-white error tint - light error backgrounds */
  --ds-color-infoSurface: #EFF6FF; /* Near-white info tint - light info backgrounds */
  --ds-color-successSurface: #F0FDF4; /* Near-white success tint - light success backgrounds */
  --ds-color-warningSurface: #FFFDF0; /* Near-white warning tint - light warning backgrounds */
  --ds-color-outline: #64748B; /* Standard border and outline color — default dividers, input borders. Uses neutral.500 for WCAG 3:1 contrast on white surfaces. Do NOT use for interactive focus rings — use focusRing token instead */
  --ds-color-outlineVariant: #E2E8F0; /* Subtle outline for minimal borders */
  --ds-color-outlineStrong: #475569; /* Strong outline for emphasis — darker than `outline` (.500) in light mode so it reads as stronger */
  --ds-color-error: #9E3B1B; /* Error/danger state color — destructive actions, validation errors. Do NOT use for warnings — use warning tokens instead */
  --ds-color-errorHover: #7E2E14; /* Error hover state */
  --ds-color-errorActive: #9F1239; /* Error active/pressed state */
  --ds-color-errorSubtle: #F9C5B4; /* Subtle error background */
  --ds-color-errorSubtleHover: #FDA4AF; /* Subtle error hover */
  --ds-color-errorSubtleActive: #FB7185; /* Subtle error active */
  --ds-color-errorEmphasis: #C4502A; /* Error emphasis for borders */
  --ds-color-errorStrong: #9F1239; /* Dark error for text on white — WCAG AA. Use for red text labels/links where error.500 fails contrast. Completes the *Strong family (cf. successStrong); reconciled from the main branch. */
  --ds-color-errorContainer: #F9C5B4; /* Error container background */
  --ds-color-onError: #FFFFFF; /* Text/icons on error color */
  --ds-color-onErrorContainer: #4F1D0E; /* Text/icons on error container */
  --ds-color-onErrorSubtle: #4C0519; /* Text/icons on subtle error backgrounds */
  --ds-color-success: #15803D; /* Success state color — confirmations, completed states. Always green regardless of brand. Do NOT use for informational states — use info tokens instead */
  --ds-color-successHover: #126B33; /* Success hover state */
  --ds-color-successActive: #166534; /* Success active/pressed state */
  --ds-color-successSubtle: #BBF7D0; /* Subtle success background */
  --ds-color-successSubtleHover: #86EFAC; /* Subtle success hover */
  --ds-color-successSubtleActive: #4ADE80; /* Subtle success active */
  --ds-color-successEmphasis: #22C55E; /* Success emphasis for borders */
  --ds-color-successStrong: #166534; /* Dark success for text on white — WCAG AA (7:1). Use for green text labels, brand marks, or links where success.500 fails contrast. */
  --ds-color-successContainer: #BBF7D0; /* Success container background */
  --ds-color-onSuccess: #FFFFFF; /* Text/icons on success color — dark green for WCAG AA contrast on green-600 */
  --ds-color-onSuccessContainer: #052E16; /* Text/icons on success container */
  --ds-color-onSuccessSubtle: #052e16; /* Text/icons on subtle success backgrounds */
  --ds-color-warning: #8A6A14; /* Warning state color — caution states, approaching limits. Do NOT use for errors — use error tokens instead */
  --ds-color-warningHover: #6E5410; /* Warning hover state */
  --ds-color-warningActive: #A87D00; /* Warning active/pressed state */
  --ds-color-warningSubtle: #FFE5A3; /* Subtle warning background */
  --ds-color-warningSubtleHover: #FFE47A; /* Subtle warning hover */
  --ds-color-warningSubtleActive: #FFD84A; /* Subtle warning active */
  --ds-color-warningEmphasis: #E8C468; /* Warning emphasis for borders */
  --ds-color-warningStrong: #7D5D00; /* Dark warning for text on white — WCAG AA. Use for amber text labels/links where warning.500 fails contrast. Completes the *Strong family (cf. successStrong); reconciled from the main branch. */
  --ds-color-warningContainer: #FFDA80; /* Warning container background */
  --ds-color-onWarning: #FFFDF2; /* Text/icons on warning color - dark for readability */
  --ds-color-onWarningContainer: #4A3600; /* Text/icons on warning container */
  --ds-color-onWarningSubtle: #4A3600; /* Text/icons on subtle warning backgrounds */
  --ds-color-info: #2563EB; /* Info state color */
  --ds-color-infoHover: #1D4ED8; /* Info hover state */
  --ds-color-infoActive: #1E40AF; /* Info active/pressed state */
  --ds-color-infoSubtle: #BFDBFE; /* Subtle info background */
  --ds-color-infoSubtleHover: #93C5FD; /* Subtle info hover */
  --ds-color-infoSubtleActive: #60A5FA; /* Subtle info active */
  --ds-color-infoEmphasis: #0369A1; /* Info emphasis for borders */
  --ds-color-infoStrong: #1E40AF; /* Dark info for text on white — WCAG AA. Use for blue text labels/links where info.500 fails contrast. Completes the *Strong family (cf. successStrong); reconciled from the main branch. */
  --ds-color-infoContainer: #E5F0FE; /* Info container background */
  --ds-color-onInfo: #FFFDF2; /* Text/icons on info color */
  --ds-color-onInfoContainer: #0C4A6E; /* Text/icons on info container */
  --ds-color-onInfoSubtle: #172554; /* Text/icons on subtle info backgrounds */
  --ds-color-indigo: #7E5A9B; /* Warm-violet 'undecided' / 'Ikke besluttet' accent (Q6/BF-12). Non-semantic — re-pointed from blue indigo to warm violet #7E5A9B so it reads as a distinct hue (not a status family) and the border step clears 3:1. Token names kept as 'indigo*' for back-compat. */
  --ds-color-indigoHover: #694785; /* Warm-violet hover state */
  --ds-color-indigoSubtle: #E1D7EA; /* Subtle warm-violet background */
  --ds-color-indigoEmphasis: #8A67A8; /* Warm-violet emphasis for borders and icons — 3.29:1 on the subtle fill (was 2.99:1 indigo, Q6 border fix) */
  --ds-color-indigoStrong: #54376D; /* Dark warm-violet for text on white — WCAG AA. Completes the *Strong family (cf. successStrong); reconciled from the main branch. */
  --ds-color-indigoContainer: #E1D7EA; /* Warm-violet container background */
  --ds-color-indigoSurface: #F8F5FA; /* Near-white warm-violet tint — used for relevance toggle area background */
  --ds-color-onIndigo: #FFFDF2; /* Text/icons on warm-violet color */
  --ds-color-onIndigoSubtle: #2A1A38; /* Text/icons on subtle warm-violet backgrounds */
  --ds-color-tertiary: #FFE5A3; /* LP-006: tertiary accent role — backed by the existing warm-violet 'indigo' accent ramp so a third semantic role exists (Mud/M3/Kendo all expose tertiary) without new palette work. */
  --ds-color-tertiaryHover: #FFDA80; /* LP-006: tertiary hover. */
  --ds-color-tertiarySubtle: #FFF4D9; /* LP-006: tertiary subtle background. */
  --ds-color-tertiaryEmphasis: #E8C468; /* LP-006: tertiary emphasis. */
  --ds-color-tertiaryStrong: #8A6A14; /* LP-006: tertiary strong (dark, text-on-white AA) — mirrors indigoStrong to keep the tertiary family complete. */
  --ds-color-tertiaryContainer: #FFE5A3; /* LP-006: tertiary container. */
  --ds-color-onTertiary: #365F56; /* LP-006: text/icons on tertiary fill. */
  --ds-color-onTertiarySubtle: #5C4708; /* LP-006: text/icons on tertiary subtle. */
  --ds-color-inverseSurface: #0F172A; /* LP-010: inverse surface — a dark surface used in light mode for tooltips/snackbars (M3 inverseSurface). */
  --ds-color-onInverseSurface: #FDF8E9; /* LP-010: text/icons on the inverse surface. */
  --ds-color-inversePrimary: #C9E3DD; /* LP-010: primary accent legible on the inverse surface (M3 inversePrimary). */
  --ds-color-surfaceAlt: #FDF8E9; /* LP-104: alternate/zebra surface — striped table rows, subtle section banding, distinct from the primary surface (Kendo surface-alt). */
  --ds-color-divider: #E2E8F0; /* LP-020: dedicated divider color (MUI palette.divider). Alias of outlineVariant so dividers have a semantic name of their own. */
  --ds-color-linesInputs: #475569; /* LP-111: input underline/border line color, distinct from the default divider line (Mud LinesInputs). */
  --ds-color-disabledText: #64748B; /* LP-105: semantic disabled foreground/text color (distinct from the 0.38 disabled opacity). Reconciled from the main-branch TOK-11 disabled trio. */
  --ds-color-disabledBackground: #FDF8E9; /* LP-105: semantic disabled fill/background color for disabled controls (MUI action.disabledBackground). Reconciled from the main-branch TOK-11 disabled trio. */
  --ds-color-disabledBorder: #E2E8F0; /* LP-105: semantic disabled border color for disabled controls. Reconciled from the main-branch TOK-11 disabled trio. */
  --ds-color-grey-50: #F8FAFC; /* Lightest neutral. */
  --ds-color-grey-100: #F1F5F9; /* Neutral 100. */
  --ds-color-grey-200: #E2E8F0; /* Neutral 200. */
  --ds-color-grey-300: #CBD5E1; /* Neutral 300. */
  --ds-color-grey-400: #94A3B8; /* Neutral 400. */
  --ds-color-grey-500: #64748B; /* Neutral 500. */
  --ds-color-grey-600: #475569; /* Neutral 600. */
  --ds-color-grey-700: #334155; /* Neutral 700. */
  --ds-color-grey-800: #1E293B; /* Neutral 800. */
  --ds-color-grey-900: #0F172A; /* Darkest neutral. */
  --ds-color-chart-series1: #2563EB; /* Categorical series 1. */
  --ds-color-chart-series2: #EA580C; /* Categorical series 2. */
  --ds-color-chart-series3: #16A34A; /* Categorical series 3. */
  --ds-color-chart-series4: #9333EA; /* Categorical series 4. */
  --ds-color-chart-series5: #0D9488; /* Categorical series 5. */
  --ds-color-chart-series6: #E11D48; /* Categorical series 6. */
  --ds-color-chart-series7: #FFC000; /* Categorical series 7. */
  --ds-color-chart-series8: #DB2777; /* Categorical series 8. */
  --ds-color-chart-sequential100: #BFDBFE; /* Sequential ramp — lowest. */
  --ds-color-chart-sequential300: #60A5FA; /* Sequential ramp — low-mid. */
  --ds-color-chart-sequential500: #2563EB; /* Sequential ramp — mid. */
  --ds-color-chart-sequential700: #1E40AF; /* Sequential ramp — high-mid. */
  --ds-color-chart-sequential900: #172554; /* Sequential ramp — highest. */
  --ds-color-chart-divergingLow: #E11D48; /* Diverging ramp — negative extreme. */
  --ds-color-chart-divergingMid: #E2E8F0; /* Diverging ramp — neutral midpoint. */
  --ds-color-chart-divergingHigh: #16A34A; /* Diverging ramp — positive extreme. */
  --ds-color-focusRing: #365F56; /* Focus indicator color - matches brand primary */
  --ds-color-focusRingInverse: #FFFDF2; /* Focus indicator on dark backgrounds */
  --ds-color-iconDefault: #0F172A; /* Default icon color — matches primary text. Moved from core/icon.json for type consistency */
  --ds-color-iconInteractive: #365F56; /* Interactive icon color — matches brand primary. Moved from core/icon.json for type consistency */
  --ds-color-iconMuted: #64748B; /* Muted icon color — secondary / placeholder icons. Moved from core/icon.json for type consistency */
  --ds-color-pageBackground: #FDF8E9; /* Page-level background — subtle tint behind cards and content. Moved from core/layout.json for type consistency */
  --ds-color-scrimBottom: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); /* Image-overlay scrim for bottom-anchored captions/labels over photographic media (DEG-10, e.g. DsCard full-bleed image + caption). Not mode-overridden — the scrim sits on top of an image, not the app background, so it stays constant across light/dark. */
  --ds-color-scrimTop: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); /* Image-overlay scrim for top-anchored controls/badges over photographic media (DEG-10, e.g. a time badge or save button on media, GAP-DSMEDIA). Not mode-overridden — see scrimBottom. */
  --ds-color-scrimBrandBottom: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); /* Brand-tinted image-overlay scrim for bottom-anchored identity over photographic media (GAP-SCRIM-BRAND-TINT). Defaults to the neutral scrimBottom; a brand palette overrides it with a brand-hued gradient whose bottom stop must stay dark enough that white display text clears WCAG AA-Large (3:1) over any photo. */

  /* ── Overlays ── */
  --ds-overlay-hover: rgba(0, 0, 0, 0.04); /* Standard hover overlay - 4% black in light mode */
  --ds-overlay-hoverStrong: rgba(0, 0, 0, 0.08); /* Strong hover overlay - 8% black in light mode */
  --ds-overlay-active: rgba(0, 0, 0, 0.12); /* Active/pressed overlay - 12% black in light mode */
  --ds-overlay-focus: rgba(0, 0, 0, 0.12); /* Focus state overlay - 12% black in light mode */
  --ds-overlay-selected: rgba(0, 0, 0, 0.08); /* Selected state overlay - 8% black in light mode */
  --ds-overlay-disabled: rgba(0, 0, 0, 0.38); /* Disabled state overlay - 38% black in light mode */
  --ds-overlay-surfaceGlass: rgba(255, 255, 255, 0.90); /* Glass surface effect - 90% white */
  --ds-overlay-surfaceGlassSubtle: rgba(255, 255, 255, 0.25); /* Subtle glass overlay - 25% white */
  --ds-overlay-scrim: rgba(0, 0, 0, 0.5); /* Modal backdrop/scrim - 50% black */
  --ds-overlay-hoverInverse: rgba(255, 255, 255, 0.05); /* White hover overlay - for dark backgrounds */

  /* ── Elevation ── */
  --ds-elevation-level-000: none; /* No elevation */
  --ds-elevation-level-001: 0px 1px 3px 0px rgba(0,0,0,0.06); /* Level 1 elevation - subtle shadow for cards */
  --ds-elevation-level-002: 0px 4px 6px 0px rgba(0,0,0,0.08); /* Level 2 elevation - medium shadow for raised elements */
  --ds-elevation-level-003: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Level 3 elevation - prominent shadow for modals */
  --ds-elevation-level-004: 0px 16px 32px 0px rgba(0,0,0,0.16); /* Level 4 elevation - strong shadow for floating elements */

  /* ── Typography ── */
  --ds-typography-display-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-display-font-size: 48px;
  --ds-typography-display-font-weight: 700;
  --ds-typography-display-line-height: 1.1;
  --ds-typography-heading1-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-heading1-font-size: 56px;
  --ds-typography-heading1-font-weight: 700;
  --ds-typography-heading1-line-height: 1.1;
  --ds-typography-heading2-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-heading2-font-size: 44px;
  --ds-typography-heading2-font-weight: 700;
  --ds-typography-heading2-line-height: 1.1;
  --ds-typography-heading3-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-heading3-font-size: 36px;
  --ds-typography-heading3-font-weight: 700;
  --ds-typography-heading3-line-height: 1.1;
  --ds-typography-heading4-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-heading4-font-size: 28px;
  --ds-typography-heading4-font-weight: 700;
  --ds-typography-heading4-line-height: 1.1;
  --ds-typography-heading5-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-heading5-font-size: 20px;
  --ds-typography-heading5-font-weight: 700;
  --ds-typography-heading5-line-height: 1.375;
  --ds-typography-heading6-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-heading6-font-size: 16px;
  --ds-typography-heading6-font-weight: 700;
  --ds-typography-heading6-line-height: 1.5;
  --ds-typography-body-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-body-font-size: 16px;
  --ds-typography-body-font-weight: 400;
  --ds-typography-body-line-height: 1.5;
  --ds-typography-bodySmall-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-bodySmall-font-size: 14px;
  --ds-typography-bodySmall-font-weight: 400;
  --ds-typography-bodySmall-line-height: 1.5;
  --ds-typography-bodyLarge-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-bodyLarge-font-size: 18px;
  --ds-typography-bodyLarge-font-weight: 400;
  --ds-typography-bodyLarge-line-height: 1.625;
  --ds-typography-label-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-label-font-size: 14px;
  --ds-typography-label-font-weight: 700;
  --ds-typography-label-line-height: 1.5;
  --ds-typography-titleMedium-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-titleMedium-font-size: 18px;
  --ds-typography-titleMedium-font-weight: 700;
  --ds-typography-titleMedium-line-height: 1.25;
  --ds-typography-action-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-action-font-size: 16px;
  --ds-typography-action-font-weight: 700;
  --ds-typography-action-line-height: 1.5;
  --ds-typography-labelSmall-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-labelSmall-font-size: 12px;
  --ds-typography-labelSmall-font-weight: 700;
  --ds-typography-labelSmall-line-height: 1.5;
  --ds-typography-caption-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-caption-font-size: 12px;
  --ds-typography-caption-font-weight: 400;
  --ds-typography-caption-line-height: 1.5;
  --ds-typography-overline-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-typography-overline-font-size: 10px;
  --ds-typography-overline-font-weight: 700;
  --ds-typography-overline-line-height: 1.5;
  --ds-typography-code-font-family: Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --ds-typography-code-font-size: 14px;
  --ds-typography-code-font-weight: 400;
  --ds-typography-code-line-height: 1.5;
  --ds-typography-lineHeight-xs: 1.2; /* Tight — headings/single-line controls. */
  --ds-typography-lineHeight-sm: 1.35; /* Snug — dense UI text. */
  --ds-typography-lineHeight-md: 1.5; /* Default — body copy. */
  --ds-typography-lineHeight-lg: 1.7; /* Loose — long-form reading. */
  --ds-typography-letterSpacing-tight: -0.015em; /* Tighter — large display/heading text. */
  --ds-typography-letterSpacing-normal: 0em; /* Default — body. */
  --ds-typography-letterSpacing-wide: 0.03em; /* Wider — labels/buttons. */
  --ds-typography-letterSpacing-wider: 0.08em; /* Widest — all-caps overline/eyebrow text. */
  --ds-typography-baseFontSize: 16px; /* LP-018: the root/html font-size basis for rem math (MUI htmlFontSize). Documents the 1rem = 16px assumption the scale is built on. */
  --ds-typography-weight-regular: 400; /* Regular body weight — emits --ds-typography-weight-regular */
  --ds-typography-weight-medium: 500; /* Medium weight — labels, nav items — emits --ds-typography-weight-medium */
  --ds-typography-weight-bold: 700; /* Bold/emphasis weight — emits --ds-typography-weight-bold (600 under meadow, 700 elsewhere) */
  --ds-typography-numeric-tabular: "tnum" 1, "lnum" 1; /* Tabular lining numerals for tables, amount/currency fields, and any column of figures that must align — emits --ds-typography-numeric-tabular / $typography-numeric-tabular */
  --ds-typography-numeric-normal: normal; /* Reset numerals to the font default (proportional) — pairs with the tabular token */
  --ds-typography-underlineOffset: 2px; /* Link/text underline offset (parity: main issue #54) — the standard text-underline-offset. Use var(--ds-typography-underlineOffset) instead of a hardcoded 2px so underline air is adjustable in one place. */
  --ds-typography-underlineThickness: 1px; /* Link/text underline stroke (parity: main issue #54) — the standard text-decoration-thickness. Pairs with underlineOffset. */

  /* ── Font Sizes ── */
  --ds-fontSize-xs: 10px; /* Type size xs */
  --ds-fontSize-sm: 12px; /* Type size sm */
  --ds-fontSize-md: 14px; /* Type size md */
  --ds-fontSize-base: 16px; /* Type size base */
  --ds-fontSize-lg: 18px; /* Type size lg */
  --ds-fontSize-xl: 20px; /* Type size xl */
  --ds-fontSize-2xl: 24px; /* Type size 2xl — MEADOW 28px / shared 24px */
  --ds-fontSize-3xl: 30px; /* Type size 3xl — MEADOW 32px / shared 30px */
  --ds-fontSize-4xl: 36px; /* Type size 4xl — MEADOW 40px / shared 36px */
  --ds-fontSize-5xl: 48px; /* Type size 5xl */
  --ds-fontSize-6xl: 60px; /* Type size 6xl */
  --ds-fontSize-7xl: 72px; /* Type size 7xl */
  --ds-fontSize-8xl: 96px; /* Type size 8xl */

  /* ── Radius ── */
  --ds-radius-base: 8px; /* LP-014: global base radius (8px) — the single multiplier the default control corner scales from (MUI shape.borderRadius). xs/sm/lg/xl/full remain for exceptions. */
  --ds-radius-none: 0px; /* No radius */
  --ds-radius-xs: 1px; /* Extra small radius */
  --ds-radius-sm: 2px; /* Small radius */
  --ds-radius-md: 8px; /* Medium radius */
  --ds-radius-lg: 10px; /* Large radius */
  --ds-radius-xl: 12px; /* Extra large radius */
  --ds-radius-2xl: 14px; /* 2X large radius */
  --ds-radius-3xl: 16px; /* 3X large radius */
  --ds-radius-full: 9999px; /* Full radius - pill shape */
  --ds-radius-inner: 1px; /* ASTX-Tokens-2: concentric radius — innermost nested elements (a control inside a padded container). Smallest of the concentric scale inner < element < container < page. */
  --ds-radius-element: 2px; /* ASTX-Tokens-2: concentric radius — interactive elements (buttons, inputs, chips). */
  --ds-radius-container: 10px; /* ASTX-Tokens-2: concentric radius — cards/panels/menus wrapping elements. */
  --ds-radius-page: 12px; /* ASTX-Tokens-2: concentric radius — page-level surfaces (sheets, full-screen insets). Outermost of the concentric scale. */

  /* ── Spacing ── */
  --ds-space-none: 0px; /* No spacing */
  --ds-space-hairline: 1px; /* Hairline spacing - 1px */
  --ds-space-xxs: 2px; /* Extra-extra-small spacing - 2px. Tight pill/chip vertical padding and fine gaps below the xs (4px) layout step. */
  --ds-space-xs: 4px; /* Extra small spacing - 4px */
  --ds-space-sm: 8px; /* Small spacing - 8px */
  --ds-space-md: 16px; /* Medium spacing - 16px */
  --ds-space-lg: 24px; /* Large spacing - 24px */
  --ds-space-xl: 32px; /* Extra large spacing - 32px */
  --ds-space-2xl: 48px; /* 2X large spacing - 48px */
  --ds-space-3xl: 64px; /* 3X large spacing - 64px */
  --ds-space-4xl: 96px; /* 4X large spacing - 96px */
  --ds-space-paddingCompact: 10px; /* Compact control padding - 10px. Off the coarse xs/sm/md layout rhythm; for pill/button/chip interiors. Mirrors brand.space.paddingCompact — component tokens (--ds-button-paddingY etc.) are the primary surface; this exposes the value for hand-built controls. */
  --ds-space-paddingStandard: 12px; /* Standard control padding - 12px. Mirrors brand.space.paddingStandard. */
  --ds-space-paddingWide: 14px; /* Wide control padding - 14px (chips). Mirrors brand.space.paddingWide. */
  --ds-space-paddingExtraWide: 18px; /* Extra-wide control padding - 18px (tabs); the widest control padding role. Mirrors brand.space.paddingExtraWide. */

  /* ── Sizes ── */
  --ds-size-popupMaxWidth: 640px; /* Maximum width for modals and large popups - 640px */
  --ds-size-popupMaxWidthSmall: 320px; /* Maximum width for tooltips, dropdowns, and small popups - 320px */
  --ds-size-popupMaxHeight: 320px; /* Maximum height for scrollable popup content - 320px */

  /* ── Icon Sizes ── */
  --ds-icon-size-sm: 16px; /* Small fixed icon glyph — 16px, per board annotations. Dense rows, chip/inline-button glyphs. Do NOT use for icons that should scale with text — use icon.size.inline instead */
  --ds-icon-size-md: 20px; /* Medium fixed icon glyph — 20px, per board annotations. Default icon-button and list-action glyph size */
  --ds-icon-size-lg: 24px; /* Large fixed icon glyph — 24px, per board annotations. App-bar actions, prominent affordances */
  --ds-icon-size-inline: 1em; /* Icons inline with text - same size as text */
  --ds-icon-size-button: 1.25em; /* Icons in buttons - slightly larger for visibility */
  --ds-icon-size-heading: 1.5em; /* Icons in headings - proportionally larger */
  --ds-icon-size-badge: 8px; /* Icon size inside a status badge or chip dot — 8px */
  --ds-icon-size-avatar: 20px; /* Icon size for avatar-sized circles (stepper step, chip avatar) — 20px */
  --ds-icon-size-circle: 40px; /* Icon/label size for 40px circle containers (stepper, numbered step cards) */
  --ds-icon-size-hero: 44px; /* Icon size for hero/success illustrations — 44px. This is the TOP of the icon scale; anything larger is an illustration, not an icon — use core.illustration.size.* (DEG-08) */

  /* ── Illustration Sizes ── */
  --ds-illustration-size-xs: 48px; /* 48px — brand mark, provider mark at display size, the first rung above the icon scale */
  --ds-illustration-size-sm: 64px; /* 64px — empty-state glyph, inline spot art */
  --ds-illustration-size-md: 96px; /* 96px — card spot art, feature tile */
  --ds-illustration-size-lg: 144px; /* 144px — empty-state hero, onboarding step art */
  --ds-illustration-size-xl: 192px; /* 192px — marketing hero art, auth-split decorative vector */

  /* ── Opacity ── */
  --ds-opacity-disabled: 0.38; /* Disabled-state opacity for whole controls — 0.38, the Material disabled-content convention. Applied to .ds-is-disabled / :disabled across DS components. */
  --ds-opacity-muted: 0.6; /* Muted / medium-emphasis content opacity — 0.6 (Material medium-emphasis). For de-emphasized but still-active content. */
  --ds-opacity-scrim: 0.5; /* Modal/backdrop scrim opacity — 0.5. The dark overlay behind modals and drawers. */
  --ds-opacity-hover: 0.04; /* LP-002: hover state-layer opacity — 0.04 (MUI action.hoverOpacity). For currentColor hover overlays on interactive surfaces. */
  --ds-opacity-selected: 0.08; /* LP-002: selected state-layer opacity — 0.08 (MUI action.selectedOpacity). */
  --ds-opacity-focus: 0.12; /* LP-002: focus state-layer opacity — 0.12 (MUI action.focusOpacity). */
  --ds-opacity-pressed: 0.12; /* LP-002: pressed/activated state-layer opacity — 0.12 (MUI action.activatedOpacity). */
  --ds-opacity-dragged: 0.16; /* LP-002: dragged state-layer opacity — 0.16 (Material dragged state). */
  --ds-opacity-activated: 0.12; /* LP-002: activated state-layer opacity — 0.12 (M3 activated, distinct M3 name for the pressed/activated level). Reconciled from the main-branch TOK-10 state-opacity wave. */
  --ds-opacity-ripple: 0.1; /* LP-110: ripple/interaction-feedback opacity — 0.10 (Mud RippleOpacity). */
  --ds-opacity-rippleSecondary: 0.25; /* LP-110: stronger ripple opacity for filled/emphasis surfaces — 0.20-0.25 (Mud RippleOpacitySecondary). */

  /* ── Motion ── */
  --ds-motion-duration-fast: 120ms; /* Fast — micro-interactions (hover, color/background, small state changes). The most common transition speed across DS. */
  --ds-motion-duration-base: 150ms; /* Base — standard control transitions (inputs, buttons, toggles). */
  --ds-motion-duration-slow: 200ms; /* Slow — larger surfaces and composite movements. */
  --ds-motion-duration-slower: 300ms; /* Slower — panels, drawers, overlays entering/leaving. */
  --ds-motion-duration-enteringScreen: 225ms; /* LP-005: element entering the screen (MUI enteringScreen). Pair with easing.decelerate. */
  --ds-motion-duration-leavingScreen: 195ms; /* LP-005: element leaving the screen (MUI leavingScreen). Pair with easing.accelerate. */
  --ds-motion-duration-complex: 375ms; /* LP-005: complex/composite movement (MUI complex) — large multi-property transitions. */
  --ds-motion-duration-loop: 1400ms; /* Loop — one cycle of a continuous, repeating animation (indeterminate progress sweep, busy spinners, skeleton pulse). Deliberately longer than the transition durations: a repeating cycle must read as calm/ongoing, not frantic. Use with animation-iteration-count: infinite. */
  --ds-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Standard easing (Material standard curve) — most transitions that both enter and leave. */
  --ds-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /* Decelerate (Material decelerate curve) — elements entering the screen. */
  --ds-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* LP-004: Accelerate (Material accelerate / MUI easeIn) — elements leaving the screen. */
  --ds-motion-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1); /* LP-004: Sharp (MUI sharp) — objects that may return to the screen (temporary drawers, snackbars). */
  --ds-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* LP-004: Emphasized (Material 3 emphasized) — expressive, high-attention motion for hero transitions. */
  --ds-motion-easing-linear: cubic-bezier(0, 0, 1, 1); /* LP-004: Linear — constant-rate motion for progress/loading indicators. */

  /* ── Z-Index ── */
  --ds-zIndex-base: 0; /* Default flow — no stacking raise. */
  --ds-zIndex-raised: 1; /* Slightly lifted within local content. (Most z-index: 1..5 inside a single component is local stacking and is NOT this token.) */
  --ds-zIndex-dropdown: 1000; /* Component-anchored overlays: dropdown-button menus, split-button menus, color-picker popups. */
  --ds-zIndex-sticky: 1100; /* Sticky / pinned chrome (app bar, sticky header). MUI appBar level. */
  --ds-zIndex-fab: 1050; /* LP-016: floating action buttons + speed dials — above content, below app-bar/drawer. MUI fab/speedDial level. */
  --ds-zIndex-appBar: 1100; /* LP-016: explicit app-bar layer (alias of sticky). MUI appBar level. */
  --ds-zIndex-drawer: 1200; /* LP-016: explicit drawer layer (alias of overlay). MUI drawer level. */
  --ds-zIndex-snackbar: 1400; /* LP-016: explicit snackbar layer (alias of toast). MUI snackbar level. */
  --ds-zIndex-overlay: 1200; /* Scrims / backdrops and slide-in drawers — the overlay base band. MUI drawer level. */
  --ds-zIndex-modal: 1250; /* Full-screen modals (DsFullScreenModal). */
  --ds-zIndex-popover: 1300; /* Popovers and modal dialogs that float above the scrim. MUI modal level. */
  --ds-zIndex-toast: 1400; /* Snackbars / toasts. MUI snackbar level. */
  --ds-zIndex-tooltip: 1500; /* Tooltips — topmost transient layer. MUI tooltip level. (DS doesn't set this directly; documents where vendor tooltips land.) */
  --ds-zIndex-max: 9999; /* FloatingToolbar — the spec requires it above all content including modals. Use only for that escape-hatch case. */

  /* ── Border Widths ── */
  --ds-border-width-thin: 1px; /* Default border / divider weight — 1px. The overwhelming majority of DS borders. */
  --ds-border-width-thick: 2px; /* Emphasis border — 2px. Focus rings, selected/active outlines, heavier dividers. */
  --ds-border-focusRing-width: 2px; /* Focus-ring outline width — 2px. */
  --ds-border-focusRing-offset: 2px; /* Focus-ring outline offset — 2px gap between the control edge and the ring. */
  --ds-border-focusRing-radius: 4px; /* Focus-ring corner radius (parity: main issue #53) — the outline-follows-corner value, deliberately between radius.sm (2) and radius.md (8). Use var(--ds-border-focusRing-radius) on focus outlines so the ring tracks the control's rounding. */

  /* ── Layout ── */
  --ds-layout-sidebarWidth: 240px; /* Default sidebar width - collapsed or minimal navigation - 240px */
  --ds-layout-sidebarWidthExpanded: 320px; /* Expanded sidebar width - full navigation with labels - 320px */
  --ds-layout-contentMaxWidth: 1024px; /* Standard page content max-width - 1024px */
  --ds-layout-contentMaxWidthWide: 1280px; /* Wide page content max-width - dashboards, data tables - 1280px */
  --ds-layout-contentMaxWidthNarrow: 768px; /* Narrow content max-width - forms, single-column layouts - 768px */
  --ds-layout-contentMaxWidthWidest: 1440px; /* Widest content max-width - full-bleed card grids, e.g. the degoma recipe-collection DsFixedCardGrid (packages/degoma/stories/DegomaCollection.stories.tsx), which hardcoded maxWidth=1440 before this token existed - 1440px */
  --ds-layout-pagePaddingX: 32px; /* Horizontal page padding — 32px */
  --ds-layout-pagePaddingY: 24px; /* Vertical page padding — 24px */
  --ds-layout-sectionGap: 24px; /* Gap between major page sections — 24px */
  --ds-layout-breakpoint-xs: 0px; /* Extra-small — phones (portrait). Mobile-first base. */
  --ds-layout-breakpoint-sm: 600px; /* Small — phones (landscape) / small tablets. */
  --ds-layout-breakpoint-md: 900px; /* Medium — tablets / small laptops. */
  --ds-layout-breakpoint-lg: 1200px; /* Large — desktops. */
  --ds-layout-breakpoint-xl: 1536px; /* Extra-large — large desktops / wide monitors. */
  --ds-layout-breakpoint-xxl: 1920px; /* 2X-large — full-HD+ wide monitors. */
  --ds-layout-grid-desktop-columns: 12; /* Desktop (≥1440) column count — 12 */
  --ds-layout-grid-desktop-gutter: 24px; /* Desktop grid gutter between columns — 24px */
  --ds-layout-grid-desktop-margin: 24px; /* Desktop grid outer (page) margin — 24px */
  --ds-layout-grid-mobile-columns: 6; /* Mobile (≤390) column count — 6 */
  --ds-layout-grid-mobile-gutter: 12px; /* Mobile grid gutter between columns — 12px */
  --ds-layout-grid-mobile-margin: 12px; /* Mobile grid outer (page) margin — 12px */

  /* ── Components ── */

  /* accordion */
  --ds-accordion-container: #FFFDF2; /* Panel background */
  --ds-accordion-headerBg: #F7F0DC; /* Header background — closed state */
  --ds-accordion-headerBgHover: #E2E8F0; /* Header background on hover */
  --ds-accordion-headerBgActive: #E2E8F0; /* Header background — expanded state */
  --ds-accordion-headerText: #0F172A; /* Header text color */
  --ds-accordion-contentText: #475569; /* Content body text */
  --ds-accordion-border: #E2E8F0; /* Panel border and separator */
  --ds-accordion-icon: #475569; /* Expand/collapse chevron */
  --ds-accordion-borderWidth: 1px; /* Border thickness — 1px */
  --ds-accordion-radius: 14px; /* Panel corner radius */
  --ds-accordion-paddingX: 14px; /* Horizontal padding */
  --ds-accordion-paddingY: 16px; /* Vertical padding */
  --ds-accordion-gap: 4px; /* Gap between accordion items in a group */
  --ds-accordion-headerTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-accordion-headerTypography-font-size: 16px;
  --ds-accordion-headerTypography-font-weight: 700;
  --ds-accordion-headerTypography-line-height: 1.5;
  --ds-accordion-contentTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-accordion-contentTypography-font-size: 16px;
  --ds-accordion-contentTypography-font-weight: 400;
  --ds-accordion-contentTypography-line-height: 1.5;

  /* alert */
  --ds-alert-containerInfo: #BFDBFE; /* Info alert background — light blue */
  --ds-alert-onContainerInfo: #172554; /* Info alert text */
  --ds-alert-borderInfo: #0369A1; /* Info alert left border accent */
  --ds-alert-iconInfo: #2563EB; /* Info alert icon color */
  --ds-alert-containerSuccess: #BBF7D0; /* Success alert background — light green */
  --ds-alert-onContainerSuccess: #052e16; /* Success alert text */
  --ds-alert-borderSuccess: #22C55E; /* Success alert left border accent */
  --ds-alert-iconSuccess: #15803D; /* Success alert icon color */
  --ds-alert-containerWarning: #FFE5A3; /* Warning alert background — light yellow */
  --ds-alert-onContainerWarning: #4A3600; /* Warning alert text */
  --ds-alert-borderWarning: #E8C468; /* Warning alert left border accent */
  --ds-alert-iconWarning: #8A6A14; /* Warning alert icon color */
  --ds-alert-containerError: #F9C5B4; /* Error alert background — light red */
  --ds-alert-onContainerError: #4C0519; /* Error alert text */
  --ds-alert-borderError: #C4502A; /* Error alert left border accent */
  --ds-alert-iconError: #9E3B1B; /* Error alert icon color */
  --ds-alert-borderWidth: 4px; /* Left border accent width — 4px for visible accent strip */
  --ds-alert-radius: 8px; /* Alert border radius — brand-configurable (default 8px) */
  --ds-alert-paddingX: 16px; /* Horizontal padding — 16px */
  --ds-alert-paddingY: 8px; /* Vertical padding — 8px for compact banners */
  --ds-alert-gap: 8px; /* Gap between icon and text content — 8px */
  --ds-alert-titleGap: 4px; /* Gap between title and body text — 4px */
  --ds-alert-iconSize: 20px; /* Alert icon size — 20px */
  --ds-alert-titleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-alert-titleTypography-font-size: 14px;
  --ds-alert-titleTypography-font-weight: 700;
  --ds-alert-titleTypography-line-height: 1.5;
  --ds-alert-bodyTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-alert-bodyTypography-font-size: 14px;
  --ds-alert-bodyTypography-font-weight: 400;
  --ds-alert-bodyTypography-line-height: 1.5;

  /* appBar */
  --ds-appBar-container: #FFFDF2; /* App bar background */
  --ds-appBar-onContainer: #0F172A; /* App bar foreground text/icon color */
  --ds-appBar-border: #E2E8F0; /* Bottom border color separating the bar from page content */
  --ds-appBar-borderWidth: 1px; /* Bottom border width — 1px */
  --ds-appBar-height: 64px; /* App bar height (comfortable density, GAP-05 annotation 641:1835) — a page-chrome dimension, not the brand interactive minHeight (a 28/44px control height is wrong for a top bar). Literal because component tokens may not reference {primitives.*} and there is no core/brand 64px */
  --ds-appBar-heightCompact: 56px; /* App bar height for density="compact" (GAP-05) — 56px */
  --ds-appBar-paddingX: 14px; /* Horizontal padding between edge and first/last slot */
  --ds-appBar-gap: 16px; /* Gap between logo / search / actions slots */
  --ds-appBar-elevation: 0px 1px 3px 0px rgba(0,0,0,0.06); /* Subtle elevation so the bar reads above scrolling content */
  --ds-appBar-logoColor: #365F56; /* Logo wordmark/brand text color */
  --ds-appBar-itemColor: #475569; /* GAP-APPBAR-NAV-ACTIVE: inactive nav-item label in the bar. The bar carried no nav-item tokens at all, so an app bar's active page had no DS affordance and consumers borrowed the tab family — which pins the active LABEL to the brand colour and so cannot express the common 'neutral label + coloured rule' pairing */
  --ds-appBar-itemColorHover: #0F172A; /* GAP-APPBAR-NAV-ACTIVE: nav-item label on hover — stronger emphasis, still neutral */
  --ds-appBar-itemColorActive: #0F172A; /* GAP-APPBAR-NAV-ACTIVE: ACTIVE nav-item label. Deliberately neutral (not the brand colour, unlike tab.itemColorActive) — the indicator carries the brand, the label carries the reading contrast. A brand that wants a coloured label re-points this one token */
  --ds-appBar-indicatorColor: #365F56; /* GAP-APPBAR-NAV-ACTIVE: active-page indicator rule under the nav item — the brand-coloured half of the pairing */
  --ds-appBar-indicatorHeight: 2px; /* GAP-APPBAR-NAV-ACTIVE: active-indicator rule thickness — 2px */
  --ds-appBar-indicatorRadius: 9999px; /* GAP-APPBAR-NAV-ACTIVE: active-indicator rule corner radius — pill by default so a short rule reads as drawn, not clipped */
  --ds-appBar-itemGap: 8px; /* GAP-APPBAR-NAV-ACTIVE: gap between the nav-item label and its indicator */
  --ds-appBar-itemPaddingX: 8px; /* GAP-APPBAR-NAV-ACTIVE: horizontal padding inside a nav item — sets the indicator's width when it spans the item */
  --ds-appBar-logoTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-appBar-logoTypography-font-size: 20px;
  --ds-appBar-logoTypography-font-weight: 700;
  --ds-appBar-logoTypography-line-height: 1.375;

  /* appShell */
  --ds-appShell-sidebarWidth: 240px; /* Default width of the fixed left sidebar column. Bespoke page-chrome dimension — no core.size step fits a nav rail. Overridable per-instance via the sidebarWidth prop. */
  --ds-appShell-topbarHeight: 60px; /* Default height of the sticky topbar row. Bespoke page-chrome dimension. Overridable per-instance via the topbarHeight prop. */
  --ds-appShell-bannerMinHeight: 40px; /* Minimum height of the optional full-width banner strip rendered below the topbar. */
  --ds-appShell-container: #FDF8E9; /* Background of the scrolling main region — the page surface behind content. */
  --ds-appShell-topbar: #FFFDF2; /* Topbar background. */
  --ds-appShell-sidebar: #FFFDF2; /* Sidebar column background. */
  --ds-appShell-banner: #F7F0DC; /* Banner strip background. */
  --ds-appShell-border: #E2E8F0; /* Divider between chrome regions (below topbar, right of sidebar). */
  --ds-appShell-borderWidth: 1px; /* Chrome divider width — 1px. */
  --ds-appShell-mainPadding: 14px; /* Padding around the main content region. Suppressed when the bleed prop is set (edge-to-edge main). */
  --ds-appShell-scrimColor: rgba(0, 0, 0, 0.5); /* Backdrop behind the off-canvas sidebar drawer on mobile. */

  /* areaLogo */
  --ds-areaLogo-height: 28px; /* Lockup render height — 28px (previously the fallback-only --ds-arealogo-height; casing fixed to --ds-areaLogo-height) */

  /* avatar */
  --ds-avatar-sizeSm: 28px; /* Small avatar — 28px, used in activity timelines */
  --ds-avatar-sizeMd: 40px; /* Medium avatar — 40px, used in top bar user menu (matches the DEGOMA comp's 40x40 profile mark). Description said 36px until 2026-08-03; brand.size.controlMd has resolved to 40px, so the text was stale, not the value */
  --ds-avatar-sizeLg: 44px; /* Large avatar — 44px, used on detail/profile screens */
  --ds-avatar-sizeXl: 56px; /* Extra-large avatar — 56px, used for detail-header placeholders (no 56px brand control size exists; literal until a brand.size.controlXl token lands) */
  --ds-avatar-radius: 9999px; /* Avatar is always fully circular */
  --ds-avatar-container: #C9E3DD; /* Fallback background when no image — subtle brand tint */
  --ds-avatar-onContainer: #365F56; /* Fallback initials text color — brand primary */
  --ds-avatar-border: #E2E8F0; /* Thin ring around avatar for contrast on colored surfaces */
  --ds-avatar-borderWidth: 1px; /* Ring width — 1px */
  --ds-avatar-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-avatar-typography-font-size: 12px;
  --ds-avatar-typography-font-weight: 700;
  --ds-avatar-typography-line-height: 1.5;

  /* badge */
  --ds-badge-container: #365F56; /* Default filled badge background */
  --ds-badge-onContainer: #FFFFFF; /* Default filled badge text */
  --ds-badge-containerSecondary: #F7F0DC; /* Secondary filled badge background */
  --ds-badge-onContainerSecondary: #0F172A; /* Secondary filled badge text */
  --ds-badge-containerActive: #FFE5A3; /* In-progress / 'I gang' badge background — yellow tint */
  --ds-badge-onContainerActive: #4A3600; /* 'I gang' badge text — dark on yellow */
  --ds-badge-dotActive: #8A6A14; /* 'I gang' leading dot — yellow/amber */
  --ds-badge-borderActive: #E8C468; /* 'I gang' badge border — yellow accent */
  --ds-badge-containerUndecided: #E1D7EA; /* 'Ikke besluttet' badge background — light warm violet */
  --ds-badge-onContainerUndecided: #2A1A38; /* 'Ikke besluttet' badge text — dark warm violet */
  --ds-badge-dotUndecided: #7E5A9B; /* 'Ikke besluttet' leading dot — warm violet */
  --ds-badge-borderUndecided: #8A67A8; /* 'Ikke besluttet' badge border — warm-violet accent (3.29:1 on the subtle fill, Q6) */
  --ds-badge-containerIrrelevant: #F7F0DC; /* 'Ikke relevant' badge background — neutral gray */
  --ds-badge-onContainerIrrelevant: #475569; /* 'Ikke relevant' badge text — muted */
  --ds-badge-dotIrrelevant: #64748B; /* 'Ikke relevant' leading dot — gray */
  --ds-badge-borderIrrelevant: #E2E8F0; /* 'Ikke relevant' badge border — subtle gray */
  --ds-badge-containerComplete: #BBF7D0; /* 'Besluttet' / complete badge background — light green */
  --ds-badge-onContainerComplete: #052e16; /* 'Besluttet' badge text — dark green */
  --ds-badge-dotComplete: #15803D; /* 'Besluttet' leading dot — green */
  --ds-badge-borderComplete: #22C55E; /* 'Besluttet' badge border — green accent */
  --ds-badge-containerError: #F9C5B4; /* Error badge background — light red */
  --ds-badge-onContainerError: #4C0519; /* Error badge text */
  --ds-badge-dotError: #9E3B1B; /* Error leading dot — red */
  --ds-badge-containerPending: #FFE5A3; /* 'Afventer invitation' / 'Pending' badge background — amber tint */
  --ds-badge-onContainerPending: #4A3600; /* 'Afventer invitation' badge text — dark on amber */
  --ds-badge-dotPending: #8A6A14; /* 'Afventer invitation' leading dot — amber */
  --ds-badge-borderPending: #E8C468; /* 'Afventer invitation' border accent */
  --ds-badge-containerInactive: #FDF8E9; /* 'Ikke i brug' / 'Inactive' / 'Not used' badge background — muted neutral */
  --ds-badge-onContainerInactive: #64748B; /* 'Ikke i brug' badge text — muted gray */
  --ds-badge-dotInactive: #64748B; /* 'Ikke i brug' leading dot — gray */
  --ds-badge-containerUsage: #C9E3DD; /* Usage-count badge background — 'Used in N modules' light primary tint */
  --ds-badge-onContainerUsage: #142421; /* Usage-count badge text */
  --ds-badge-radius: 9999px; /* Full pill rounding */
  --ds-badge-borderWidth: 1px; /* Badge border width — 1px */
  --ds-badge-paddingX: 12px; /* Horizontal padding — 12px */
  --ds-badge-paddingY: 4px; /* Vertical padding — 4px */
  --ds-badge-minWidth: 20px; /* Minimum width for count badges — 20px */
  --ds-badge-dotSize: 8px; /* Leading status dot diameter — 8px */
  --ds-badge-gap: 6px; /* Gap between dot and label — 6px */
  --ds-badge-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-badge-typography-font-size: 12px;
  --ds-badge-typography-font-weight: 700;
  --ds-badge-typography-line-height: 1.5;
  --ds-badge-paddingXSm: 8px; /* Horizontal padding, size sm (parity: main ADR-021 size axis) */
  --ds-badge-paddingYSm: 1px; /* Vertical padding, size sm */
  --ds-badge-paddingXLg: 16px; /* Horizontal padding, size lg */
  --ds-badge-paddingYLg: 8px; /* Vertical padding, size lg */
  --ds-badge-dotSizeSm: 4px; /* Status dot diameter, size sm */
  --ds-badge-dotSizeLg: 16px; /* Status dot diameter, size lg */
  --ds-badge-typographySm-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-badge-typographySm-font-size: 12px;
  --ds-badge-typographySm-font-weight: 400;
  --ds-badge-typographySm-line-height: 1.5;
  --ds-badge-typographyLg-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-badge-typographyLg-font-size: 14px;
  --ds-badge-typographyLg-font-weight: 700;
  --ds-badge-typographyLg-line-height: 1.5;
  --ds-badge-dotPrimary: #FFFFFF; /* Solid primary badge leading dot (parity: main ADR-021 color axis: primary showcase) */

  /* bottomNavigation */
  --ds-bottomNavigation-container: #FFFDF2; /* Bar background */
  --ds-bottomNavigation-onContainer: #0F172A; /* Bar foreground text/icon color (fallback) */
  --ds-bottomNavigation-border: #E2E8F0; /* Top border separating the bar from page content */
  --ds-bottomNavigation-borderWidth: 1px; /* Top border width — 1px */
  --ds-bottomNavigation-height: 56px; /* Bar height — 56px (M3 bottom-nav height). Literal because there is no core/brand 56px page-chrome dimension */
  --ds-bottomNavigation-elevation: 0px 4px 6px 0px rgba(0,0,0,0.08); /* Elevation so the bar reads above scrolling content */
  --ds-bottomNavigation-itemColor: #475569; /* Inactive item icon + label color */
  --ds-bottomNavigation-itemColorActive: #365F56; /* Active item icon + label color — primary tint */
  --ds-bottomNavigation-itemIndicator: #C9E3DD; /* Active item icon pill / indicator background */
  --ds-bottomNavigation-itemColorHover: #0F172A; /* Item icon + label color on hover */
  --ds-bottomNavigation-itemGap: 2px; /* Gap between icon and label inside an item */
  --ds-bottomNavigation-itemPaddingY: 4px; /* Item vertical padding */

  /* brandMark */
  --ds-brandMark-boxSm: 28px; /* Small mark box — 28px, dense sidebars */
  --ds-brandMark-boxMd: 40px; /* Medium mark box — 36px, default app-bar brand slot */
  --ds-brandMark-boxLg: 44px; /* Large mark box — 44px, landing / marketing headers */
  --ds-brandMark-radius: 8px; /* Mark box corner radius for the token-tinted placeholder */
  --ds-brandMark-container: #365F56; /* Placeholder mark fill — brand primary */
  --ds-brandMark-onContainer: #FFFFFF; /* Placeholder mark foreground (glyph/initial) — on-primary */

  /* breadcrumb */
  --ds-breadcrumb-linkColor: #365F56; /* Breadcrumb link text color (brand-overridable; MEADOW stays #2c6129 per Q9) */
  --ds-breadcrumb-linkColorHover: #2C4F47; /* Breadcrumb link hover color */
  --ds-breadcrumb-currentColor: #475569; /* Current page text - not a link */
  --ds-breadcrumb-separatorColor: #64748B; /* Separator character color */
  --ds-breadcrumb-gap: 8px; /* Gap between items and separators - 8px */
  --ds-breadcrumb-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-breadcrumb-typography-font-size: 14px;
  --ds-breadcrumb-typography-font-weight: 400;
  --ds-breadcrumb-typography-line-height: 1.5;
  --ds-breadcrumb-iconColor: #475569; /* Leading-icon color on a breadcrumb item — Figma 977:20852, 1626:34291 */
  --ds-breadcrumb-iconGap: 4px; /* Gap between the leading icon and its label — 6px */

  /* bulkActionBar */
  --ds-bulkActionBar-container: #F7F0DC; /* Bar background — raised container tint */
  --ds-bulkActionBar-border: #64748B; /* Bar border color */
  --ds-bulkActionBar-radius: 8px; /* Bar corner radius — 8px */
  --ds-bulkActionBar-paddingX: 16px; /* Horizontal padding — 16px */
  --ds-bulkActionBar-paddingY: 8px; /* Vertical padding — 8px */
  --ds-bulkActionBar-gap: 16px; /* Gap between count / actions / clear regions — 16px */
  --ds-bulkActionBar-countColor: #0F172A; /* Selection count text color */
  --ds-bulkActionBar-actionsGap: 8px; /* Gap between action buttons — 8px */
  --ds-bulkActionBar-clearColor: #365F56; /* Clear-selection text button color */
  --ds-bulkActionBar-clearPaddingX: 8px; /* Clear button horizontal padding — 8px */
  --ds-bulkActionBar-clearPaddingY: 4px; /* Clear button vertical padding — 4px */
  --ds-bulkActionBar-clearRadius: 2px; /* Clear button focus/hover corner radius — 2px */

  /* button */
  --ds-button-container: #365F56; /* Button background in default state */
  --ds-button-containerHover: #2C4F47; /* Button background on hover */
  --ds-button-containerActive: #223E38; /* Button background when pressed */
  --ds-button-containerDisabled: #F7F0DC; /* Button background when disabled */
  --ds-button-onContainer: #FFFFFF; /* Button text and icon color */
  --ds-button-onContainerDisabled: #64748B; /* Disabled button text color */
  --ds-button-paddingX: 16px; /* Horizontal padding — 16px */
  --ds-button-paddingY: 10px; /* Vertical padding — 10px */
  --ds-button-gap: 8px; /* Gap between icon and text — 8px */
  --ds-button-radius: 8px; /* Button border radius — brand configurable */
  --ds-button-minHeight: 44px; /* Minimum button height — brand configurable */
  --ds-button-iconSize: 40px; /* Icon-mode button box — the square, circular affordance an icon button is (40px). Both axes bind it, including the minimums, so the variant rules' minHeight cannot stretch the box into an ellipse under border-radius 50% */
  --ds-button-iconPadding: 8px; /* Inset between the icon-mode button box and its glyph — 8px. Set to 0 for a full-bleed affordance whose content IS the button (an avatar mark), which previously had to overflow the padding box */
  --ds-button-elevation: 0px 1px 3px 0px rgba(0,0,0,0.06); /* Button shadow for subtle depth */
  --ds-button-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-button-typography-font-size: 16px;
  --ds-button-typography-font-weight: 700;
  --ds-button-typography-line-height: 1.5;

  /* buttonGroup */
  --ds-buttonGroup-container: #FFFDF2; /* Group background */
  --ds-buttonGroup-border: #64748B; /* Outer and divider border */
  --ds-buttonGroup-borderWidth: 1px; /* Border thickness — 1px */
  --ds-buttonGroup-radius: 8px; /* Outer corner radius */
  --ds-buttonGroup-gap: 0px; /* Gap between buttons — 0 for joined style */

  /* buttonInverse */
  --ds-buttonInverse-border: #94A3B8; /* Button border on dark surfaces — bright enough for AA 3:1 UI contrast on neutral.900 pill */
  --ds-buttonInverse-borderHover: #E2E8F0; /* Brighter border on hover */
  --ds-buttonInverse-onContainer: #F7F0DC; /* Button text on dark surfaces — near-white for AAA 7:1 body text contrast on neutral.900 pill */
  --ds-buttonInverse-onContainerHover: #FFFDF2; /* Hover text — pure white for maximum contrast */
  --ds-buttonInverse-onContainerDisabled: #64748B; /* Disabled text — mid-gray, intentionally dim but not invisible */
  --ds-buttonInverse-paddingX: 16px; /* Horizontal padding — shared with primary */
  --ds-buttonInverse-paddingY: 10px; /* Vertical padding — shared with primary */
  --ds-buttonInverse-radius: 8px; /* Button border radius — brand configurable */
  --ds-buttonInverse-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-buttonInverse-typography-font-size: 16px;
  --ds-buttonInverse-typography-font-weight: 700;
  --ds-buttonInverse-typography-line-height: 1.5;

  /* buttonSecondary */
  --ds-buttonSecondary-container: transparent; /* Transparent background in default state */
  --ds-buttonSecondary-containerHover: #C9E3DD; /* Subtle fill on hover — light enough to keep the primary-green label AA (BF-01: after the ramp re-base, primarySubtleHover/Active darken, so the secondary button steps one tint lighter) */
  --ds-buttonSecondary-containerActive: #A1CEC4; /* Stronger fill when pressed — still light enough for the primary-green label (BF-01) */
  --ds-buttonSecondary-containerDisabled: transparent; /* Stays transparent when disabled */
  --ds-buttonSecondary-onContainer: #365F56; /* Button text color matches primary */
  --ds-buttonSecondary-onContainerDisabled: #64748B; /* Disabled button text color */
  --ds-buttonSecondary-border: #64748B; /* Border color in default state */
  --ds-buttonSecondary-borderHover: #365F56; /* Border becomes primary on hover */
  --ds-buttonSecondary-borderDisabled: #E2E8F0; /* Faded border when disabled */
  --ds-buttonSecondary-paddingX: 16px; /* Horizontal padding — 16px */
  --ds-buttonSecondary-paddingY: 10px; /* Vertical padding — 10px */
  --ds-buttonSecondary-gap: 8px; /* Gap between icon and text — 8px */
  --ds-buttonSecondary-radius: 8px; /* Button border radius — brand configurable */
  --ds-buttonSecondary-minHeight: 44px; /* Minimum button height — brand configurable */
  --ds-buttonSecondary-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-buttonSecondary-typography-font-size: 16px;
  --ds-buttonSecondary-typography-font-weight: 700;
  --ds-buttonSecondary-typography-line-height: 1.5;

  /* buttonText */
  --ds-buttonText-containerHover: rgba(0, 0, 0, 0.04); /* Subtle overlay on hover */
  --ds-buttonText-containerActive: rgba(0, 0, 0, 0.12); /* Stronger overlay when pressed */
  --ds-buttonText-onContainer: #365F56; /* Text color matches primary */
  --ds-buttonText-onContainerDisabled: #64748B; /* Disabled text button color */
  --ds-buttonText-paddingX: 12px; /* Horizontal padding — 12px (tighter than filled buttons) */
  --ds-buttonText-paddingY: 8px; /* Vertical padding — 8px */
  --ds-buttonText-gap: 8px; /* Gap between icon and text — 8px */
  --ds-buttonText-radius: 8px; /* Button border radius — brand configurable */
  --ds-buttonText-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-buttonText-typography-font-size: 16px;
  --ds-buttonText-typography-font-weight: 700;
  --ds-buttonText-typography-line-height: 1.5;

  /* calendar */
  --ds-calendar-container: #FFFDF2; /* Calendar surface background */
  --ds-calendar-onContainer: #0F172A; /* Calendar default text color (frame + toolbar title) */
  --ds-calendar-border: #E2E8F0; /* Outer frame, toolbar divider and day-cell grid line color */
  --ds-calendar-borderWidth: 1px; /* Frame and grid line width — 1px (was aliased to table.borderWidth, same resolution) */
  --ds-calendar-radius: 8px; /* Outer frame corner radius — 8px */
  --ds-calendar-toolbarContainer: #FDF8E9; /* Toolbar background — slightly raised above the grid */
  --ds-calendar-toolbarPaddingX: 16px; /* Toolbar horizontal padding — 16px */
  --ds-calendar-toolbarPaddingY: 8px; /* Toolbar vertical padding — 8px */
  --ds-calendar-toolbarGap: 16px; /* Gap between nav / title / view-switcher toolbar regions — 16px */
  --ds-calendar-buttonContainer: #F7F0DC; /* Toolbar button background */
  --ds-calendar-buttonContainerHover: #F0E7CF; /* Toolbar button hover background */
  --ds-calendar-buttonText: #0F172A; /* Toolbar button text color */
  --ds-calendar-buttonBorder: #64748B; /* Toolbar button border color */
  --ds-calendar-buttonRadius: 8px; /* Toolbar button corner radius — 8px */
  --ds-calendar-buttonPaddingX: 8px; /* Toolbar button horizontal padding — 8px */
  --ds-calendar-buttonPaddingY: 2px; /* Toolbar button vertical padding — 2px, compact chrome */
  --ds-calendar-buttonMinWidth: 24px; /* Toolbar button minimum width — 24px, keeps arrow buttons square-ish */
  --ds-calendar-buttonContainerActive: #C9E3DD; /* Active view-switcher button background — subtle brand tint */
  --ds-calendar-buttonTextActive: #142421; /* Active view-switcher button text */
  --ds-calendar-buttonBorderActive: #365F56; /* Active view-switcher button border */
  --ds-calendar-weekdayContainer: #F7F0DC; /* Weekday header row background */
  --ds-calendar-weekdayText: #475569; /* Weekday header text — muted uppercase captions */
  --ds-calendar-dayContainer: #FFFDF2; /* Day cell background */
  --ds-calendar-dayContainerHover: #FDF8E9; /* Day cell hover background */
  --ds-calendar-dayContainerOutside: #FDF8E9; /* Outside-month day cell background */
  --ds-calendar-dayPadding: 4px; /* Day cell padding — 4px */
  --ds-calendar-dayMinHeight: 5rem; /* Day cell minimum height in the month grid — literal, a grid proportion with no core/brand size step */
  --ds-calendar-dayMinHeightWeek: 12rem; /* Day cell minimum height in the week grid — literal, a grid proportion with no core/brand size step */
  --ds-calendar-dayNumText: #0F172A; /* Day number color */
  --ds-calendar-dayNumTextOutside: #64748B; /* Outside-month day number color — muted */
  --ds-calendar-todayContainer: #365F56; /* Today's day-number pill background */
  --ds-calendar-onToday: #FFFFFF; /* Today's day-number text */
  --ds-calendar-eventRadius: 2px; /* Event chip corner radius — 2px */
  --ds-calendar-eventPaddingX: 4px; /* Event chip horizontal padding — 4px */
  --ds-calendar-eventPaddingY: 2px; /* Event chip vertical padding — 2px */
  --ds-calendar-eventPrimaryContainer: #C9E3DD; /* Primary event chip background */
  --ds-calendar-onEventPrimary: #142421; /* Primary event chip text */
  --ds-calendar-eventSuccessContainer: #BBF7D0; /* Success event chip background */
  --ds-calendar-onEventSuccess: #052e16; /* Success event chip text */
  --ds-calendar-eventWarningContainer: #FFE5A3; /* Warning event chip background */
  --ds-calendar-onEventWarning: #4A3600; /* Warning event chip text */
  --ds-calendar-eventErrorContainer: #F9C5B4; /* Error event chip background */
  --ds-calendar-onEventError: #4C0519; /* Error event chip text */
  --ds-calendar-eventInfoContainer: #BFDBFE; /* Info event chip background */
  --ds-calendar-onEventInfo: #172554; /* Info event chip text */
  --ds-calendar-agendaPadding: 16px; /* Agenda (day view) container padding — 16px */
  --ds-calendar-agendaGap: 8px; /* Gap between agenda list items — 8px */
  --ds-calendar-emptyText: #475569; /* Empty-state (no events) text color — muted */

  /* card */
  --ds-card-container: #FFFDF2; /* Card background color — white */
  --ds-card-border: #E2E8F0; /* Card border color */
  --ds-card-borderWidth: 1px; /* Card border width — 1px */
  --ds-card-radius: 14px; /* Card border radius — brand-configurable (default 14px) */
  --ds-card-padding: 24px; /* Card inner padding — 24px */
  --ds-card-gap: 16px; /* Spacing between card content sections */
  --ds-card-elevation: 0px 1px 3px 0px rgba(0,0,0,0.06); /* Card shadow — subtle depth */
  --ds-card-relevanceContainer: #F8F5FA; /* Relevance toggle area background — light warm-violet tint strip */
  --ds-card-relevanceRadius: 10px; /* Relevance area border radius — 10px */
  --ds-card-relevancePaddingX: 16px; /* Relevance area horizontal padding — 16px */
  --ds-card-relevancePaddingY: 8px; /* Relevance area vertical padding — 8px */
  --ds-card-headerGap: 8px; /* Gap between card header (icon+title+badge) and body — 8px */
  --ds-card-titleColor: #0F172A; /* Card title text color */
  --ds-card-titleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-card-titleTypography-font-size: 20px;
  --ds-card-titleTypography-font-weight: 700;
  --ds-card-titleTypography-line-height: 1.375;
  --ds-card-descriptionColor: #0F172A; /* Card description body text */
  --ds-card-descriptionTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-card-descriptionTypography-font-size: 14px;
  --ds-card-descriptionTypography-font-weight: 400;
  --ds-card-descriptionTypography-line-height: 1.5;
  --ds-card-exampleColor: #64748B; /* Card example/hint text — muted ('EKSEMPLER: ...') */
  --ds-card-exampleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-card-exampleTypography-font-size: 12px;
  --ds-card-exampleTypography-font-weight: 400;
  --ds-card-exampleTypography-line-height: 1.5;
  --ds-card-iconSize: 20px; /* Card header icon size — 20px module icon slot */
  --ds-card-headerBorder: #E2E8F0; /* Divider between card header and content — shown when title is present */
  --ds-card-headerBorderWidth: 1px; /* Header divider width — 1px */
  --ds-card-subtitleColor: #475569; /* Card subtitle text color — muted */
  --ds-card-subtitleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-card-subtitleTypography-font-size: 14px;
  --ds-card-subtitleTypography-font-weight: 400;
  --ds-card-subtitleTypography-line-height: 1.5;
  --ds-card-ghostBorder: #E2E8F0; /* Ghost/'add new' variant dashed border color (ASTX-Card-5, gap-37) */
  --ds-card-ghostBorderHover: #365F56; /* Ghost variant dashed border color on hover — signals the tile is actionable */
  --ds-card-ghostBackgroundHover: #FDF8E9; /* Ghost variant background wash on hover — same tone as the muted variant's surface */

  /* chart */
  --ds-chart-axisLine: #E2E8F0; /* Axis domain line color */
  --ds-chart-axisLabel: #475569; /* Axis tick-label text color */
  --ds-chart-gridLine: #E2E8F0; /* Background grid line color */
  --ds-chart-gridLineWidth: 1px; /* Background grid line width */
  --ds-chart-legendLabel: #475569; /* Legend entry text color */
  --ds-chart-legendGap: 16px; /* Gap between legend entries */
  --ds-chart-legendSwatchSize: 12px; /* Legend color-swatch square — 12px */
  --ds-chart-tooltipContainer: #FFFDF2; /* Tooltip background (matches the shipped chart tooltip) */
  --ds-chart-onTooltipContainer: #0F172A; /* Tooltip text */
  --ds-chart-tooltipRadius: 8px; /* Tooltip corner radius */
  --ds-chart-highlightColor: #365F56; /* Hovered point/bar highlight accent */
  --ds-chart-crosshairColor: #64748B; /* Hover crosshair line color */
  --ds-chart-referenceLine: #8A6A14; /* Reference/threshold line color */
  --ds-chart-referenceLineWidth: 1px; /* Reference line width */
  --ds-chart-tooltipBorder: #E2E8F0; /* Tooltip border color */

  /* chat */
  --ds-chat-bubbleUserContainer: #C9E3DD; /* User message bubble background — brand-tinted, right-aligned */
  --ds-chat-bubbleUserText: #142421; /* User message bubble text color */
  --ds-chat-bubbleAssistantContainer: #F7F0DC; /* Assistant message bubble background — neutral surface, left-aligned */
  --ds-chat-bubbleAssistantText: #0F172A; /* Assistant message bubble text color */
  --ds-chat-bubbleRadius: 10px; /* Message bubble corner radius — 10px */
  --ds-chat-bubblePadding: 16px; /* Message bubble inner padding — 16px */
  --ds-chat-bubbleGap: 4px; /* Gap between avatar, name row and bubble in a message */
  --ds-chat-nameColor: #475569; /* Sender name label color */
  --ds-chat-metadataColor: #64748B; /* Timestamp / delivery-status metadata text color — muted */
  --ds-chat-systemColor: #475569; /* System message text color — centered, non-bubble */
  --ds-chat-systemDivider: #E2E8F0; /* System divider rule color */
  --ds-chat-composerContainer: #FFFDF2; /* Composer surface background — sits behind the frosted layer */
  --ds-chat-composerBorder: #E2E8F0; /* Composer border color */
  --ds-chat-composerRadius: 12px; /* Composer outer corner radius — 14px */
  --ds-chat-composerInnerRadius: 10px; /* Composer inner control (textarea/send) radius — concentric with the outer radius */
  --ds-chat-composerPadding: 8px; /* Composer inner padding — the concentric radius delta */
  --ds-chat-toolCallContainer: #FDF8E9; /* Inline tool-call card background */
  --ds-chat-toolCallBorder: #E2E8F0; /* Inline tool-call card border color */
  --ds-chat-toolCallRadius: 10px; /* Inline tool-call card radius — 10px */
  --ds-chat-toolCallPadding: 8px; /* Inline tool-call card padding — 8px */

  /* checkbox */
  --ds-checkbox-containerChecked: #365F56; /* Checked background */
  --ds-checkbox-containerCheckedHover: #2C4F47; /* Hover state when checked */
  --ds-checkbox-checkmark: #FFFFFF; /* Checkmark color */
  --ds-checkbox-borderWidth: 2px; /* Border thickness - 2px */
  --ds-checkbox-size: 20px; /* Checkbox size - 20px */
  --ds-checkbox-targetSize: 24px; /* Interactive target size (state layer / hit area) — 24px, the WCAG 2.2 AA 2.5.8 minimum. Distinct from `size`, which is the drawn box (20px). Vendor-backed checkboxes (Angular Material's --mdc-checkbox-state-layer-size) default to 40px, which inflates every table row ~20px against the DS's own metric; bridge them to this instead of to `size`, so parity does not come at the cost of dropping under the 24px target floor */
  --ds-checkbox-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-checkbox-labelTypography-font-size: 16px;
  --ds-checkbox-labelTypography-font-weight: 400;
  --ds-checkbox-labelTypography-line-height: 1.5;
  --ds-checkbox-labelGap: 8px; /* Gap between checkbox and label text — 8px (mirrors radio.labelGap; previously a fallback-only var) */

  /* checklist */
  --ds-checklist-gap: 6px; /* Gap between checklist rows — 6px */
  --ds-checklist-itemGap: 8px; /* Gap between icon and text within a row — 8px */
  --ds-checklist-iconSize: 16px; /* Check/circle icon size — 16px */
  --ds-checklist-iconComplete: #15803D; /* Completed item icon — green checkmark */
  --ds-checklist-iconPending: #64748B; /* Pending item icon — gray open circle */
  --ds-checklist-iconActive: #365F56; /* Active/current item icon — blue, in-progress */
  --ds-checklist-textComplete: #0F172A; /* Completed item text — normal weight */
  --ds-checklist-textPending: #475569; /* Pending item text — muted */
  --ds-checklist-textActive: #365F56; /* Active item text — blue to highlight current step */
  --ds-checklist-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-checklist-typography-font-size: 14px;
  --ds-checklist-typography-font-weight: 400;
  --ds-checklist-typography-line-height: 1.5;

  /* chip */
  --ds-chip-container: #FFFDF2; /* Default unselected chip background */
  --ds-chip-containerHover: #E2E8F0; /* Chip background on hover */
  --ds-chip-containerSelected: #365F56; /* Selected chip fill — may be overridden with area color at usage */
  --ds-chip-border: #64748B; /* Default chip border — visible when unselected */
  --ds-chip-borderHover: #475569; /* Chip border on hover — stronger emphasis */
  --ds-chip-borderSelected: transparent; /* Selected chip border — transparent since fill provides contrast */
  --ds-chip-outlinedBorder: #E2E8F0; /* Outlined chip variant border — subtle hairline; brand/usage may re-point (previously a fallback-only var) */
  --ds-chip-onContainer: #475569; /* Unselected chip text color */
  --ds-chip-onContainerSelected: #FFFFFF; /* Selected chip text — white on primary fill */
  --ds-chip-radius: 9999px; /* Chip corner radius — follows each brand's chip radius (CMP-04/Q15: pill on meadow/starter/aurora, 4px on square Harbor; was hardcoded core.radius.full pill for all) */
  --ds-chip-paddingX: 14px; /* Horizontal padding inside chip — 14px */
  --ds-chip-paddingY: 8px; /* Vertical padding inside chip — 8px */
  --ds-chip-paddingXSmall: 4px; /* Horizontal padding inside a size=small chip — 4px. Its own token because .ds-c-chip--small overrides the base padding shorthand: without it, re-pointing --ds-chip-paddingX had no effect on a small chip at all (the documented override silently no-op'd) */
  --ds-chip-paddingYSmall: 2px; /* Vertical padding inside a size=small chip — 2px. See paddingXSmall */
  --ds-chip-gapSmall: 2px; /* Gap between a size=small chip's icon and label — 2px */
  --ds-chip-gap: 6px; /* Gap between chips in a group — 6px */
  --ds-chip-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-chip-typography-font-size: 14px;
  --ds-chip-typography-font-weight: 400;
  --ds-chip-typography-line-height: 1.5;
  --ds-chip-statusInfo-container: #EFF6FF; /* Info status chip background — light tint */
  --ds-chip-statusInfo-onContainer: #0C4A6E; /* Info status chip text — dark for AA contrast */
  --ds-chip-statusSuccess-container: #F0FDF4; /* Success status chip background */
  --ds-chip-statusSuccess-onContainer: #052E16; /* Success status chip text */
  --ds-chip-statusWarning-container: #FFFDF0; /* Warning status chip background */
  --ds-chip-statusWarning-onContainer: #4A3600; /* Warning status chip text */
  --ds-chip-statusError-container: #FFF1F2; /* Error status chip background */
  --ds-chip-statusError-onContainer: #4F1D0E; /* Error status chip text */

  /* chunkProgressBar */
  --ds-chunkProgressBar-track: #E2E8F0; /* Empty chunk color */
  --ds-chunkProgressBar-fill: #365F56; /* Filled chunk color */
  --ds-chunkProgressBar-fillComplete: #15803D; /* All chunks filled — success */
  --ds-chunkProgressBar-label: #475569; /* Value label (e.g. 3/5) */
  --ds-chunkProgressBar-chunkHeight: 8px; /* Chunk bar height */
  --ds-chunkProgressBar-chunkRadius: 2px; /* Chunk corner radius */
  --ds-chunkProgressBar-chunkGap: 4px; /* Gap between chunks */
  --ds-chunkProgressBar-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-chunkProgressBar-labelTypography-font-size: 12px;
  --ds-chunkProgressBar-labelTypography-font-weight: 400;
  --ds-chunkProgressBar-labelTypography-line-height: 1.5;

  /* circularProgress */
  --ds-circularProgress-track: #E2E8F0; /* Background circle track */
  --ds-circularProgress-fill: #365F56; /* Active arc color */
  --ds-circularProgress-fillComplete: #15803D; /* Arc color at 100% */
  --ds-circularProgress-label: #0F172A; /* Center percentage label */
  --ds-circularProgress-sizeSm: 24px; /* Small variant diameter */
  --ds-circularProgress-sizeMd: 40px; /* Medium (default) diameter */
  --ds-circularProgress-sizeLg: 64px; /* Large variant diameter */
  --ds-circularProgress-strokeWidth: 4px; /* Arc stroke thickness */
  --ds-circularProgress-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-circularProgress-labelTypography-font-size: 12px;
  --ds-circularProgress-labelTypography-font-weight: 400;
  --ds-circularProgress-labelTypography-line-height: 1.5;

  /* colorPicker */
  --ds-colorPicker-swatchBorder: #64748B; /* Swatch preview border */
  --ds-colorPicker-popupContainer: #FFFDF2; /* Popup background */
  --ds-colorPicker-popupBorder: #E2E8F0; /* Popup border */
  --ds-colorPicker-popupShadow: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Popup elevation */
  --ds-colorPicker-inputBg: #F7F0DC; /* Hex input background */
  --ds-colorPicker-inputText: #0F172A; /* Hex input text */
  --ds-colorPicker-label: #475569; /* Label text */
  --ds-colorPicker-swatchSize: 36px; /* Swatch preview size */
  --ds-colorPicker-swatchRadius: 8px; /* Swatch corner radius */
  --ds-colorPicker-popupRadius: 14px; /* Popup corner radius */
  --ds-colorPicker-popupPadding: 12px; /* Popup padding */
  --ds-colorPicker-paletteGap: 4px; /* Gap between palette swatches */
  --ds-colorPicker-paletteSwatchSize: 28px; /* Palette swatch size */
  --ds-colorPicker-paletteSwatchRadius: 4px; /* Palette swatch corner radius (React twin) — literal 4px: no 4px core radius step (sm=2, md=8) and brand.radius.input is 8px under Starter */
  --ds-colorPicker-hexInputWidth: 80px; /* Inline hex input width next to the swatch — 80px fits #RRGGBB in monospace */
  --ds-colorPicker-popupGap: 12px; /* Vertical gap between popup sections (palette grid / hex row) — literal 12px, between core sm (8px) and md (16px) */
  --ds-colorPicker-popupInputPaddingY: 6px; /* Popup hex input vertical padding — literal 6px, no core space step between xs (4px) and sm (8px) */
  --ds-colorPicker-popupMinWidth: 200px; /* Popup minimum width (Blazor twin) — keeps the 6-column palette grid comfortable */

  /* contactCard */
  --ds-contactCard-container: #FFFDF2; /* Card background */
  --ds-contactCard-border: #E2E8F0; /* Card border color */
  --ds-contactCard-borderWidth: 1px; /* Card border width — 1px */
  --ds-contactCard-radius: 14px; /* Card corner radius — brand-configurable */
  --ds-contactCard-padding: 24px; /* Card inner padding */
  --ds-contactCard-gap: 16px; /* Vertical rhythm between card sections (header, identity, fields, footer) */
  --ds-contactCard-elevation: 0px 1px 3px 0px rgba(0,0,0,0.06); /* Subtle elevation */
  --ds-contactCard-headerGap: 8px; /* Gap between title and action, and header bottom padding — matches card.headerGap */
  --ds-contactCard-headerBorder: #E2E8F0; /* Divider under the title+action header */
  --ds-contactCard-headerBorderWidth: 1px; /* Header divider width — 1px */
  --ds-contactCard-titleColor: #0F172A; /* Card title color */
  --ds-contactCard-titleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-contactCard-titleTypography-font-size: 20px;
  --ds-contactCard-titleTypography-font-weight: 700;
  --ds-contactCard-titleTypography-line-height: 1.375;
  --ds-contactCard-nameColor: #0F172A; /* Contact name color — the bold identity line */
  --ds-contactCard-nameTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-contactCard-nameTypography-font-size: 14px;
  --ds-contactCard-nameTypography-font-weight: 700;
  --ds-contactCard-nameTypography-line-height: 1.5;
  --ds-contactCard-metaColor: #475569; /* Role/relation meta line color — muted */
  --ds-contactCard-metaTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-contactCard-metaTypography-font-size: 14px;
  --ds-contactCard-metaTypography-font-weight: 400;
  --ds-contactCard-metaTypography-line-height: 1.5;
  --ds-contactCard-identityGap: 8px; /* Gap between the avatar slot and the name/meta text block */
  --ds-contactCard-labelColor: #475569; /* Field label (caption above value) color — matches DsTypography caption/secondary */
  --ds-contactCard-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-contactCard-labelTypography-font-size: 12px;
  --ds-contactCard-labelTypography-font-weight: 400;
  --ds-contactCard-labelTypography-line-height: 1.5;
  --ds-contactCard-valueColor: #0F172A; /* Field value color (plain, non-link values) */
  --ds-contactCard-valueTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-contactCard-valueTypography-font-size: 16px;
  --ds-contactCard-valueTypography-font-weight: 400;
  --ds-contactCard-valueTypography-line-height: 1.5;
  --ds-contactCard-fieldRowGap: 16px; /* Vertical gap between contact-field rows */
  --ds-contactCard-fieldColumnGap: 24px; /* Horizontal gutter between paired fields in the two-column layout */
  --ds-contactCard-fieldIconGap: 8px; /* Gap between a field's leading icon and its label/value block */
  --ds-contactCard-iconColor: #475569; /* Leading field icon color (mail/phone glyphs) — muted */

  /* dataGrid */
  --ds-dataGrid-container: #FFFDF2; /* Grid background */
  --ds-dataGrid-border: #E2E8F0; /* Grid outer border color */
  --ds-dataGrid-borderWidth: 1px; /* Grid outer border width — 1px */
  --ds-dataGrid-radius: 10px; /* Grid container corner radius — brand-configurable */
  --ds-dataGrid-headerContainer: #FDF8E9; /* Column header row background */
  --ds-dataGrid-headerText: #0F172A; /* Column header text color */
  --ds-dataGrid-headerBorder: #E2E8F0; /* Header bottom border color */
  --ds-dataGrid-headerTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-dataGrid-headerTypography-font-size: 14px;
  --ds-dataGrid-headerTypography-font-weight: 700;
  --ds-dataGrid-headerTypography-line-height: 1.5;
  --ds-dataGrid-cellText: #0F172A; /* Row cell text color */
  --ds-dataGrid-cellBorder: #E2E8F0; /* Row separator color */
  --ds-dataGrid-cellPaddingX: 12px; /* Cell horizontal padding — compact */
  --ds-dataGrid-cellPaddingYCompact: 6px; /* Cell vertical padding — compact density */
  --ds-dataGrid-cellPaddingYStandard: 10px; /* Cell vertical padding — standard density */
  --ds-dataGrid-cellPaddingYComfortable: 12px; /* Cell vertical padding — comfortable density */
  --ds-dataGrid-cellTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-dataGrid-cellTypography-font-size: 14px;
  --ds-dataGrid-cellTypography-font-weight: 400;
  --ds-dataGrid-cellTypography-line-height: 1.5;
  --ds-dataGrid-rowHover: #E2E8F0; /* Row hover background */
  --ds-dataGrid-rowSelected: #C9E3DD; /* Selected row background */
  --ds-dataGrid-rowSelectedHover: #A1CEC4; /* Selected + hover row background */
  --ds-dataGrid-focusRing: #365F56; /* Keyboard focus ring on cells */
  --ds-dataGrid-sortIconColor: #475569; /* Column sort arrow icon color */
  --ds-dataGrid-sortIconActive: #365F56; /* Sort arrow color when column is sorted */
  --ds-dataGrid-toolbarContainer: #FFFDF2; /* Optional top toolbar background (density toggle, export, filter buttons) */
  --ds-dataGrid-toolbarBorder: #E2E8F0; /* Toolbar bottom divider */
  --ds-dataGrid-toolbarPaddingX: 12px; /* Toolbar horizontal padding */
  --ds-dataGrid-toolbarPaddingY: 10px; /* Toolbar vertical padding */
  --ds-dataGrid-emptyStateColor: #64748B; /* Empty-state placeholder text color */
  --ds-dataGrid-emptyStateTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-dataGrid-emptyStateTypography-font-size: 14px;
  --ds-dataGrid-emptyStateTypography-font-weight: 400;
  --ds-dataGrid-emptyStateTypography-line-height: 1.5;

  /* datePicker */
  --ds-datePicker-calendarContainer: #FFFDF2; /* Calendar popover surface background */
  --ds-datePicker-calendarElevation: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Calendar popover elevation */
  --ds-datePicker-calendarRadius: 14px; /* Calendar popover corner radius */
  --ds-datePicker-calendarPadding: 16px; /* Inner padding of the calendar popover */
  --ds-datePicker-headerContainer: #FFFDF2; /* Calendar header bar background */
  --ds-datePicker-headerText: #0F172A; /* Month / year header text */
  --ds-datePicker-headerNavIcon: #475569; /* Previous / next month chevron color */
  --ds-datePicker-weekdayText: #64748B; /* Weekday abbreviation (Mo Tu We …) label color */
  --ds-datePicker-dayCellSize: 36px; /* Width and height of a single day cell */
  --ds-datePicker-dayCellRadius: 9999px; /* Day cell corner radius — full-circle to match MUI X default */
  --ds-datePicker-dayCellText: #0F172A; /* Day number text color */
  --ds-datePicker-dayCellTextOutsideMonth: #64748B; /* Day number text for dates outside the current month */
  --ds-datePicker-dayCellHoverBg: #E2E8F0; /* Hovered day cell background */
  --ds-datePicker-dayCellSelectedBg: #365F56; /* Selected day cell background */
  --ds-datePicker-dayCellSelectedText: #FFFFFF; /* Selected day cell text color */
  --ds-datePicker-dayCellTodayBorder: #365F56; /* Border color marking today when not selected */
  --ds-datePicker-rangeFill: #C9E3DD; /* Fill between range-start and range-end day cells (date-range picker) */
  --ds-datePicker-rangeEndpointFill: #365F56; /* Fill on the range endpoints (start / end day cells) */

  /* definitionList */
  --ds-definitionList-rowPaddingY: 8px; /* Vertical padding per row */
  --ds-definitionList-rowGap: 16px; /* Horizontal gap between label (dt) and value (dd) */
  --ds-definitionList-labelColor: #475569; /* Label (dt) text color — muted */
  --ds-definitionList-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-definitionList-labelTypography-font-size: 12px;
  --ds-definitionList-labelTypography-font-weight: 700;
  --ds-definitionList-labelTypography-line-height: 1.5;
  --ds-definitionList-valueColor: #0F172A; /* Value (dd) text color */
  --ds-definitionList-valueTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-definitionList-valueTypography-font-size: 14px;
  --ds-definitionList-valueTypography-font-weight: 400;
  --ds-definitionList-valueTypography-line-height: 1.5;
  --ds-definitionList-dividerColor: #E2E8F0; /* Optional row divider color */
  --ds-definitionList-dividerWidth: 1px; /* Optional row divider width — 1px */

  /* divider */
  --ds-divider-color: #E2E8F0; /* Divider line color */
  --ds-divider-thickness: 1px; /* Divider line thickness - 1px */
  --ds-divider-spacing: 24px; /* Vertical margin above and below divider - 24px */

  /* drawer */
  --ds-drawer-container: #FFFDF2; /* Drawer surface background */
  --ds-drawer-elevation: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Drawer elevation */
  --ds-drawer-widthLeft: 280px; /* Default width for left-anchored drawer (navigation rail default) */
  --ds-drawer-widthRight: 400px; /* Default width for right-anchored drawer (detail panel) */
  --ds-drawer-heightTop: 240px; /* Default height for top-anchored drawer */
  --ds-drawer-heightBottom: 320px; /* Default height for bottom-anchored drawer */
  --ds-drawer-widthSm: 320px; /* Small drawer width preset (DsDrawer size='sm') */
  --ds-drawer-widthMd: 480px; /* Medium drawer width preset (DsDrawer size='md') */
  --ds-drawer-widthLg: 600px; /* Large drawer width preset (DsDrawer size='lg') */
  --ds-drawer-miniWidth: 72px; /* Collapsed rail width for DsDrawer mini variant (LP-078) */
  --ds-drawer-transitionDurationEnter: 225ms; /* Open transition duration — MUI default */
  --ds-drawer-transitionDurationExit: 195ms; /* Close transition duration — MUI default, slightly faster than enter */
  --ds-drawer-transitionTimingFunction: cubic-bezier(0, 0, 0.2, 1); /* Easing curve for slide-in motion — MUI ease-out */
  --ds-drawer-headerPaddingX: 24px; /* Drawer header horizontal padding — 24px */
  --ds-drawer-headerPaddingY: 16px; /* Drawer header vertical padding — 16px */
  --ds-drawer-headerBorder: #E2E8F0; /* Header bottom border separator */
  --ds-drawer-contentPaddingX: 24px; /* Drawer content horizontal padding */
  --ds-drawer-contentPaddingY: 24px; /* Drawer content vertical padding */

  /* dropDownButton */
  --ds-dropDownButton-container: #FFFDF2; /* Button fill — secondary style by default */
  --ds-dropDownButton-containerHover: #E2E8F0; /* Hover fill */
  --ds-dropDownButton-containerActive: #E2E8F0; /* Active/pressed fill */
  --ds-dropDownButton-onContainer: #0F172A; /* Text and icon color */
  --ds-dropDownButton-border: #64748B; /* Button border */
  --ds-dropDownButton-menuContainer: #FFFDF2; /* Dropdown menu background */
  --ds-dropDownButton-menuBorder: #E2E8F0; /* Dropdown menu border */
  --ds-dropDownButton-menuItemHover: #E2E8F0; /* Menu item hover */
  --ds-dropDownButton-menuText: #0F172A; /* Menu item text */
  --ds-dropDownButton-radius: 8px; /* Button corner radius */
  --ds-dropDownButton-menuRadius: 14px; /* Menu corner radius */
  --ds-dropDownButton-paddingX: 14px; /* Horizontal padding */
  --ds-dropDownButton-paddingY: 8px; /* Vertical padding */
  --ds-dropDownButton-gap: 4px; /* Gap between label and chevron */
  --ds-dropDownButton-menuPaddingY: 4px; /* Menu vertical padding */
  --ds-dropDownButton-menuItemPaddingX: 14px; /* Menu item horizontal padding */
  --ds-dropDownButton-menuItemPaddingY: 8px; /* Menu item vertical padding */
  --ds-dropDownButton-menuShadow: 0px 4px 6px 0px rgba(0,0,0,0.08); /* Menu elevation shadow */
  --ds-dropDownButton-borderWidth: 1px; /* Button border width — 1px */
  --ds-dropDownButton-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-dropDownButton-typography-font-size: 16px;
  --ds-dropDownButton-typography-font-weight: 700;
  --ds-dropDownButton-typography-line-height: 1.5;

  /* dropdown */
  --ds-dropdown-triggerIcon: #475569; /* Chevron icon color in trigger */
  --ds-dropdown-popupContainer: #FFFDF2; /* Dropdown popup background */
  --ds-dropdown-popupRadius: 8px; /* Popup border radius — brand-configurable */
  --ds-dropdown-popupBorder: #E2E8F0; /* Popup border color */
  --ds-dropdown-popupElevation: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Popup shadow for floating above content */
  --ds-dropdown-popupMaxHeight: 320px; /* Maximum dropdown popup height before scrolling */
  --ds-dropdown-optionPaddingX: 12px; /* Horizontal padding per option - 12px */
  --ds-dropdown-optionPaddingY: 8px; /* Vertical padding per option - 8px */
  --ds-dropdown-optionHover: #E2E8F0; /* Option background on hover */
  --ds-dropdown-optionSelected: #C9E3DD; /* Selected option background */
  --ds-dropdown-onOptionSelected: #365F56; /* Selected option text color */
  --ds-dropdown-optionTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-dropdown-optionTypography-font-size: 16px;
  --ds-dropdown-optionTypography-font-weight: 400;
  --ds-dropdown-optionTypography-line-height: 1.5;

  /* entityDrawer */
  --ds-entityDrawer-headerPaddingX: 24px; /* Header horizontal padding — 24px */
  --ds-entityDrawer-headerPaddingY: 16px; /* Header vertical padding — 16px */
  --ds-entityDrawer-headerGap: 16px; /* Gap between avatar / title block / status / close — 16px */
  --ds-entityDrawer-divider: #E2E8F0; /* Header bottom + footer top divider color */
  --ds-entityDrawer-titleColor: #0F172A; /* Entity title text color */
  --ds-entityDrawer-subtitleColor: #475569; /* Entity subtitle text color — muted */
  --ds-entityDrawer-titleGap: 4px; /* Gap between title and subtitle — 4px */
  --ds-entityDrawer-closeSize: 24px; /* Close button hit target — 24px square */
  --ds-entityDrawer-closeRadius: 2px; /* Close button corner radius — 2px */
  --ds-entityDrawer-closeColor: #475569; /* Close glyph color */
  --ds-entityDrawer-closeContainerHover: #FDF8E9; /* Close button hover background */
  --ds-entityDrawer-bodyPaddingX: 24px; /* Body horizontal padding — 24px */
  --ds-entityDrawer-bodyPaddingY: 16px; /* Body vertical padding — 16px */
  --ds-entityDrawer-footerPaddingX: 24px; /* Footer horizontal padding — 24px */
  --ds-entityDrawer-footerPaddingY: 16px; /* Footer vertical padding — 16px */
  --ds-entityDrawer-footerGap: 8px; /* Gap between footer action buttons — 8px */

  /* fab */
  --ds-fab-container: #365F56; /* FAB background */
  --ds-fab-containerHover: #2C4F47; /* Hover background */
  --ds-fab-containerActive: #223E38; /* Active/pressed background */
  --ds-fab-onContainer: #FFFFFF; /* Icon/text color */
  --ds-fab-shadow: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Resting elevation */
  --ds-fab-shadowHover: 0px 16px 32px 0px rgba(0,0,0,0.16); /* Hover elevation */
  --ds-fab-sizeCompact: 36px; /* Compact icon-only variant — 36px, for a dense floating-action slot */
  --ds-fab-sizeSm: 40px; /* Small variant — 40px */
  --ds-fab-sizeMd: 56px; /* Default — 56px */
  --ds-fab-sizeLg: 96px; /* Extended — 96px */
  --ds-fab-iconSize: 24px; /* Icon size inside FAB */
  --ds-fab-radius: 9999px; /* Corner radius — circle */
  --ds-fab-extendedRadius: 16px; /* Extended (labelled) FAB corner radius — literal 16px (M3 extended-FAB shape, no core radius step: xl=12). React twin only; the Blazor twin renders {core.radius.md} 8px — pre-existing PARITY divergence, each kept pixel-neutral */

  /* fixedCardGrid */
  --ds-fixedCardGrid-paddingX: 32px; /* Horizontal padding of the content wrapper — provides breathing room on viewport edges */
  --ds-fixedCardGrid-paddingY: 48px; /* Vertical padding of the content wrapper — larger than horizontal for visual weight */
  --ds-fixedCardGrid-gap: 24px; /* Gap between cards in the grid — enough separation for distinct card identity */
  --ds-fixedCardGrid-cardMinWidth: 280px; /* Default minimum card width for the auto-fill column sizing. Literal — no core 280px sizing step exists. Deliberately matches the long-standing CSS var() fallback (LAY-01 annotation default) so this token's :root cascade is pixel-neutral for every pre-existing bare instance — it does not change any rendered layout, only makes the default overridable through the normal token pipeline. Degoma's own stories still pass cardMinWidth={220} explicitly where a narrower card is wanted */
  --ds-fixedCardGrid-maxWidth: 1024px; /* Maximum width of the grid content area — keeps cards from stretching on wide viewports */

  /* floatingToolbar */
  --ds-floatingToolbar-container: #0F172A; /* Toolbar background — permanently dark (near-black) in both themes. References brand.neutral directly (not core.color.onSurface) so it does NOT flip with light/dark mode. The floating toolbar is always a dark pill regardless of app theme. */
  --ds-floatingToolbar-radius: 14px; /* Toolbar border radius — brand-configurable (default 14px rounded pill) */
  --ds-floatingToolbar-padding: 16px; /* Container padding — 16px all sides */
  --ds-floatingToolbar-gap: 16px; /* Gap between groups and dividers — 16px */
  --ds-floatingToolbar-elevation: 0px 8px 16px 0px rgba(0,0,0,0.12); /* High elevation — floats above content */
  --ds-floatingToolbar-minHeight: 64px; /* Minimum toolbar height — 64px */
  --ds-floatingToolbar-clearance: 96px; /* Page-content clearance under a bottom-anchored floating toolbar (APP-23) — 96px = the toolbar's 64px minHeight + its 32px bottom offset. Apply as `padding-bottom: var(--ds-floatingToolbar-clearance)` on the page content wrapper so the last row never hides behind the pill. (FullScreenModal has its own 80px clearance, TST-10/265:1093 — this token is for toolbar-over-page layouts, not the modal.) */
  --ds-floatingToolbar-dividerColor: #94A3B8; /* Vertical divider between button groups — mid-gray visible on dark pill. Uses .400 (not .500) so Meadow's muted neutral palette still hits AA 3:1 contrast against neutral.900 */
  --ds-floatingToolbar-dividerWidth: 1px; /* Divider thickness — 1px */
  --ds-floatingToolbar-dividerHeight: 28px; /* Divider height — 28px, vertically centered */
  --ds-floatingToolbar-groupGap: 16px; /* Gap between buttons within a group — 16px */
  --ds-floatingToolbar-ghostContainer: transparent; /* Ghost button bg — transparent, the pill shows through. Visual anchor is the border, not a fill. Hover state gets a subtle fill for feedback */
  --ds-floatingToolbar-ghostContainerHover: #1E293B; /* Ghost button hover bg — subtle fill lighter than pill (.900), provides hover feedback */
  --ds-floatingToolbar-ghostBorder: #94A3B8; /* Ghost button border — from buttonInverse */
  --ds-floatingToolbar-ghostBorderHover: #E2E8F0; /* Ghost button hover border — from buttonInverse */
  --ds-floatingToolbar-ghostColor: #F7F0DC; /* Ghost button text — from buttonInverse (neutral-300) */
  --ds-floatingToolbar-ghostColorHover: #FFFDF2; /* Ghost button hover text — from buttonInverse (neutral-000) */
  --ds-floatingToolbar-ghostColorDisabled: #64748B; /* Ghost button disabled text — from buttonInverse (neutral-600) */
  --ds-floatingToolbar-ghostRadius: 8px; /* Ghost button radius — from buttonInverse (brand-aware) */
  --ds-floatingToolbar-ghostPaddingX: 16px; /* Ghost button horizontal padding — from buttonInverse */
  --ds-floatingToolbar-ghostPaddingY: 10px; /* Ghost button vertical padding — from buttonInverse */
  --ds-floatingToolbar-ghostTypography: 0px 0px 0px 0px rgba(0,0,0,0.1); /* Ghost button text style — from buttonInverse (label) */
  --ds-floatingToolbar-ctaContainer: #365F56; /* CTA button background — from button primary (brand color) */
  --ds-floatingToolbar-ctaContainerHover: #2C4F47; /* CTA hover background — from button primary */
  --ds-floatingToolbar-ctaColor: #FFFFFF; /* CTA button text — from button primary (white) */
  --ds-floatingToolbar-ctaRadius: 8px; /* CTA border radius — from button primary (brand-aware) */
  --ds-floatingToolbar-ctaPaddingX: 24px; /* CTA horizontal padding — 24px, wider than ghost for emphasis */
  --ds-floatingToolbar-ctaPaddingY: 10px; /* CTA vertical padding — from button primary */
  --ds-floatingToolbar-ctaMinHeight: 44px; /* CTA min height — from button primary (brand-aware) */
  --ds-floatingToolbar-ctaElevation: 0px 1px 3px 0px rgba(0,0,0,0.06); /* CTA button glow — subtle elevation shadow on primary bg */
  --ds-floatingToolbar-ctaTypography: 0px 0px 0px 0px rgba(0,0,0,0.1); /* CTA button text style — from button primary (label) */

  /* formField */
  --ds-formField-labelColor: #0F172A; /* Form label text color */
  --ds-formField-labelGap: 6px; /* Gap between label and input - 6px */
  --ds-formField-requiredColor: #9E3B1B; /* Required asterisk color */
  --ds-formField-helpColor: #475569; /* Help text color below input */
  --ds-formField-helpGap: 4px; /* Gap between input and help/error text - 4px */
  --ds-formField-errorColor: #9E3B1B; /* Error message text color */
  --ds-formField-fieldGap: 24px; /* Vertical gap between form fields - 24px */
  --ds-formField-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-formField-labelTypography-font-size: 14px;
  --ds-formField-labelTypography-font-weight: 700;
  --ds-formField-labelTypography-line-height: 1.5;
  --ds-formField-helpTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-formField-helpTypography-font-size: 12px;
  --ds-formField-helpTypography-font-weight: 400;
  --ds-formField-helpTypography-line-height: 1.5;
  --ds-formField-error-color: #9E3B1B; /* Error message text color — red */
  --ds-formField-error-iconColor: #9E3B1B; /* Leading icon color — matches text */
  --ds-formField-error-iconSize: 16px; /* Icon size — 16px */
  --ds-formField-error-gap: 4px; /* Gap between icon and message text — 4px */
  --ds-formField-error-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-formField-error-typography-font-size: 12px;
  --ds-formField-error-typography-font-weight: 400;
  --ds-formField-error-typography-line-height: 1.5;

  /* formSectionStack */
  --ds-formSectionStack-gap: 16px; /* Vertical gap between form sections — matches the section-level rhythm */
  --ds-formSectionStack-sectionPadding: 24px; /* Internal padding of each form section card */
  --ds-formSectionStack-sectionRadius: 14px; /* Corner radius of each form section card — brand-configurable, matches card radius */
  --ds-formSectionStack-sectionGap: 16px; /* Gap between elements inside a form section (label, fields, help text) */
  --ds-formSectionStack-sectionBackground: #FFFDF2; /* Background of each form section card */
  --ds-formSectionStack-sectionBorder: #64748B; /* Border color of each form section card */

  /* gauge */
  --ds-gauge-valueArc: #2563EB; /* Value arc color (default; thresholds may override per instance) */
  --ds-gauge-trackArc: #E2E8F0; /* Track (remainder) arc color (matches the shipped gauge) */
  --ds-gauge-arcWidth: 12px; /* Arc stroke width — 12px */
  --ds-gauge-arcCornerRadius: 9999px; /* Arc line-cap rounding — full (round caps) */
  --ds-gauge-valueLabel: #0F172A; /* Center value text color */
  --ds-gauge-unitLabel: #475569; /* Center unit/caption text color */

  /* heading */
  --ds-heading-accentRuleColor: #365F56; /* Leading accent rule colour on an accent-ruled section heading */
  --ds-heading-accentRuleWidth: 2px; /* Leading accent rule thickness — 2px */
  --ds-heading-accentRuleGap: 16px; /* Gap between the accent rule and the title/subtitle group — 16px */
  --ds-heading-accentRuleRadius: 0px; /* Corner radius on the accent rule. 0 by default (a square rule, the DS look). The rule paints as a positioned pseudo-element rather than a border precisely so this — and a gradient in accentRuleColor — are expressible; a border-inline-start can be neither rounded nor gradient-filled */

  /* infoBanner */
  --ds-infoBanner-container: #BFDBFE; /* Banner background — light blue tint */
  --ds-infoBanner-onContainer: #172554; /* Banner text color — dark blue for contrast */
  --ds-infoBanner-iconColor: #2563EB; /* Leading icon color — blue */
  --ds-infoBanner-iconSize: 16px; /* Icon size — 16px, compact */
  --ds-infoBanner-radius: 8px; /* Banner border radius — brand-configurable (default 8px) */
  --ds-infoBanner-paddingX: 16px; /* Horizontal padding — 16px */
  --ds-infoBanner-paddingY: 8px; /* Vertical padding — 8px, compact single-line */
  --ds-infoBanner-gap: 8px; /* Gap between icon and text — 8px */
  --ds-infoBanner-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-infoBanner-typography-font-size: 14px;
  --ds-infoBanner-typography-font-weight: 400;
  --ds-infoBanner-typography-line-height: 1.5;
  --ds-infoBanner-tipContainer: #C9E3DD; /* Tip appearance background — light primary tint (previously a fallback-only var) */
  --ds-infoBanner-tipIconColor: #365F56; /* Tip appearance leading icon color — brand primary (previously a fallback-only var) */
  --ds-infoBanner-tipOnContainer: #142421; /* Tip appearance message text — dark on-primary-container for contrast (previously a fallback-only var) */

  /* input */
  --ds-input-container: #FFFDF2; /* Input background color */
  --ds-input-containerDisabled: #FDF8E9; /* Input background when disabled */
  --ds-input-border: #64748B; /* Default border color */
  --ds-input-borderAccent: #365F56; /* Resting border colour for a brand-accented field (DsTextField/DsSelect `accent`). GAP-FIELD-ACCENT-BORDER: the field had only default/hover/focus/error/disabled border states, so a brand-toned outlined input had no seam — re-pointing `input.border` at an ancestor was the only route and `borderHover` overrode it on hover anyway. Focus and error still outrank this */
  --ds-input-borderHover: #365F56; /* Border on hover — brand primary (Q14/CMP-02: the sticker sheet showed no hover, so MEADOW signed off border→primary, previewing the focus color) */
  --ds-input-borderFocus: #365F56; /* Border when focused - brand primary */
  --ds-input-borderError: #9E3B1B; /* Border in error state */
  --ds-input-borderDisabled: #E2E8F0; /* Border when disabled - faded */
  --ds-input-borderWidth: 1px; /* Default border width - 1px */
  --ds-input-borderWidthFocus: 2px; /* Border thickness when focused - 2px */
  --ds-input-text: #0F172A; /* Input text color */
  --ds-input-textDisabled: #64748B; /* Input text when disabled */
  --ds-input-placeholder: #64748B; /* Placeholder text color */
  --ds-input-paddingX: 12px; /* Horizontal padding inside input - 12px */
  --ds-input-paddingY: 8px; /* Vertical padding inside input - 8px */
  --ds-input-radius: 8px; /* Input border radius — brand-configurable */
  --ds-input-minHeight: 44px; /* Minimum height for touch target - brand configurable */
  --ds-input-minHeightDense: 32px; /* Dense-variant control minimum height — 32px (matches the previous var(--ds-space-xl) fallback in DsSelect/DsTextField dense mode; previously a fallback-only var) */
  --ds-input-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-input-typography-font-size: 16px;
  --ds-input-typography-font-weight: 400;
  --ds-input-typography-line-height: 1.5;
  --ds-input-label: #0F172A; /* Field label color above the input (previously a fallback-only var in the field wrappers) */
  --ds-input-labelFontSize: 14px; /* Field label type size — 14px (previously a fallback-only var) */
  --ds-input-labelFontWeight: 500; /* Field label weight — brand medium (500) */
  --ds-input-labelGap: 6px; /* Gap between the label and the input — 6px */
  --ds-input-search-container: #FDF8E9; /* Search field background — subtle fill, not a white input */
  --ds-input-search-containerHover: #E2E8F0; /* Background on hover */
  --ds-input-search-containerFocus: #FFFDF2; /* Background when focused — lifts to surface */
  --ds-input-search-border: #E2E8F0; /* Border color — subtle */
  --ds-input-search-minHeight: 40px; /* Minimum height — standard control height */
  --ds-input-search-gap: 8px; /* Gap between icon, input, and clear button */
  --ds-input-search-iconColor: #64748B; /* Magnifier and clear icon color */
  --ds-input-search-iconSize: 20px; /* Icon box size — 20px */

  /* link */
  --ds-link-color: #365F56; /* Default link color (brand-overridable; MEADOW stays #2c6129 per Q9) */
  --ds-link-colorHover: #2C4F47; /* Link hover color */
  --ds-link-colorActive: #223E38; /* Link active/pressed color */
  --ds-link-colorVisited: #223E38; /* Visited link color - slightly darker primary */
  --ds-link-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-link-typography-font-size: 16px;
  --ds-link-typography-font-weight: 400;
  --ds-link-typography-line-height: 1.5;

  /* listBox */
  --ds-listBox-container: #FFFDF2; /* Listbox background */
  --ds-listBox-border: #E2E8F0; /* Listbox border color */
  --ds-listBox-borderWidth: 1px; /* Listbox border width — 1px */
  --ds-listBox-radius: 10px; /* Listbox corner radius — 10px */
  --ds-listBox-optionText: #0F172A; /* Option label text color */
  --ds-listBox-optionHoverContainer: #E2E8F0; /* Option background on hover */
  --ds-listBox-optionSelectedContainer: #C9E3DD; /* Selected option background — subtle brand tint */
  --ds-listBox-optionSelectedText: #365F56; /* Selected option text color */

  /* logo */
  --ds-logo-color: #365F56; /* Logo fill color — brand primary. Drives the monochrome (pos/neg) lockup via currentColor: resolves to the brand primary on light surfaces, flips to onPrimary on dark. */
  --ds-logo-colorOriginal: #C1D6B0; /* MEADOW 'original' two-tone lockup — light-green container fill (glyphs stay white). Literal brand-asset color from Figma Main Logo 838:95642 / area logos 838:95427; not a scale step, so it lives here rather than in the closed brand palette contract. Re-seat into a brand primitive if MEADOW formalizes a light-green slot. */
  --ds-logo-height: 40px; /* Logo height constraint — 36px default */
  --ds-logo-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-logo-typography-font-size: 20px;
  --ds-logo-typography-font-weight: 700;
  --ds-logo-typography-line-height: 1.375;

  /* media */
  --ds-media-container: #F7F0DC; /* Placeholder fallback background — neutral surface tint (same family as DsThumbnail) */
  --ds-media-onContainer: #475569; /* Placeholder glyph/label color — muted on the neutral container */
  --ds-media-border: #E2E8F0; /* Thin ring for contrast against surrounding surfaces */
  --ds-media-borderWidth: 1px; /* Ring width — 1px */
  --ds-media-glyphSize: 24px; /* Centered fallback glyph/icon size — 24px */
  --ds-media-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-media-labelTypography-font-size: 14px;
  --ds-media-labelTypography-font-weight: 400;
  --ds-media-labelTypography-line-height: 1.5;
  --ds-media-placeholderGap: 4px; /* Gap between the centered glyph and label */
  --ds-media-placeholderPadding: 16px; /* Inner padding around the centered glyph/label so long captions don't touch the frame edge */
  --ds-media-cornerInset: 8px; /* Distance each corner slot sits from the frame edge */

  /* menu */
  --ds-menu-container: #FFFDF2; /* Menu surface background */
  --ds-menu-containerRadius: 14px; /* Menu corner radius */
  --ds-menu-elevation: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Menu elevation — above popovers, below modals */
  --ds-menu-minWidth: 160px; /* Minimum menu width so single-word items don't crowd */
  --ds-menu-maxHeight: 320px; /* Maximum menu height before scrolling kicks in */
  --ds-menu-itemContainer: transparent; /* Default menu-item background */
  --ds-menu-itemContainerHover: #E2E8F0; /* Hovered menu-item background */
  --ds-menu-itemContainerSelected: #C9E3DD; /* Selected menu-item background — subtle brand tint */
  --ds-menu-itemText: #0F172A; /* Menu-item text color */
  --ds-menu-itemTextSelected: #365F56; /* Selected menu-item text color */
  --ds-menu-itemPaddingX: 16px; /* Menu-item horizontal padding — 16px */
  --ds-menu-itemPaddingY: 8px; /* Menu-item vertical padding — 8px; tighter than Button */
  --ds-menu-itemGap: 8px; /* Gap between icon and label inside a menu item */
  --ds-menu-dividerColor: #E2E8F0; /* Divider between item groups */
  --ds-menu-dividerSpacing: 4px; /* Vertical spacing around a divider */

  /* modal */
  --ds-modal-overlay: rgba(0, 0, 0, 0.5); /* Modal backdrop using scrim overlay */
  --ds-modal-container: #FFFDF2; /* Modal container background — white */
  --ds-modal-containerRadius: 14px; /* Modal container border radius — brand-configurable (default 14px for popup modals, 0 for full-screen) */
  --ds-modal-minWidth: 192px; /* Minimum modal width - 192px */
  --ds-modal-maxWidth: 640px; /* Maximum modal width for readability */
  --ds-modal-elevation: 0px 16px 32px 0px rgba(0,0,0,0.16); /* Highest elevation for modals */
  --ds-modal-headerContainer: #FFFDF2; /* Modal header bar background */
  --ds-modal-headerBorder: #E2E8F0; /* Header bottom border separator */
  --ds-modal-headerPaddingX: 24px; /* Header horizontal padding — 24px */
  --ds-modal-headerPaddingY: 16px; /* Header vertical padding — 16px */
  --ds-modal-headerGap: 8px; /* Gap between header items — 8px */
  --ds-modal-closeColor: #475569; /* Close button icon color */
  --ds-modal-closeSize: 20px; /* Close button icon size — 20px */
  --ds-modal-closeButtonSize: 34px; /* Close button hit-area box — 34×34 (Figma 265:1093). BF-17 AUDIT: 34px is OFF the 4px spacing grid (no primitive — the scale jumps space.8=32 → space.9=36), so it stays a literal rather than a {primitives.space.*} ref. Flagged for design to confirm 34 or snap to 32/36; passes the 24px AA target floor (A11Y-11) regardless. */
  --ds-modal-chromeBarHeight: 48px; /* ModalChromeShell bar height — exactly 48px (Figma 645:1160; vs AppBar 64px). BF-17: equals primitives.space.12, but kept a literal because component tokens must not reference {primitives.*} directly and there is no core/brand 48px size. Now tokenized (was a hardcoded 48px with a 'do not tokenize until BF-17 lands' note). */
  --ds-modal-contentBackground: #FDF8E9; /* Scrollable content area background — subtle gray behind form cards */
  --ds-modal-contentPaddingX: 32px; /* Content area horizontal padding — 32px */
  --ds-modal-contentPaddingY: 24px; /* Content area vertical padding — 24px */
  --ds-modal-contentGap: 16px; /* Gap between content cards — 16px */
  --ds-modal-contentMaxWidth: 768px; /* Max width for form content within modal — 768px */
  --ds-modal-titleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-modal-titleTypography-font-size: 20px;
  --ds-modal-titleTypography-font-weight: 700;
  --ds-modal-titleTypography-line-height: 1.375;
  --ds-modal-bodyTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-modal-bodyTypography-font-size: 16px;
  --ds-modal-bodyTypography-font-weight: 400;
  --ds-modal-bodyTypography-line-height: 1.5;

  /* modalChromeShell */
  --ds-modalChromeShell-container: #FFFDF2; /* Shell background — bound to components/card/container for brand/mode reactivity (645:1160) */
  --ds-modalChromeShell-border: #E2E8F0; /* Shell border color — bound to components/card/border but rendered at 0 width (no divider below the shell per 645:1160) */
  --ds-modalChromeShell-height: 48px; /* Shell height — exactly 48px (vs AppBar 64px), aliases modal.chromeBarHeight (BF-17) */
  --ds-modalChromeShell-paddingX: 24px; /* Horizontal padding between shell edge and logo / user badge — 24px */
  --ds-modalChromeShell-circleSize: 20px; /* Compact stepper circle diameter — 20px per Stepper/Compact 644:1876; literal because component tokens may not reference {primitives.*} and the compact circle is a fixed chrome dimension, not a brand control size */
  --ds-modalChromeShell-circleFontSize: 11px; /* Step number size — fits a digit in the 20px compact circle; literal, no core type step matches */
  --ds-modalChromeShell-circleBorder: #E2E8F0; /* Pending step circle border (Stepper/Compact 644:1876: pending=outlineVariant) */
  --ds-modalChromeShell-onCircle: #475569; /* Pending step number color */
  --ds-modalChromeShell-circleContainerActive: #365F56; /* Active step circle fill (active=primary) */
  --ds-modalChromeShell-onCircleActive: #FFFFFF; /* Active step number color */
  --ds-modalChromeShell-circleContainerComplete: #15803D; /* Complete step circle fill (done=success) */
  --ds-modalChromeShell-onCircleComplete: #FFFFFF; /* Complete step number color */
  --ds-modalChromeShell-connectorLength: 24px; /* Connector length between step circles — 24px */
  --ds-modalChromeShell-connectorThickness: 2px; /* Connector thickness — 2px, mirrors stepper.connectorHeight */
  --ds-modalChromeShell-connectorColor: #E2E8F0; /* Pending connector color */
  --ds-modalChromeShell-connectorColorComplete: #15803D; /* Complete connector color */

  /* moduleCard */
  --ds-moduleCard-container: #FFFDF2; /* Card background — white */
  --ds-moduleCard-border: #E2E8F0; /* Card border */
  --ds-moduleCard-borderWidth: 1px; /* Card border — 1px */
  --ds-moduleCard-radius: 14px; /* Card corner radius — brand-configurable (default 14px) */
  --ds-moduleCard-padding: 24px; /* Card inner padding — 24px */
  --ds-moduleCard-gap: 16px; /* Gap between major sections — 16px */
  --ds-moduleCard-elevation: 0px 1px 3px 0px rgba(0,0,0,0.06); /* Subtle card shadow */
  --ds-moduleCard-headerIconSize: 24px; /* Module icon size in header — 24px (use Icon component) */
  --ds-moduleCard-headerGap: 8px; /* Gap between icon and title — 8px */
  --ds-moduleCard-titleColor: #0F172A; /* Module name text — bold black */
  --ds-moduleCard-titleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-moduleCard-titleTypography-font-size: 20px;
  --ds-moduleCard-titleTypography-font-weight: 700;
  --ds-moduleCard-titleTypography-line-height: 1.375;
  --ds-moduleCard-relevanceContainer: #F8F5FA; /* Warm-violet tinted background strip behind Relevant? Ja/Nej */
  --ds-moduleCard-relevanceRadius: 10px; /* Relevance area corner radius — 10px */
  --ds-moduleCard-relevancePaddingX: 16px; /* Relevance area horizontal padding — 16px */
  --ds-moduleCard-relevancePaddingY: 8px; /* Relevance area vertical padding — 8px */
  --ds-moduleCard-descriptionColor: #0F172A; /* Module description text */
  --ds-moduleCard-descriptionTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-moduleCard-descriptionTypography-font-size: 14px;
  --ds-moduleCard-descriptionTypography-font-weight: 400;
  --ds-moduleCard-descriptionTypography-line-height: 1.5;
  --ds-moduleCard-exampleColor: #64748B; /* Example text — muted gray ('EKSEMPLER: ...') */
  --ds-moduleCard-exampleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-moduleCard-exampleTypography-font-size: 12px;
  --ds-moduleCard-exampleTypography-font-weight: 400;
  --ds-moduleCard-exampleTypography-line-height: 1.5;
  --ds-moduleCard-finePrintFontSize: 11px; /* Fine-print type size for example body and warning text (React twin) — literal 11px, no core step between fontSize.xs (10px) and fontSize.sm (12px); the Blazor twin uses the 12px caption composites (pre-existing PARITY divergence, each kept pixel-neutral) */
  --ds-moduleCard-checklistGap: 6px; /* Gap between checklist items — 6px */
  --ds-moduleCard-checkIconComplete: #15803D; /* Completed checklist item icon — green checkmark */
  --ds-moduleCard-checkIconPending: #64748B; /* Pending checklist item icon — gray circle */
  --ds-moduleCard-checkTextComplete: #0F172A; /* Completed checklist item text — regular weight */
  --ds-moduleCard-checkTextPending: #475569; /* Pending checklist item text — muted */
  --ds-moduleCard-checkIconSize: 16px; /* Checklist icon size — 16px */
  --ds-moduleCard-checkGap: 8px; /* Gap between check icon and text — 8px */
  --ds-moduleCard-checkTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-moduleCard-checkTypography-font-size: 14px;
  --ds-moduleCard-checkTypography-font-weight: 400;
  --ds-moduleCard-checkTypography-line-height: 1.5;
  --ds-moduleCard-warningColor: #9E3B1B; /* Warning text at bottom — red ('Mangler påkrævede felter') */
  --ds-moduleCard-warningIconColor: #9E3B1B; /* Warning icon — red triangle */
  --ds-moduleCard-warningTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-moduleCard-warningTypography-font-size: 12px;
  --ds-moduleCard-warningTypography-font-weight: 400;
  --ds-moduleCard-warningTypography-line-height: 1.5;
  --ds-moduleCard-progressTrack: #E2E8F0; /* Progress strip background — light gray track */
  --ds-moduleCard-progressFill: #15803D; /* Progress strip fill — green to show completion */
  --ds-moduleCard-progressHeight: 4px; /* Progress strip height — thin bar at card bottom */
  --ds-moduleCard-gridColumns: 3; /* Number of columns in hub card grid */
  --ds-moduleCard-gridGap: 24px; /* Gap between module cards in grid — 24px */

  /* moduleSidebar */
  --ds-moduleSidebar-container: #FDF8E9; /* Rail background — variant surface, one tint off the page */
  --ds-moduleSidebar-border: #E2E8F0; /* Rail edge border and the header/footer section dividers */
  --ds-moduleSidebar-borderWidth: 1px; /* Border/divider width — 1px */
  --ds-moduleSidebar-width: 240px; /* Rail width. Live app measures ~220–250px; 240px is the confirmed shell value. Bespoke — no core.size step fits a nav rail */
  --ds-moduleSidebar-paddingY: 16px; /* Rail top/bottom padding — 16px */
  --ds-moduleSidebar-sectionPaddingX: 24px; /* Horizontal padding of the header (brand) and footer (user) sections — 24px */
  --ds-moduleSidebar-sectionGap: 16px; /* Vertical rhythm around the section dividers — header padding-bottom + gap to nav, footer padding-top — 16px */
  --ds-moduleSidebar-navPaddingX: 8px; /* Horizontal inset of the nav list — 8px, so item hover/active fills stay inside the rail */
  --ds-moduleSidebar-itemGap: 2px; /* Vertical gap between nav items. Bespoke — sits between core.space.hairline (1px) and xs (4px); no scale step fits */
  --ds-moduleSidebar-itemPaddingX: 16px; /* Nav item horizontal padding — 16px */
  --ds-moduleSidebar-itemPaddingY: 10px; /* Nav item vertical padding — 10px (compact control padding) */
  --ds-moduleSidebar-itemRadius: 8px; /* Nav item corner radius */
  --ds-moduleSidebar-itemIconGap: 8px; /* Gap between a nav item's icon and its label — 8px */
  --ds-moduleSidebar-itemColor: #0F172A; /* Nav item label color — default state */
  --ds-moduleSidebar-itemIconColor: #64748B; /* Nav item icon color — default state, muted below the label */
  --ds-moduleSidebar-itemHover: #F7F0DC; /* Nav item hover fill — one neutral step above the surfaceVariant rail (the rail already sits on the variant tint, so containerHover would be two steps) */
  --ds-moduleSidebar-itemActive: #C9E3DD; /* Active (current-page) nav item fill — light primary tint */
  --ds-moduleSidebar-onItemActive: #365F56; /* Active nav item label + icon color. Matches the app shell role (primary on primaryContainer). NOTE: components.navigation moved its equivalent to onPrimaryContainer for WCAG AA — if a brand's primary fails 4.5:1 on primaryContainer, retarget this the same way */
  --ds-moduleSidebar-itemTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-moduleSidebar-itemTypography-font-size: 14px;
  --ds-moduleSidebar-itemTypography-font-weight: 400;
  --ds-moduleSidebar-itemTypography-line-height: 1.5;

  /* navigation */
  --ds-navigation-container: #FFFDF2; /* Navigation bar background */
  --ds-navigation-border: #E2E8F0; /* Bottom border separating nav from content */
  --ds-navigation-brandColor: #166534; /* Brand mark / logo text color — dark green, WCAG AA on white (7:1). Uses core.color.successStrong instead of core.color.success which fails text-on-surface contrast. */
  --ds-navigation-brandTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-navigation-brandTypography-font-size: 20px;
  --ds-navigation-brandTypography-font-weight: 700;
  --ds-navigation-brandTypography-line-height: 1.375;
  --ds-navigation-height: 64px; /* Navigation bar height - 64px */
  --ds-navigation-paddingX: 24px; /* Horizontal padding inside nav bar */
  --ds-navigation-itemColor: #475569; /* Default nav item text color */
  --ds-navigation-itemColorHover: #0F172A; /* Nav item text on hover */
  --ds-navigation-itemHover: #E2E8F0; /* Nav item background on hover — subtle fill */
  --ds-navigation-itemActive: #C9E3DD; /* Active nav item background */
  --ds-navigation-onItemActive: #142421; /* Active nav item text — dark primary, WCAG AA on primarySubtle bg. Was core.color.primary (3.19:1 fail); onPrimaryContainer hits ~8:1. */
  --ds-navigation-itemPaddingX: 12px; /* Horizontal padding per nav item - 12px */
  --ds-navigation-itemPaddingY: 8px; /* Vertical padding per nav item - 8px */
  --ds-navigation-itemRadius: 8px; /* Nav item border radius — brand-configurable */
  --ds-navigation-itemGap: 4px; /* Gap between nav items - 4px */
  --ds-navigation-itemTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-navigation-itemTypography-font-size: 16px;
  --ds-navigation-itemTypography-font-weight: 700;
  --ds-navigation-itemTypography-line-height: 1.5;
  --ds-navigation-companyBadgeContainer: #F7F0DC; /* Company badge pill background in nav — light gray */
  --ds-navigation-companyBadgeText: #0F172A; /* Company name text color */
  --ds-navigation-companyBadgeSubtext: #475569; /* Company subtitle (CVR number) text color */
  --ds-navigation-companyBadgeRadius: 10px; /* Company badge border radius */
  --ds-navigation-companyBadgePaddingX: 12px; /* Company badge horizontal padding — 12px */
  --ds-navigation-companyBadgePaddingY: 8px; /* Company badge vertical padding — 8px */
  --ds-navigation-companyBadgeGap: 8px; /* Gap between avatar and text — 8px */
  --ds-navigation-companyAvatarSize: 32px; /* Company avatar circle size — 32px */
  --ds-navigation-companyAvatarContainer: #365F56; /* Company avatar circle background — brand primary */

  /* numberInput */
  --ds-numberInput-stepperButtonSize: 28px; /* Default stepper button size — brand-configurable via controlSm */
  --ds-numberInput-stepperButtonSizeCompact: 16px; /* Compact stepper button size for table-cell usage — fits in ~24px row height */
  --ds-numberInput-stepperButtonContainer: #FFFDF2; /* Stepper button background */
  --ds-numberInput-stepperButtonContainerHover: #E2E8F0; /* Stepper button hover background */
  --ds-numberInput-stepperButtonContainerPressed: #C9E3DD; /* Stepper button pressed background — subtle brand tint */
  --ds-numberInput-stepperButtonIcon: #475569; /* Stepper button chevron icon color */
  --ds-numberInput-stepperDividerColor: #E2E8F0; /* Divider between the input and stepper column, and between the two stepper buttons */
  --ds-numberInput-paddingX: 8px; /* Horizontal padding inside the numeric cell — tighter than text input */
  --ds-numberInput-paddingXCompact: 4px; /* Compact variant horizontal padding */

  /* outline */
  --ds-outline-indicatorColor: #365F56; /* Left indicator bar color marking the active item — brand primary */
  --ds-outline-indicatorWidth: 2px; /* Left indicator bar / rail width — 2px */
  --ds-outline-railColor: #E2E8F0; /* Inactive rail (full-height track behind the indicator) color — subtle divider */
  --ds-outline-itemColor: #475569; /* Default (inactive) item link text color */
  --ds-outline-itemColorHover: #0F172A; /* Item link text color on hover */
  --ds-outline-itemColorActive: #365F56; /* Active item link text color — matches the indicator bar */
  --ds-outline-itemPaddingX: 16px; /* Horizontal padding per item — space between rail and label, 16px */
  --ds-outline-itemPaddingY: 8px; /* Vertical padding per item (default density) — 8px */
  --ds-outline-itemPaddingYCompact: 4px; /* Vertical padding per item (compact density) — 4px */
  --ds-outline-indent: 16px; /* Left indent applied per nested `level` step — 16px */
  --ds-outline-itemRadius: 2px; /* Item hover/active background corner radius */

  /* pageHeader */
  --ds-pageHeader-container: #FFFDF2; /* Page header background */
  --ds-pageHeader-borderBottom: #E2E8F0; /* Bottom border separating header from content */
  --ds-pageHeader-borderBottomWidth: 1px; /* Bottom border width — 1px */
  --ds-pageHeader-paddingX: 14px; /* Horizontal padding */
  --ds-pageHeader-paddingY: 12px; /* Vertical padding */
  --ds-pageHeader-stackGap: 16px; /* Vertical gap between breadcrumb, title row, and tab row */
  --ds-pageHeader-titleColor: #0F172A; /* Title text color */
  --ds-pageHeader-titleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-pageHeader-titleTypography-font-size: 36px;
  --ds-pageHeader-titleTypography-font-weight: 700;
  --ds-pageHeader-titleTypography-line-height: 1.1;
  --ds-pageHeader-titleRowGap: 16px; /* Horizontal gap between title, entityId, meta chips, actions within the title row */
  --ds-pageHeader-entityIdColor: #475569; /* Entity id color — muted */
  --ds-pageHeader-entityIdTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-pageHeader-entityIdTypography-font-size: 16px;
  --ds-pageHeader-entityIdTypography-font-weight: 400;
  --ds-pageHeader-entityIdTypography-line-height: 1.5;
  --ds-pageHeader-titleToMetaGap: 8px; /* Gap between title+id and the meta chip strip */

  /* pagination */
  --ds-pagination-container: #FFFDF2; /* Pagination footer background */
  --ds-pagination-onContainer: #0F172A; /* Pagination text color (range label, page size) */
  --ds-pagination-border: #E2E8F0; /* Top border separating pagination from content */
  --ds-pagination-borderWidth: 1px; /* Top border width — 1px */
  --ds-pagination-minHeight: 40px; /* Minimum footer height */
  --ds-pagination-paddingX: 12px; /* Horizontal padding inside the footer */
  --ds-pagination-paddingY: 10px; /* Vertical padding inside the footer */
  --ds-pagination-gap: 16px; /* Gap between the rows-per-page group, the range label, and the nav buttons */
  --ds-pagination-navButtonColor: #475569; /* Prev/next icon button color */
  --ds-pagination-navButtonHover: #365F56; /* Prev/next icon button hover color */
  --ds-pagination-navButtonDisabled: #64748B; /* Prev/next disabled color */
  --ds-pagination-navButtonSize: 28px; /* Prev/next hit target size */
  --ds-pagination-navButtonSizeSmall: 28px; /* Compact-density prev/next hit target — 28px (previously a fallback-only var) */
  --ds-pagination-navButtonSizeLarge: 44px; /* Touch-density prev/next hit target — 44px (previously a fallback-only var) */
  --ds-pagination-labelColor: #475569; /* Range and 'Rows per page' label color */
  --ds-pagination-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-pagination-labelTypography-font-size: 12px;
  --ds-pagination-labelTypography-font-weight: 700;
  --ds-pagination-labelTypography-line-height: 1.5;

  /* panelBar */
  --ds-panelBar-container: #FFFDF2; /* Panel background */
  --ds-panelBar-headerBg: #F7F0DC; /* Top-level header background */
  --ds-panelBar-headerBgHover: #E2E8F0; /* Header hover */
  --ds-panelBar-headerText: #0F172A; /* Header text */
  --ds-panelBar-childHeaderBg: #FFFDF2; /* Nested child header background */
  --ds-panelBar-childHeaderText: #475569; /* Nested child header text */
  --ds-panelBar-contentText: #475569; /* Leaf content text */
  --ds-panelBar-border: #E2E8F0; /* Panel border */
  --ds-panelBar-icon: #475569; /* Expand/collapse chevron */
  --ds-panelBar-borderWidth: 1px; /* Border width — 1px */
  --ds-panelBar-radius: 14px; /* Outer corner radius */
  --ds-panelBar-paddingX: 14px; /* Horizontal padding */
  --ds-panelBar-paddingY: 16px; /* Vertical padding */
  --ds-panelBar-indentStep: 24px; /* Left indent per nesting level */
  --ds-panelBar-headerTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-panelBar-headerTypography-font-size: 16px;
  --ds-panelBar-headerTypography-font-weight: 700;
  --ds-panelBar-headerTypography-line-height: 1.5;
  --ds-panelBar-childTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-panelBar-childTypography-font-size: 14px;
  --ds-panelBar-childTypography-font-weight: 700;
  --ds-panelBar-childTypography-line-height: 1.5;

  /* picker */
  --ds-picker-day-container: #FFFDF2; /* Day cell background */
  --ds-picker-day-onContainer: #0F172A; /* Day cell text */
  --ds-picker-day-containerHover: #F7F0DC; /* Day cell hover background */
  --ds-picker-day-containerSelected: #365F56; /* Selected day background */
  --ds-picker-day-onContainerSelected: #FFFFFF; /* Selected day text */
  --ds-picker-day-containerDisabled: #FFFDF2; /* Disabled day background */
  --ds-picker-day-onContainerDisabled: #64748B; /* Disabled/outside-month day text */
  --ds-picker-day-todayRing: #365F56; /* Today indicator ring color */
  --ds-picker-day-size: 40px; /* Day cell hit target — control-md (36px starter) */
  --ds-picker-day-radius: 9999px; /* Day cell shape — circular */
  --ds-picker-month-container: #FFFDF2; /* Month/year grid cell background */
  --ds-picker-month-onContainer: #0F172A; /* Month/year cell text */
  --ds-picker-month-containerSelected: #C9E3DD; /* Selected month/year background */
  --ds-picker-month-onContainerSelected: #142421; /* Selected month/year text */
  --ds-picker-month-radius: 8px; /* Month/year cell corner radius */
  --ds-picker-toolbar-container: #FDF8E9; /* Picker header/toolbar background */
  --ds-picker-toolbar-onContainer: #0F172A; /* Toolbar title text */
  --ds-picker-toolbar-onContainerVariant: #475569; /* Toolbar secondary text (weekday row, nav chevrons) */
  --ds-picker-actionbar-container: #FFFDF2; /* Action bar (Cancel/OK) background */
  --ds-picker-actionbar-gap: 8px; /* Gap between action buttons */
  --ds-picker-actionbar-paddingY: 8px; /* Action bar vertical padding */
  --ds-picker-shortcut-container: #FDF8E9; /* Shortcut chip background (Today / Last 7 days) */
  --ds-picker-shortcut-onContainer: #475569; /* Shortcut chip text */
  --ds-picker-shortcut-containerHover: #F7F0DC; /* Shortcut chip hover */
  --ds-picker-range-spanContainer: #C9E3DD; /* In-range day span background */
  --ds-picker-range-onSpanContainer: #0F172A; /* In-range day text */
  --ds-picker-clock-container: #FDF8E9; /* Clock face / digital column background */
  --ds-picker-clock-onContainer: #0F172A; /* Clock digits text */
  --ds-picker-clock-handColor: #365F56; /* Analog hand / selected digit accent */
  --ds-picker-clock-optionSelected: #365F56; /* Selected time option background */
  --ds-picker-clock-onOptionSelected: #FFFFFF; /* Selected time option text */

  /* popover */
  --ds-popover-container: #FFFDF2; /* Popover background */
  --ds-popover-border: #E2E8F0; /* Popover border */
  --ds-popover-headerText: #0F172A; /* Header text color */
  --ds-popover-bodyText: #475569; /* Body text color */
  --ds-popover-shadow: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Popover elevation shadow */
  --ds-popover-radius: 14px; /* Corner radius */
  --ds-popover-borderWidth: 1px; /* Border thickness — 1px */
  --ds-popover-padding: 12px; /* Content padding */
  --ds-popover-maxWidth: 320px; /* Maximum width */
  --ds-popover-gap: 8px; /* Gap between header/body/actions */
  --ds-popover-arrowSize: 8px; /* Arrow pointer size */
  --ds-popover-headerTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-popover-headerTypography-font-size: 16px;
  --ds-popover-headerTypography-font-weight: 700;
  --ds-popover-headerTypography-line-height: 1.5;
  --ds-popover-bodyTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-popover-bodyTypography-font-size: 14px;
  --ds-popover-bodyTypography-font-weight: 400;
  --ds-popover-bodyTypography-line-height: 1.5;

  /* progressBar */
  --ds-progressBar-track: #F7F0DC; /* Background track color — unfilled portion */
  --ds-progressBar-fill: #365F56; /* Default fill color — can be overridden contextually with module/area color */
  --ds-progressBar-fillComplete: #15803D; /* Fill color when progress = 100% — switches to success green */
  --ds-progressBar-height: 6px; /* Default track height 6px */
  --ds-progressBar-heightCard: 4px; /* Track height in card context — 4px (previously a fallback-only var in DsProgressBar CSS) */
  --ds-progressBar-heightModal: 3px; /* Track height in modal context — 3px (previously a fallback-only var) */
  --ds-progressBar-heightDashboard: 28px; /* Bar height in the dashboard context — 28px (previously a fallback-only var) */
  --ds-progressBar-radius: 2px; /* Track corner radius — subtle rounding */

  /* progressIndicator */
  --ds-progressIndicator-container: #FFFDF2; /* Summary card background — white card on page */
  --ds-progressIndicator-containerBorder: #E2E8F0; /* Summary card border */
  --ds-progressIndicator-containerRadius: 14px; /* Summary card border radius — brand-configurable, matches card radius */
  --ds-progressIndicator-containerPadding: 24px; /* Summary card padding — 24px */
  --ds-progressIndicator-containerGap: 8px; /* Gap between summary rows — 8px */
  --ds-progressIndicator-titleColor: #0F172A; /* Summary title text — 'Samlet fremskridt — 35%' */
  --ds-progressIndicator-titleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-progressIndicator-titleTypography-font-size: 14px;
  --ds-progressIndicator-titleTypography-font-weight: 700;
  --ds-progressIndicator-titleTypography-line-height: 1.5;
  --ds-progressIndicator-statsColor: #475569; /* Stats text — '2/5 besluttet · 0/1 konfigureret' */
  --ds-progressIndicator-statsTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-progressIndicator-statsTypography-font-size: 14px;
  --ds-progressIndicator-statsTypography-font-weight: 400;
  --ds-progressIndicator-statsTypography-line-height: 1.5;
  --ds-progressIndicator-dotSize: 8px; /* Status dot diameter — 8px */
  --ds-progressIndicator-barTrack: #FDF8E9; /* Progress bar track (empty portion) — muted surface */
  --ds-progressIndicator-barFill: #365F56; /* Progress bar fill (completed portion) — primary */
  --ds-progressIndicator-dotActive: #8A6A14; /* In-progress status dot — orange/yellow ('I gang') */
  --ds-progressIndicator-dotUndecided: #365F56; /* Undecided status dot — blue ('Ikke besluttet') */
  --ds-progressIndicator-dotIrrelevant: #64748B; /* Irrelevant status dot — gray ('Ikke relevant') */
  --ds-progressIndicator-dotComplete: #15803D; /* Completed status dot — green */
  --ds-progressIndicator-labelActive: #8A6A14; /* In-progress legend text */
  --ds-progressIndicator-labelUndecided: #365F56; /* Undecided legend text — blue */
  --ds-progressIndicator-labelIrrelevant: #64748B; /* Irrelevant legend text — gray */
  --ds-progressIndicator-labelComplete: #15803D; /* Completed legend text */
  --ds-progressIndicator-legendGap: 16px; /* Gap between legend items — 16px */
  --ds-progressIndicator-legendDotGap: 6px; /* Gap between dot and legend label — 6px */
  --ds-progressIndicator-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-progressIndicator-labelTypography-font-size: 12px;
  --ds-progressIndicator-labelTypography-font-weight: 400;
  --ds-progressIndicator-labelTypography-line-height: 1.5;

  /* progressOverview */
  --ds-progressOverview-itemGap: 4px; /* Gap between a step's indicator and its label — 4px */
  --ds-progressOverview-connectorThickness: 2px; /* Dot-connector thickness — 2px, mirrors stepper.connectorHeight */
  --ds-progressOverview-connectorMinLength: 16px; /* Minimum connector length between dots — 16px */
  --ds-progressOverview-segmentThickness: 6px; /* Bar-variant segment thickness — 6px; literal, between the 4px and 8px core space steps */
  --ds-progressOverview-segmentMinLength: 32px; /* Minimum segment length in vertical bar orientation — 32px */
  --ds-progressOverview-segmentRadius: 9999px; /* Bar segment pill radius (was a literal 999px — identical full-pill rendering) */

  /* progressSummary */
  --ds-progressSummary-container: #FFFDF2; /* Card background */
  --ds-progressSummary-border: #E2E8F0; /* Card border */
  --ds-progressSummary-borderWidth: 1px; /* Card border width — 1px */
  --ds-progressSummary-radius: 14px; /* Card corner radius */
  --ds-progressSummary-padding: 24px; /* Inner padding — 24px */
  --ds-progressSummary-gap: 8px; /* Gap between rows — 8px */
  --ds-progressSummary-elevation: 0px 1px 3px 0px rgba(0,0,0,0.06); /* Subtle card shadow */
  --ds-progressSummary-titleColor: #0F172A; /* Title text color */
  --ds-progressSummary-titleTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-progressSummary-titleTypography-font-size: 16px;
  --ds-progressSummary-titleTypography-font-weight: 700;
  --ds-progressSummary-titleTypography-line-height: 1.5;
  --ds-progressSummary-fractionColor: #64748B; /* Fraction text (2/5 · 0/1) — muted */
  --ds-progressSummary-fractionFontSize: 13px; /* Fraction text type size — literal 13px, between fontSize.sm (12px) and fontSize.md (14px); no core step matches */
  --ds-progressSummary-trackHeight: 8px; /* Progress bar track height */
  --ds-progressSummary-trackRadius: 9999px; /* Progress bar rounded ends */
  --ds-progressSummary-trackColor: #E2E8F0; /* Progress bar background track */
  --ds-progressSummary-fillColor: #365F56; /* Progress bar fill — brand primary */
  --ds-progressSummary-legendGap: 24px; /* Gap between legend items — 24px */
  --ds-progressSummary-legendItemGap: 6px; /* Gap between a legend dot and its label — 6px (brand tight gap) */
  --ds-progressSummary-legendDotSize: 8px; /* Legend status dot diameter */
  --ds-progressSummary-legendTextColor: #64748B; /* Legend label text */
  --ds-progressSummary-dotActive: #8A6A14; /* Active/in-progress legend dot — orange */
  --ds-progressSummary-dotUndecided: #365F56; /* Undecided legend dot — blue */
  --ds-progressSummary-dotIrrelevant: #64748B; /* Irrelevant legend dot — gray */

  /* radio */
  --ds-radio-circleSize: 20px; /* Radio circle outer diameter - 20px */
  --ds-radio-dotSize: 10px; /* Inner dot diameter when selected - 10px */
  --ds-radio-border: #64748B; /* Unselected radio border */
  --ds-radio-borderHover: #365F56; /* Radio border on hover */
  --ds-radio-borderSelected: #365F56; /* Selected radio border */
  --ds-radio-fill: #365F56; /* Selected radio inner dot color */
  --ds-radio-borderWidth: 2px; /* Radio circle border width - 2px */
  --ds-radio-groupGap: 12px; /* Vertical gap between radio options - 12px */
  --ds-radio-labelGap: 8px; /* Gap between radio circle and label text - 8px */
  --ds-radio-cardContainer: #FFFDF2; /* Radio card variant background - for billing method cards */
  --ds-radio-cardContainerSelected: #C9E3DD; /* Selected radio card background */
  --ds-radio-cardBorder: #64748B; /* Radio card border */
  --ds-radio-cardBorderSelected: #365F56; /* Selected radio card border - brand primary */
  --ds-radio-cardPadding: 16px; /* Radio card internal padding - 16px */
  --ds-radio-cardRadius: 10px; /* Radio card border radius */
  --ds-radio-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-radio-labelTypography-font-size: 16px;
  --ds-radio-labelTypography-font-weight: 400;
  --ds-radio-labelTypography-line-height: 1.5;
  --ds-radio-label: #0F172A; /* Radio option label color (previously a fallback-only var) */

  /* rating */
  --ds-rating-filled: #8A6A14; /* Filled star color — amber/gold */
  --ds-rating-empty: #E2E8F0; /* Empty star outline */
  --ds-rating-hovered: #E8C468; /* Star color on hover preview */
  --ds-rating-label: #475569; /* Optional value label text */
  --ds-rating-starSize: 24px; /* Individual star size */
  --ds-rating-gap: 4px; /* Gap between stars */
  --ds-rating-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-rating-labelTypography-font-size: 14px;
  --ds-rating-labelTypography-font-weight: 400;
  --ds-rating-labelTypography-line-height: 1.5;

  /* segmentedControl */
  --ds-segmentedControl-container: #F7F0DC; /* Outer track/container background — light gray */
  --ds-segmentedControl-containerBorder: #E2E8F0; /* Container border color */
  --ds-segmentedControl-containerBorderWidth: 1px; /* Container border width — 1px */
  --ds-segmentedControl-containerRadius: 9999px; /* Container outer radius — full pill */
  --ds-segmentedControl-containerPadding: 2px; /* Inner padding of track — 2px to give selected pill inset */
  --ds-segmentedControl-itemContainer: transparent; /* Unselected item background — transparent */
  --ds-segmentedControl-itemContainerSelected: #FFFDF2; /* Selected item background — white pill stands out from track */
  --ds-segmentedControl-itemContainerSelectedPositive: #15803D; /* Selected 'Ja' item — green filled pill */
  --ds-segmentedControl-itemContainerSelectedNegative: #9E3B1B; /* Selected 'Nej' item — red filled pill */
  --ds-segmentedControl-itemText: #475569; /* Unselected item text color */
  --ds-segmentedControl-itemTextSelected: #0F172A; /* Selected item text — neutral selected */
  --ds-segmentedControl-itemTextSelectedPositive: #FFFFFF; /* Selected 'Ja' text — white on green */
  --ds-segmentedControl-itemTextSelectedNegative: #FFFFFF; /* Selected 'Nej' text — white on red */
  --ds-segmentedControl-itemRadius: 9999px; /* Individual pill item radius — full */
  --ds-segmentedControl-itemPaddingX: 12px; /* Horizontal padding per pill — 12px */
  --ds-segmentedControl-itemPaddingY: 6px; /* Vertical padding per pill — 6px */
  --ds-segmentedControl-itemGap: 2px; /* Gap between pill items — 2px */
  --ds-segmentedControl-labelColor: #475569; /* Leading label text color ('Relevant?') */
  --ds-segmentedControl-labelGap: 8px; /* Gap between label and pill track — 8px */
  --ds-segmentedControl-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-segmentedControl-labelTypography-font-size: 14px;
  --ds-segmentedControl-labelTypography-font-weight: 400;
  --ds-segmentedControl-labelTypography-line-height: 1.5;
  --ds-segmentedControl-itemTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-segmentedControl-itemTypography-font-size: 14px;
  --ds-segmentedControl-itemTypography-font-weight: 700;
  --ds-segmentedControl-itemTypography-line-height: 1.5;
  --ds-segmentedControl-elevation: 0px 1px 3px 0px rgba(0,0,0,0.06); /* Subtle shadow on selected pill for depth */

  /* sideNav */
  --ds-sideNav-container: #FFFDF2; /* Panel background — the page surface */
  --ds-sideNav-border: #E2E8F0; /* Panel edge border and the section dividers */
  --ds-sideNav-borderWidth: 1px; /* Border/divider width — 1px */
  --ds-sideNav-width: 280px; /* Default expanded panel width. Bespoke — no core.size step fits a nav panel */
  --ds-sideNav-collapsedWidth: 64px; /* Panel width when collapsed to the icon-only rail */
  --ds-sideNav-minWidth: 200px; /* Minimum width when drag-to-resize is enabled */
  --ds-sideNav-maxWidth: 400px; /* Maximum width when drag-to-resize is enabled */
  --ds-sideNav-paddingY: 8px; /* Panel top/bottom padding — 8px */
  --ds-sideNav-paddingX: 8px; /* Panel horizontal padding — 8px, so item hover/active fills stay inset */
  --ds-sideNav-itemGap: 2px; /* Vertical gap between nav items. Bespoke — sits between hairline (1px) and xs (4px) */
  --ds-sideNav-itemPaddingX: 8px; /* Nav item horizontal padding — 8px */
  --ds-sideNav-itemPaddingY: 10px; /* Nav item vertical padding — 10px (compact control padding) */
  --ds-sideNav-itemRadius: 8px; /* Nav item corner radius */
  --ds-sideNav-itemIconGap: 8px; /* Gap between a nav item's icon and its label — 8px */
  --ds-sideNav-childIndent: 24px; /* Left indent applied per nesting level to nested (expandable) child items — 24px */
  --ds-sideNav-sectionGap: 16px; /* Vertical rhythm between grouped sections — 16px */
  --ds-sideNav-itemColor: #0F172A; /* Nav item label color — default state */
  --ds-sideNav-itemIconColor: #64748B; /* Nav item icon color — default state, muted below the label */
  --ds-sideNav-itemHover: #E2E8F0; /* Nav item hover fill */
  --ds-sideNav-itemActive: #C9E3DD; /* Active (current-page) nav item fill — light primary tint */
  --ds-sideNav-onItemActive: #142421; /* Active nav item label + icon color. Targets onPrimaryContainer for WCAG AA on the primaryContainer fill */
  --ds-sideNav-sectionHeadingColor: #475569; /* Section heading label color — muted, above a group of items */
  --ds-sideNav-badgeColor: #475569; /* Default end-content (badge) text color when a badge is a bare string */
  --ds-sideNav-toggleColor: #64748B; /* Collapse-toggle and expand-chevron icon color */
  --ds-sideNav-itemTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-sideNav-itemTypography-font-size: 14px;
  --ds-sideNav-itemTypography-font-weight: 400;
  --ds-sideNav-itemTypography-line-height: 1.5;

  /* slider */
  --ds-slider-track: #E2E8F0; /* Unfilled track background */
  --ds-slider-trackFill: #365F56; /* Filled portion of track */
  --ds-slider-thumb: #365F56; /* Thumb fill color */
  --ds-slider-thumbBorder: #FFFFFF; /* Thumb border/ring */
  --ds-slider-thumbHover: #2C4F47; /* Thumb on hover */
  --ds-slider-thumbActive: #223E38; /* Thumb while dragging */
  --ds-slider-thumbFocusRing: #C9E3DD; /* Focus ring around thumb */
  --ds-slider-tickMark: #64748B; /* Discrete step tick marks */
  --ds-slider-label: #475569; /* Min/max/current value label */
  --ds-slider-trackHeight: 4px; /* Track thickness */
  --ds-slider-thumbSize: 20px; /* Thumb diameter */
  --ds-slider-thumbRadius: 9999px; /* Thumb corner radius — circle */
  --ds-slider-trackRadius: 9999px; /* Track corner radius */
  --ds-slider-focusRingSize: 40px; /* Focus ring diameter */
  --ds-slider-focusRingWidth: 4px; /* Focus ring thickness around the thumb (box-shadow spread) — 4px halo around the 20px thumb */
  --ds-slider-rangeTrackMarginY: 14px; /* Vertical clearance around the range-mode track row — literal 14px so the 20px thumbs clear the 4px track and match single-mode overall height (4 + 2×14 = 32px) */
  --ds-slider-bubblePaddingY: 2px; /* Value bubble vertical padding — 2px */
  --ds-slider-bubblePaddingX: 6px; /* Value bubble horizontal padding — literal 6px, no core space step between xs (4px) and sm (8px) */
  --ds-slider-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-slider-labelTypography-font-size: 12px;
  --ds-slider-labelTypography-font-weight: 400;
  --ds-slider-labelTypography-line-height: 1.5;

  /* snackbar */
  --ds-snackbar-container: #0F172A; /* Default (inverse) snackbar background — dark surface for contrast against page content */
  --ds-snackbar-onContainer: #FFFDF2; /* Default (inverse) snackbar text — light on dark */
  --ds-snackbar-containerInfo: #2563EB; /* Info severity background */
  --ds-snackbar-onContainerInfo: #FFFDF2; /* Info severity text */
  --ds-snackbar-containerSuccess: #15803D; /* Success severity background */
  --ds-snackbar-onContainerSuccess: #FFFFFF; /* Success severity text */
  --ds-snackbar-containerWarning: #8A6A14; /* Warning severity background */
  --ds-snackbar-onContainerWarning: #FFFDF2; /* Warning severity text */
  --ds-snackbar-containerError: #9E3B1B; /* Error severity background */
  --ds-snackbar-onContainerError: #FFFFFF; /* Error severity text */
  --ds-snackbar-radius: 8px; /* Snackbar corner radius — 8px */
  --ds-snackbar-elevation: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Snackbar elevation — floats above page content, toast level */
  --ds-snackbar-paddingX: 24px; /* Horizontal padding — 24px */
  --ds-snackbar-paddingY: 8px; /* Vertical padding — 8px, compact single-line toast */
  --ds-snackbar-gap: 16px; /* Gap between message and action slot — 16px */
  --ds-snackbar-offset: 24px; /* Inset from the viewport edges (bottom + anchored side) — 24px */
  --ds-snackbar-minWidth: 288px; /* Minimum snackbar width — MUI snackbar minimum; literal because no core/brand size step matches */
  --ds-snackbar-maxWidth: 560px; /* Maximum snackbar width before the message wraps; literal because no core/brand size step matches */

  /* speedDial */
  --ds-speedDial-gap: 8px; /* Gap between the trigger and the action stack, and between actions */
  --ds-speedDial-labelContainer: #FFFDF2; /* Action-label chip background */
  --ds-speedDial-labelText: #0F172A; /* Action-label chip text color */
  --ds-speedDial-labelRadius: 2px; /* Action-label chip corner radius */
  --ds-speedDial-labelPaddingX: 8px; /* Action-label chip horizontal padding */
  --ds-speedDial-labelPaddingY: 2px; /* Action-label chip vertical padding */
  --ds-speedDial-labelElevation: 0px 4px 6px 0px rgba(0,0,0,0.08); /* Action-label chip elevation */

  /* split */
  --ds-split-gap: 24px; /* Gap between main and rail columns — 24px default */
  --ds-split-railWidthSm: 280px; /* Narrow rail — compact sidebars, mobile-first layouts */
  --ds-split-railWidthMd: 360px; /* Standard rail — Personal Details + Contact Info cards */
  --ds-split-railWidthLg: 440px; /* Wide rail — rich sidebars with activity feeds */

  /* splitButton */
  --ds-splitButton-container: #365F56; /* Button fill */
  --ds-splitButton-containerHover: #2C4F47; /* Hover fill */
  --ds-splitButton-containerActive: #223E38; /* Active/pressed fill */
  --ds-splitButton-onContainer: #FFFFFF; /* Text and icon color */
  --ds-splitButton-divider: #FFFFFF; /* Vertical divider between action and dropdown */
  --ds-splitButton-dividerOpacity: 0.25; /* Divider transparency — 25% */
  --ds-splitButton-menuContainer: #FFFDF2; /* Dropdown menu background */
  --ds-splitButton-menuBorder: #E2E8F0; /* Dropdown menu border */
  --ds-splitButton-menuItemHover: #E2E8F0; /* Menu item hover */
  --ds-splitButton-menuText: #0F172A; /* Menu item text */
  --ds-splitButton-radius: 8px; /* Button corner radius */
  --ds-splitButton-menuRadius: 14px; /* Menu corner radius */
  --ds-splitButton-paddingX: 14px; /* Horizontal padding */
  --ds-splitButton-paddingY: 8px; /* Vertical padding */
  --ds-splitButton-menuPaddingY: 4px; /* Menu vertical padding */
  --ds-splitButton-menuItemPaddingX: 14px; /* Menu item horizontal padding */
  --ds-splitButton-menuItemPaddingY: 8px; /* Menu item vertical padding */
  --ds-splitButton-menuShadow: 0px 4px 6px 0px rgba(0,0,0,0.08); /* Menu elevation shadow */
  --ds-splitButton-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-splitButton-typography-font-size: 16px;
  --ds-splitButton-typography-font-weight: 700;
  --ds-splitButton-typography-line-height: 1.5;

  /* splitter */
  --ds-splitter-container: #FFFDF2; /* Pane background */
  --ds-splitter-handleBg: #F7F0DC; /* Drag handle bar background */
  --ds-splitter-handleBgHover: #E2E8F0; /* Handle hover */
  --ds-splitter-handleIcon: #475569; /* Handle grip dots */
  --ds-splitter-border: #E2E8F0; /* Handle border */
  --ds-splitter-handleWidth: 8px; /* Handle bar thickness */
  --ds-splitter-handleRadius: 2px; /* Handle corner radius */
  --ds-splitter-minPaneSize: 100px; /* Minimum pane size */
  --ds-splitter-minHeight: 200px; /* Splitter container minimum height (Blazor twin) */
  --ds-splitter-gripDotSize: 4px; /* Handle grip dot diameter — 4px (React twin; the Blazor twin renders 3px dots — pre-existing PARITY divergence, each kept pixel-neutral) */
  --ds-splitter-gripGap: 3px; /* Gap between handle grip dots — literal 3px, between core xxs (2px) and xs (4px) (React twin; Blazor uses the 2px core step) */

  /* statCard */
  --ds-statCard-container: #FFFDF2; /* Card background */
  --ds-statCard-border: #E2E8F0; /* Card border color */
  --ds-statCard-borderWidth: 1px; /* Card border width — 1px */
  --ds-statCard-radius: 14px; /* Card corner radius — brand-configurable */
  --ds-statCard-padding: 24px; /* Card inner padding */
  --ds-statCard-gap: 4px; /* Vertical gap between label, value, sublabel */
  --ds-statCard-elevation: 0px 1px 3px 0px rgba(0,0,0,0.06); /* Subtle elevation */
  --ds-statCard-labelColor: #475569; /* Top label color — muted */
  --ds-statCard-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-statCard-labelTypography-font-size: 12px;
  --ds-statCard-labelTypography-font-weight: 700;
  --ds-statCard-labelTypography-line-height: 1.5;
  --ds-statCard-valueColor: #0F172A; /* Main metric value color */
  --ds-statCard-valueTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-statCard-valueTypography-font-size: 36px;
  --ds-statCard-valueTypography-font-weight: 700;
  --ds-statCard-valueTypography-line-height: 1.1;
  --ds-statCard-sublabelColor: #64748B; /* Sublabel/footnote color */
  --ds-statCard-sublabelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-statCard-sublabelTypography-font-size: 12px;
  --ds-statCard-sublabelTypography-font-weight: 400;
  --ds-statCard-sublabelTypography-line-height: 1.5;
  --ds-statCard-iconBadgeContainer: #C9E3DD; /* Top-right icon badge background — Figma 1495:31545. Tinted primary square that contains the badge icon */
  --ds-statCard-iconBadgeOnContainer: #365F56; /* Icon color inside the badge */
  --ds-statCard-iconBadgeRadius: 8px; /* Icon badge corner radius — rounded square, not pill */
  --ds-statCard-iconBadgePadding: 8px; /* Padding around the badge icon */
  --ds-statCard-iconBadgeSize: 24px; /* Icon size inside the badge — 24px */

  /* stepper */
  --ds-stepper-circleSize: 40px; /* Step circle diameter - 40px */
  --ds-stepper-circleSizeActive: 44px; /* Active step circle diameter - 44px, slightly larger for emphasis */
  --ds-stepper-circleSizeCompact: 20px; /* Compact (chrome-bar / GAP-04) step circle diameter - 20px. Numbers only, no visible labels. */
  --ds-stepper-circleFontSizeCompact: 11px; /* Compact step-circle digit size - 11px, fits one digit in the 20px circle (matches modalChromeShell). */
  --ds-stepper-connectorLengthCompact: 24px; /* Compact connector length between circles - 24px. */
  --ds-stepper-circleContainer: #F7F0DC; /* Pending step circle background */
  --ds-stepper-circleContainerActive: #365F56; /* Active step circle background */
  --ds-stepper-circleContainerComplete: #15803D; /* Completed step circle background — green to distinguish from active (blue) */
  --ds-stepper-onCircle: #475569; /* Pending step number text color */
  --ds-stepper-onCircleActive: #FFFFFF; /* Active step number text color */
  --ds-stepper-onCircleComplete: #FFFFFF; /* Completed step checkmark color — white on green */
  --ds-stepper-connectorColor: #E2E8F0; /* Connecting line between pending steps */
  --ds-stepper-connectorColorComplete: #15803D; /* Connecting line between completed steps — green to match completed circles */
  --ds-stepper-connectorHeight: 2px; /* Connector line thickness - 2px */
  --ds-stepper-labelColor: #475569; /* Step label text for pending steps */
  --ds-stepper-labelColorActive: #0F172A; /* Step label text for active step */
  --ds-stepper-labelGap: 8px; /* Gap between circle and label - 8px */
  --ds-stepper-gap: 4px; /* Gap between steps (filled by connectors) - 4px */
  --ds-stepper-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-stepper-labelTypography-font-size: 12px;
  --ds-stepper-labelTypography-font-weight: 400;
  --ds-stepper-labelTypography-line-height: 1.5;

  /* switch */
  --ds-switch-track: #F7F0DC; /* Track background when off */
  --ds-switch-trackOn: #365F56; /* Track background when on */
  --ds-switch-trackHover: #E2E8F0; /* Track hover when off */
  --ds-switch-trackOnHover: #2C4F47; /* Track hover when on */
  --ds-switch-thumb: #FFFDF2; /* Thumb color */
  --ds-switch-onThumb: #0F172A; /* Icon on thumb if used */
  --ds-switch-trackWidth: 44px; /* Track width - 44px */
  --ds-switch-trackHeight: 24px; /* Track height - 24px */
  --ds-switch-thumbSize: 20px; /* Thumb diameter - 20px */
  --ds-switch-radius: 9999px; /* Full rounding for pill shape */
  --ds-switch-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-switch-labelTypography-font-size: 16px;
  --ds-switch-labelTypography-font-weight: 400;
  --ds-switch-labelTypography-line-height: 1.5;
  --ds-switch-labelGap: 8px; /* Gap between switch and label text — 8px (mirrors radio.labelGap; previously a fallback-only var) */

  /* syntax */
  --ds-syntax-plain: #0F172A; /* Default / unclassified code text */
  --ds-syntax-keyword: #9333EA; /* Language keywords (if, const, function, class, return, …) — violet */
  --ds-syntax-string: #16A34A; /* String / char / template literals — green */
  --ds-syntax-number: #EA580C; /* Numeric literals — orange */
  --ds-syntax-comment: #64748B; /* Comments — muted */
  --ds-syntax-function: #2563EB; /* Function / method names at call or declaration — blue */
  --ds-syntax-operator: #475569; /* Operators (+ - = => && …) */
  --ds-syntax-punctuation: #475569; /* Brackets, braces, commas, semicolons */
  --ds-syntax-property: #2563EB; /* Object / JSON property keys — blue */
  --ds-syntax-tag: #E11D48; /* HTML/XML tag names — rose */
  --ds-syntax-attribute: #EA580C; /* HTML/XML attribute names — orange */
  --ds-syntax-builtin: #0D9488; /* Built-in globals / types (console, string, int, true, null, …) — teal */
  --ds-syntax-regex: #E11D48; /* Regular-expression literals — rose */
  --ds-syntax-variable: #DB2777; /* Variable references (bash $VAR, CSS custom props) — pink */

  /* tab */
  --ds-tab-container: #FFFDF2; /* Tab bar background color */
  --ds-tab-itemColor: #475569; /* Inactive tab text color */
  --ds-tab-itemColorHover: #0F172A; /* Tab text on hover — stronger emphasis */
  --ds-tab-itemColorActive: #365F56; /* Active tab text — brand primary color */
  --ds-tab-itemBgActive: #F5FAF9; /* Active tab background tint — subtle brand highlight */
  --ds-tab-indicatorColor: #365F56; /* Active tab underline indicator color */
  --ds-tab-indicatorHeight: 2px; /* Active indicator line thickness — 2px */
  --ds-tab-itemPaddingX: 18px; /* Horizontal padding per tab — 18px */
  --ds-tab-itemPaddingY: 10px; /* Vertical padding per tab — 10px */
  --ds-tab-itemGap: 8px; /* Gap between tab items — 8px */
  --ds-tab-itemRadius: 12px; /* Tab item corner radius — rounded for pill-like shape */
  --ds-tab-dotSize: 8px; /* Status dot diameter beside a tab label — 8px (previously a fallback-only var in DsTabBar) */
  --ds-tab-progressHeight: 3px; /* Per-tab progress strip height — 3px (previously a fallback-only var in DsTabBar) */
  --ds-tab-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-tab-typography-font-size: 14px;
  --ds-tab-typography-font-weight: 700;
  --ds-tab-typography-line-height: 1.5;
  --ds-tab-typographyActive-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-tab-typographyActive-font-size: 14px;
  --ds-tab-typographyActive-font-weight: 600;
  --ds-tab-typographyActive-line-height: 1.5;
  --ds-tab-countColor: #64748B; /* Numeric count beside inactive tab label (e.g. 'Invoices 10') */
  --ds-tab-countColorActive: #365F56; /* Numeric count beside active tab label */
  --ds-tab-countTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-tab-countTypography-font-size: 12px;
  --ds-tab-countTypography-font-weight: 700;
  --ds-tab-countTypography-line-height: 1.5;

  /* table */
  --ds-table-headerContainer: #FDF8E9; /* Table header row background */
  --ds-table-headerText: #0F172A; /* Table header text color */
  --ds-table-cellContainer: #FFFDF2; /* Default cell background — white */
  --ds-table-cellText: #0F172A; /* Cell text color */
  --ds-table-cellPaddingX: 12px; /* Horizontal cell padding — 12px */
  --ds-table-cellPaddingY: 10px; /* Vertical cell padding — 10px */
  --ds-table-border: #E2E8F0; /* Row/cell separator border color */
  --ds-table-borderWidth: 1px; /* Border width — 1px */
  --ds-table-radius: 10px; /* Table container border radius — brand-configurable (default 8px) */
  --ds-table-rowAlt: #FDF8E9; /* Alternating row background */
  --ds-table-rowHover: #E2E8F0; /* Row hover background */
  --ds-table-rowSelected: #C9E3DD; /* Selected row background */
  --ds-table-inputContainer: #FDF8E9; /* Data entry input cell background — light gray */
  --ds-table-inputBorder: #E2E8F0; /* Data entry input cell border */
  --ds-table-inputBorderFocus: #365F56; /* Focused input cell border — blue */
  --ds-table-inputText: #0F172A; /* Data entry cell text */
  --ds-table-inputRadius: 2px; /* Input cell radius — 2px, minimal */
  --ds-table-sourceBadgeContainer: #365F56; /* Source badge (EMB/KON) background — blue */
  --ds-table-sourceBadgeText: #FFFFFF; /* Source badge text — white on blue */
  --ds-table-sourceBadgeRadius: 2px; /* Source badge radius — 2px, compact */
  --ds-table-sourceBadgePaddingX: 6px; /* Source badge horizontal padding — 6px */
  --ds-table-yearBadgeContainer: #F7F0DC; /* Year badge background — light neutral */
  --ds-table-yearBadgeText: #475569; /* Year badge text — muted */
  --ds-table-headerTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-table-headerTypography-font-size: 14px;
  --ds-table-headerTypography-font-weight: 700;
  --ds-table-headerTypography-line-height: 1.5;
  --ds-table-cellTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-table-cellTypography-font-size: 14px;
  --ds-table-cellTypography-font-weight: 400;
  --ds-table-cellTypography-line-height: 1.5;
  --ds-table-inputTypography-font-family: Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --ds-table-inputTypography-font-size: 14px;
  --ds-table-inputTypography-font-weight: 400;
  --ds-table-inputTypography-line-height: 1.5;

  /* tag */
  --ds-tag-containerNeutral: #FDF8E9; /* Neutral tag background */
  --ds-tag-onContainerNeutral: #475569; /* Neutral tag text */
  --ds-tag-containerInfo: #BFDBFE; /* Info tag background — light tint */
  --ds-tag-onContainerInfo: #FFFDF2; /* Info tag text */
  --ds-tag-containerSuccess: #BBF7D0; /* Success tag background — light tint */
  --ds-tag-onContainerSuccess: #FFFFFF; /* Success tag text */
  --ds-tag-containerWarning: #FFE5A3; /* Warning tag background — light tint */
  --ds-tag-onContainerWarning: #FFFDF2; /* Warning tag text */
  --ds-tag-containerError: #F9C5B4; /* Error tag background — light tint */
  --ds-tag-onContainerError: #FFFFFF; /* Error tag text */
  --ds-tag-radius: 9999px; /* Perfect pill radius. Deliberately {core.radius.full}, NOT {brand.radius.chip} — Harbor squares its chips (4px) but Tag stays a pill under every brand */
  --ds-tag-paddingX: 4px; /* Horizontal padding — 4px, tight pill */
  --ds-tag-paddingY: 2px; /* Vertical padding — 2px, tight pill */

  /* thumbnail */
  --ds-thumbnail-sizeSm: 40px; /* Small thumbnail — 40px square, used in dense list rows (no brand.size token at 40px; literal) */
  --ds-thumbnail-sizeMd: 56px; /* Medium thumbnail — 56px square, the default preview size (no brand.size token at 56px; literal) */
  --ds-thumbnail-sizeLg: 80px; /* Large thumbnail — 80px square, used in detail headers (no brand.size token at 80px; literal) */
  --ds-thumbnail-container: #F7F0DC; /* Fallback background when no image loads — neutral surface tint */
  --ds-thumbnail-onContainer: #475569; /* Fallback initial/icon color — muted on the neutral container */
  --ds-thumbnail-border: #E2E8F0; /* Thin ring for contrast against surrounding surfaces */
  --ds-thumbnail-borderWidth: 1px; /* Ring width — 1px */
  --ds-thumbnail-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-thumbnail-typography-font-size: 12px;
  --ds-thumbnail-typography-font-weight: 700;
  --ds-thumbnail-typography-line-height: 1.5;

  /* tileLayout */
  --ds-tileLayout-container: #FFFDF2; /* Layout background */
  --ds-tileLayout-tileBg: #FFFDF2; /* Tile card background */
  --ds-tileLayout-tileBorder: #E2E8F0; /* Tile card border */
  --ds-tileLayout-tileShadow: 0px 1px 3px 0px rgba(0,0,0,0.06); /* Tile resting shadow */
  --ds-tileLayout-tileShadowDrag: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Tile shadow while dragging */
  --ds-tileLayout-dragHandleBg: #F7F0DC; /* Drag handle area */
  --ds-tileLayout-dragHandleIcon: #475569; /* Drag handle grip icon */
  --ds-tileLayout-placeholderBg: #C9E3DD; /* Drop placeholder highlight */
  --ds-tileLayout-gap: 16px; /* Gap between tiles */
  --ds-tileLayout-tileRadius: 14px; /* Tile corner radius */
  --ds-tileLayout-tilePadding: 12px; /* Tile content padding */
  --ds-tileLayout-tileBorderWidth: 1px; /* Tile border width */
  --ds-tileLayout-handleHeight: 32px; /* Drag handle height */

  /* timeline */
  --ds-timeline-itemGap: 16px; /* Vertical gap between activity items */
  --ds-timeline-avatarToContentGap: 8px; /* Horizontal gap between avatar and text block */
  --ds-timeline-contentGap: 4px; /* Vertical gap between the (author+timestamp) header row and the body paragraph */
  --ds-timeline-authorColor: #0F172A; /* Author name color */
  --ds-timeline-authorTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-timeline-authorTypography-font-size: 14px;
  --ds-timeline-authorTypography-font-weight: 700;
  --ds-timeline-authorTypography-line-height: 1.5;
  --ds-timeline-timestampColor: #64748B; /* Timestamp color — muted */
  --ds-timeline-timestampTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-timeline-timestampTypography-font-size: 12px;
  --ds-timeline-timestampTypography-font-weight: 400;
  --ds-timeline-timestampTypography-line-height: 1.5;
  --ds-timeline-bodyColor: #0F172A; /* Activity body text color */
  --ds-timeline-bodyTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-timeline-bodyTypography-font-size: 14px;
  --ds-timeline-bodyTypography-font-weight: 400;
  --ds-timeline-bodyTypography-line-height: 1.5;
  --ds-timeline-dividerColor: #E2E8F0; /* Optional row divider color */
  --ds-timeline-dividerWidth: 1px; /* Optional row divider width — 1px */

  /* toolbar */
  --ds-toolbar-container: #FFFDF2; /* Toolbar background — resting surface */
  --ds-toolbar-mutedContainer: #F7F0DC; /* Muted variant background — subtle bulk-selection-bar tint */
  --ds-toolbar-border: #E2E8F0; /* Toolbar border color */
  --ds-toolbar-radius: 8px; /* Toolbar corner radius — 8px */
  --ds-toolbar-paddingX: 16px; /* Horizontal padding — 16px (md density) */
  --ds-toolbar-paddingY: 8px; /* Vertical padding — 8px (md density) */
  --ds-toolbar-gap: 8px; /* Gap between start / center / end regions — 8px */

  /* tooltip */
  --ds-tooltip-container: #0F172A; /* Dark background for contrast — inverts surface/text relationship */
  --ds-tooltip-onContainer: #FFFDF2; /* Light text on dark tooltip background */
  --ds-tooltip-maxWidth: 320px; /* Maximum tooltip width for readability */
  --ds-tooltip-elevation: 0px 8px 16px 0px rgba(0,0,0,0.12); /* Shadow for floating above content */
  --ds-tooltip-typography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-tooltip-typography-font-size: 12px;
  --ds-tooltip-typography-font-weight: 400;
  --ds-tooltip-typography-line-height: 1.5;

  /* transferList */
  --ds-transferList-panelContainer: #FFFDF2; /* Listbox panel background */
  --ds-transferList-panelBorder: #E2E8F0; /* Listbox panel border color */
  --ds-transferList-panelBorderWidth: 1px; /* Listbox panel border width — 1px */
  --ds-transferList-panelRadius: 10px; /* Listbox panel corner radius — 10px */
  --ds-transferList-headerText: #475569; /* Panel title/header text color — muted */
  --ds-transferList-optionText: #0F172A; /* Option label text color */
  --ds-transferList-optionHoverContainer: #E2E8F0; /* Option background on hover */
  --ds-transferList-optionSelectedContainer: #C9E3DD; /* Selected option background */
  --ds-transferList-optionSelectedText: #142421; /* Selected option text color */

  /* treeView */
  --ds-treeView-rowHeight: 32px; /* Minimum tree-row height — 32px */
  --ds-treeView-indent: 24px; /* Horizontal indent added per nesting level — 24px */
  --ds-treeView-paddingX: 12px; /* Row horizontal padding — 12px */
  --ds-treeView-paddingY: 4px; /* Row vertical padding — 4px */
  --ds-treeView-gap: 8px; /* Gap between chevron, icon and label — 8px */
  --ds-treeView-radius: 8px; /* Row corner radius — brand-configurable */
  --ds-treeView-nodeText: #0F172A; /* Default node label color */
  --ds-treeView-rowHover: #E2E8F0; /* Row background on hover — subtle fill */
  --ds-treeView-rowSelected: #C9E3DD; /* Selected node row background */
  --ds-treeView-onRowSelected: #142421; /* Selected node label text — WCAG AA on primarySubtle */
  --ds-treeView-chevron: #475569; /* Expand/collapse chevron color */
  --ds-treeView-icon: #475569; /* Leading node icon color (folder/document) */
  --ds-treeView-connectorLine: #E2E8F0; /* Branch connector / indent guide line color */
  --ds-treeView-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-treeView-labelTypography-font-size: 16px;
  --ds-treeView-labelTypography-font-weight: 400;
  --ds-treeView-labelTypography-line-height: 1.5;

  /* upload */
  --ds-upload-dropzoneBg: #FFFDF2; /* Drop zone background */
  --ds-upload-dropzoneBgActive: #C9E3DD; /* Drop zone background when file dragged over */
  --ds-upload-dropzoneBorder: #E2E8F0; /* Drop zone dashed border */
  --ds-upload-dropzoneBorderActive: #365F56; /* Drop zone border when active */
  --ds-upload-dropzoneText: #475569; /* Drop zone instruction text */
  --ds-upload-dropzoneIcon: #365F56; /* Upload icon color */
  --ds-upload-fileItemBg: #F7F0DC; /* File list item background */
  --ds-upload-fileItemText: #0F172A; /* File name text */
  --ds-upload-fileItemMeta: #475569; /* File size/type text */
  --ds-upload-fileItemBorder: #E2E8F0; /* File item border */
  --ds-upload-removeIcon: #9E3B1B; /* Remove file icon */
  --ds-upload-successIcon: #15803D; /* Upload complete icon */
  --ds-upload-progressTrack: #E2E8F0; /* File upload progress track */
  --ds-upload-progressFill: #365F56; /* File upload progress fill */
  --ds-upload-radius: 14px; /* Drop zone corner radius */
  --ds-upload-fileItemRadius: 8px; /* File item corner radius */
  --ds-upload-borderWidth: 2px; /* Drop zone border thickness */
  --ds-upload-padding: 18px; /* Drop zone internal padding */
  --ds-upload-fileItemPadding: 8px; /* File item padding */
  --ds-upload-gap: 8px; /* Gap between file items */
  --ds-upload-progressHeight: 4px; /* Per-file upload progress bar height — 4px, same slim bar as progressBar.heightCard */
  --ds-upload-removeButtonSize: 24px; /* Remove-file button hit area — 24px square */
  --ds-upload-removeButtonRadius: 4px; /* Remove-file button corner radius — literal 4px, no 4px core radius step (sm=2, md=8) */
  --ds-upload-removeIconSize: 18px; /* Remove-file glyph (×) font-size — 18px inside the 24px button; no core type/icon step matches */
  --ds-upload-labelTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-upload-labelTypography-font-size: 14px;
  --ds-upload-labelTypography-font-weight: 700;
  --ds-upload-labelTypography-line-height: 1.5;
  --ds-upload-fileNameTypography-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --ds-upload-fileNameTypography-font-size: 14px;
  --ds-upload-fileNameTypography-font-weight: 400;
  --ds-upload-fileNameTypography-line-height: 1.5;
}