/* semantic */
:root {
    --radius-small: var(--radius-sm);
    --radius-medium: var(--radius-lg);
    --color-bg-surface-default: var(--color-white);
    --font-color-primary-default: var(--color-neutral-900);
    --font-color-secondary-default: var(--color-theme-primary-100);
    --font-color-onbrand-default: var(--color-white);
    --font-color-inverse-default: var(--color-white);
    --font-color-primary-muted: var(--color-zinc-500);
    --border-color-default: var(--color-zinc-200);
    --border-color-divider: var(--color-neutral-200);
    --border-color-focus: var(--color-neutral-500);
    --color-state-success-default: var(--color-emerald-500);
    --color-state-warning-default: var(--color-orange-400);
    --color-state-error-default: var(--color-red-500);
    --color-state-info-default: var(--color-blue-500);
    --color-state-neutral: var(--color-neutral-300);
    --font-size-metric-sm: var(--font-size-sm);
    --font-size-heading-xs: var(--font-size-base);
    --font-size-body-xs: var(--font-size-xs);
    --font-size-productive-caption: var(--font-size-xs);
    --font-size-productive-code-sm: var(--font-size-sm);
    --color-bg-surface-alt: var(--color-zinc-200);
    --color-bg-surface-muted: var(--color-zinc-100);
    --color-bg-overlay-default: var(--color-alpha-black-50a);
    --font-color-onbrand-hover: var(--color-white);
    --font-color-disabled: var(--color-zinc-400);
    --border-color-primary-default: var(--color-theme-primary-100);
    --border-color-primary-hover: var(--color-theme-primary-200);
    --radius-large: var(--radius-2xl);
    --radius-max: var(--radius-full);
    --color-state-success-subtle: var(--color-emerald-50);
    --spacing-layout-xs: var(--spacing-2);
    --spacing-section-sm: var(--spacing-7);
    --font-color-onbrand-active: var(--color-white);
    --icon-size-small: var(--icon-sm);
    --icon-color-primary-default: var(--color-theme-primary-100);
    --icon-size-medium: var(--icon-md);
    --icon-size-xlarge: var(--icon-xl);
    --icon-color-primary-muted: var(--color-zinc-400);
    --icon-color-secondary-default: var(--color-theme-secondary-100);
    --icon-color-onbrand-default: var(--color-white);
    --icon-color-onbrand-hover: var(--color-white);
    --icon-color-onbrand-active: var(--color-white);
    --icon-color-disabled: var(--color-zinc-400);
    --color-bg-primary-default: var(--color-theme-primary-100);
    --color-bg-primary-hover: var(--color-theme-primary-200);
    --color-bg-disabled: var(--color-zinc-200);
    --scale-control-xs: var(--scale-xxs);
    --scale-control-sm: var(--scale-sm);
    --scale-control-md: var(--scale-md);
    --scale-control-lg: var(--scale-lg);
    --scale-control-xl: var(--scale-xl);
    --radius-base: var(--radius-none);
    --border-width-thin: var(--borderwidth-default);
    --spacing-component-gap-sm: var(--spacing-3);
    --spacing-component-gap-md: var(--spacing-4);
    --spacing-component-gap-lg: var(--spacing-5);
    --spacing-component-padding-sm: var(--spacing-3);
    --spacing-component-padding-md: var(--spacing-4);
    --spacing-component-padding-lg: var(--spacing-5);
    --spacing-layout-sm: var(--spacing-3);
    --spacing-layout-md: var(--spacing-5);
    --spacing-layout-lg: var(--spacing-6);
    --spacing-layout-xl: var(--spacing-9);
    --spacing-section-md: var(--spacing-9);
    --spacing-section-lg: var(--spacing-14);
    --spacing-inset-tight: var(--spacing-2);
    --spacing-inset-normal: var(--spacing-3);
    --spacing-inset-loose: var(--spacing-5);
    --opacity-overlay-light: var(--opacity-20);
    --opacity-overlay-medium: var(--opacity-20);
    --opacity-overlay-dark: var(--opacity-20);
    --opacity-interaction-hover: var(--opacity-50);
    --opacity-interaction-pressed: var(--opacity-50);
    --opacity-state-disabled: var(--opacity-50);
    --opacity-state-muted: var(--opacity-20);
    --opacity-state-subtle: var(--opacity-20);
    --border-width-regular: var(--borderwidth-2);
    --border-width-thick: var(--borderwidth-3);
    --font-size-heading-sm: var(--font-size-lg);
    --font-size-heading-md: var(--font-size-2xl);
    --font-size-heading-lg: var(--font-size-4xl);
    --font-size-heading-xl: var(--font-size-5xl);
    --font-size-heading-xxl: var(--font-size-6xl);
    --font-size-body-sm: var(--font-size-sm);
    --font-size-body-md: var(--font-size-base);
    --font-size-body-lg: var(--font-size-lg);
    --font-size-metric-md: var(--font-size-lg);
    --font-size-metric-lg: var(--font-size-2xl);
    --font-size-metric-xs: var(--font-size-xs);
    --font-size-body-xl: var(--font-size-2xl);
    --font-size-productive-code-md: var(--font-size-base);
    --font-size-productive-label-sm: var(--font-size-xs);
    --icon-size-xxlarge: var(--icon-2xl);
    --icon-size-micro: var(--icon-xs);
    --spacing-section-xs: var(--spacing-5);
    --spacing-component-padding-xs: var(--spacing-2);
    --color-bg-surface-accent: var(--color-zinc-300);
    --color-bg-surface-floating: var(--color-zinc-50);
    --color-bg-primary-muted: var(--color-theme-primary-100-a10);
    --color-bg-secondary-default: var(--color-theme-secondary-100);
    --color-bg-secondary-hover: var(--color-theme-secondary-200);
    --color-bg-secondary-muted: var(--color-theme-secondary-100-a10);
    --color-bg-accent-default: var(--color-theme-accent-100);
    --color-bg-accent-hover: var(--color-theme-accent-200);
    --color-bg-accent-muted: var(--color-theme-accent-100-a10);
    --border-color-secondary-default: var(--color-theme-secondary-100);
    --border-color-secondary-hover: var(--color-theme-secondary-200);
    --font-color-link-default: var(--color-blue-700);
    --font-color-link-hover: var(--color-blue-800);
    --icon-color-inverse-default: var(--color-black);
    --icon-color-link-default: var(--color-blue-700);
    --icon-color-link-hover: var(--color-blue-800);
    --effect-shadow-level-1: var(--color-alpha-black-5a);
    --effect-shadow-level-2: var(--color-alpha-black-10a);
    --effect-shadow-level-3: var(--color-alpha-black-30a);
    --effect-shadow-overlay: var(--color-alpha-black-50a);
    --effect-shadow-inset: var(--color-alpha-black-5a);
    --effect-blur-surface-sm: var(--blur-sm);
    --effect-blur-surface-md: var(--blur-default);
    --effect-blur-surface-lg: var(--blur-md);
    --effect-blur-overlay: var(--blur-lg);
    --color-state-error-subtle: var(--color-red-50);
    --color-state-warning-subtle: var(--color-orange-50);
    --spacing-component-gap-xl: var(--spacing-6);
    --spacing-component-gap-2xl: var(--spacing-9);
    --spacing-component-gap-xs: var(--spacing-2);
    --spacing-component-padding-xl: var(--spacing-6);
    --font-size-productive-label-md: var(--font-size-sm);
    --font-letter-spacing-heading: var(--font-letter-spacing-tracking-tight);
    --font-letter-spacing-body: var(--font-letter-spacing-tracking-normal);
    --font-letter-spacing-metric: var(--font-letter-spacing-tracking-normal);
    --font-letter-spacing-productive: var(--font-letter-spacing-tracking-normal);
    --font-font-weight-heading-normal: var(--font-weight-medium);
    --font-font-weight-heading-bold: var(--font-weight-semibold);
    --font-font-weight-heading-light: var(--font-weight-light);
    --font-font-weight-body-normal: var(--font-weight-normal);
    --font-font-weight-body-bold: var(--font-weight-semibold);
    --font-font-weight-body-light: var(--font-weight-light);
    --font-font-weight-metric-normal: var(--font-weight-normal);
    --font-font-weight-metric-light: var(--font-weight-light);
    --font-font-weight-metric-bold: var(--font-weight-semibold);
    --font-font-weight-productive-normal: var(--font-weight-normal);
    --font-font-weight-productive-bold: var(--font-weight-semibold);
    --spacing-component-padding-2xl: var(--spacing-14);
    --spacing-component-gap-none: var(--spacing-0);
    --spacing-component-padding-none: var(--spacing-0);
    --color-progress-track: var(--color-zinc-200);
    --color-progress-fill: var(--color-theme-primary-100);
    --color-chart-data-vis-brand-1: var(--color-theme-primary-100);
    --color-state-info-subtle: var(--color-blue-50);
    --icon-size-large: var(--icon-lg);
    --color-gradient-primary-start: var(--color-theme-primary-200);
    --color-gradient-primary-end: var(--color-theme-primary-100);
    --color-gradient-secondary-start: var(--color-theme-accent-100);
    --color-gradient-secondary-end: var(--color-theme-secondary-100);
    --color-gradient-primary-hover-start: var(--color-theme-accent-100);
    --color-gradient-primary-hover-end: var(--color-theme-accent-200);
    --border-color-surface: var(--color-zinc-400);
    --spacing-component-gap-xxs: var(--spacing-1);
    --spacing-component-padding-xxs: var(--spacing-1);
    --color-chart-data-vis-brand-2: var(--color-teal-500);
    --color-chart-data-vis-brand-3: var(--color-blue-400);
    --color-chart-bg-container: var(--color-neutral-100);
    --color-chart-border-grid: var(--color-zinc-200);
    --color-chart-text-axis-label: var(--color-zinc-500);
    --color-chart-text-data-value: var(--color-zinc-950);
    --color-chart-text-data-value-sub: var(--color-zinc-500);
    --color-chart-border-axis: var(--color-zinc-300);
    --color-chart-control-range-track: var(--color-white);
    --color-chart-control-range-fill: var(--color-blue-50);
    --color-chart-control-handle: var(--color-white);
    --color-chart-control-border: var(--color-neutral-300);
    --color-chart-control-thumb: var(--color-blue-400);
    --color-chart-foreground: var(--color-white);
    --color-chart-control-thumb-subtle: var(--color-blue-300);
    --font-color-negative: var(--color-red-500);
    --font-color-warning: var(--color-orange-400);
    --font-color-positive: var(--color-emerald-500);
    --icon-color-positive: var(--color-emerald-500);
    --icon-color-negative: var(--color-red-500);
    --icon-color-warning: var(--color-orange-400);
    --font-size-metric-xl: var(--font-size-3xl);
    --line-height-metric-sm: var(--font-size-sm--line-height);
    --line-height-heading-xs: var(--font-size-base--line-height);
    --line-height-body-xs: var(--font-size-xs--line-height);
    --line-height-productive-caption: var(--font-size-xs--line-height);
    --line-height-productive-code-sm: var(--font-size-sm--line-height);
    --line-height-heading-sm: var(--font-size-lg--line-height);
    --line-height-heading-md: var(--font-size-2xl--line-height);
    --line-height-heading-lg: var(--font-size-4xl--line-height);
    --line-height-heading-xl: var(--font-size-5xl--line-height);
    --line-height-heading-xxl: var(--font-size-6xl--line-height);
    --line-height-body-sm: var(--font-size-sm--line-height);
    --line-height-body-md: var(--font-size-base--line-height);
    --line-height-body-lg: var(--font-size-lg--line-height);
    --line-height-metric-md: var(--font-size-lg--line-height);
    --line-height-metric-lg: var(--font-size-2xl--line-height);
    --line-height-metric-xs: var(--font-size-xs--line-height);
    --line-height-body-xl: var(--font-size-2xl--line-height);
    --line-height-productive-code-md: var(--font-size-base--line-height);
    --line-height-productive-label-sm: var(--font-size-xs--line-height);
    --line-height-productive-label-md: var(--font-size-sm--line-height);
    --line-height-metric-xl: var(--font-size-3xl--line-height);
}

.dark {
    --radius-small: var(--radius-sm);
    --radius-medium: var(--radius-lg);
    --color-bg-surface-default: var(--color-zinc-950);
    --font-color-primary-default: var(--color-white);
    --font-color-secondary-default: var(--color-theme-primary-100);
    --font-color-onbrand-default: var(--color-white);
    --font-color-inverse-default: var(--color-white);
    --font-color-primary-muted: var(--color-zinc-400);
    --border-color-default: var(--color-zinc-700);
    --border-color-divider: var(--color-neutral-200);
    --border-color-focus: var(--color-neutral-500);
    --color-state-success-default: var(--color-emerald-500);
    --color-state-warning-default: var(--color-orange-400);
    --color-state-error-default: var(--color-red-500);
    --color-state-info-default: var(--color-blue-500);
    --color-state-neutral: var(--color-neutral-300);
    --font-size-metric-sm: var(--font-size-sm);
    --font-size-heading-xs: var(--font-size-base);
    --font-size-body-xs: var(--font-size-xs);
    --font-size-productive-caption: var(--font-size-xs);
    --font-size-productive-code-sm: var(--font-size-sm);
    --color-bg-surface-alt: var(--color-zinc-800);
    --color-bg-surface-muted: var(--color-zinc-900);
    --color-bg-overlay-default: var(--color-alpha-black-50a);
    --font-color-onbrand-hover: var(--color-white);
    --font-color-disabled: var(--color-zinc-500);
    --border-color-primary-default: var(--color-theme-primary-100);
    --border-color-primary-hover: var(--color-theme-primary-200);
    --radius-large: var(--radius-2xl);
    --radius-max: var(--radius-full);
    --color-state-success-subtle: var(--color-emerald-950);
    --spacing-layout-xs: var(--spacing-2);
    --spacing-section-sm: var(--spacing-7);
    --font-color-onbrand-active: var(--color-white);
    --icon-size-small: var(--icon-sm);
    --icon-color-primary-default: var(--color-theme-primary-100);
    --icon-size-medium: var(--icon-md);
    --icon-size-xlarge: var(--icon-xl);
    --icon-color-primary-muted: var(--color-zinc-400);
    --icon-color-secondary-default: var(--color-theme-secondary-100);
    --icon-color-onbrand-default: var(--color-white);
    --icon-color-onbrand-hover: var(--color-white);
    --icon-color-onbrand-active: var(--color-white);
    --icon-color-disabled: var(--color-neutral-500);
    --color-bg-primary-default: var(--color-theme-primary-100);
    --color-bg-primary-hover: var(--color-theme-primary-200);
    --color-bg-disabled: var(--color-zinc-800);
    --scale-control-xs: var(--scale-xxs);
    --scale-control-sm: var(--scale-sm);
    --scale-control-md: var(--scale-md);
    --scale-control-lg: var(--scale-lg);
    --scale-control-xl: var(--scale-xl);
    --radius-base: var(--radius-none);
    --border-width-thin: var(--borderwidth-default);
    --spacing-component-gap-sm: var(--spacing-3);
    --spacing-component-gap-md: var(--spacing-4);
    --spacing-component-gap-lg: var(--spacing-5);
    --spacing-component-padding-sm: var(--spacing-3);
    --spacing-component-padding-md: var(--spacing-4);
    --spacing-component-padding-lg: var(--spacing-5);
    --spacing-layout-sm: var(--spacing-3);
    --spacing-layout-md: var(--spacing-5);
    --spacing-layout-lg: var(--spacing-6);
    --spacing-layout-xl: var(--spacing-9);
    --spacing-section-md: var(--spacing-9);
    --spacing-section-lg: var(--spacing-14);
    --spacing-inset-tight: var(--spacing-2);
    --spacing-inset-normal: var(--spacing-3);
    --spacing-inset-loose: var(--spacing-5);
    --opacity-overlay-light: var(--opacity-20);
    --opacity-overlay-medium: var(--opacity-20);
    --opacity-overlay-dark: var(--opacity-20);
    --opacity-interaction-hover: var(--opacity-50);
    --opacity-interaction-pressed: var(--opacity-50);
    --opacity-state-disabled: var(--opacity-50);
    --opacity-state-muted: var(--opacity-20);
    --opacity-state-subtle: var(--opacity-20);
    --border-width-regular: var(--borderwidth-2);
    --border-width-thick: var(--borderwidth-3);
    --font-size-heading-sm: var(--font-size-lg);
    --font-size-heading-md: var(--font-size-2xl);
    --font-size-heading-lg: var(--font-size-4xl);
    --font-size-heading-xl: var(--font-size-5xl);
    --font-size-heading-xxl: var(--font-size-6xl);
    --font-size-body-sm: var(--font-size-sm);
    --font-size-body-md: var(--font-size-base);
    --font-size-body-lg: var(--font-size-lg);
    --font-size-metric-md: var(--font-size-lg);
    --font-size-metric-lg: var(--font-size-2xl);
    --font-size-metric-xs: var(--font-size-xs);
    --font-size-body-xl: var(--font-size-2xl);
    --font-size-productive-code-md: var(--font-size-base);
    --font-size-productive-label-sm: var(--font-size-xs);
    --icon-size-xxlarge: var(--icon-2xl);
    --icon-size-micro: var(--icon-xs);
    --spacing-section-xs: var(--spacing-5);
    --spacing-component-padding-xs: var(--spacing-2);
    --color-bg-surface-accent: var(--color-zinc-700);
    --color-bg-surface-floating: var(--color-zinc-700);
    --color-bg-primary-muted: var(--color-theme-primary-100-a10);
    --color-bg-secondary-default: var(--color-zinc-700);
    --color-bg-secondary-hover: var(--color-zinc-600);
    --color-bg-secondary-muted: var(--color-zinc-800);
    --color-bg-accent-default: var(--color-theme-accent-100);
    --color-bg-accent-hover: var(--color-theme-accent-200);
    --color-bg-accent-muted: var(--color-theme-accent-100-a10);
    --border-color-secondary-default: var(--color-theme-secondary-100);
    --border-color-secondary-hover: var(--color-theme-secondary-200);
    --font-color-link-default: var(--color-blue-400);
    --font-color-link-hover: var(--color-blue-500);
    --icon-color-inverse-default: var(--color-white);
    --icon-color-link-default: var(--color-blue-400);
    --icon-color-link-hover: var(--color-blue-800);
    --effect-shadow-level-1: var(--color-alpha-white-5a);
    --effect-shadow-level-2: var(--color-alpha-white-10a);
    --effect-shadow-level-3: var(--color-alpha-white-30a);
    --effect-shadow-overlay: var(--color-alpha-black-50a);
    --effect-shadow-inset: var(--color-alpha-black-5a);
    --effect-blur-surface-sm: var(--blur-sm);
    --effect-blur-surface-md: var(--blur-default);
    --effect-blur-surface-lg: var(--blur-md);
    --effect-blur-overlay: var(--blur-lg);
    --color-state-error-subtle: var(--color-red-950);
    --color-state-warning-subtle: var(--color-orange-50);
    --spacing-component-gap-xl: var(--spacing-6);
    --spacing-component-gap-2xl: var(--spacing-9);
    --spacing-component-gap-xs: var(--spacing-2);
    --spacing-component-padding-xl: var(--spacing-6);
    --font-size-productive-label-md: var(--font-size-sm);
    --font-letter-spacing-heading: var(--font-letter-spacing-tracking-tight);
    --font-letter-spacing-body: var(--font-letter-spacing-tracking-normal);
    --font-letter-spacing-metric: var(--font-letter-spacing-tracking-normal);
    --font-letter-spacing-productive: var(--font-letter-spacing-tracking-normal);
    --font-font-weight-heading-normal: var(--font-weight-medium);
    --font-font-weight-heading-bold: var(--font-weight-semibold);
    --font-font-weight-heading-light: var(--font-weight-light);
    --font-font-weight-body-normal: var(--font-weight-normal);
    --font-font-weight-body-bold: var(--font-weight-semibold);
    --font-font-weight-body-light: var(--font-weight-light);
    --font-font-weight-metric-normal: var(--font-weight-normal);
    --font-font-weight-metric-light: var(--font-weight-light);
    --font-font-weight-metric-bold: var(--font-weight-semibold);
    --font-font-weight-productive-normal: var(--font-weight-normal);
    --font-font-weight-productive-bold: var(--font-weight-semibold);
    --spacing-component-padding-2xl: var(--spacing-14);
    --spacing-component-gap-none: var(--spacing-0);
    --spacing-component-padding-none: var(--spacing-0);
    --color-progress-track: var(--color-zinc-700);
    --color-progress-fill: var(--color-theme-primary-100);
    --color-chart-data-vis-brand-1: var(--color-theme-primary-100);
    --color-state-info-subtle: var(--color-blue-950);
    --icon-size-large: var(--icon-lg);
    --color-gradient-primary-start: var(--color-theme-primary-200);
    --color-gradient-primary-end: var(--color-theme-primary-100);
    --color-gradient-secondary-start: var(--color-theme-accent-100);
    --color-gradient-secondary-end: var(--color-theme-secondary-100);
    --color-gradient-primary-hover-start: var(--color-theme-primary-200);
    --color-gradient-primary-hover-end: var(--color-theme-primary-100);
    --border-color-surface: var(--color-zinc-400);
    --spacing-component-gap-xxs: var(--spacing-1);
    --spacing-component-padding-xxs: var(--spacing-1);
    --color-chart-data-vis-brand-2: var(--color-teal-500);
    --color-chart-data-vis-brand-3: var(--color-blue-400);
    --color-chart-bg-container: var(--color-neutral-100);
    --color-chart-border-grid: var(--color-zinc-700);
    --color-chart-text-axis-label: var(--color-zinc-400);
    --color-chart-text-data-value: var(--color-zinc-50);
    --color-chart-text-data-value-sub: var(--color-zinc-400);
    --color-chart-border-axis: var(--color-zinc-800);
    --color-chart-control-range-track: var(--color-white);
    --color-chart-control-range-fill: var(--color-blue-50);
    --color-chart-control-handle: var(--color-white);
    --color-chart-control-border: var(--color-neutral-300);
    --color-chart-control-thumb: var(--color-blue-400);
    --color-chart-foreground: var(--color-black);
    --color-chart-control-thumb-subtle: var(--color-blue-300);
    --font-color-negative: var(--color-red-500);
    --font-color-warning: var(--color-orange-400);
    --font-color-positive: var(--color-emerald-500);
    --icon-color-positive: var(--color-emerald-500);
    --icon-color-negative: var(--color-red-500);
    --icon-color-warning: var(--color-orange-400);
    --font-size-metric-xl: var(--font-size-3xl);
    --line-height-metric-sm: var(--font-size-sm--line-height);
    --line-height-heading-xs: var(--font-size-base--line-height);
    --line-height-body-xs: var(--font-size-xs--line-height);
    --line-height-productive-caption: var(--font-size-xs--line-height);
    --line-height-productive-code-sm: var(--font-size-sm--line-height);
    --line-height-heading-sm: var(--font-size-lg--line-height);
    --line-height-heading-md: var(--font-size-2xl--line-height);
    --line-height-heading-lg: var(--font-size-4xl--line-height);
    --line-height-heading-xl: var(--font-size-5xl--line-height);
    --line-height-heading-xxl: var(--font-size-6xl--line-height);
    --line-height-body-sm: var(--font-size-sm--line-height);
    --line-height-body-md: var(--font-size-base--line-height);
    --line-height-body-lg: var(--font-size-lg--line-height);
    --line-height-metric-md: var(--font-size-lg--line-height);
    --line-height-metric-lg: var(--font-size-2xl--line-height);
    --line-height-metric-xs: var(--font-size-xs--line-height);
    --line-height-body-xl: var(--font-size-2xl--line-height);
    --line-height-productive-code-md: var(--font-size-base--line-height);
    --line-height-productive-label-sm: var(--font-size-xs--line-height);
    --line-height-productive-label-md: var(--font-size-sm--line-height);
    --line-height-metric-xl: var(--font-size-3xl--line-height);
}