/* * Generated Eidos foundation CSS. * * Source: src/uix/eidos/lib/themes/base.ts * Command: npm run generate:eidos-css * * Do not edit this file by hand. */ :root { --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-0-5: 2px; --space-1-5: 6px; --space-2-5: 10px; --space-3-5: 14px; --space-4-5: 18px; --space-5-5: 22px; --control-height-xxs: 22px; --control-height-xs: 26px; --control-height-sm: 30px; --control-height-md: 36px; --control-height-lg: 44px; --control-height-xl: 52px; --control-height-xxl: 60px; --radius-none: 0px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-xxl: 20px; --radius-full: 9999px; --border-width-none: 0px; --border-width-hairline: 0.5px; --border-width-thin: 1px; --border-width-medium: 1.5px; --border-width-thick: 2px; --border-style-solid: solid; --border-style-dashed: dashed; --border-style-dotted: dotted; --border-width: var(--border-width-thin); --border-style: var(--border-style-solid); --border: var(--border-width) var(--border-style) var(--color-border-default); --focus-ring-offset: 1px; --focus-ring-width: 2px; --focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --focus-ring-error: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color-error); --container-width-sm: 448px; --container-width-md: 688px; --container-width-lg: 880px; --container-width-xl: 1136px; --container-width-xxl: 1280px; --container-width-full: none; --container-padding-inline: var(--space-4); --content-width-xs: 20rem; --content-width-sm: 24rem; --content-width-md: 32rem; --content-width-lg: 42rem; --content-width-xl: 56rem; --content-width-xxl: 72rem; --content-width-prose: 65ch; --aspect-ratio-square: 1 / 1; --aspect-ratio-portrait: 3 / 4; --aspect-ratio-landscape: 4 / 3; --aspect-ratio-video: 16 / 9; --aspect-ratio-wide: 21 / 9; --aspect-ratio-golden: 1.618 / 1; --density-compact-scale: 0.92; --density-comfortable-scale: 1; --density-spacious-scale: 1.08; --density-compact-space-scale: 0.84; --density-comfortable-space-scale: 1; --density-spacious-space-scale: 1.16; --density-compact-control-scale: 0.9; --density-comfortable-control-scale: 1; --density-spacious-control-scale: 1.12; --density-compact-content-scale: 0.96; --density-comfortable-content-scale: 1; --density-spacious-content-scale: 1.04; --density-scale: var(--density-comfortable-scale); --density-space-scale: var(--density-comfortable-space-scale); --density-control-scale: var(--density-comfortable-control-scale); --density-content-scale: var(--density-comfortable-content-scale); --duration-instant: 0ms; --duration-fast: 120ms; --duration-normal: 180ms; --duration-moderate: 240ms; --duration-slow: 320ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-alert: cubic-bezier(0.36, 0.07, 0.19, 0.97); --ease-symmetric: cubic-bezier(0.4, 0, 0.6, 1); --motion-distance-xs: 2px; --motion-distance-sm: 4px; --motion-distance-md: 8px; --motion-distance-lg: 16px; --motion-scale-enter: 0.985; --motion-scale-press: 0.97; --motion-stagger: 20ms; --icon-size-xxs: 12px; --icon-size-xs: 14px; --icon-size-sm: 16px; --icon-size-md: 18px; --icon-size-lg: 20px; --icon-size-xl: 24px; --icon-size-xxl: 48px; --icon-stroke-width-sm: 1.25; --icon-stroke-width-md: 1.5; --icon-stroke-width-lg: 1.75; --opacity-0: 0; --opacity-muted: 0.72; --opacity-disabled: 0.48; --opacity-scrim: 0.42; --opacity-overlay: 0.66; --opacity-hover: 0.92; --opacity-press: 0.84; --opacity-full: 1; --z-index-base: 0; --z-index-raised: 1; --z-index-sticky: 100; --z-index-dropdown: 300; --z-index-popover: 400; --z-index-tooltip: 500; --z-index-modal: 700; --z-index-toast: 900; --font-family-primary: 'Instrument Sans', system-ui, sans-serif; --font-family-secondary: Lora, Georgia, 'Times New Roman', serif; --font-family-mono: 'Azeret Mono', ui-monospace, monospace; --font-family-display: Lora, Georgia, 'Times New Roman', serif; --font-size-xxs: 10px; --font-line-height-xxs: 1.5; --font-letter-spacing-xxs: 0; --font-size-xs: 12px; --font-line-height-xs: 1.5; --font-letter-spacing-xs: 0; --font-size-sm: 14px; --font-line-height-sm: 1.45; --font-letter-spacing-sm: 0; --font-size-md: 16px; --font-line-height-md: 1.45; --font-letter-spacing-md: 0; --font-size-lg: 20px; --font-line-height-lg: 1.35; --font-letter-spacing-lg: 0; --font-size-xl: 28px; --font-line-height-xl: 1.2; --font-letter-spacing-xl: 0; --font-size-xxl: 48px; --font-line-height-xxl: 1.05; --font-letter-spacing-xxl: 0; --font-size-xxxl: 80px; --font-line-height-xxxl: 1; --font-letter-spacing-xxxl: 0; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --style-hero-font-family: var(--font-family-display); --style-hero-font-size: var(--font-size-xxl); --style-hero-line-height: 1; --style-hero-letter-spacing: 0; --style-hero-font-weight: var(--font-weight-bold); --style-hero-color: var(--color-content-primary); --style-h1-font-family: var(--font-family-display); --style-h1-font-size: var(--font-size-xl); --style-h1-line-height: 1.05; --style-h1-letter-spacing: 0; --style-h1-font-weight: var(--font-weight-bold); --style-h1-color: var(--color-content-primary); --style-h2-font-family: var(--font-family-display); --style-h2-font-size: var(--font-size-lg); --style-h2-line-height: 1.1; --style-h2-letter-spacing: 0; --style-h2-font-weight: var(--font-weight-bold); --style-h2-color: var(--color-content-primary); --style-h3-font-family: var(--font-family-primary); --style-h3-font-size: var(--font-size-lg); --style-h3-line-height: 1.2; --style-h3-letter-spacing: 0; --style-h3-font-weight: var(--font-weight-semibold); --style-h3-color: var(--color-content-primary); --style-h4-font-family: var(--font-family-primary); --style-h4-font-size: var(--font-size-md); --style-h4-line-height: 1.25; --style-h4-letter-spacing: 0; --style-h4-font-weight: var(--font-weight-semibold); --style-h4-color: var(--color-content-primary); --style-h5-font-family: var(--font-family-primary); --style-h5-font-size: var(--font-size-sm); --style-h5-line-height: 1.3; --style-h5-letter-spacing: 0; --style-h5-font-weight: var(--font-weight-semibold); --style-h5-color: var(--color-content-primary); --style-h6-font-family: var(--font-family-primary); --style-h6-font-size: var(--font-size-xs); --style-h6-line-height: 1.35; --style-h6-letter-spacing: 0; --style-h6-font-weight: var(--font-weight-semibold); --style-h6-color: var(--color-content-primary); --style-body-font-family: var(--font-family-primary); --style-body-font-size: var(--font-size-md); --style-body-line-height: 1.55; --style-body-letter-spacing: 0; --style-body-font-weight: var(--font-weight-regular); --style-body-color: var(--color-content-primary); --style-prose-font-family: var(--font-family-secondary); --style-prose-font-size: var(--font-size-md); --style-prose-line-height: 1.65; --style-prose-letter-spacing: 0; --style-prose-font-weight: var(--font-weight-regular); --style-prose-color: var(--color-content-primary); --style-label-font-family: var(--font-family-primary); --style-label-font-size: var(--font-size-sm); --style-label-line-height: 1.25; --style-label-letter-spacing: 0; --style-label-font-weight: var(--font-weight-medium); --style-label-color: var(--color-content-primary); --style-caption-font-family: var(--font-family-primary); --style-caption-font-size: var(--font-size-xs); --style-caption-line-height: 1.35; --style-caption-letter-spacing: 0; --style-caption-font-weight: var(--font-weight-regular); --style-caption-color: var(--color-content-secondary); --style-code-font-family: var(--font-family-mono); --style-code-font-size: var(--font-size-sm); --style-code-line-height: 1.45; --style-code-letter-spacing: 0; --style-code-font-weight: var(--font-weight-regular); --style-code-color: var(--color-content-primary); --size-xxs-control-height: var(--control-height-xxs); --size-xxs-font-size: var(--font-size-xxs); --size-xxs-font-line-height: var(--font-line-height-xxs); --size-xxs-font-letter-spacing: var(--font-letter-spacing-xxs); --size-xxs-icon-size: var(--icon-size-xxs); --size-xxs-padding-inline: var(--space-1); --size-xxs-padding-block: var(--space-0-5); --size-xxs-gap: var(--space-1); --size-xxs-radius: var(--radius-sm); --size-xs-control-height: var(--control-height-xs); --size-xs-font-size: var(--font-size-xs); --size-xs-font-line-height: var(--font-line-height-xs); --size-xs-font-letter-spacing: var(--font-letter-spacing-xs); --size-xs-icon-size: var(--icon-size-xs); --size-xs-padding-inline: var(--space-1-5); --size-xs-padding-block: var(--space-1); --size-xs-gap: var(--space-1); --size-xs-radius: var(--radius-sm); --size-sm-control-height: var(--control-height-sm); --size-sm-font-size: var(--font-size-sm); --size-sm-font-line-height: var(--font-line-height-sm); --size-sm-font-letter-spacing: var(--font-letter-spacing-sm); --size-sm-icon-size: var(--icon-size-sm); --size-sm-padding-inline: var(--space-2); --size-sm-padding-block: var(--space-1); --size-sm-gap: var(--space-1-5); --size-sm-radius: var(--radius-md); --size-md-control-height: var(--control-height-md); --size-md-font-size: var(--font-size-sm); --size-md-font-line-height: var(--font-line-height-sm); --size-md-font-letter-spacing: var(--font-letter-spacing-sm); --size-md-icon-size: var(--icon-size-md); --size-md-padding-inline: var(--space-3); --size-md-padding-block: var(--space-1-5); --size-md-gap: var(--space-2); --size-md-radius: var(--radius-md); --size-lg-control-height: var(--control-height-lg); --size-lg-font-size: var(--font-size-md); --size-lg-font-line-height: var(--font-line-height-md); --size-lg-font-letter-spacing: var(--font-letter-spacing-md); --size-lg-icon-size: var(--icon-size-lg); --size-lg-padding-inline: var(--space-4); --size-lg-padding-block: var(--space-2); --size-lg-gap: var(--space-2-5); --size-lg-radius: var(--radius-lg); --size-xl-control-height: var(--control-height-xl); --size-xl-font-size: var(--font-size-lg); --size-xl-font-line-height: var(--font-line-height-lg); --size-xl-font-letter-spacing: var(--font-letter-spacing-lg); --size-xl-icon-size: var(--icon-size-xl); --size-xl-padding-inline: var(--space-5); --size-xl-padding-block: var(--space-2-5); --size-xl-gap: var(--space-3); --size-xl-radius: var(--radius-xl); --size-xxl-control-height: var(--control-height-xxl); --size-xxl-font-size: var(--font-size-xl); --size-xxl-font-line-height: var(--font-line-height-xl); --size-xxl-font-letter-spacing: var(--font-letter-spacing-xl); --size-xxl-icon-size: var(--icon-size-xxl); --size-xxl-padding-inline: var(--space-6); --size-xxl-padding-block: var(--space-3); --size-xxl-gap: var(--space-4); --size-xxl-radius: var(--radius-xxl); --control-height-2xs: var(--control-height-xxs); --radius-xs: var(--radius-sm); --font-sans: var(--font-family-primary); --font-ui: var(--style-label-font-family, var(--font-family-primary)); --font-serif: var(--font-family-secondary); --font-prose: var(--font-family-secondary); --font-heading: var(--font-family-display); --font-display: var(--font-family-display); --font-mono: var(--font-family-mono); --font-code: var(--font-family-mono); --text-1-size: var(--font-size-xxs); --text-1-lh: var(--font-line-height-xxs); --text-1-ls: var(--font-letter-spacing-xxs); --text-2-size: var(--font-size-xs); --text-2-lh: var(--font-line-height-xs); --text-2-ls: var(--font-letter-spacing-xs); --text-3-size: var(--font-size-sm); --text-3-lh: var(--font-line-height-sm); --text-3-ls: var(--font-letter-spacing-sm); --text-4-size: var(--font-size-md); --text-4-lh: var(--font-line-height-md); --text-4-ls: var(--font-letter-spacing-md); --text-5-size: var(--font-size-lg); --text-5-lh: var(--font-line-height-lg); --text-5-ls: var(--font-letter-spacing-lg); --text-6-size: var(--font-size-xl); --text-6-lh: var(--font-line-height-xl); --text-6-ls: var(--font-letter-spacing-xl); --font-size-base: var(--font-size-md); --font-size-2xl: var(--font-size-xxl); --font-size-3xl: var(--font-size-xxxl); --font-weight-normal: var(--font-weight-regular); --leading-ui: var(--style-label-line-height, 1.25); --leading-prose: 1.6; --leading-text: var(--leading-prose); --leading-heading: 1.2; --leading-display: 1.05; --tracking-badge: 0; --tracking-label: 0; --tracking-ui: 0; --tracking-prose: 0; --tracking-heading: 0; --tracking-display: 0; --tracking-tight: 0; --tracking-normal: 0; --tracking-wide: 0; --tracking-wider: 0; --motion-spin-duration: 800ms; --color-focus-ring: var(--focus-ring-color); --accordion-provider-border-width: var(--border-width); --accordion-provider-radius: var(--radius-lg); --accordion-outline-provider-bg: var(--color-surface-default); --accordion-outline-provider-border: var(--color-border-default); --accordion-outline-item-border: var(--color-border-subtle); --accordion-outline-content-bg: var(--color-surface-default); --accordion-surface-provider-bg: var(--color-surface-raised); --accordion-surface-provider-border: var(--color-border-subtle); --accordion-surface-provider-shadow: var(--shadow-subtle); --accordion-surface-item-border: var(--color-border-subtle); --accordion-surface-content-bg: var(--color-surface-default); --accordion-ghost-provider-bg: transparent; --accordion-ghost-provider-border: transparent; --accordion-ghost-item-border: var(--color-border-subtle); --accordion-ghost-content-bg: transparent; --accordion-item-border-width: var(--border-width); --accordion-trigger-min-height-sm: var(--control-height-sm); --accordion-trigger-min-height-md: var(--control-height-md); --accordion-trigger-min-height-lg: var(--control-height-lg); --accordion-trigger-min-height-full: var(--control-height-xl); --accordion-trigger-px-sm: var(--space-3); --accordion-trigger-px-md: var(--space-4); --accordion-trigger-px-lg: var(--space-5); --accordion-trigger-px-full: var(--space-6); --accordion-trigger-py-sm: var(--space-2-5); --accordion-trigger-py-md: var(--space-3); --accordion-trigger-py-lg: var(--space-3-5); --accordion-trigger-py-full: var(--space-4); --accordion-trigger-gap: var(--space-3); --accordion-trigger-font-family: var(--font-ui); --accordion-trigger-font-size-sm: var(--text-3-size); --accordion-trigger-font-size-md: var(--text-4-size); --accordion-trigger-font-size-lg: var(--text-5-size); --accordion-trigger-font-size-full: var(--text-6-size); --accordion-trigger-font-weight: var(--font-weight-medium); --accordion-trigger-line-height: var(--leading-ui); --accordion-trigger-color: var(--color-content-primary); --accordion-trigger-color-open: var(--color-content-primary); --accordion-trigger-color-disabled: var(--color-content-disabled); --accordion-trigger-hover-bg: var(--color-surface-raised); --accordion-trigger-hover-color: var(--color-content-primary); --accordion-trigger-transition-duration: var(--duration-fast); --accordion-trigger-transition-ease: var(--ease-default); --accordion-trigger-focus-ring-offset: var(--focus-ring-offset); --accordion-trigger-focus-ring-width: var(--focus-ring-width); --accordion-trigger-focus-ring-color: var(--focus-ring-color); --accordion-content-px-sm: var(--space-3); --accordion-content-px-md: var(--space-4); --accordion-content-px-lg: var(--space-5); --accordion-content-px-full: var(--space-6); --accordion-content-py-sm: var(--space-2-5); --accordion-content-py-md: var(--space-3); --accordion-content-py-lg: var(--space-4); --accordion-content-py-full: var(--space-5); --accordion-content-font-family: var(--font-prose); --accordion-content-font-size: var(--text-4-size); --accordion-content-line-height: var(--leading-prose); --accordion-content-color: var(--color-content-secondary); --accordion-content-open-duration: var(--duration-normal); --accordion-content-close-duration: var(--duration-fast); --accordion-content-open-ease: var(--ease-out); --accordion-content-close-ease: var(--ease-in); --accordion-indicator-size-sm: var(--icon-size-sm); --accordion-indicator-size-md: var(--icon-size-sm); --accordion-indicator-size-lg: var(--icon-size-md); --accordion-indicator-color: var(--color-content-secondary); --accordion-indicator-color-open: var(--color-content-primary); --accordion-indicator-rotation: 180deg; --accordion-indicator-transition-duration: var(--duration-fast); --accordion-indicator-transition-ease: var(--ease-default); --avatar-size-xs: 24px; --avatar-size-sm: 32px; --avatar-size-md: 40px; --avatar-size-lg: 48px; --avatar-size-xl: 64px; --avatar-size-xxl: 96px; --avatar-font-family: var(--font-ui); --avatar-font-size-xs: 10px; --avatar-font-size-sm: 12px; --avatar-font-size-md: 14px; --avatar-font-size-lg: 16px; --avatar-font-size-xl: 20px; --avatar-font-size-xxl: 28px; --avatar-font-weight: var(--font-weight-medium); --avatar-radius-full: var(--radius-full); --avatar-radius-md: var(--radius-md); --avatar-radius-sm: var(--radius-sm); --avatar-radius-none: 0; --avatar-border-width: 2px; --avatar-color-primary-solid-bg: var(--color-primary-solid); --avatar-color-primary-solid-fg: var(--color-primary-contrast); --avatar-color-primary-soft-bg: var(--color-primary-track); --avatar-color-primary-soft-fg: var(--color-primary-text); --avatar-color-primary-outline-border: var(--color-primary-border); --avatar-color-primary-outline-fg: var(--color-primary-text); --avatar-color-secondary-solid-bg: var(--color-secondary-solid); --avatar-color-secondary-solid-fg: var(--color-secondary-contrast); --avatar-color-secondary-soft-bg: var(--color-secondary-track); --avatar-color-secondary-soft-fg: var(--color-secondary-text); --avatar-color-secondary-outline-border: var(--color-secondary-border); --avatar-color-secondary-outline-fg: var(--color-secondary-text); --avatar-color-neutral-solid-bg: var(--color-neutral-solid); --avatar-color-neutral-solid-fg: var(--color-surface-default); --avatar-color-neutral-soft-bg: var(--color-neutral-track); --avatar-color-neutral-soft-fg: var(--color-neutral-text); --avatar-color-neutral-outline-border: var(--color-neutral-border); --avatar-color-neutral-outline-fg: var(--color-neutral-text); --avatar-color-affirm-solid-bg: var(--color-affirm-solid); --avatar-color-affirm-solid-fg: var(--color-affirm-contrast); --avatar-color-affirm-soft-bg: var(--color-affirm-track); --avatar-color-affirm-soft-fg: var(--color-affirm-text); --avatar-color-affirm-outline-border: var(--color-affirm-border); --avatar-color-affirm-outline-fg: var(--color-affirm-text); --avatar-color-fulfill-solid-bg: var(--color-fulfill-solid); --avatar-color-fulfill-solid-fg: var(--color-fulfill-contrast); --avatar-color-fulfill-soft-bg: var(--color-fulfill-track); --avatar-color-fulfill-soft-fg: var(--color-fulfill-text); --avatar-color-fulfill-outline-border: var(--color-fulfill-border); --avatar-color-fulfill-outline-fg: var(--color-fulfill-text); --avatar-color-risk-solid-bg: var(--color-risk-solid); --avatar-color-risk-solid-fg: var(--color-risk-contrast); --avatar-color-risk-soft-bg: var(--color-risk-track); --avatar-color-risk-soft-fg: var(--color-risk-text); --avatar-color-risk-outline-border: var(--color-risk-border); --avatar-color-risk-outline-fg: var(--color-risk-text); --avatar-color-threat-solid-bg: var(--color-threat-solid); --avatar-color-threat-solid-fg: var(--color-threat-contrast); --avatar-color-threat-soft-bg: var(--color-threat-track); --avatar-color-threat-soft-fg: var(--color-threat-text); --avatar-color-threat-outline-border: var(--color-threat-border); --avatar-color-threat-outline-fg: var(--color-threat-text); --avatar-color-loss-solid-bg: var(--color-loss-solid); --avatar-color-loss-solid-fg: var(--color-loss-contrast); --avatar-color-loss-soft-bg: var(--color-loss-track); --avatar-color-loss-soft-fg: var(--color-loss-text); --avatar-color-loss-outline-border: var(--color-loss-border); --avatar-color-loss-outline-fg: var(--color-loss-text); --breadcrumb-gap-xs: var(--space-0-5); --breadcrumb-gap-sm: var(--space-1); --breadcrumb-gap-md: var(--space-1-5); --breadcrumb-gap-lg: var(--space-2); --breadcrumb-font-family: var(--font-ui); --breadcrumb-font-size-xs: var(--font-size-xs); --breadcrumb-font-size-sm: var(--font-size-xs); --breadcrumb-font-size-md: var(--font-size-sm); --breadcrumb-font-size-lg: var(--font-size-md); --breadcrumb-line-height: var(--leading-ui); --breadcrumb-color: var(--color-content-secondary); --breadcrumb-link-radius: var(--radius-sm); --breadcrumb-link-color: var(--color-content-secondary); --breadcrumb-link-color-hover: var(--color-content-primary); --breadcrumb-link-color-current: var(--color-content-primary); --breadcrumb-link-font-weight: var(--font-weight-medium); --breadcrumb-link-font-weight-current: var(--font-weight-semibold); --breadcrumb-separator-color: var(--color-content-muted); --breadcrumb-ellipsis-size: var(--control-height-xs); --breadcrumb-ellipsis-radius: var(--radius-md); --breadcrumb-ellipsis-border-width: var(--border-width); --breadcrumb-ellipsis-border: transparent; --breadcrumb-ellipsis-border-hover: var(--color-border-subtle); --breadcrumb-ellipsis-bg: transparent; --breadcrumb-ellipsis-bg-hover: var(--color-surface-raised); --breadcrumb-ellipsis-color: var(--color-content-muted); --breadcrumb-ellipsis-color-hover: var(--color-content-primary); --breadcrumb-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --breadcrumb-transition-duration: var(--duration-fast); --breadcrumb-transition-ease: var(--ease-default); --checkbox-size-xs-box-size: 14px; --checkbox-size-xs-indicator-size: 8px; --checkbox-size-xs-indicator-stroke: 2px; --checkbox-size-sm-box-size: 16px; --checkbox-size-sm-indicator-size: 10px; --checkbox-size-sm-indicator-stroke: 2px; --checkbox-size-md-box-size: 18px; --checkbox-size-md-indicator-size: 12px; --checkbox-size-md-indicator-stroke: 2px; --checkbox-size-lg-box-size: 22px; --checkbox-size-lg-indicator-size: 14px; --checkbox-size-lg-indicator-stroke: 2px; --checkbox-size-xl-box-size: 26px; --checkbox-size-xl-indicator-size: 16px; --checkbox-size-xl-indicator-stroke: 2px; --checkbox-radius: var(--radius-sm); --checkbox-border-width: var(--border-width); --checkbox-focus-ring-offset: var(--focus-ring-offset); --checkbox-focus-ring-width: var(--focus-ring-width); --checkbox-focus-ring-color: var(--focus-ring-color); --checkbox-focus-ring-surface: var(--color-surface-default); --checkbox-focus-ring: 0 0 0 var(--checkbox-focus-ring-offset) var(--checkbox-focus-ring-surface), 0 0 0 calc(var(--checkbox-focus-ring-offset) + var(--checkbox-focus-ring-width)) var(--checkbox-focus-ring-color); --checkbox-transition-duration: var(--duration-fast); --checkbox-transition-ease: var(--ease-default); --checkbox-stroke-duration: 220ms; --checkbox-stroke-ease: cubic-bezier(0.4, 0, 0.2, 1); --checkbox-bg-off: var(--color-surface-default); --checkbox-bg-off-hover: color-mix( in srgb, var(--color-surface-default) 82%, var(--color-surface-overlay) ); --checkbox-border-off: var(--color-border-default); --checkbox-border-off-hover: var(--color-border-strong); --checkbox-bg-disabled: color-mix( in srgb, var(--color-surface-overlay) 78%, var(--color-surface-default) ); --checkbox-border-disabled: color-mix( in srgb, var(--color-border-default) 72%, var(--color-border-subtle) ); --checkbox-disabled-opacity: 0.72; --checkbox-indicator-color: var(--color-content-on-solid); --checkbox-indicator-color-disabled: color-mix( in srgb, var(--color-content-on-solid) 82%, var(--color-surface-default) ); --checkbox-color-primary-solid: var(--color-primary-solid); --checkbox-color-primary-solid-hover: var(--color-primary-solid-hover); --checkbox-color-neutral-solid: var(--color-neutral-solid); --checkbox-color-neutral-solid-hover: var(--color-neutral-solid-hover); --checkbox-color-secondary-solid: var(--color-secondary-solid); --checkbox-color-secondary-solid-hover: var(--color-secondary-solid-hover); --checkbox-color-affirm-solid: var(--color-affirm-solid); --checkbox-color-affirm-solid-hover: var(--color-affirm-solid-hover); --checkbox-group-gap: var(--space-3); --checkbox-group-label-font-family: var(--font-ui); --checkbox-group-label-font-size: var(--font-size-sm); --checkbox-group-label-font-weight: var(--font-weight-medium); --checkbox-group-label-line-height: var(--leading-ui); --checkbox-group-label-color: var(--color-content-primary); --checkbox-group-label-color-disabled: var(--color-content-secondary); --collapsible-trigger-font-family: var(--font-ui); --collapsible-trigger-font-size: var(--font-size-sm); --collapsible-trigger-font-weight: var(--font-weight-medium); --collapsible-trigger-color: var(--color-content-primary); --collapsible-trigger-color-hover: var(--color-content-primary); --collapsible-trigger-bg-hover: var(--color-surface-overlay); --collapsible-trigger-radius: var(--radius-sm); --collapsible-trigger-padding: var(--space-2) var(--space-3); --collapsible-content-padding: var(--space-3); --collapsible-transition-duration: var(--duration-normal); --collapsible-transition-ease: var(--ease-default); --collapsible-disabled-opacity: 0.5; --dialog-trigger-font-size: var(--font-size-sm); --dialog-overlay-bg: var(--color-overlay); --dialog-overlay-opacity: 62%; --dialog-overlay-blur: 10px; --dialog-overlay-z: 70; --dialog-overlay-in-duration: 120ms; --dialog-overlay-out-duration: 280ms; --dialog-content-bg: var(--color-surface-overlay); --dialog-content-color: var(--color-content-primary); --dialog-content-border: var(--color-border-default); --dialog-content-border-width: var(--border-width); --dialog-content-radius: var(--radius-xl); --dialog-content-shadow: var(--shadow-overlay); --dialog-content-max-height: calc(100dvh - var(--space-8)); --dialog-content-max-height-sheet: 85dvh; --dialog-content-width-sm: 420px; --dialog-content-width-md: 560px; --dialog-content-width-lg: 760px; --dialog-content-width-xl: 1024px; --dialog-content-width-inset: var(--space-6); --dialog-content-full-inset: var(--space-3); --dialog-content-full-radius: var(--radius-xxl); --dialog-content-position-inset: var(--space-4); --dialog-content-padding-sm: var(--space-4); --dialog-content-padding-md: var(--space-5); --dialog-content-padding-lg: var(--space-6); --dialog-content-padding-full: var(--space-6); --dialog-stack-gap: var(--space-4); --dialog-header-gap: var(--space-3); --dialog-footer-gap: var(--space-3); --dialog-footer-margin-top: var(--space-2); --dialog-title-font-family: var(--font-heading); --dialog-title-font-size: var(--font-size-lg); --dialog-title-font-weight: var(--font-weight-semibold); --dialog-title-line-height: var(--leading-heading); --dialog-title-color: var(--color-content-primary); --dialog-description-font-family: var(--font-ui); --dialog-description-font-size: var(--font-size-sm); --dialog-description-line-height: var(--leading-ui); --dialog-description-color: var(--color-content-secondary); --dialog-close-size: var(--control-height-sm); --dialog-close-px: var(--space-2); --dialog-close-radius: var(--radius-md); --dialog-close-inset: var(--space-3); --dialog-close-bg: transparent; --dialog-close-bg-hover: color-mix(in srgb, var(--color-neutral-track) 72%, transparent); --dialog-close-color: var(--color-content-secondary); --dialog-close-color-hover: var(--color-content-primary); --dialog-close-border: transparent; --dialog-close-border-width: var(--border-width); --dialog-close-transition-duration: var(--duration-fast); --dialog-close-transition-ease: var(--ease-default); --dialog-close-focus-ring-offset: 1px; --dialog-close-focus-ring-width: var(--focus-ring-width); --dialog-close-focus-ring-color: var(--focus-ring-color); --field-gap-xs: var(--space-1); --field-gap-sm: var(--space-1-5); --field-gap-md: var(--space-2); --field-gap-lg: var(--space-2-5); --field-gap-xl: var(--space-3); --field-font-family: var(--font-ui); --field-label-gap: var(--space-1); --field-label-font-size-xs: var(--font-size-xs); --field-label-font-size-sm: var(--font-size-xs); --field-label-font-size-md: var(--font-size-sm); --field-label-font-size-lg: var(--font-size-sm); --field-label-font-size-xl: var(--font-size-md); --field-label-font-weight: var(--font-weight-medium); --field-label-line-height: var(--leading-ui); --field-label-color: var(--color-content-primary); --field-label-color-invalid: var(--color-risk-text); --field-label-color-disabled: var(--color-content-disabled); --field-layout-column-gap: var(--space-4); --field-required-color: var(--color-risk-text); --field-control-height-xs: var(--control-height-xs); --field-control-height-sm: var(--control-height-sm); --field-control-height-md: var(--control-height-md); --field-control-height-lg: var(--control-height-lg); --field-control-height-xl: var(--control-height-xl); --field-control-px-xs: var(--space-2); --field-control-px-sm: var(--space-2-5); --field-control-px-md: var(--space-3); --field-control-px-lg: var(--space-3-5); --field-control-px-xl: var(--space-4); --field-control-gap-xs: var(--space-1); --field-control-gap-sm: var(--space-1-5); --field-control-gap-md: var(--space-2); --field-control-gap-lg: var(--space-2-5); --field-control-gap-xl: var(--space-3); --field-control-font-size-xs: var(--font-size-xs); --field-control-font-size-sm: var(--font-size-xs); --field-control-font-size-md: var(--font-size-sm); --field-control-font-size-lg: var(--font-size-sm); --field-control-font-size-xl: var(--font-size-md); --field-control-line-height: var(--leading-ui); --field-control-radius: var(--radius-md); --field-control-border-width: var(--border-width); --field-control-border: var(--color-border-default); --field-control-border-hover: var(--color-border-strong); --field-control-border-focus: var(--color-focus-ring); --field-control-border-invalid: var(--color-risk-border); --field-control-bg: var(--color-surface-default); --field-control-ghost-border: transparent; --field-control-ghost-bg: transparent; --field-control-bg-readonly: var(--color-surface-muted); --field-control-bg-disabled: var(--color-surface-muted); --field-control-color: var(--color-content-primary); --field-control-placeholder-color: var(--color-content-muted); --field-control-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --field-affix-color: var(--color-content-secondary); --field-message-font-size: var(--font-size-xs); --field-message-line-height: var(--leading-ui); --field-helper-color: var(--color-content-secondary); --field-error-color: var(--color-risk-text); --field-transition-duration: var(--duration-fast); --field-transition-ease: var(--ease-default); --field-disabled-opacity: 0.56; --form-gap-xs: var(--space-3); --form-gap-sm: var(--space-4); --form-gap-md: var(--space-5); --form-gap-lg: var(--space-6); --form-gap-xl: var(--space-7); --form-font-family: var(--font-ui); --form-color: var(--color-content-primary); --form-radius: var(--radius-lg); --form-border-width: var(--border-width); --form-panel-padding: var(--space-5); --form-panel-border: var(--color-border-default); --form-panel-bg: var(--color-surface-raised); --form-panel-shadow: var(--shadow-sm); --form-grid-min: 18rem; --form-grid-column-gap: var(--space-5); --form-action-height-xs: var(--control-height-xs); --form-action-height-sm: var(--control-height-sm); --form-action-height-md: var(--control-height-md); --form-action-height-lg: var(--control-height-lg); --form-action-height-xl: var(--control-height-xl); --form-action-px-xs: var(--space-2-5); --form-action-px-sm: var(--space-3); --form-action-px-md: var(--space-3-5); --form-action-px-lg: var(--space-4); --form-action-px-xl: var(--space-4-5); --form-action-font-size-xs: var(--font-size-xs); --form-action-font-size-sm: var(--font-size-xs); --form-action-font-size-md: var(--font-size-sm); --form-action-font-size-lg: var(--font-size-sm); --form-action-font-size-xl: var(--font-size-md); --form-action-font-weight: var(--font-weight-medium); --form-action-line-height: var(--leading-ui); --form-action-gap: var(--space-2); --form-action-radius: var(--radius-md); --form-action-border-width: var(--border-width); --form-error-summary-padding: var(--space-3); --form-error-summary-border-width: var(--border-width); --form-error-summary-radius: var(--radius-md); --form-error-summary-font-size: var(--font-size-sm); --form-error-summary-line-height: var(--leading-ui); --form-error-summary-list-indent: var(--space-4); --form-link-underline-offset: 0.18em; --form-auto-fields-gap: var(--space-3); --form-auto-fields-array-padding: var(--space-3); --form-auto-fields-border-width: var(--border-width); --form-auto-fields-radius: var(--radius-md); --form-auto-fields-item-gap: var(--space-2); --form-auto-fields-item-padding: var(--space-3); --form-widget-px: var(--space-3); --form-widget-radius: var(--radius-md); --form-widget-border-width: var(--border-width); --form-transition-duration: var(--duration-fast); --form-transition-ease: var(--ease-default); --form-disabled-opacity: 0.56; --drawer-overlay-bg: var(--color-overlay); --drawer-overlay-blur: 10px; --drawer-overlay-opacity: 62%; --drawer-overlay-z: 72; --drawer-inline-z: 64; --drawer-handle-bg: var(--color-neutral-track); --drawer-handle-bg-active: var(--color-content-secondary); --drawer-handle-radius: var(--radius-full); --drawer-handle-length: 36px; --drawer-handle-thickness: 4px; --drawer-handle-active-scale: 1.18; --drawer-handle-transition-duration: var(--duration-fast); --drawer-handle-transition-ease: var(--ease-out); --drawer-content-bg: var(--color-surface-overlay); --drawer-content-color: var(--color-content-primary); --drawer-content-border: var(--color-border-default); --drawer-content-border-width: var(--border-width); --drawer-content-radius: var(--radius-xl); --drawer-content-shadow: var(--shadow-overlay); --drawer-content-shadow-dragging: var(--shadow-overlay-strong, var(--shadow-overlay)); --drawer-content-ring-dragging-width: 2px; --drawer-content-ring-dragging-color: color-mix( in srgb, var(--color-content-secondary) 32%, transparent ); --drawer-content-ring-dragging-offset: 2px; --drawer-content-inset: var(--space-3); --drawer-content-width-sm: 360px; --drawer-content-width-md: 440px; --drawer-content-width-lg: 560px; --drawer-content-height-sm: 260px; --drawer-content-height-md: 360px; --drawer-content-height-lg: 480px; --drawer-content-padding-sm: var(--space-4); --drawer-content-padding-md: var(--space-5); --drawer-content-padding-lg: var(--space-6); --drawer-content-padding-full: var(--space-6); --drawer-stack-gap: var(--space-4); --drawer-header-gap: var(--space-3); --drawer-footer-gap: var(--space-3); --drawer-footer-margin-top: var(--space-2); --drawer-title-font-family: var(--font-heading); --drawer-title-font-size: var(--font-size-lg); --drawer-title-font-weight: var(--font-weight-semibold); --drawer-title-line-height: var(--leading-heading); --drawer-title-color: var(--color-content-primary); --drawer-description-font-family: var(--font-ui); --drawer-description-font-size: var(--font-size-sm); --drawer-description-line-height: var(--leading-ui); --drawer-description-color: var(--color-content-secondary); --drawer-close-size: var(--control-height-sm); --drawer-close-px: var(--space-2); --drawer-close-radius: var(--radius-md); --drawer-close-bg: transparent; --drawer-close-bg-hover: color-mix(in srgb, var(--color-neutral-track) 72%, transparent); --drawer-close-color: var(--color-content-secondary); --drawer-close-color-hover: var(--color-content-primary); --drawer-close-border: transparent; --drawer-close-border-width: var(--border-width); --drawer-close-transition-duration: var(--duration-fast); --drawer-close-transition-ease: var(--ease-default); --drawer-close-focus-ring-offset: 1px; --drawer-close-focus-ring-width: var(--focus-ring-width); --drawer-close-focus-ring-color: var(--focus-ring-color); --drawer-close-disabled-opacity: 0.5; --icon-size: var(--icon-size-md); --icon-stroke-width: var(--icon-stroke-width-md); --meter-height-xs: 2px; --meter-height-sm: 4px; --meter-height-md: 6px; --meter-height-lg: 8px; --meter-height-xl: 12px; --meter-radius-xs: var(--radius-full); --meter-radius-sm: var(--radius-full); --meter-radius-md: var(--radius-full); --meter-radius-lg: var(--radius-full); --meter-radius-xl: var(--radius-full); --meter-ring-size-xs: 2rem; --meter-ring-size-sm: 2.5rem; --meter-ring-size-md: 3rem; --meter-ring-size-lg: 3.5rem; --meter-ring-size-xl: 4rem; --meter-ring-thickness-xs: 3px; --meter-ring-thickness-sm: 4px; --meter-ring-thickness-md: 6px; --meter-ring-thickness-lg: 8px; --meter-ring-thickness-xl: 10px; --meter-track-bg: var(--color-neutral-track); --meter-ring-track-bg: color-mix(in srgb, var(--color-content-primary) 12%, var(--color-surface-default)); --meter-ring-center-bg: var(--color-surface-default); --meter-indicator-bg-below: var(--color-risk-solid); --meter-indicator-bg-optimum: var(--color-fulfill-solid); --meter-indicator-bg-above: var(--color-threat-solid); --meter-transition-duration: var(--duration-normal); --meter-transition-ease: var(--ease-default); --number-field-height-xs: var(--control-height-xs); --number-field-height-sm: var(--control-height-sm); --number-field-height-md: var(--control-height-md); --number-field-height-lg: var(--control-height-lg); --number-field-height-xl: var(--control-height-xl); --number-field-px-xs: var(--space-2); --number-field-px-sm: var(--space-2-5); --number-field-px-md: var(--space-3); --number-field-px-lg: var(--space-3-5); --number-field-px-xl: var(--space-4); --number-field-gap-xs: var(--space-0-5); --number-field-gap-sm: var(--space-1); --number-field-gap-md: var(--space-1-5); --number-field-gap-lg: var(--space-2); --number-field-gap-xl: var(--space-2-5); --number-field-font-family: var(--font-ui); --number-field-font-size-xs: var(--font-size-xs); --number-field-font-size-sm: var(--font-size-xs); --number-field-font-size-md: var(--font-size-sm); --number-field-font-size-lg: var(--font-size-sm); --number-field-font-size-xl: var(--font-size-md); --number-field-line-height: var(--leading-ui); --number-field-radius: var(--radius-md); --number-field-border-width: var(--border-width); --number-field-border: var(--color-border-default); --number-field-border-focus: var(--color-focus-ring); --number-field-border-invalid: var(--color-risk-border); --number-field-bg: var(--color-surface-default); --number-field-color: var(--color-content-primary); --number-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --number-field-control-size: var(--control-height-xs); --number-field-control-radius: var(--radius-md); --number-field-control-border-width: var(--border-width); --number-field-control-border: transparent; --number-field-control-border-hover: var(--color-border-subtle); --number-field-control-border-active: var(--color-primary-border); --number-field-control-bg: transparent; --number-field-control-bg-hover: var(--color-surface-raised); --number-field-control-bg-active: var(--color-primary-track); --number-field-control-color: var(--color-content-secondary); --number-field-control-color-hover: var(--color-content-primary); --number-field-control-color-active: var(--color-primary-text); --number-field-control-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --number-field-control-disabled-opacity: 0.48; --number-field-transition-duration: var(--duration-fast); --number-field-transition-ease: var(--ease-default); --number-field-disabled-opacity: 0.56; --date-field-stack-gap: var(--space-1-5); --date-field-height-xs: var(--control-height-xs); --date-field-height-sm: var(--control-height-sm); --date-field-height-md: var(--control-height-md); --date-field-height-lg: var(--control-height-lg); --date-field-height-xl: var(--control-height-xl); --date-field-px-xs: var(--space-2); --date-field-px-sm: var(--space-2-5); --date-field-px-md: var(--space-3); --date-field-px-lg: var(--space-3-5); --date-field-px-xl: var(--space-4); --date-field-gap-xs: var(--space-0-5); --date-field-gap-sm: var(--space-0-5); --date-field-gap-md: var(--space-1); --date-field-gap-lg: var(--space-1-5); --date-field-gap-xl: var(--space-2); --date-field-segment-px-xs: var(--space-0-5); --date-field-segment-px-sm: var(--space-0-5); --date-field-segment-px-md: var(--space-1); --date-field-segment-px-lg: var(--space-1-5); --date-field-segment-px-xl: var(--space-2); --date-field-font-family: var(--font-ui); --date-field-font-size-xs: var(--font-size-xs); --date-field-font-size-sm: var(--font-size-xs); --date-field-font-size-md: var(--font-size-sm); --date-field-font-size-lg: var(--font-size-sm); --date-field-font-size-xl: var(--font-size-md); --date-field-line-height: var(--leading-ui); --date-field-radius: var(--radius-md); --date-field-border-width: var(--border-width); --date-field-border: var(--color-border-default); --date-field-border-invalid: var(--color-risk-border); --date-field-bg: var(--color-surface-default); --date-field-color: var(--color-content-primary); --date-field-label-color: var(--color-content-secondary); --date-field-label-font-weight: var(--font-weight-medium); --date-field-placeholder-color: var(--color-content-muted); --date-field-literal-color: var(--color-content-muted); --date-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --date-field-segment-min-width: 1.5ch; --date-field-segment-height: calc(var(--_date-field-height) - var(--space-2)); --date-field-segment-radius: var(--radius-sm); --date-field-segment-color: var(--color-content-primary); --date-field-segment-invalid-color: var(--color-risk-text); --date-field-segment-readonly-bg: var(--color-surface-overlay); --date-field-segment-readonly-color: var(--color-content-secondary); --date-field-segment-readonly-decoration: underline dotted var(--color-content-muted); --date-field-segment-focus-shadow: inset 0 0 0 var(--border-width) var(--_date-field-accent-border); --date-field-transition-duration: var(--duration-fast); --date-field-transition-ease: var(--ease-default); --date-field-disabled-opacity: 0.56; --time-field-stack-gap: var(--space-1-5); --time-field-height-xs: var(--control-height-xs); --time-field-height-sm: var(--control-height-sm); --time-field-height-md: var(--control-height-md); --time-field-height-lg: var(--control-height-lg); --time-field-height-xl: var(--control-height-xl); --time-field-px-xs: var(--space-2); --time-field-px-sm: var(--space-2-5); --time-field-px-md: var(--space-3); --time-field-px-lg: var(--space-3-5); --time-field-px-xl: var(--space-4); --time-field-gap-xs: var(--space-0-5); --time-field-gap-sm: var(--space-0-5); --time-field-gap-md: var(--space-1); --time-field-gap-lg: var(--space-1-5); --time-field-gap-xl: var(--space-2); --time-field-segment-px-xs: var(--space-0-5); --time-field-segment-px-sm: var(--space-0-5); --time-field-segment-px-md: var(--space-1); --time-field-segment-px-lg: var(--space-1-5); --time-field-segment-px-xl: var(--space-2); --time-field-font-family: var(--font-ui); --time-field-font-size-xs: var(--font-size-xs); --time-field-font-size-sm: var(--font-size-xs); --time-field-font-size-md: var(--font-size-sm); --time-field-font-size-lg: var(--font-size-sm); --time-field-font-size-xl: var(--font-size-md); --time-field-line-height: var(--leading-ui); --time-field-radius: var(--radius-md); --time-field-border-width: var(--border-width); --time-field-border: var(--color-border-default); --time-field-border-invalid: var(--color-risk-border); --time-field-bg: var(--color-surface-default); --time-field-color: var(--color-content-primary); --time-field-label-color: var(--color-content-secondary); --time-field-label-font-weight: var(--font-weight-medium); --time-field-placeholder-color: var(--color-content-muted); --time-field-literal-color: var(--color-content-muted); --time-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --time-field-segment-min-width: 1.5ch; --time-field-segment-height: calc(var(--_time-field-height) - var(--space-2)); --time-field-segment-radius: var(--radius-sm); --time-field-segment-color: var(--color-content-primary); --time-field-segment-invalid-color: var(--color-risk-text); --time-field-segment-readonly-bg: var(--color-surface-overlay); --time-field-segment-readonly-color: var(--color-content-secondary); --time-field-segment-readonly-decoration: underline dotted var(--color-content-muted); --time-field-segment-focus-shadow: inset 0 0 0 var(--border-width) var(--_time-field-accent-border); --time-field-transition-duration: var(--duration-fast); --time-field-transition-ease: var(--ease-default); --time-field-disabled-opacity: 0.56; --color-field-stack-gap: var(--space-1-5); --color-field-height-xs: var(--control-height-xs); --color-field-height-sm: var(--control-height-sm); --color-field-height-md: var(--control-height-md); --color-field-height-lg: var(--control-height-lg); --color-field-height-xl: var(--control-height-xl); --color-field-px-xs: var(--space-2); --color-field-px-sm: var(--space-2-5); --color-field-px-md: var(--space-3); --color-field-px-lg: var(--space-3-5); --color-field-px-xl: var(--space-4); --color-field-gap-xs: var(--space-0-5); --color-field-gap-sm: var(--space-0-5); --color-field-gap-md: var(--space-1); --color-field-gap-lg: var(--space-1-5); --color-field-gap-xl: var(--space-2); --color-field-segment-px-xs: var(--space-0-5); --color-field-segment-px-sm: var(--space-0-5); --color-field-segment-px-md: var(--space-1); --color-field-segment-px-lg: var(--space-1-5); --color-field-segment-px-xl: var(--space-2); --color-field-font-family: var(--font-ui); --color-field-font-size-xs: var(--font-size-xs); --color-field-font-size-sm: var(--font-size-xs); --color-field-font-size-md: var(--font-size-sm); --color-field-font-size-lg: var(--font-size-sm); --color-field-font-size-xl: var(--font-size-md); --color-field-line-height: var(--leading-ui); --color-field-radius: var(--radius-md); --color-field-border-width: var(--border-width); --color-field-border: var(--color-border-default); --color-field-border-invalid: var(--color-risk-border); --color-field-bg: var(--color-surface-default); --color-field-color: var(--color-content-primary); --color-field-label-color: var(--color-content-secondary); --color-field-label-font-weight: var(--font-weight-medium); --color-field-placeholder-color: var(--color-content-muted); --color-field-literal-color: var(--color-content-muted); --color-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --color-field-segment-min-width: 1.5ch; --color-field-segment-height: calc(var(--_color-field-height) - var(--space-2)); --color-field-segment-radius: var(--radius-sm); --color-field-segment-color: var(--color-content-primary); --color-field-segment-invalid-color: var(--color-risk-text); --color-field-segment-readonly-bg: var(--color-surface-overlay); --color-field-segment-readonly-color: var(--color-content-secondary); --color-field-segment-readonly-decoration: underline dotted var(--color-content-muted); --color-field-segment-focus-shadow: inset 0 0 0 var(--border-width) var(--_color-field-accent-border); --color-field-swatch-size-xs: calc(var(--control-height-xs) - var(--space-2)); --color-field-swatch-size-sm: calc(var(--control-height-sm) - var(--space-2)); --color-field-swatch-size-md: calc(var(--control-height-md) - var(--space-2)); --color-field-swatch-size-lg: calc(var(--control-height-lg) - var(--space-2)); --color-field-swatch-size-xl: calc(var(--control-height-xl) - var(--space-2)); --color-field-swatch-radius: var(--radius-sm); --color-field-swatch-border: var(--color-border-subtle); --color-field-format-select-color: var(--color-content-secondary); --color-field-format-select-bg: transparent; --color-field-format-select-radius: var(--radius-sm); --color-field-format-select-px: var(--space-1); --color-field-transition-duration: var(--duration-fast); --color-field-transition-ease: var(--ease-default); --color-field-disabled-opacity: 0.56; --color-picker-content-gap: var(--space-3); --color-picker-content-padding-sm: var(--space-3); --color-picker-content-padding-md: var(--space-3-5); --color-picker-content-padding-lg: var(--space-4); --color-picker-content-width-sm: 17rem; --color-picker-content-width-md: 19.5rem; --color-picker-content-width-lg: 22rem; --color-picker-content-radius: var(--radius-lg); --color-picker-content-border-width: var(--border-width); --color-picker-content-border: var(--color-border-subtle); --color-picker-content-bg: var(--color-surface-raised); --color-picker-content-shadow: var(--shadow-md); --color-picker-trigger-height-sm: var(--control-height-sm); --color-picker-trigger-height-md: var(--control-height-md); --color-picker-trigger-height-lg: var(--control-height-lg); --color-picker-trigger-px-sm: var(--space-2); --color-picker-trigger-px-md: var(--space-2-5); --color-picker-trigger-px-lg: var(--space-3); --color-picker-trigger-gap: var(--space-2); --color-picker-trigger-radius: var(--radius-md); --color-picker-trigger-border-width: var(--border-width); --color-picker-trigger-border: var(--color-border-default); --color-picker-trigger-bg: var(--color-surface-default); --color-picker-trigger-color: var(--color-content-primary); --color-picker-trigger-hover-bg: var(--color-surface-overlay); --color-picker-trigger-hover-border: var(--color-border-strong); --color-picker-trigger-swatch-size-sm: calc(var(--control-height-sm) - var(--space-2)); --color-picker-trigger-swatch-size-md: calc(var(--control-height-md) - var(--space-2)); --color-picker-trigger-swatch-size-lg: calc(var(--control-height-lg) - var(--space-2)); --color-picker-trigger-swatch-radius: var(--radius-full); --color-picker-trigger-swatch-border: var(--color-border-subtle); --color-picker-trigger-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --color-picker-area-height: 11rem; --color-picker-area-radius: var(--radius-md); --color-picker-area-border-width: var(--border-width); --color-picker-area-border: var(--color-border-subtle); --color-picker-area-thumb-size: 16px; --color-picker-area-thumb-radius: var(--radius-full); --color-picker-area-thumb-border-width: 2px; --color-picker-area-thumb-border: var(--color-surface-default); --color-picker-area-thumb-shadow: 0 0 0 1px color-mix(in srgb, var(--color-neutral-contrast) 45%, transparent), 0 1px 2px color-mix(in srgb, var(--color-neutral-contrast) 20%, transparent); --color-picker-transparency-cell: var(--color-content-muted); --color-picker-transparency-cell-alt: var(--color-surface-default); --color-picker-swatch-size-sm: 1.25rem; --color-picker-swatch-size-md: 1.5rem; --color-picker-swatch-size-lg: 1.75rem; --color-picker-swatch-radius: var(--radius-sm); --color-picker-swatch-border: var(--color-border-subtle); --color-picker-swatch-checked-ring: var(--color-primary-solid); --color-picker-swatch-gap: var(--space-1-5); --color-picker-eye-dropper-size: var(--control-height-sm); --color-picker-eye-dropper-radius: var(--radius-md); --color-picker-eye-dropper-bg: transparent; --color-picker-eye-dropper-color: var(--color-content-secondary); --color-picker-eye-dropper-hover-bg: var(--color-surface-overlay); --color-picker-eye-dropper-hover-color: var(--color-content-primary); --color-picker-transition-duration: var(--duration-fast); --color-picker-transition-ease: var(--ease-default); --color-picker-disabled-opacity: 0.56; --button-height-xs: var(--control-height-xs); --button-height-sm: var(--control-height-sm); --button-height-md: var(--control-height-md); --button-height-lg: var(--control-height-lg); --button-height-xl: var(--control-height-xl); --button-px-xs: var(--space-2); --button-px-sm: var(--space-3); --button-px-md: var(--space-4); --button-px-lg: var(--space-5); --button-px-xl: var(--space-6); --button-gap-xs: var(--space-1); --button-gap-sm: var(--space-1-5); --button-gap-md: var(--space-2); --button-gap-lg: var(--space-2-5); --button-gap-xl: var(--space-3); --button-font-family: var(--font-ui); --button-line-height: var(--leading-ui); --button-letter-spacing: var(--tracking-normal); --button-font-size-xs: var(--font-size-xs); --button-font-size-sm: var(--font-size-sm); --button-font-size-md: var(--font-size-sm); --button-font-size-lg: var(--font-size-md); --button-font-size-xl: var(--font-size-lg); --button-font-weight-xs: var(--font-weight-medium); --button-font-weight-sm: var(--font-weight-medium); --button-font-weight-md: var(--font-weight-medium); --button-font-weight-lg: var(--font-weight-medium); --button-font-weight-xl: var(--font-weight-medium); --button-icon-size-xs: 14px; --button-icon-size-sm: 14px; --button-icon-size-md: 16px; --button-icon-size-lg: 18px; --button-icon-size-xl: 20px; --button-radius-sm: var(--radius-sm); --button-radius-md: var(--radius-md); --button-radius-lg: var(--radius-lg); --button-radius-xl: var(--radius-xl); --button-border-width: var(--border-width); --button-shadow: none; --button-transition-duration: var(--duration-fast); --button-transition-ease: var(--ease-default); --button-spinner-duration: 720ms; --button-disabled-opacity: 0.5; --button-color-primary-track: var(--color-primary-track); --button-color-primary-element: var(--color-primary-element); --button-color-primary-hover: var(--color-primary-hover); --button-color-primary-border: var(--color-primary-border); --button-color-primary-solid: var(--color-primary-solid); --button-color-primary-solid-hover: var(--color-primary-solid-hover); --button-color-primary-text: var(--color-primary-text); --button-color-primary-contrast: var(--color-primary-contrast); --button-color-secondary-track: var(--color-secondary-track); --button-color-secondary-element: var(--color-secondary-element); --button-color-secondary-hover: var(--color-secondary-hover); --button-color-secondary-border: var(--color-secondary-border); --button-color-secondary-solid: var(--color-secondary-solid); --button-color-secondary-solid-hover: var(--color-secondary-solid-hover); --button-color-secondary-text: var(--color-secondary-text); --button-color-secondary-contrast: var(--color-secondary-contrast); --button-color-neutral-track: var(--color-neutral-track); --button-color-neutral-element: var(--color-neutral-element); --button-color-neutral-hover: var(--color-neutral-hover); --button-color-neutral-border: var(--color-neutral-border); --button-color-neutral-solid: var(--color-neutral-solid); --button-color-neutral-solid-hover: var(--color-neutral-solid-hover); --button-color-neutral-text: var(--color-neutral-text); --button-color-neutral-contrast: var(--color-neutral-contrast); --button-color-affirm-track: var(--color-affirm-track); --button-color-affirm-element: var(--color-affirm-element); --button-color-affirm-hover: var(--color-affirm-hover); --button-color-affirm-border: var(--color-affirm-border); --button-color-affirm-solid: var(--color-affirm-solid); --button-color-affirm-solid-hover: var(--color-affirm-solid-hover); --button-color-affirm-text: var(--color-affirm-text); --button-color-affirm-contrast: var(--color-affirm-contrast); --button-color-fulfill-track: var(--color-fulfill-track); --button-color-fulfill-element: var(--color-fulfill-element); --button-color-fulfill-hover: var(--color-fulfill-hover); --button-color-fulfill-border: var(--color-fulfill-border); --button-color-fulfill-solid: var(--color-fulfill-solid); --button-color-fulfill-solid-hover: var(--color-fulfill-solid-hover); --button-color-fulfill-text: var(--color-fulfill-text); --button-color-fulfill-contrast: var(--color-fulfill-contrast); --button-color-risk-track: var(--color-risk-track); --button-color-risk-element: var(--color-risk-element); --button-color-risk-hover: var(--color-risk-hover); --button-color-risk-border: var(--color-risk-border); --button-color-risk-solid: var(--color-risk-solid); --button-color-risk-solid-hover: var(--color-risk-solid-hover); --button-color-risk-text: var(--color-risk-text); --button-color-risk-contrast: var(--color-risk-contrast); --button-color-threat-track: var(--color-threat-track); --button-color-threat-element: var(--color-threat-element); --button-color-threat-hover: var(--color-threat-hover); --button-color-threat-border: var(--color-threat-border); --button-color-threat-solid: var(--color-threat-solid); --button-color-threat-solid-hover: var(--color-threat-solid-hover); --button-color-threat-text: var(--color-threat-text); --button-color-threat-contrast: var(--color-threat-contrast); --button-color-loss-track: var(--color-loss-track); --button-color-loss-element: var(--color-loss-element); --button-color-loss-hover: var(--color-loss-hover); --button-color-loss-border: var(--color-loss-border); --button-color-loss-solid: var(--color-loss-solid); --button-color-loss-solid-hover: var(--color-loss-solid-hover); --button-color-loss-text: var(--color-loss-text); --button-color-loss-contrast: var(--color-loss-contrast); --calendar-gap: var(--space-3); --calendar-padding-xs: var(--space-2); --calendar-padding-sm: var(--space-3); --calendar-padding-md: var(--space-4); --calendar-padding-lg: var(--space-5); --calendar-radius: var(--radius-lg); --calendar-border-width: var(--border-width); --calendar-border: var(--color-border-subtle); --calendar-invalid-border: var(--color-risk-border); --calendar-bg: var(--color-surface-raised); --calendar-outline-bg: var(--color-surface-default); --calendar-outline-shadow: none; --calendar-color: var(--color-content-primary); --calendar-shadow: var(--shadow-sm); --calendar-font-family: var(--font-ui); --calendar-font-size-xs: var(--font-size-xs); --calendar-font-size-sm: var(--font-size-xs); --calendar-font-size-md: var(--font-size-sm); --calendar-font-size-lg: var(--font-size-sm); --calendar-line-height: var(--leading-ui); --calendar-header-gap: var(--space-2); --calendar-heading-color: var(--color-content-primary); --calendar-heading-font-size: var(--font-size-sm); --calendar-heading-font-weight: var(--font-weight-semibold); --calendar-control-size-xs: var(--control-height-xxs); --calendar-control-size-sm: var(--control-height-xs); --calendar-control-size-md: var(--control-height-sm); --calendar-control-size-lg: var(--control-height-md); --calendar-control-radius: var(--radius-md); --calendar-control-border-width: var(--border-width); --calendar-control-border: transparent; --calendar-control-border-hover: var(--color-border-subtle); --calendar-control-bg: transparent; --calendar-control-bg-hover: var(--color-surface-overlay); --calendar-control-color: var(--color-content-secondary); --calendar-control-color-hover: var(--color-content-primary); --calendar-select-min-width: 8ch; --calendar-select-px: var(--space-2); --calendar-grid-gap: var(--space-0-5); --calendar-weekday-size: var(--space-5); --calendar-weekday-color: var(--color-content-muted); --calendar-weekday-font-size: var(--font-size-xs); --calendar-weekday-font-weight: var(--font-weight-medium); --calendar-day-size-xs: var(--control-height-xxs); --calendar-day-size-sm: var(--control-height-xs); --calendar-day-size-md: var(--control-height-sm); --calendar-day-size-lg: var(--control-height-md); --calendar-day-radius: var(--radius-md); --calendar-day-border-width: var(--border-width); --calendar-day-border: transparent; --calendar-day-border-hover: var(--color-border-subtle); --calendar-day-bg: transparent; --calendar-day-bg-hover: var(--color-surface-overlay); --calendar-day-color: var(--color-content-primary); --calendar-day-color-hover: var(--color-content-primary); --calendar-day-font-weight: var(--font-weight-regular); --calendar-day-selected-color: var(--color-content-on-solid); --calendar-day-today-border: var(--color-border-strong); --calendar-day-today-color: var(--color-content-primary); --calendar-day-today-font-weight: var(--font-weight-semibold); --calendar-day-outside-color: var(--color-content-muted); --calendar-day-outside-opacity: 0.62; --calendar-day-weekend-color: var(--color-content-secondary); --calendar-day-holiday-shadow: inset 0 -2px 0 var(--_calendar-accent-border); --calendar-day-unavailable-decoration: var(--color-risk-border); --calendar-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --calendar-event-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--_calendar-accent-border); --calendar-transition-duration: var(--duration-fast); --calendar-transition-ease: var(--ease-default); --calendar-disabled-opacity: 0.52; --pagination-gap-xs: var(--space-0-5); --pagination-gap-sm: var(--space-1); --pagination-gap-md: var(--space-1-5); --pagination-gap-lg: var(--space-2); --pagination-control-size-xs: var(--control-height-xxs); --pagination-control-size-sm: var(--control-height-xs); --pagination-control-size-md: var(--control-height-sm); --pagination-control-size-lg: var(--control-height-md); --pagination-control-px-xs: var(--space-1-5); --pagination-control-px-sm: var(--space-2); --pagination-control-px-md: var(--space-2-5); --pagination-control-px-lg: var(--space-3); --pagination-font-family: var(--font-ui); --pagination-font-size-xs: var(--font-size-xs); --pagination-font-size-sm: var(--font-size-xs); --pagination-font-size-md: var(--font-size-sm); --pagination-font-size-lg: var(--font-size-sm); --pagination-line-height: var(--leading-ui); --pagination-control-radius: var(--radius-md); --pagination-control-border-width: var(--border-width); --pagination-control-border: transparent; --pagination-control-border-hover: var(--color-border-subtle); --pagination-control-bg: transparent; --pagination-control-bg-hover: var(--color-surface-raised); --pagination-control-color: var(--color-content-secondary); --pagination-control-color-hover: var(--color-content-primary); --pagination-selected-border: var(--color-primary-border); --pagination-selected-border-hover: var(--color-primary-border); --pagination-selected-bg: var(--color-primary-solid); --pagination-selected-bg-hover: var(--color-primary-solid-hover); --pagination-selected-color: var(--color-content-on-solid); --pagination-ellipsis-color: var(--color-content-muted); --pagination-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --pagination-transition-duration: var(--duration-fast); --pagination-transition-ease: var(--ease-default); --pagination-disabled-opacity: 0.56; --popover-content-z: 75; --popover-overlay-z: 60; --popover-overlay-bg: var(--color-overlay); --popover-trigger-font-size: var(--font-size-sm); --popover-gap: var(--space-3); --popover-max-width: 32rem; --popover-min-width-sm: 14rem; --popover-min-width-md: 18rem; --popover-min-width-lg: 22rem; --popover-min-width-xl: 28rem; --popover-padding-y-sm: var(--space-2); --popover-padding-x-sm: var(--space-2-5); --popover-padding-y-md: var(--space-3); --popover-padding-x-md: var(--space-3); --popover-padding-y-lg: var(--space-3-5); --popover-padding-x-lg: var(--space-4); --popover-padding-y-xl: var(--space-4); --popover-padding-x-xl: var(--space-5); --popover-font-size: var(--font-size-sm); --popover-font-family: var(--font-ui); --popover-font-weight: var(--font-weight-regular); --popover-line-height: var(--leading-text); --popover-title-font-family: var(--font-heading); --popover-title-font-size: var(--font-size-md); --popover-title-font-weight: var(--font-weight-semibold); --popover-title-line-height: var(--leading-heading); --popover-title-color: var(--color-content-primary); --popover-description-font-family: var(--font-ui); --popover-description-font-size: var(--font-size-sm); --popover-description-line-height: var(--leading-ui); --popover-description-color: var(--color-content-secondary); --popover-radius: var(--radius-lg); --popover-border-width: var(--border-width); --popover-bg: var(--color-surface-overlay); --popover-color: var(--color-content-primary); --popover-border: color-mix( in srgb, var(--color-border-default) 82%, var(--popover-bg) ); --popover-shadow: var(--shadow-overlay); --popover-transition-duration: var(--duration-fast); --popover-transition-ease: var(--ease-default); --popover-close-size: var(--control-height-xs); --popover-close-font-size: var(--font-size-sm); --popover-close-radius: var(--radius-md); --popover-close-border-width: var(--border-width); --popover-close-bg: transparent; --popover-close-bg-hover: color-mix( in srgb, var(--color-neutral-track) 72%, var(--popover-bg) ); --popover-close-color: var(--color-content-secondary); --popover-close-border: color-mix(in srgb, var(--color-border-default) 72%, transparent); --popover-close-border-hover: var(--color-border-strong); --progress-height-xs: 2px; --progress-height-sm: 4px; --progress-height-md: 6px; --progress-height-lg: 8px; --progress-height-xl: 12px; --progress-vertical-height: 10rem; --progress-radius-xs: var(--radius-full); --progress-radius-sm: var(--radius-full); --progress-radius-md: var(--radius-full); --progress-radius-lg: var(--radius-full); --progress-radius-xl: var(--radius-full); --progress-ring-size-xs: 2rem; --progress-ring-size-sm: 2.5rem; --progress-ring-size-md: 3rem; --progress-ring-size-lg: 3.5rem; --progress-ring-size-xl: 4rem; --progress-ring-thickness-xs: 3px; --progress-ring-thickness-sm: 4px; --progress-ring-thickness-md: 6px; --progress-ring-thickness-lg: 8px; --progress-ring-thickness-xl: 10px; --progress-label-font-family: var(--font-ui); --progress-label-font-size: var(--font-size-sm); --progress-label-font-weight: var(--font-weight-medium); --progress-label-line-height: var(--leading-ui); --progress-label-color: var(--color-content-primary); --progress-value-text-font-family: var(--font-ui); --progress-value-text-font-size: var(--font-size-sm); --progress-value-text-font-weight: var(--font-weight-regular); --progress-value-text-line-height: var(--leading-ui); --progress-value-text-color: var(--color-content-secondary); --progress-track-bg: color-mix(in srgb, var(--color-content-primary) 12%, var(--color-surface-default)); --progress-ring-track-bg: color-mix(in srgb, var(--color-content-primary) 12%, var(--color-surface-default)); --progress-ring-center-bg: var(--color-surface-default); --progress-indicator-bg: var(--color-primary-solid); --progress-indicator-bg-loaded: var(--color-fulfill-solid); --progress-transition-duration: var(--duration-normal); --progress-transition-ease: var(--ease-default); --progress-indeterminate-width: 35%; --progress-indeterminate-duration: 1.1s; --progress-indeterminate-ease: var(--ease-default); --radio-group-gap-vertical: var(--space-3); --radio-group-gap-horizontal: var(--space-4); --radio-group-item-size-xs: 14px; --radio-group-item-size-sm: 16px; --radio-group-item-size-md: 18px; --radio-group-item-size-lg: 22px; --radio-group-item-size-xl: 26px; --radio-group-dot-size-xs: 5px; --radio-group-dot-size-sm: 6px; --radio-group-dot-size-md: 7px; --radio-group-dot-size-lg: 9px; --radio-group-dot-size-xl: 11px; --radio-group-item-gap: var(--space-3); --radio-group-font-family: var(--font-ui); --radio-group-font-size-xs: var(--font-size-xs); --radio-group-font-size-sm: var(--font-size-xs); --radio-group-font-size-md: var(--font-size-sm); --radio-group-font-size-lg: var(--font-size-sm); --radio-group-font-size-xl: var(--font-size-md); --radio-group-font-weight: var(--font-weight-medium); --radio-group-line-height: var(--leading-ui); --radio-group-item-label-color: var(--color-content-primary); --radio-group-item-label-color-disabled: var(--color-content-disabled); --radio-group-indicator-radius: var(--radius-full); --radio-group-indicator-border-width: var(--border-width); --radio-group-indicator-bg: var(--color-surface-default); --radio-group-indicator-border: var(--color-border-default); --radio-group-indicator-border-hover: var(--color-border-strong); --radio-group-indicator-bg-disabled: color-mix( in srgb, var(--color-surface-overlay) 78%, var(--color-surface-default) ); --radio-group-indicator-border-disabled: color-mix( in srgb, var(--color-border-default) 72%, var(--color-border-subtle) ); --radio-group-indicator-bg-checked-disabled: color-mix( in srgb, var(--color-content-disabled) 40%, var(--color-surface-overlay) ); --radio-group-dot-color: var(--color-content-on-solid); --radio-group-dot-color-disabled: color-mix( in srgb, var(--color-content-on-solid) 82%, var(--color-surface-default) ); --radio-group-focus-ring-offset: var(--focus-ring-offset); --radio-group-focus-ring-width: var(--focus-ring-width); --radio-group-focus-ring-color: var(--focus-ring-color); --radio-group-focus-ring-surface: var(--color-surface-default); --radio-group-focus-ring: 0 0 0 var(--radio-group-focus-ring-offset) var(--radio-group-focus-ring-surface), 0 0 0 calc(var(--radio-group-focus-ring-offset) + var(--radio-group-focus-ring-width)) var(--radio-group-focus-ring-color); --radio-group-transition-duration: var(--duration-fast); --radio-group-transition-ease: var(--ease-default); --radio-group-disabled-opacity: 0.72; --radio-group-color-primary-solid: var(--color-primary-solid); --radio-group-color-primary-solid-hover: var(--color-primary-solid-hover); --radio-group-color-neutral-solid: var(--color-neutral-solid); --radio-group-color-neutral-solid-hover: var(--color-neutral-solid-hover); --radio-group-color-secondary-solid: var(--color-secondary-solid); --radio-group-color-secondary-solid-hover: var(--color-secondary-solid-hover); --radio-group-color-affirm-solid: var(--color-affirm-solid); --radio-group-color-affirm-solid-hover: var(--color-affirm-solid-hover); --radio-group-label-font-family: var(--font-ui); --radio-group-label-font-size: var(--font-size-sm); --radio-group-label-font-weight: var(--font-weight-medium); --radio-group-label-line-height: var(--leading-ui); --radio-group-label-color: var(--color-content-primary); --rating-group-gap-xs: var(--space-0-5); --rating-group-gap-sm: var(--space-1); --rating-group-gap-md: var(--space-1-5); --rating-group-gap-lg: var(--space-2); --rating-group-gap-xl: var(--space-2-5); --rating-group-item-size-xs: 14px; --rating-group-item-size-sm: 18px; --rating-group-item-size-md: 22px; --rating-group-item-size-lg: 28px; --rating-group-item-size-xl: 34px; --rating-group-font-family: var(--font-ui); --rating-group-font-size-xs: var(--font-size-xs); --rating-group-font-size-sm: var(--font-size-sm); --rating-group-font-size-md: var(--font-size-md); --rating-group-font-size-lg: var(--font-size-lg); --rating-group-font-size-xl: var(--font-size-xl); --rating-group-line-height: var(--leading-ui); --rating-group-item-color-inactive: var(--color-neutral-border); --rating-group-item-color-active: var(--color-fulfill-solid); --rating-group-item-color-partial: var(--color-fulfill-solid); --rating-group-item-hover-offset: -1px; --rating-group-focus-radius: var(--radius-md); --rating-group-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --rating-group-transition-duration: var(--duration-fast); --rating-group-transition-ease: var(--ease-default); --rating-group-disabled-opacity: 0.56; --search-field-height-xs: var(--control-height-xs); --search-field-height-sm: var(--control-height-sm); --search-field-height-md: var(--control-height-md); --search-field-height-lg: var(--control-height-lg); --search-field-height-xl: var(--control-height-xl); --search-field-px-xs: var(--space-2); --search-field-px-sm: var(--space-2-5); --search-field-px-md: var(--space-3); --search-field-px-lg: var(--space-3-5); --search-field-px-xl: var(--space-4); --search-field-gap-xs: var(--space-1); --search-field-gap-sm: var(--space-1-5); --search-field-gap-md: var(--space-2); --search-field-gap-lg: var(--space-2-5); --search-field-gap-xl: var(--space-3); --search-field-font-family: var(--font-ui); --search-field-font-size-xs: var(--font-size-xs); --search-field-font-size-sm: var(--font-size-xs); --search-field-font-size-md: var(--font-size-sm); --search-field-font-size-lg: var(--font-size-sm); --search-field-font-size-xl: var(--font-size-md); --search-field-line-height: var(--leading-ui); --search-field-radius: var(--radius-md); --search-field-border-width: var(--border-width); --search-field-border: var(--color-border-default); --search-field-border-focus: var(--color-focus-ring); --search-field-border-invalid: var(--color-risk-border); --search-field-bg: var(--color-surface-default); --search-field-color: var(--color-content-primary); --search-field-placeholder-color: var(--color-content-muted); --search-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --search-field-clear-size: var(--control-height-xs); --search-field-clear-radius: var(--radius-full); --search-field-clear-border-width: var(--border-width); --search-field-clear-border: transparent; --search-field-clear-border-hover: var(--color-border-subtle); --search-field-clear-bg: transparent; --search-field-clear-bg-hover: var(--color-surface-raised); --search-field-clear-color: var(--color-content-secondary); --search-field-clear-color-hover: var(--color-content-primary); --search-field-clear-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --search-field-clear-hidden-opacity: 0; --search-field-icon-size-xs: var(--icon-size-xs); --search-field-icon-size-sm: var(--icon-size-sm); --search-field-icon-size-md: var(--icon-size-md); --search-field-icon-size-lg: var(--icon-size-md); --search-field-icon-size-xl: var(--icon-size-lg); --search-field-icon-color: var(--color-content-muted); --search-field-icon-margin-inline-end: var(--space-1-5); --search-field-loading-indicator-size-xs: var(--icon-size-xs); --search-field-loading-indicator-size-sm: var(--icon-size-sm); --search-field-loading-indicator-size-md: var(--icon-size-md); --search-field-loading-indicator-size-lg: var(--icon-size-md); --search-field-loading-indicator-size-xl: var(--icon-size-lg); --search-field-loading-indicator-color: var(--color-content-muted); --search-field-loading-indicator-track: var(--color-border-subtle); --search-field-loading-indicator-thickness: 2px; --search-field-loading-indicator-duration: 900ms; --search-field-transition-duration: var(--duration-fast); --search-field-transition-ease: var(--ease-default); --search-field-disabled-opacity: 0.56; --select-stack-gap: var(--space-2); --select-font-family: var(--font-ui); --select-font-size-xs: var(--font-size-xs); --select-font-size-sm: var(--font-size-xs); --select-font-size-md: var(--font-size-sm); --select-font-size-lg: var(--font-size-md); --select-font-size-xl: var(--font-size-lg); --select-line-height: var(--leading-ui); --select-color: var(--color-content-primary); --select-color-primary-solid: var(--color-primary-solid); --select-color-primary-track: var(--color-primary-track); --select-color-primary-border: var(--color-primary-border); --select-color-primary-text: var(--color-primary-text); --select-color-secondary-solid: var(--color-secondary-solid); --select-color-secondary-track: var(--color-secondary-track); --select-color-secondary-border: var(--color-secondary-border); --select-color-secondary-text: var(--color-secondary-text); --select-color-neutral-solid: var(--color-neutral-solid); --select-color-neutral-track: var(--color-neutral-track); --select-color-neutral-border: var(--color-neutral-border); --select-color-neutral-text: var(--color-neutral-text); --select-color-affirm-solid: var(--color-affirm-solid); --select-color-affirm-track: var(--color-affirm-track); --select-color-affirm-border: var(--color-affirm-border); --select-color-affirm-text: var(--color-affirm-text); --select-color-fulfill-solid: var(--color-fulfill-solid); --select-color-fulfill-track: var(--color-fulfill-track); --select-color-fulfill-border: var(--color-fulfill-border); --select-color-fulfill-text: var(--color-fulfill-text); --select-color-risk-solid: var(--color-risk-solid); --select-color-risk-track: var(--color-risk-track); --select-color-risk-border: var(--color-risk-border); --select-color-risk-text: var(--color-risk-text); --select-color-threat-solid: var(--color-threat-solid); --select-color-threat-track: var(--color-threat-track); --select-color-threat-border: var(--color-threat-border); --select-color-threat-text: var(--color-threat-text); --select-color-loss-solid: var(--color-loss-solid); --select-color-loss-track: var(--color-loss-track); --select-color-loss-border: var(--color-loss-border); --select-color-loss-text: var(--color-loss-text); --select-trigger-height-xs: var(--control-height-xs); --select-trigger-height-sm: var(--control-height-sm); --select-trigger-height-md: var(--control-height-md); --select-trigger-height-lg: var(--control-height-lg); --select-trigger-height-xl: var(--control-height-xl); --select-trigger-px-xs: var(--space-2); --select-trigger-px-sm: var(--space-2-5); --select-trigger-px-md: var(--space-3); --select-trigger-px-lg: var(--space-3-5); --select-trigger-px-xl: var(--space-4); --select-trigger-gap-xs: var(--space-1); --select-trigger-gap-sm: var(--space-1-5); --select-trigger-gap-md: var(--space-2); --select-trigger-gap-lg: var(--space-2-5); --select-trigger-gap-xl: var(--space-3); --select-trigger-border-width: var(--border-width); --select-trigger-border: var(--color-border-default); --select-trigger-border-hover: var(--color-border-strong); --select-trigger-radius: var(--radius-md); --select-trigger-bg: var(--color-surface-default); --select-trigger-bg-hover: var(--color-surface-raised); --select-trigger-shadow: var(--shadow-xs); --select-trigger-color: var(--color-content-primary); --select-trigger-indicator-color: var(--color-content-secondary); --select-trigger-indicator-size: var(--icon-size-sm); --select-placeholder-color: var(--color-content-muted); --select-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --select-disabled-border: var(--color-border-subtle); --select-disabled-bg: var(--color-surface-raised); --select-disabled-color: var(--color-content-disabled); --select-content-z: 80; --select-content-py-xs: var(--space-0-5); --select-content-py-sm: var(--space-1); --select-content-py-md: var(--space-1-5); --select-content-py-lg: var(--space-2); --select-content-py-xl: var(--space-2-5); --select-content-px-xs: var(--space-0-5); --select-content-px-sm: var(--space-1); --select-content-px-md: var(--space-1-5); --select-content-px-lg: var(--space-2); --select-content-px-xl: var(--space-2-5); --select-content-min-width: 12rem; --select-content-max-width: 24rem; --select-content-max-height: min(20rem, calc(100dvh - var(--space-6))); --select-content-border-width: var(--border-width); --select-content-border: var(--color-border-default); --select-content-radius: var(--radius-lg); --select-content-bg: var(--color-surface-overlay); --select-content-color: var(--color-content-primary); --select-content-shadow: var(--shadow-lg); --select-content-outline-shadow: var(--shadow-md); --select-content-ghost-shadow: var(--shadow-md); --select-open-duration: var(--duration-normal); --select-close-duration: var(--duration-fast); --select-viewport-gap: var(--space-0-5); --select-viewport-padding: var(--space-0-5); --select-group-gap: var(--space-0-5); --select-group-py: var(--space-1); --select-group-heading-py: var(--space-1); --select-group-heading-px: var(--space-2); --select-group-heading-font-family: var(--font-ui); --select-group-heading-font-size: var(--font-size-xs); --select-group-heading-font-weight: var(--font-weight-semibold); --select-group-heading-letter-spacing: 0.04em; --select-group-heading-color: var(--color-content-muted); --select-separator-size: var(--border-width); --select-separator-my: var(--space-1); --select-separator-bg: var(--color-border-subtle); --select-item-gap: var(--space-2); --select-item-min-height: var(--control-height-sm); --select-item-px: var(--space-2); --select-item-radius: var(--radius-md); --select-item-color: var(--color-content-primary); --select-item-bg-highlighted: var(--color-surface-raised); --select-item-color-highlighted: var(--color-content-primary); --select-item-indicator-size: var(--icon-size-sm); --select-transition-duration: var(--duration-fast); --select-transition-ease: var(--ease-default); --toolbar-gap-xs: var(--space-0-5); --toolbar-gap-sm: var(--space-1); --toolbar-gap-md: var(--space-1-5); --toolbar-gap-lg: var(--space-2); --toolbar-padding-inline-xs: var(--space-0-5); --toolbar-padding-inline-sm: var(--space-1); --toolbar-padding-inline-md: var(--space-1-5); --toolbar-padding-inline-lg: var(--space-2); --toolbar-padding-block-xs: var(--space-0-5); --toolbar-padding-block-sm: var(--space-1); --toolbar-padding-block-md: var(--space-1); --toolbar-padding-block-lg: var(--space-1-5); --toolbar-control-height-xs: var(--control-height-xs); --toolbar-control-height-sm: var(--control-height-sm); --toolbar-control-height-md: var(--control-height-md); --toolbar-control-height-lg: var(--control-height-lg); --toolbar-control-px-xs: var(--space-1-5); --toolbar-control-px-sm: var(--space-2); --toolbar-control-px-md: var(--space-2-5); --toolbar-control-px-lg: var(--space-3); --toolbar-control-gap-xs: var(--space-0-5); --toolbar-control-gap-sm: var(--space-1); --toolbar-control-gap-md: var(--space-1-5); --toolbar-control-gap-lg: var(--space-2); --toolbar-font-family: var(--font-ui); --toolbar-font-size-xs: var(--font-size-xs); --toolbar-font-size-sm: var(--font-size-xs); --toolbar-font-size-md: var(--font-size-sm); --toolbar-font-size-lg: var(--font-size-sm); --toolbar-line-height: var(--leading-ui); --toolbar-radius: var(--radius-lg); --toolbar-bg: var(--color-surface-raised); --toolbar-border: var(--color-border-subtle); --toolbar-border-width: var(--border-width); --toolbar-shadow: var(--shadow-xs); --toolbar-color: var(--color-content-primary); --toolbar-group-gap: var(--space-0-5); --toolbar-control-radius: var(--radius-md); --toolbar-control-border-width: var(--border-width); --toolbar-control-border: transparent; --toolbar-control-border-hover: var(--color-border-subtle); --toolbar-control-border-active: var(--color-primary-border); --toolbar-control-bg: transparent; --toolbar-control-bg-hover: var(--color-surface-overlay); --toolbar-control-bg-active: var(--color-primary-track); --toolbar-control-color: var(--color-content-secondary); --toolbar-control-color-hover: var(--color-content-primary); --toolbar-control-color-active: var(--color-primary-text); --toolbar-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --toolbar-separator-bg: var(--color-border-subtle); --toolbar-separator-thickness: var(--border-width); --toolbar-separator-length: var(--control-height-md); --toolbar-separator-radius: var(--radius-full); --toolbar-transition-duration: var(--duration-fast); --toolbar-transition-ease: var(--ease-default); --toolbar-disabled-opacity: 0.48; --file-upload-gap-sm: var(--space-2); --file-upload-gap-md: var(--space-3); --file-upload-gap-lg: var(--space-4); --file-upload-padding-sm: var(--space-4); --file-upload-padding-md: var(--space-5); --file-upload-padding-lg: var(--space-6); --file-upload-control-height-sm: var(--control-height-sm); --file-upload-control-height-md: var(--control-height-md); --file-upload-control-height-lg: var(--control-height-lg); --file-upload-font-size-sm: var(--font-size-xs); --file-upload-font-size-md: var(--font-size-sm); --file-upload-font-size-lg: var(--font-size-md); --file-upload-preview-size-sm: 32px; --file-upload-preview-size-md: 40px; --file-upload-preview-size-lg: 48px; --file-upload-font-family: var(--font-ui); --file-upload-line-height: var(--leading-ui); --file-upload-color: var(--color-content-primary); --file-upload-label-color: var(--color-content-secondary); --file-upload-label-font-weight: var(--font-weight-medium); --file-upload-dropzone-gap: var(--space-2); --file-upload-dropzone-min-height: 9rem; --file-upload-dropzone-border-width: var(--border-width); --file-upload-dropzone-border: var(--color-border-default); --file-upload-dropzone-radius: var(--radius-lg); --file-upload-dropzone-bg: var(--color-surface-raised); --file-upload-dropzone-color: var(--color-content-secondary); --file-upload-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --file-upload-button-gap: var(--space-1-5); --file-upload-button-px: var(--space-3); --file-upload-button-border-width: var(--border-width); --file-upload-button-border: var(--color-border-subtle); --file-upload-button-border-hover: var(--color-border-default); --file-upload-button-radius: var(--radius-md); --file-upload-button-bg: var(--color-surface-raised); --file-upload-button-bg-hover: var(--color-surface-overlay); --file-upload-button-color: var(--color-content-secondary); --file-upload-button-color-hover: var(--color-content-primary); --file-upload-button-solid-color: var(--color-content-on-solid); --file-upload-list-gap: var(--space-2); --file-upload-item-gap: var(--space-3); --file-upload-item-padding: var(--space-2); --file-upload-item-border-width: var(--border-width); --file-upload-item-border: var(--color-border-subtle); --file-upload-item-radius: var(--radius-md); --file-upload-item-bg: var(--color-surface-raised); --file-upload-item-shadow: var(--shadow-xs); --file-upload-preview-radius: var(--radius-sm); --file-upload-preview-bg: var(--color-neutral-track); --file-upload-preview-color: var(--color-neutral-text); --file-upload-item-name-color: var(--color-content-primary); --file-upload-item-name-font-weight: var(--font-weight-medium); --file-upload-item-size-color: var(--color-content-muted); --file-upload-item-size-font-size: var(--font-size-xs); --file-upload-progress-height: 4px; --file-upload-progress-radius: var(--radius-full); --file-upload-progress-track-bg: var(--color-neutral-track); --file-upload-transition-duration: var(--duration-fast); --file-upload-transition-ease: var(--ease-default); --file-upload-disabled-opacity: 0.52; --file-upload-color-primary-solid: var(--color-primary-solid); --file-upload-color-primary-solid-hover: var(--color-primary-solid-hover); --file-upload-color-primary-track: var(--color-primary-track); --file-upload-color-primary-border: var(--color-primary-border); --file-upload-color-primary-text: var(--color-primary-text); --file-upload-color-secondary-solid: var(--color-secondary-solid); --file-upload-color-secondary-solid-hover: var(--color-secondary-solid-hover); --file-upload-color-secondary-track: var(--color-secondary-track); --file-upload-color-secondary-border: var(--color-secondary-border); --file-upload-color-secondary-text: var(--color-secondary-text); --file-upload-color-neutral-solid: var(--color-neutral-solid); --file-upload-color-neutral-solid-hover: var(--color-neutral-solid-hover); --file-upload-color-neutral-track: var(--color-neutral-track); --file-upload-color-neutral-border: var(--color-neutral-border); --file-upload-color-neutral-text: var(--color-neutral-text); --file-upload-color-affirm-solid: var(--color-affirm-solid); --file-upload-color-affirm-solid-hover: var(--color-affirm-solid-hover); --file-upload-color-affirm-track: var(--color-affirm-track); --file-upload-color-affirm-border: var(--color-affirm-border); --file-upload-color-affirm-text: var(--color-affirm-text); --file-upload-color-fulfill-solid: var(--color-fulfill-solid); --file-upload-color-fulfill-solid-hover: var(--color-fulfill-solid-hover); --file-upload-color-fulfill-track: var(--color-fulfill-track); --file-upload-color-fulfill-border: var(--color-fulfill-border); --file-upload-color-fulfill-text: var(--color-fulfill-text); --file-upload-color-risk-solid: var(--color-risk-solid); --file-upload-color-risk-solid-hover: var(--color-risk-solid-hover); --file-upload-color-risk-track: var(--color-risk-track); --file-upload-color-risk-border: var(--color-risk-border); --file-upload-color-risk-text: var(--color-risk-text); --file-upload-color-threat-solid: var(--color-threat-solid); --file-upload-color-threat-solid-hover: var(--color-threat-solid-hover); --file-upload-color-threat-track: var(--color-threat-track); --file-upload-color-threat-border: var(--color-threat-border); --file-upload-color-threat-text: var(--color-threat-text); --file-upload-color-loss-solid: var(--color-loss-solid); --file-upload-color-loss-solid-hover: var(--color-loss-solid-hover); --file-upload-color-loss-track: var(--color-loss-track); --file-upload-color-loss-border: var(--color-loss-border); --file-upload-color-loss-text: var(--color-loss-text); --tag-group-gap-xs: var(--space-0-5); --tag-group-gap-sm: var(--space-1); --tag-group-gap-md: var(--space-1-5); --tag-group-gap-lg: var(--space-2); --tag-group-item-height-xs: var(--control-height-xs); --tag-group-item-height-sm: var(--control-height-sm); --tag-group-item-height-md: var(--control-height-md); --tag-group-item-height-lg: var(--control-height-lg); --tag-group-item-px-xs: var(--space-1-5); --tag-group-item-px-sm: var(--space-2); --tag-group-item-px-md: var(--space-2-5); --tag-group-item-px-lg: var(--space-3); --tag-group-item-gap-xs: var(--space-0-5); --tag-group-item-gap-sm: var(--space-1); --tag-group-item-gap-md: var(--space-1-5); --tag-group-item-gap-lg: var(--space-2); --tag-group-font-family: var(--font-ui); --tag-group-font-size-xs: var(--font-size-xs); --tag-group-font-size-sm: var(--font-size-xs); --tag-group-font-size-md: var(--font-size-sm); --tag-group-font-size-lg: var(--font-size-sm); --tag-group-line-height: var(--leading-ui); --tag-group-color: var(--color-content-primary); --tag-group-label-color: var(--color-content-secondary); --tag-group-label-font-weight: var(--font-weight-medium); --tag-group-item-radius: var(--radius-full); --tag-group-item-border-width: var(--border-width); --tag-group-item-border: var(--color-border-subtle); --tag-group-item-border-hover: var(--color-border-default); --tag-group-item-bg: var(--color-surface-raised); --tag-group-item-bg-hover: var(--color-surface-overlay); --tag-group-item-shadow: var(--shadow-xs); --tag-group-item-color: var(--color-content-secondary); --tag-group-item-color-hover: var(--color-content-primary); --tag-group-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --tag-group-solid-fg: var(--color-content-on-solid); --tag-group-remove-size: var(--control-height-xs); --tag-group-remove-radius: var(--radius-full); --tag-group-remove-border-width: var(--border-width); --tag-group-remove-border: transparent; --tag-group-remove-border-hover: var(--color-border-subtle); --tag-group-remove-bg: transparent; --tag-group-remove-bg-hover: color-mix(in srgb, currentColor 12%, transparent); --tag-group-transition-duration: var(--duration-fast); --tag-group-transition-ease: var(--ease-default); --tag-group-disabled-opacity: 0.5; --tag-group-color-primary-solid-bg: var(--color-primary-solid); --tag-group-color-primary-solid-bg-hover: var(--color-primary-solid-hover); --tag-group-color-primary-soft-bg: var(--color-primary-track); --tag-group-color-primary-soft-bg-hover: color-mix(in srgb, var(--color-primary-track) 74%, var(--color-surface-overlay)); --tag-group-color-primary-soft-fg: var(--color-primary-text); --tag-group-color-primary-outline-border: var(--color-primary-border); --tag-group-color-primary-outline-fg: var(--color-primary-text); --tag-group-color-secondary-solid-bg: var(--color-secondary-solid); --tag-group-color-secondary-solid-bg-hover: var(--color-secondary-solid-hover); --tag-group-color-secondary-soft-bg: var(--color-secondary-track); --tag-group-color-secondary-soft-bg-hover: color-mix(in srgb, var(--color-secondary-track) 74%, var(--color-surface-overlay)); --tag-group-color-secondary-soft-fg: var(--color-secondary-text); --tag-group-color-secondary-outline-border: var(--color-secondary-border); --tag-group-color-secondary-outline-fg: var(--color-secondary-text); --tag-group-color-neutral-solid-bg: var(--color-neutral-solid); --tag-group-color-neutral-solid-bg-hover: var(--color-neutral-solid-hover); --tag-group-color-neutral-soft-bg: var(--color-neutral-track); --tag-group-color-neutral-soft-bg-hover: color-mix(in srgb, var(--color-neutral-track) 74%, var(--color-surface-overlay)); --tag-group-color-neutral-soft-fg: var(--color-neutral-text); --tag-group-color-neutral-outline-border: var(--color-neutral-border); --tag-group-color-neutral-outline-fg: var(--color-neutral-text); --tag-group-color-affirm-solid-bg: var(--color-affirm-solid); --tag-group-color-affirm-solid-bg-hover: var(--color-affirm-solid-hover); --tag-group-color-affirm-soft-bg: var(--color-affirm-track); --tag-group-color-affirm-soft-bg-hover: color-mix(in srgb, var(--color-affirm-track) 74%, var(--color-surface-overlay)); --tag-group-color-affirm-soft-fg: var(--color-affirm-text); --tag-group-color-affirm-outline-border: var(--color-affirm-border); --tag-group-color-affirm-outline-fg: var(--color-affirm-text); --tag-group-color-fulfill-solid-bg: var(--color-fulfill-solid); --tag-group-color-fulfill-solid-bg-hover: var(--color-fulfill-solid-hover); --tag-group-color-fulfill-soft-bg: var(--color-fulfill-track); --tag-group-color-fulfill-soft-bg-hover: color-mix(in srgb, var(--color-fulfill-track) 74%, var(--color-surface-overlay)); --tag-group-color-fulfill-soft-fg: var(--color-fulfill-text); --tag-group-color-fulfill-outline-border: var(--color-fulfill-border); --tag-group-color-fulfill-outline-fg: var(--color-fulfill-text); --tag-group-color-risk-solid-bg: var(--color-risk-solid); --tag-group-color-risk-solid-bg-hover: var(--color-risk-solid-hover); --tag-group-color-risk-soft-bg: var(--color-risk-track); --tag-group-color-risk-soft-bg-hover: color-mix(in srgb, var(--color-risk-track) 74%, var(--color-surface-overlay)); --tag-group-color-risk-soft-fg: var(--color-risk-text); --tag-group-color-risk-outline-border: var(--color-risk-border); --tag-group-color-risk-outline-fg: var(--color-risk-text); --tag-group-color-threat-solid-bg: var(--color-threat-solid); --tag-group-color-threat-solid-bg-hover: var(--color-threat-solid-hover); --tag-group-color-threat-soft-bg: var(--color-threat-track); --tag-group-color-threat-soft-bg-hover: color-mix(in srgb, var(--color-threat-track) 74%, var(--color-surface-overlay)); --tag-group-color-threat-soft-fg: var(--color-threat-text); --tag-group-color-threat-outline-border: var(--color-threat-border); --tag-group-color-threat-outline-fg: var(--color-threat-text); --tag-group-color-loss-solid-bg: var(--color-loss-solid); --tag-group-color-loss-solid-bg-hover: var(--color-loss-solid-hover); --tag-group-color-loss-soft-bg: var(--color-loss-track); --tag-group-color-loss-soft-bg-hover: color-mix(in srgb, var(--color-loss-track) 74%, var(--color-surface-overlay)); --tag-group-color-loss-soft-fg: var(--color-loss-text); --tag-group-color-loss-outline-border: var(--color-loss-border); --tag-group-color-loss-outline-fg: var(--color-loss-text); --editable-gap-xs: var(--space-0-5); --editable-gap-sm: var(--space-1); --editable-gap-md: var(--space-1-5); --editable-gap-lg: var(--space-2); --editable-gap-xl: var(--space-2-5); --editable-control-height-xs: var(--control-height-xs); --editable-control-height-sm: var(--control-height-sm); --editable-control-height-md: var(--control-height-md); --editable-control-height-lg: var(--control-height-lg); --editable-control-height-xl: var(--control-height-xl); --editable-control-px-xs: var(--space-1-5); --editable-control-px-sm: var(--space-2); --editable-control-px-md: var(--space-2-5); --editable-control-px-lg: var(--space-3); --editable-control-px-xl: var(--space-3-5); --editable-font-family: var(--font-ui); --editable-font-size-xs: var(--font-size-xs); --editable-font-size-sm: var(--font-size-xs); --editable-font-size-md: var(--font-size-sm); --editable-font-size-lg: var(--font-size-md); --editable-font-size-xl: var(--font-size-lg); --editable-line-height: var(--leading-ui); --editable-color: var(--color-content-primary); --editable-area-min-inline-size: 12ch; --editable-control-radius: var(--radius-md); --editable-control-border-width: var(--border-width); --editable-control-border: var(--color-border-subtle); --editable-control-border-hover: var(--color-border-default); --editable-control-bg: var(--color-surface-raised); --editable-control-shadow: var(--shadow-xs); --editable-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --editable-placeholder-color: var(--color-content-muted); --editable-trigger-gap: var(--space-1); --editable-trigger-px: var(--space-2-5); --editable-trigger-radius: var(--radius-md); --editable-trigger-border-width: var(--border-width); --editable-trigger-border: var(--color-border-subtle); --editable-trigger-border-hover: var(--color-border-default); --editable-trigger-bg: var(--color-surface-raised); --editable-trigger-bg-hover: var(--color-surface-overlay); --editable-trigger-color: var(--color-content-secondary); --editable-trigger-color-hover: var(--color-content-primary); --editable-submit-color: var(--color-content-on-solid); --editable-submit-hover-brightness: 1.04; --editable-transition-duration: var(--duration-fast); --editable-transition-ease: var(--ease-default); --editable-disabled-opacity: 0.5; --editable-color-primary-solid: var(--color-primary-solid); --editable-color-primary-track: var(--color-primary-track); --editable-color-primary-border: var(--color-primary-border); --editable-color-primary-text: var(--color-primary-text); --editable-color-secondary-solid: var(--color-secondary-solid); --editable-color-secondary-track: var(--color-secondary-track); --editable-color-secondary-border: var(--color-secondary-border); --editable-color-secondary-text: var(--color-secondary-text); --editable-color-neutral-solid: var(--color-neutral-solid); --editable-color-neutral-track: var(--color-neutral-track); --editable-color-neutral-border: var(--color-neutral-border); --editable-color-neutral-text: var(--color-neutral-text); --editable-color-affirm-solid: var(--color-affirm-solid); --editable-color-affirm-track: var(--color-affirm-track); --editable-color-affirm-border: var(--color-affirm-border); --editable-color-affirm-text: var(--color-affirm-text); --editable-color-risk-solid: var(--color-risk-solid); --editable-color-risk-track: var(--color-risk-track); --editable-color-risk-border: var(--color-risk-border); --editable-color-risk-text: var(--color-risk-text); --editable-color-threat-solid: var(--color-threat-solid); --editable-color-threat-track: var(--color-threat-track); --editable-color-threat-border: var(--color-threat-border); --editable-color-threat-text: var(--color-threat-text); --words-gap-sm: var(--space-2); --words-gap-md: var(--space-2-5); --words-gap-lg: var(--space-3); --words-radius-sm: var(--radius-md); --words-radius-md: var(--radius-lg); --words-radius-lg: var(--radius-xl); --words-max-inline-size: 52rem; --words-border-width: var(--border-width); --words-border: var(--color-border-subtle); --words-border-hover: var(--color-border-default); --words-bg: var(--color-surface-raised); --words-shadow: var(--shadow-xs); --words-color: var(--color-content-primary); --words-font-family: var(--font-ui); --words-font-size-sm: var(--font-size-xs); --words-font-size-md: var(--font-size-sm); --words-font-size-lg: var(--font-size-md); --words-line-height: var(--leading-ui); --words-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --words-invalid-border: var(--color-risk-border); --words-disabled-opacity: 0.5; --words-toolbar-gap: var(--space-1); --words-toolbar-px-sm: var(--space-2); --words-toolbar-px-md: var(--space-2-5); --words-toolbar-px-lg: var(--space-3); --words-toolbar-py-sm: var(--space-1); --words-toolbar-py-md: var(--space-1-5); --words-toolbar-py-lg: var(--space-2); --words-toolbar-border: var(--color-border-subtle); --words-toolbar-bg: var(--color-surface-default); --words-button-size-sm: var(--control-height-xs); --words-button-size-md: var(--control-height-sm); --words-button-size-lg: var(--control-height-md); --words-command-gap: var(--space-1); --words-command-px: var(--space-2); --words-command-radius: var(--radius-md); --words-command-color: var(--color-content-secondary); --words-command-border-hover: var(--color-border-default); --words-command-bg-hover: var(--color-surface-overlay); --words-command-color-hover: var(--color-content-primary); --words-command-solid-color: var(--color-content-on-solid); --words-placeholder-color: var(--color-content-muted); --words-content-color: var(--color-content-primary); --words-content-px-sm: var(--space-3); --words-content-px-md: var(--space-4); --words-content-px-lg: var(--space-5); --words-content-py-sm: var(--space-2-5); --words-content-py-md: var(--space-3); --words-content-py-lg: var(--space-4); --words-content-py-after-placeholder: var(--space-1); --words-content-min-block-size-sm: 10rem; --words-content-min-block-size-md: 13rem; --words-content-min-block-size-lg: 16rem; --words-selection-color: var(--color-content-primary); --words-block-gap: var(--space-2); --words-heading-color: var(--color-content-primary); --words-heading-font-size: var(--font-size-lg); --words-heading-font-weight: var(--font-weight-semibold); --words-heading-line-height: var(--leading-heading); --words-strong-font-weight: var(--font-weight-semibold); --words-code-radius: var(--radius-sm); --words-code-bg: var(--color-surface-overlay); --words-code-color: var(--color-content-primary); --words-code-font-family: var(--font-mono); --words-code-py: var(--space-0-5); --words-code-px: var(--space-1); --words-quote-px: var(--space-3); --words-quote-border-width: var(--border-width-strong); --words-quote-color: var(--color-content-secondary); --words-list-padding-inline-start: var(--space-5); --words-status-py: var(--space-2); --words-status-color: var(--color-content-muted); --words-status-font-size: var(--font-size-xs); --words-status-error-color: var(--color-risk-text); --words-transition-duration: var(--duration-fast); --words-transition-ease: var(--ease-default); --words-color-primary-solid: var(--color-primary-solid); --words-color-primary-solid-hover: var(--color-primary-solid-hover); --words-color-primary-track: var(--color-primary-track); --words-color-primary-border: var(--color-primary-border); --words-color-primary-text: var(--color-primary-text); --words-color-secondary-solid: var(--color-secondary-solid); --words-color-secondary-solid-hover: var(--color-secondary-solid-hover); --words-color-secondary-track: var(--color-secondary-track); --words-color-secondary-border: var(--color-secondary-border); --words-color-secondary-text: var(--color-secondary-text); --words-color-neutral-solid: var(--color-neutral-solid); --words-color-neutral-solid-hover: var(--color-neutral-solid-hover); --words-color-neutral-track: var(--color-neutral-track); --words-color-neutral-border: var(--color-neutral-border); --words-color-neutral-text: var(--color-neutral-text); --words-color-affirm-solid: var(--color-affirm-solid); --words-color-affirm-solid-hover: var(--color-affirm-solid-hover); --words-color-affirm-track: var(--color-affirm-track); --words-color-affirm-border: var(--color-affirm-border); --words-color-affirm-text: var(--color-affirm-text); --words-color-fulfill-solid: var(--color-fulfill-solid); --words-color-fulfill-solid-hover: var(--color-fulfill-solid-hover); --words-color-fulfill-track: var(--color-fulfill-track); --words-color-fulfill-border: var(--color-fulfill-border); --words-color-fulfill-text: var(--color-fulfill-text); --words-color-risk-solid: var(--color-risk-solid); --words-color-risk-solid-hover: var(--color-risk-solid-hover); --words-color-risk-track: var(--color-risk-track); --words-color-risk-border: var(--color-risk-border); --words-color-risk-text: var(--color-risk-text); --words-color-threat-solid: var(--color-threat-solid); --words-color-threat-solid-hover: var(--color-threat-solid-hover); --words-color-threat-track: var(--color-threat-track); --words-color-threat-border: var(--color-threat-border); --words-color-threat-text: var(--color-threat-text); --words-color-loss-solid: var(--color-loss-solid); --words-color-loss-solid-hover: var(--color-loss-solid-hover); --words-color-loss-track: var(--color-loss-track); --words-color-loss-border: var(--color-loss-border); --words-color-loss-text: var(--color-loss-text); --tags-input-gap-xs: var(--space-1); --tags-input-gap-sm: var(--space-1-5); --tags-input-gap-md: var(--space-2); --tags-input-gap-lg: var(--space-2-5); --tags-input-gap-xl: var(--space-3); --tags-input-control-min-height-xs: var(--control-height-sm); --tags-input-control-min-height-sm: var(--control-height-md); --tags-input-control-min-height-md: var(--control-height-lg); --tags-input-control-min-height-lg: calc(var(--control-height-lg) + var(--space-2)); --tags-input-control-min-height-xl: calc(var(--control-height-xl) + var(--space-2)); --tags-input-control-px-xs: var(--space-1-5); --tags-input-control-px-sm: var(--space-2); --tags-input-control-px-md: var(--space-2-5); --tags-input-control-px-lg: var(--space-3); --tags-input-control-px-xl: var(--space-3-5); --tags-input-control-py-xs: var(--space-0-5); --tags-input-control-py-sm: var(--space-1); --tags-input-control-py-md: var(--space-1-5); --tags-input-control-py-lg: var(--space-2); --tags-input-control-py-xl: var(--space-2-5); --tags-input-item-height-xs: var(--control-height-xs); --tags-input-item-height-sm: var(--control-height-sm); --tags-input-item-height-md: var(--control-height-md); --tags-input-item-height-lg: var(--control-height-lg); --tags-input-item-height-xl: var(--control-height-xl); --tags-input-item-px-xs: var(--space-1-5); --tags-input-item-px-sm: var(--space-2); --tags-input-item-px-md: var(--space-2-5); --tags-input-item-px-lg: var(--space-3); --tags-input-item-px-xl: var(--space-3-5); --tags-input-font-family: var(--font-ui); --tags-input-font-size-xs: var(--font-size-xs); --tags-input-font-size-sm: var(--font-size-xs); --tags-input-font-size-md: var(--font-size-sm); --tags-input-font-size-lg: var(--font-size-md); --tags-input-font-size-xl: var(--font-size-lg); --tags-input-line-height: var(--leading-ui); --tags-input-color: var(--color-content-primary); --tags-input-item-gap: var(--space-1-5); --tags-input-control-radius: var(--radius-lg); --tags-input-control-border-width: var(--border-width); --tags-input-control-border: var(--color-border-default); --tags-input-control-border-hover: var(--color-border-strong); --tags-input-control-bg: var(--color-surface-raised); --tags-input-control-shadow: var(--shadow-xs); --tags-input-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --tags-input-input-min-inline-size: 8ch; --tags-input-placeholder-color: var(--color-content-muted); --tags-input-item-radius: var(--radius-full); --tags-input-item-border-width: var(--border-width); --tags-input-item-border: var(--color-border-subtle); --tags-input-item-bg: var(--color-surface-overlay); --tags-input-item-color: var(--color-content-primary); --tags-input-action-gap: var(--space-1); --tags-input-action-px: var(--space-2-5); --tags-input-action-radius: var(--radius-md); --tags-input-action-border-width: var(--border-width); --tags-input-action-border: transparent; --tags-input-action-border-hover: var(--color-border-subtle); --tags-input-action-bg: transparent; --tags-input-action-bg-hover: color-mix(in srgb, currentColor 10%, transparent); --tags-input-action-color: var(--color-content-secondary); --tags-input-action-color-hover: var(--color-content-primary); --tags-input-delete-size: var(--control-height-xs); --tags-input-delete-radius: var(--radius-full); --tags-input-transition-duration: var(--duration-fast); --tags-input-transition-ease: var(--ease-default); --tags-input-disabled-opacity: 0.52; --tags-input-color-primary-solid: var(--color-primary-solid); --tags-input-color-primary-track: var(--color-primary-track); --tags-input-color-primary-border: var(--color-primary-border); --tags-input-color-primary-text: var(--color-primary-text); --tags-input-color-secondary-solid: var(--color-secondary-solid); --tags-input-color-secondary-track: var(--color-secondary-track); --tags-input-color-secondary-border: var(--color-secondary-border); --tags-input-color-secondary-text: var(--color-secondary-text); --tags-input-color-neutral-solid: var(--color-neutral-solid); --tags-input-color-neutral-track: var(--color-neutral-track); --tags-input-color-neutral-border: var(--color-neutral-border); --tags-input-color-neutral-text: var(--color-neutral-text); --tags-input-color-affirm-solid: var(--color-affirm-solid); --tags-input-color-affirm-track: var(--color-affirm-track); --tags-input-color-affirm-border: var(--color-affirm-border); --tags-input-color-affirm-text: var(--color-affirm-text); --tags-input-color-fulfill-solid: var(--color-fulfill-solid); --tags-input-color-fulfill-track: var(--color-fulfill-track); --tags-input-color-fulfill-border: var(--color-fulfill-border); --tags-input-color-fulfill-text: var(--color-fulfill-text); --tags-input-color-risk-solid: var(--color-risk-solid); --tags-input-color-risk-track: var(--color-risk-track); --tags-input-color-risk-border: var(--color-risk-border); --tags-input-color-risk-text: var(--color-risk-text); --tags-input-color-threat-solid: var(--color-threat-solid); --tags-input-color-threat-track: var(--color-threat-track); --tags-input-color-threat-border: var(--color-threat-border); --tags-input-color-threat-text: var(--color-threat-text); --tags-input-color-loss-solid: var(--color-loss-solid); --tags-input-color-loss-track: var(--color-loss-track); --tags-input-color-loss-border: var(--color-loss-border); --tags-input-color-loss-text: var(--color-loss-text); --stepper-gap-sm: var(--space-3); --stepper-gap-md: var(--space-4); --stepper-gap-lg: var(--space-5); --stepper-indicator-size-sm: var(--control-height-sm); --stepper-indicator-size-md: var(--control-height-md); --stepper-indicator-size-lg: var(--control-height-lg); --stepper-font-family: var(--font-ui); --stepper-font-size-sm: var(--font-size-xs); --stepper-font-size-md: var(--font-size-sm); --stepper-font-size-lg: var(--font-size-md); --stepper-line-height: var(--leading-ui); --stepper-color: var(--color-content-primary); --stepper-list-gap: var(--space-1); --stepper-item-gap: var(--space-2); --stepper-trigger-gap: var(--space-2); --stepper-trigger-px: var(--space-2); --stepper-trigger-py: var(--space-1); --stepper-trigger-radius: var(--radius-md); --stepper-trigger-border-width: var(--border-width); --stepper-trigger-color: var(--color-content-secondary); --stepper-trigger-color-hover: var(--color-content-primary); --stepper-trigger-bg-hover: var(--color-surface-overlay); --stepper-indicator-radius: var(--radius-full); --stepper-indicator-border-width: var(--border-width); --stepper-indicator-border: var(--color-border-default); --stepper-indicator-bg: var(--color-surface-raised); --stepper-indicator-color: var(--color-content-secondary); --stepper-indicator-font-weight: var(--font-weight-semibold); --stepper-complete-color: var(--color-content-on-solid); --stepper-separator-min-size: 3rem; --stepper-separator-thickness: var(--border-width-strong); --stepper-separator-radius: var(--radius-full); --stepper-separator-bg: var(--color-border-subtle); --stepper-content-padding: var(--space-4); --stepper-content-radius: var(--radius-lg); --stepper-content-border-width: var(--border-width); --stepper-content-border: var(--color-border-subtle); --stepper-content-bg: var(--color-surface-raised); --stepper-content-shadow: var(--shadow-xs); --stepper-nav-height: var(--control-height-md); --stepper-nav-px: var(--space-3); --stepper-nav-radius: var(--radius-md); --stepper-nav-border-width: var(--border-width); --stepper-nav-border: var(--color-border-subtle); --stepper-nav-bg: var(--color-surface-raised); --stepper-nav-color: var(--color-content-primary); --stepper-nav-hover-brightness: 1.04; --stepper-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); --stepper-transition-duration: var(--duration-fast); --stepper-transition-ease: var(--ease-default); --stepper-disabled-opacity: 0.45; --stepper-color-primary-solid: var(--color-primary-solid); --stepper-color-primary-track: var(--color-primary-track); --stepper-color-primary-border: var(--color-primary-border); --stepper-color-primary-text: var(--color-primary-text); --stepper-color-secondary-solid: var(--color-secondary-solid); --stepper-color-secondary-track: var(--color-secondary-track); --stepper-color-secondary-border: var(--color-secondary-border); --stepper-color-secondary-text: var(--color-secondary-text); --stepper-color-neutral-solid: var(--color-neutral-solid); --stepper-color-neutral-track: var(--color-neutral-track); --stepper-color-neutral-border: var(--color-neutral-border); --stepper-color-neutral-text: var(--color-neutral-text); --stepper-color-affirm-solid: var(--color-affirm-solid); --stepper-color-affirm-track: var(--color-affirm-track); --stepper-color-affirm-border: var(--color-affirm-border); --stepper-color-affirm-text: var(--color-affirm-text); --stepper-color-fulfill-solid: var(--color-fulfill-solid); --stepper-color-fulfill-track: var(--color-fulfill-track); --stepper-color-fulfill-border: var(--color-fulfill-border); --stepper-color-fulfill-text: var(--color-fulfill-text); --slider-track-size-xs: 3px; --slider-track-size-sm: 4px; --slider-track-size-md: 6px; --slider-track-size-lg: 8px; --slider-track-size-xl: 10px; --slider-thumb-size-xs: 12px; --slider-thumb-size-sm: 16px; --slider-thumb-size-md: 20px; --slider-thumb-size-lg: 24px; --slider-thumb-size-xl: 28px; --slider-hit-size-xs: 24px; --slider-hit-size-sm: 28px; --slider-hit-size-md: 32px; --slider-hit-size-lg: 36px; --slider-hit-size-xl: 40px; --slider-tick-size-xs: 3px; --slider-tick-size-sm: 4px; --slider-tick-size-md: 5px; --slider-tick-size-lg: 6px; --slider-tick-size-xl: 7px; --slider-min-inline-size: 12rem; --slider-min-block-size: 10rem; --slider-track-radius: var(--radius-full); --slider-track-bg: var(--color-neutral-track); --slider-range-bg: var(--color-primary-solid); --slider-thumb-radius: var(--radius-full); --slider-thumb-border-width: var(--border-width); --slider-thumb-border: var(--color-border-default); --slider-thumb-bg: var(--color-surface-default); --slider-thumb-shadow: var(--shadow-subtle); --slider-thumb-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color), var(--slider-thumb-shadow); --slider-tick-radius: var(--radius-full); --slider-tick-bg: var(--color-neutral-border); --slider-tick-bg-active: var(--color-primary-solid); --slider-transition-duration: var(--duration-fast); --slider-transition-ease: var(--ease-default); --slider-disabled-opacity: 0.56; --switch-size-xs-track-width: 26px; --switch-size-xs-track-height: 15px; --switch-size-xs-thumb-size: 11px; --switch-size-xs-thumb-translate: 12px; --switch-size-sm-track-width: 32px; --switch-size-sm-track-height: 18px; --switch-size-sm-thumb-size: 14px; --switch-size-sm-thumb-translate: 14px; --switch-size-md-track-width: 38px; --switch-size-md-track-height: 22px; --switch-size-md-thumb-size: 18px; --switch-size-md-thumb-translate: 16px; --switch-size-lg-track-width: 46px; --switch-size-lg-track-height: 28px; --switch-size-lg-thumb-size: 24px; --switch-size-lg-thumb-translate: 18px; --switch-size-xl-track-width: 54px; --switch-size-xl-track-height: 34px; --switch-size-xl-thumb-size: 30px; --switch-size-xl-thumb-translate: 20px; --switch-track-radius: var(--radius-full); --switch-track-border-width: var(--border-width); --switch-thumb-inset: 1px; --switch-thumb-radius: var(--radius-full); --switch-thumb-border-width: var(--border-width); --switch-thumb-shadow: 0 1px 2px rgb(17 14 10 / 0.12); --switch-focus-ring-offset: var(--focus-ring-offset); --switch-focus-ring-width: var(--focus-ring-width); --switch-focus-ring-color: var(--focus-ring-color); --switch-focus-ring-surface: var(--color-surface-default); --switch-transition-duration: var(--duration-fast); --switch-transition-ease: var(--ease-default); --switch-track-bg-off: var(--color-surface-overlay); --switch-track-bg-off-hover: color-mix( in srgb, var(--color-surface-overlay) 82%, var(--color-surface-raised) ); --switch-track-border-off: var(--color-border-default); --switch-track-border-off-hover: var(--color-border-strong); --switch-track-bg-disabled: color-mix( in srgb, var(--color-surface-overlay) 70%, var(--color-surface-default) ); --switch-track-border-disabled: color-mix( in srgb, var(--color-border-default) 70%, var(--color-border-subtle) ); --switch-thumb-bg-disabled: color-mix( in srgb, var(--color-surface-default) 88%, var(--color-surface-raised) ); --switch-thumb-border-disabled: color-mix( in srgb, var(--color-border-subtle) 88%, var(--color-surface-overlay) ); --switch-disabled-opacity: 0.72; --switch-thumb-bg: var(--color-surface-default); --switch-thumb-border: color-mix( in srgb, var(--color-border-default) 82%, var(--color-surface-overlay) ); --switch-thumb-icon-color: var(--color-content-muted); --switch-color-primary-track: var(--color-primary-track); --switch-color-primary-border: var(--color-primary-border); --switch-color-primary-solid: var(--color-primary-solid); --switch-color-primary-solid-hover: var(--color-primary-solid-hover); --switch-color-neutral-track: var(--color-neutral-track); --switch-color-neutral-border: var(--color-neutral-border); --switch-color-neutral-solid: var(--color-neutral-solid); --switch-color-neutral-solid-hover: var(--color-neutral-solid-hover); --switch-color-risk-track: var(--color-risk-track); --switch-color-risk-border: var(--color-risk-border); --switch-color-risk-solid: var(--color-risk-solid); --switch-color-risk-solid-hover: var(--color-risk-solid-hover); --switch-color-threat-track: var(--color-threat-track); --switch-color-threat-border: var(--color-threat-border); --switch-color-threat-solid: var(--color-threat-solid); --switch-color-threat-solid-hover: var(--color-threat-solid-hover); --switch-color-secondary-track: var(--color-secondary-track); --switch-color-secondary-border: var(--color-secondary-border); --switch-color-secondary-solid: var(--color-secondary-solid); --switch-color-secondary-solid-hover: var(--color-secondary-solid-hover); --switch-color-affirm-track: var(--color-affirm-track); --switch-color-affirm-border: var(--color-affirm-border); --switch-color-affirm-solid: var(--color-affirm-solid); --switch-color-affirm-solid-hover: var(--color-affirm-solid-hover); --tabs-stack-gap: var(--space-4); --tabs-line-stack-gap: var(--space-3); --tabs-provider-radius: var(--radius-xl); --tabs-provider-border-width: var(--border-width); --tabs-provider-border: var(--color-border-default); --tabs-provider-bg: var(--color-surface-raised); --tabs-surface-provider-padding: var(--space-3); --tabs-surface-provider-shadow: var(--shadow-subtle); --tabs-list-gap: var(--space-1); --tabs-list-padding: var(--space-1); --tabs-list-radius: var(--radius-lg); --tabs-list-width: 220px; --tabs-list-bg: transparent; --tabs-list-border-width: var(--border-width); --tabs-list-border: var(--color-border-default); --tabs-line-list-padding-inline-end: var(--space-2); --tabs-surface-list-bg: color-mix(in srgb, var(--color-surface-default) 82%, transparent); --tabs-pills-list-bg: color-mix(in srgb, var(--color-surface-default) 90%, transparent); --tabs-trigger-height-xs: var(--control-height-xs); --tabs-trigger-height-sm: var(--control-height-sm); --tabs-trigger-height-md: var(--control-height-md); --tabs-trigger-height-lg: var(--control-height-lg); --tabs-trigger-px-xs: var(--space-2-5); --tabs-trigger-px-sm: var(--space-3); --tabs-trigger-px-md: var(--space-3-5); --tabs-trigger-px-lg: var(--space-4); --tabs-trigger-gap-xs: var(--space-1); --tabs-trigger-gap-sm: var(--space-1-5); --tabs-trigger-gap-md: var(--space-2); --tabs-trigger-gap-lg: var(--space-2); --tabs-trigger-radius: var(--radius-md); --tabs-trigger-border-width: var(--border-width); --tabs-trigger-font-family: var(--font-ui); --tabs-trigger-font-size: var(--font-size-sm); --tabs-trigger-font-weight: var(--font-weight-medium); --tabs-trigger-line-height: var(--leading-ui); --tabs-trigger-letter-spacing: var(--tracking-ui); --tabs-trigger-color: var(--color-content-secondary); --tabs-trigger-color-hover: var(--color-content-primary); --tabs-trigger-color-active: var(--color-content-primary); --tabs-trigger-bg: transparent; --tabs-trigger-bg-hover: color-mix( in srgb, var(--color-surface-default) 84%, transparent ); --tabs-trigger-bg-active: var(--color-surface-overlay); --tabs-trigger-border: transparent; --tabs-trigger-border-active: var(--color-primary-border); --tabs-trigger-transition-duration: var(--duration-fast); --tabs-trigger-transition-ease: var(--ease-default); --tabs-trigger-focus-ring-offset: var(--focus-ring-offset); --tabs-trigger-focus-ring-width: var(--focus-ring-width); --tabs-trigger-focus-ring-color: var(--focus-ring-color); --tabs-surface-trigger-border-active: color-mix( in srgb, var(--tabs-trigger-border-active) 58%, transparent ); --tabs-pills-trigger-radius: var(--radius-full); --tabs-pills-trigger-border-active: color-mix( in srgb, var(--tabs-trigger-border-active) 58%, transparent ); --tabs-pills-trigger-shadow-active: var(--shadow-subtle); --tabs-content-padding-xs: var(--space-3); --tabs-content-padding-sm: var(--space-4); --tabs-content-padding-md: var(--space-5); --tabs-content-padding-lg: var(--space-6); --tabs-content-radius: var(--radius-lg); --tabs-content-bg: transparent; --tabs-content-border-width: var(--border-width); --tabs-content-border: transparent; --tabs-content-color: var(--color-content-primary); --tabs-surface-content-border: color-mix( in srgb, var(--tabs-provider-border) 84%, transparent ); --tabs-surface-content-bg: color-mix( in srgb, var(--color-surface-overlay) 92%, transparent ); --tabs-pills-content-padding-block-start: var(--space-2); --tabs-disabled-opacity: 0.5; --tabs-indicator-transition-duration: var(--duration-normal); --tabs-indicator-transition-ease: cubic-bezier(0.32, 0.72, 0, 1); --tabs-indicator-line-thickness: 2px; --tabs-scrollable-fade: 16px; --toast-toaster-z: 1200; --toast-toaster-inset: var(--space-4); --toast-toaster-gap: var(--space-3); --toast-toaster-width: 420px; --toast-provider-min-width: 280px; --toast-provider-max-width: 420px; --toast-provider-gap: var(--space-3); --toast-provider-stack-gap: var(--space-1); --toast-provider-px: var(--space-4); --toast-provider-py: var(--space-3); --toast-provider-border-width: var(--border-width); --toast-provider-radius: var(--radius-lg); --toast-provider-shadow: var(--shadow-overlay); --toast-accent-width: 3px; --toast-transition-duration: var(--duration-fast); --toast-transition-ease: var(--ease-default); --toast-closed-offset: 10px; --toast-closed-scale: 0.98; --toast-status-size: 32px; --toast-status-radius: var(--radius-full); --toast-title-font-family: var(--font-ui); --toast-title-font-size: var(--font-size-sm); --toast-title-font-weight: var(--font-weight-semibold); --toast-title-line-height: var(--leading-ui); --toast-title-color: var(--color-content-primary); --toast-message-color: var(--color-content-primary); --toast-description-font-family: var(--font-ui); --toast-description-font-size: var(--font-size-xs); --toast-description-line-height: var(--leading-prose); --toast-description-color: var(--color-content-secondary); --toast-action-gap: var(--space-1); --toast-action-px: var(--space-2); --toast-action-py: var(--space-1); --toast-action-margin-top: var(--space-1); --toast-action-border-width: var(--border-width); --toast-action-radius: var(--radius-md); --toast-action-font-family: var(--font-ui); --toast-action-font-size: var(--font-size-xs); --toast-action-font-weight: var(--font-weight-medium); --toast-action-line-height: var(--leading-ui); --toast-action-focus-ring-offset: var(--focus-ring-offset); --toast-action-focus-ring-width: var(--focus-ring-width); --toast-action-focus-ring-color: var(--focus-ring-color); --toast-close-size: 28px; --toast-close-border-width: var(--border-width); --toast-close-radius: var(--radius-full); --toast-close-bg: transparent; --toast-close-border: transparent; --toast-close-color: var(--color-content-secondary); --toast-close-hover-bg: var(--color-surface-raised); --toast-close-hover-border: var(--color-border-subtle); --toast-close-hover-color: var(--color-content-primary); --toast-close-focus-ring-offset: var(--focus-ring-offset); --toast-close-focus-ring-width: var(--focus-ring-width); --toast-close-focus-ring-color: var(--focus-ring-color); --toast-default-surface: color-mix( in srgb, var(--color-surface-overlay) 92%, var(--color-neutral-track) ); --toast-default-border: color-mix( in srgb, var(--color-neutral-border) 72%, var(--color-border-default) ); --toast-default-accent: var(--color-neutral-border); --toast-default-status-bg: var(--color-neutral-track); --toast-default-status-color: var(--color-neutral-text); --toast-default-action-color: var(--color-neutral-text); --toast-default-action-hover-bg: var(--color-neutral-track); --toast-affirm-surface: color-mix( in srgb, var(--color-surface-overlay) 90%, var(--color-affirm-track) ); --toast-affirm-border: color-mix( in srgb, var(--color-affirm-border) 70%, var(--color-border-default) ); --toast-affirm-accent: var(--color-affirm-border); --toast-affirm-status-bg: var(--color-affirm-track); --toast-affirm-status-color: var(--color-affirm-text); --toast-affirm-action-color: var(--color-affirm-text); --toast-affirm-action-hover-bg: var(--color-affirm-track); --toast-fulfill-surface: color-mix( in srgb, var(--color-surface-overlay) 90%, var(--color-fulfill-track) ); --toast-fulfill-border: color-mix( in srgb, var(--color-fulfill-border) 70%, var(--color-border-default) ); --toast-fulfill-accent: var(--color-fulfill-border); --toast-fulfill-status-bg: var(--color-fulfill-track); --toast-fulfill-status-color: var(--color-fulfill-text); --toast-fulfill-action-color: var(--color-fulfill-text); --toast-fulfill-action-hover-bg: var(--color-fulfill-track); --toast-risk-surface: color-mix( in srgb, var(--color-surface-overlay) 90%, var(--color-risk-track) ); --toast-risk-border: color-mix( in srgb, var(--color-risk-border) 72%, var(--color-border-default) ); --toast-risk-accent: var(--color-risk-border); --toast-risk-status-bg: var(--color-risk-track); --toast-risk-status-color: var(--color-risk-text); --toast-risk-action-color: var(--color-risk-text); --toast-risk-action-hover-bg: var(--color-risk-track); --toast-threat-surface: color-mix( in srgb, var(--color-surface-overlay) 90%, var(--color-threat-track) ); --toast-threat-border: color-mix( in srgb, var(--color-threat-border) 72%, var(--color-border-default) ); --toast-threat-accent: var(--color-threat-border); --toast-threat-status-bg: var(--color-threat-track); --toast-threat-status-color: var(--color-threat-text); --toast-threat-action-color: var(--color-threat-text); --toast-threat-action-hover-bg: var(--color-threat-track); --toast-loss-surface: color-mix( in srgb, var(--color-surface-overlay) 90%, var(--color-loss-track) ); --toast-loss-border: color-mix( in srgb, var(--color-loss-border) 72%, var(--color-border-default) ); --toast-loss-accent: var(--color-loss-border); --toast-loss-status-bg: var(--color-loss-track); --toast-loss-status-color: var(--color-loss-text); --toast-loss-action-color: var(--color-loss-text); --toast-loss-action-hover-bg: var(--color-loss-track); --toggle-height-xs: var(--control-height-xs); --toggle-height-sm: var(--control-height-sm); --toggle-height-md: var(--control-height-md); --toggle-height-lg: var(--control-height-lg); --toggle-height-xl: var(--control-height-xl); --toggle-px-xs: var(--space-2); --toggle-px-sm: var(--space-2-5); --toggle-px-md: var(--space-3-5); --toggle-px-lg: var(--space-4-5); --toggle-px-xl: var(--space-5); --toggle-gap-xs: var(--space-1); --toggle-gap-sm: var(--space-1-5); --toggle-gap-md: var(--space-1-5); --toggle-gap-lg: var(--space-2); --toggle-gap-xl: var(--space-2-5); --toggle-font-family: var(--font-ui); --toggle-line-height: var(--leading-ui); --toggle-letter-spacing: var(--tracking-normal); --toggle-font-size-xs: 10px; --toggle-font-size-sm: 12px; --toggle-font-size-md: 14px; --toggle-font-size-lg: 16px; --toggle-font-size-xl: 18px; --toggle-font-weight-xs: var(--font-weight-medium); --toggle-font-weight-sm: var(--font-weight-medium); --toggle-font-weight-md: var(--font-weight-medium); --toggle-font-weight-lg: var(--font-weight-medium); --toggle-font-weight-xl: var(--font-weight-medium); --toggle-radius-xs: var(--radius-sm); --toggle-radius-sm: var(--radius-sm); --toggle-radius-md: var(--radius-md); --toggle-radius-lg: var(--radius-md); --toggle-radius-xl: var(--radius-md); --toggle-border-width: var(--border-width); --toggle-shadow: none; --toggle-transition-duration: var(--duration-fast); --toggle-transition-ease: var(--ease-default); --toggle-color-primary-track: var(--color-primary-track); --toggle-color-primary-element: var(--color-primary-element); --toggle-color-primary-hover: var(--color-primary-hover); --toggle-color-primary-border: var(--color-primary-border); --toggle-color-primary-solid: var(--color-primary-solid); --toggle-color-primary-solid-hover: var(--color-primary-solid-hover); --toggle-color-primary-text: var(--color-primary-text); --toggle-color-primary-contrast: var(--color-primary-contrast); --toggle-color-neutral-track: var(--color-neutral-track); --toggle-color-neutral-element: var(--color-neutral-element); --toggle-color-neutral-hover: var(--color-neutral-hover); --toggle-color-neutral-border: var(--color-neutral-border); --toggle-color-neutral-solid: var(--color-neutral-solid); --toggle-color-neutral-solid-hover: var(--color-neutral-solid-hover); --toggle-color-neutral-text: var(--color-neutral-text); --toggle-color-neutral-contrast: var(--color-neutral-contrast); --toggle-color-risk-track: var(--color-risk-track); --toggle-color-risk-element: var(--color-risk-element); --toggle-color-risk-hover: var(--color-risk-hover); --toggle-color-risk-border: var(--color-risk-border); --toggle-color-risk-solid: var(--color-risk-solid); --toggle-color-risk-solid-hover: var(--color-risk-solid-hover); --toggle-color-risk-text: var(--color-risk-text); --toggle-color-risk-contrast: var(--color-risk-contrast); --toggle-color-threat-track: var(--color-threat-track); --toggle-color-threat-element: var(--color-threat-element); --toggle-color-threat-hover: var(--color-threat-hover); --toggle-color-threat-border: var(--color-threat-border); --toggle-color-threat-solid: var(--color-threat-solid); --toggle-color-threat-solid-hover: var(--color-threat-solid-hover); --toggle-color-threat-text: var(--color-threat-text); --toggle-color-threat-contrast: var(--color-threat-contrast); --toggle-color-secondary-track: var(--color-secondary-track); --toggle-color-secondary-element: var(--color-secondary-element); --toggle-color-secondary-hover: var(--color-secondary-hover); --toggle-color-secondary-border: var(--color-secondary-border); --toggle-color-secondary-solid: var(--color-secondary-solid); --toggle-color-secondary-solid-hover: var(--color-secondary-solid-hover); --toggle-color-secondary-text: var(--color-secondary-text); --toggle-color-secondary-contrast: var(--color-secondary-contrast); --toggle-color-affirm-track: var(--color-affirm-track); --toggle-color-affirm-element: var(--color-affirm-element); --toggle-color-affirm-hover: var(--color-affirm-hover); --toggle-color-affirm-border: var(--color-affirm-border); --toggle-color-affirm-solid: var(--color-affirm-solid); --toggle-color-affirm-solid-hover: var(--color-affirm-solid-hover); --toggle-color-affirm-text: var(--color-affirm-text); --toggle-color-affirm-contrast: var(--color-affirm-contrast); --toggle-palette-track: var(--toggle-color-neutral-track); --toggle-palette-element: var(--toggle-color-neutral-element); --toggle-palette-hover: var(--toggle-color-neutral-hover); --toggle-palette-border: var(--toggle-color-neutral-border); --toggle-palette-solid: var(--toggle-color-neutral-solid); --toggle-palette-solid-hover: var(--toggle-color-neutral-solid-hover); --toggle-palette-text: var(--toggle-color-neutral-text); --toggle-palette-contrast: var(--toggle-color-neutral-contrast); --toggle-solid-bg: var(--color-surface-raised); --toggle-solid-fg: var(--color-content-primary); --toggle-solid-border: var(--color-border-default); --toggle-solid-hover-bg: color-mix( in srgb, var(--color-surface-overlay) 68%, var(--toggle-palette-track) ); --toggle-solid-hover-border: color-mix( in srgb, var(--toggle-palette-border) 45%, var(--color-border-strong) ); --toggle-solid-on-bg: var(--toggle-palette-solid); --toggle-solid-on-fg: var(--toggle-palette-contrast); --toggle-solid-on-border: var(--toggle-palette-solid); --toggle-solid-on-hover-bg: var(--toggle-palette-solid-hover); --toggle-solid-on-hover-border: var(--toggle-palette-solid-hover); --toggle-outline-bg: transparent; --toggle-outline-fg: var(--toggle-palette-text); --toggle-outline-border: color-mix( in srgb, var(--toggle-palette-border) 88%, var(--color-border-default) ); --toggle-outline-hover-bg: var(--toggle-palette-track); --toggle-outline-hover-border: color-mix( in srgb, var(--toggle-palette-border) 100%, var(--color-border-default) ); --toggle-outline-on-bg: color-mix( in srgb, var(--toggle-palette-element) 100%, var(--color-surface-raised) ); --toggle-outline-on-fg: var(--toggle-palette-text); --toggle-outline-on-border: var(--toggle-palette-border); --toggle-outline-on-hover-bg: var(--toggle-palette-hover); --toggle-outline-on-hover-border: var(--toggle-palette-border); --toggle-ghost-bg: transparent; --toggle-ghost-fg: var(--toggle-palette-text); --toggle-ghost-border: transparent; --toggle-ghost-hover-bg: color-mix(in srgb, var(--toggle-palette-track) 72%, transparent); --toggle-ghost-hover-border: transparent; --toggle-ghost-on-bg: var(--toggle-palette-track); --toggle-ghost-on-fg: var(--toggle-palette-text); --toggle-ghost-on-border: color-mix( in srgb, var(--toggle-palette-border) 72%, transparent ); --toggle-ghost-on-hover-bg: var(--toggle-palette-element); --toggle-ghost-on-hover-border: color-mix( in srgb, var(--toggle-palette-border) 88%, transparent ); --toggle-disabled-opacity: 0.45; --tooltip-content-z: 76; --tooltip-max-width: 22rem; --tooltip-padding-y-sm: var(--space-1); --tooltip-padding-x-sm: var(--space-2); --tooltip-padding-y-md: var(--space-1-5); --tooltip-padding-x-md: var(--space-2-5); --tooltip-padding-y-lg: var(--space-2); --tooltip-padding-x-lg: var(--space-3); --tooltip-font-size-sm: var(--font-size-xs); --tooltip-font-size-md: var(--font-size-sm); --tooltip-font-size-lg: var(--font-size-md); --tooltip-font-family: var(--font-ui); --tooltip-font-weight: var(--font-weight-regular); --tooltip-line-height: var(--leading-text); --tooltip-radius: var(--radius-md); --tooltip-border-width: var(--border-width); --tooltip-bg: var(--color-surface-overlay); --tooltip-color: var(--color-content-primary); --tooltip-border: color-mix( in srgb, var(--color-border-default) 84%, var(--tooltip-bg) ); --tooltip-shadow: var(--shadow-overlay); } @media (min-width: 768px) { :root { --style-hero-font-size: var(--font-size-xxxl); --style-hero-line-height: var(--font-line-height-xxxl); --style-hero-letter-spacing: var(--font-letter-spacing-xxxl); --style-h1-font-size: var(--font-size-xxl); --style-h1-line-height: var(--font-line-height-xxl); --style-h1-letter-spacing: var(--font-letter-spacing-xxl); --style-h2-font-size: var(--font-size-xl); --style-h2-line-height: var(--font-line-height-xl); --style-h2-letter-spacing: var(--font-letter-spacing-xl); } } [data-density='compact'] { --density-scale: var(--density-compact-scale); --density-space-scale: var(--density-compact-space-scale); --density-control-scale: var(--density-compact-control-scale); --density-content-scale: var(--density-compact-content-scale); } [data-density='spacious'] { --density-scale: var(--density-spacious-scale); --density-space-scale: var(--density-spacious-space-scale); --density-control-scale: var(--density-spacious-control-scale); --density-content-scale: var(--density-spacious-content-scale); } :root, [data-theme='base-light'], [data-theme='light'] { --scale-gray-1: #fcfcfc; --scale-gray-2: #f9f9f9; --scale-gray-3: #f0f0f0; --scale-gray-4: #e8e8e8; --scale-gray-5: #e0e0e0; --scale-gray-6: #d9d9d9; --scale-gray-7: #cecece; --scale-gray-8: #bbbbbb; --scale-gray-9: #8d8d8d; --scale-gray-10: #838383; --scale-gray-11: #646464; --scale-gray-12: #202020; --scale-gray-a1: color-mix(in srgb, var(--scale-gray-9) 3%, transparent); --scale-gray-a2: color-mix(in srgb, var(--scale-gray-9) 5%, transparent); --scale-gray-a3: color-mix(in srgb, var(--scale-gray-9) 8%, transparent); --scale-gray-a4: color-mix(in srgb, var(--scale-gray-9) 12%, transparent); --scale-gray-a5: color-mix(in srgb, var(--scale-gray-9) 16%, transparent); --scale-gray-a6: color-mix(in srgb, var(--scale-gray-9) 22%, transparent); --scale-gray-a7: color-mix(in srgb, var(--scale-gray-9) 30%, transparent); --scale-gray-a8: color-mix(in srgb, var(--scale-gray-9) 40%, transparent); --scale-gray-a9: color-mix(in srgb, var(--scale-gray-9) 56%, transparent); --scale-gray-a10: color-mix(in srgb, var(--scale-gray-9) 68%, transparent); --scale-gray-a11: color-mix(in srgb, var(--scale-gray-9) 80%, transparent); --scale-gray-a12: color-mix(in srgb, var(--scale-gray-9) 92%, transparent); --scale-slate-1: #fcfcfd; --scale-slate-2: #f9f9fb; --scale-slate-3: #f0f0f3; --scale-slate-4: #e8e8ec; --scale-slate-5: #e0e1e6; --scale-slate-6: #d9d9e0; --scale-slate-7: #cdced6; --scale-slate-8: #b9bbc6; --scale-slate-9: #8b8d98; --scale-slate-10: #80838d; --scale-slate-11: #60646c; --scale-slate-12: #1c2024; --scale-slate-a1: color-mix(in srgb, var(--scale-slate-9) 3%, transparent); --scale-slate-a2: color-mix(in srgb, var(--scale-slate-9) 5%, transparent); --scale-slate-a3: color-mix(in srgb, var(--scale-slate-9) 8%, transparent); --scale-slate-a4: color-mix(in srgb, var(--scale-slate-9) 12%, transparent); --scale-slate-a5: color-mix(in srgb, var(--scale-slate-9) 16%, transparent); --scale-slate-a6: color-mix(in srgb, var(--scale-slate-9) 22%, transparent); --scale-slate-a7: color-mix(in srgb, var(--scale-slate-9) 30%, transparent); --scale-slate-a8: color-mix(in srgb, var(--scale-slate-9) 40%, transparent); --scale-slate-a9: color-mix(in srgb, var(--scale-slate-9) 56%, transparent); --scale-slate-a10: color-mix(in srgb, var(--scale-slate-9) 68%, transparent); --scale-slate-a11: color-mix(in srgb, var(--scale-slate-9) 80%, transparent); --scale-slate-a12: color-mix(in srgb, var(--scale-slate-9) 92%, transparent); --scale-blue-1: #fbfdff; --scale-blue-2: #f4faff; --scale-blue-3: #e6f4fe; --scale-blue-4: #d5efff; --scale-blue-5: #c2e5ff; --scale-blue-6: #acd8fc; --scale-blue-7: #8ec8f6; --scale-blue-8: #5eb1ef; --scale-blue-9: #0090ff; --scale-blue-10: #0588f0; --scale-blue-11: #0d74ce; --scale-blue-12: #113264; --scale-blue-a1: color-mix(in srgb, var(--scale-blue-9) 3%, transparent); --scale-blue-a2: color-mix(in srgb, var(--scale-blue-9) 5%, transparent); --scale-blue-a3: color-mix(in srgb, var(--scale-blue-9) 8%, transparent); --scale-blue-a4: color-mix(in srgb, var(--scale-blue-9) 12%, transparent); --scale-blue-a5: color-mix(in srgb, var(--scale-blue-9) 16%, transparent); --scale-blue-a6: color-mix(in srgb, var(--scale-blue-9) 22%, transparent); --scale-blue-a7: color-mix(in srgb, var(--scale-blue-9) 30%, transparent); --scale-blue-a8: color-mix(in srgb, var(--scale-blue-9) 40%, transparent); --scale-blue-a9: color-mix(in srgb, var(--scale-blue-9) 56%, transparent); --scale-blue-a10: color-mix(in srgb, var(--scale-blue-9) 68%, transparent); --scale-blue-a11: color-mix(in srgb, var(--scale-blue-9) 80%, transparent); --scale-blue-a12: color-mix(in srgb, var(--scale-blue-9) 92%, transparent); --scale-cyan-1: #fafdfe; --scale-cyan-2: #f2fafb; --scale-cyan-3: #def7f9; --scale-cyan-4: #caf1f6; --scale-cyan-5: #b5e9f0; --scale-cyan-6: #9ddde7; --scale-cyan-7: #7dcedc; --scale-cyan-8: #3db9cf; --scale-cyan-9: #00a2c7; --scale-cyan-10: #0797b9; --scale-cyan-11: #107d98; --scale-cyan-12: #0d3c48; --scale-cyan-a1: color-mix(in srgb, var(--scale-cyan-9) 3%, transparent); --scale-cyan-a2: color-mix(in srgb, var(--scale-cyan-9) 5%, transparent); --scale-cyan-a3: color-mix(in srgb, var(--scale-cyan-9) 8%, transparent); --scale-cyan-a4: color-mix(in srgb, var(--scale-cyan-9) 12%, transparent); --scale-cyan-a5: color-mix(in srgb, var(--scale-cyan-9) 16%, transparent); --scale-cyan-a6: color-mix(in srgb, var(--scale-cyan-9) 22%, transparent); --scale-cyan-a7: color-mix(in srgb, var(--scale-cyan-9) 30%, transparent); --scale-cyan-a8: color-mix(in srgb, var(--scale-cyan-9) 40%, transparent); --scale-cyan-a9: color-mix(in srgb, var(--scale-cyan-9) 56%, transparent); --scale-cyan-a10: color-mix(in srgb, var(--scale-cyan-9) 68%, transparent); --scale-cyan-a11: color-mix(in srgb, var(--scale-cyan-9) 80%, transparent); --scale-cyan-a12: color-mix(in srgb, var(--scale-cyan-9) 92%, transparent); --scale-teal-1: #fafefd; --scale-teal-2: #f3fbf9; --scale-teal-3: #e0f8f3; --scale-teal-4: #ccf3ea; --scale-teal-5: #b8eae0; --scale-teal-6: #a1ded2; --scale-teal-7: #83cdc1; --scale-teal-8: #53b9ab; --scale-teal-9: #12a594; --scale-teal-10: #0d9b8a; --scale-teal-11: #008573; --scale-teal-12: #0d3d38; --scale-teal-a1: color-mix(in srgb, var(--scale-teal-9) 3%, transparent); --scale-teal-a2: color-mix(in srgb, var(--scale-teal-9) 5%, transparent); --scale-teal-a3: color-mix(in srgb, var(--scale-teal-9) 8%, transparent); --scale-teal-a4: color-mix(in srgb, var(--scale-teal-9) 12%, transparent); --scale-teal-a5: color-mix(in srgb, var(--scale-teal-9) 16%, transparent); --scale-teal-a6: color-mix(in srgb, var(--scale-teal-9) 22%, transparent); --scale-teal-a7: color-mix(in srgb, var(--scale-teal-9) 30%, transparent); --scale-teal-a8: color-mix(in srgb, var(--scale-teal-9) 40%, transparent); --scale-teal-a9: color-mix(in srgb, var(--scale-teal-9) 56%, transparent); --scale-teal-a10: color-mix(in srgb, var(--scale-teal-9) 68%, transparent); --scale-teal-a11: color-mix(in srgb, var(--scale-teal-9) 80%, transparent); --scale-teal-a12: color-mix(in srgb, var(--scale-teal-9) 92%, transparent); --scale-green-1: #fbfefc; --scale-green-2: #f4fbf6; --scale-green-3: #e6f6eb; --scale-green-4: #d6f1df; --scale-green-5: #c4e8d1; --scale-green-6: #adddc0; --scale-green-7: #8eceaa; --scale-green-8: #5bb98b; --scale-green-9: #30a46c; --scale-green-10: #2b9a66; --scale-green-11: #218358; --scale-green-12: #193b2d; --scale-green-a1: color-mix(in srgb, var(--scale-green-9) 3%, transparent); --scale-green-a2: color-mix(in srgb, var(--scale-green-9) 5%, transparent); --scale-green-a3: color-mix(in srgb, var(--scale-green-9) 8%, transparent); --scale-green-a4: color-mix(in srgb, var(--scale-green-9) 12%, transparent); --scale-green-a5: color-mix(in srgb, var(--scale-green-9) 16%, transparent); --scale-green-a6: color-mix(in srgb, var(--scale-green-9) 22%, transparent); --scale-green-a7: color-mix(in srgb, var(--scale-green-9) 30%, transparent); --scale-green-a8: color-mix(in srgb, var(--scale-green-9) 40%, transparent); --scale-green-a9: color-mix(in srgb, var(--scale-green-9) 56%, transparent); --scale-green-a10: color-mix(in srgb, var(--scale-green-9) 68%, transparent); --scale-green-a11: color-mix(in srgb, var(--scale-green-9) 80%, transparent); --scale-green-a12: color-mix(in srgb, var(--scale-green-9) 92%, transparent); --scale-yellow-1: #fdfdf9; --scale-yellow-2: #fffce8; --scale-yellow-3: #fffbd1; --scale-yellow-4: #fff8bb; --scale-yellow-5: #fef2a4; --scale-yellow-6: #f9e68c; --scale-yellow-7: #efd36c; --scale-yellow-8: #ebbc00; --scale-yellow-9: #f5d90a; --scale-yellow-10: #f7ce00; --scale-yellow-11: #946800; --scale-yellow-12: #35290f; --scale-yellow-a1: color-mix(in srgb, var(--scale-yellow-9) 3%, transparent); --scale-yellow-a2: color-mix(in srgb, var(--scale-yellow-9) 5%, transparent); --scale-yellow-a3: color-mix(in srgb, var(--scale-yellow-9) 8%, transparent); --scale-yellow-a4: color-mix(in srgb, var(--scale-yellow-9) 12%, transparent); --scale-yellow-a5: color-mix(in srgb, var(--scale-yellow-9) 16%, transparent); --scale-yellow-a6: color-mix(in srgb, var(--scale-yellow-9) 22%, transparent); --scale-yellow-a7: color-mix(in srgb, var(--scale-yellow-9) 30%, transparent); --scale-yellow-a8: color-mix(in srgb, var(--scale-yellow-9) 40%, transparent); --scale-yellow-a9: color-mix(in srgb, var(--scale-yellow-9) 56%, transparent); --scale-yellow-a10: color-mix(in srgb, var(--scale-yellow-9) 68%, transparent); --scale-yellow-a11: color-mix(in srgb, var(--scale-yellow-9) 80%, transparent); --scale-yellow-a12: color-mix(in srgb, var(--scale-yellow-9) 92%, transparent); --scale-amber-1: #fefdfb; --scale-amber-2: #fefbe9; --scale-amber-3: #fff7c2; --scale-amber-4: #ffee9c; --scale-amber-5: #fbe577; --scale-amber-6: #f3d673; --scale-amber-7: #e9c162; --scale-amber-8: #e2a336; --scale-amber-9: #ffc53d; --scale-amber-10: #ffba18; --scale-amber-11: #ab6400; --scale-amber-12: #4f3422; --scale-amber-a1: color-mix(in srgb, var(--scale-amber-9) 3%, transparent); --scale-amber-a2: color-mix(in srgb, var(--scale-amber-9) 5%, transparent); --scale-amber-a3: color-mix(in srgb, var(--scale-amber-9) 8%, transparent); --scale-amber-a4: color-mix(in srgb, var(--scale-amber-9) 12%, transparent); --scale-amber-a5: color-mix(in srgb, var(--scale-amber-9) 16%, transparent); --scale-amber-a6: color-mix(in srgb, var(--scale-amber-9) 22%, transparent); --scale-amber-a7: color-mix(in srgb, var(--scale-amber-9) 30%, transparent); --scale-amber-a8: color-mix(in srgb, var(--scale-amber-9) 40%, transparent); --scale-amber-a9: color-mix(in srgb, var(--scale-amber-9) 56%, transparent); --scale-amber-a10: color-mix(in srgb, var(--scale-amber-9) 68%, transparent); --scale-amber-a11: color-mix(in srgb, var(--scale-amber-9) 80%, transparent); --scale-amber-a12: color-mix(in srgb, var(--scale-amber-9) 92%, transparent); --scale-orange-1: #fefcfb; --scale-orange-2: #fff7ed; --scale-orange-3: #ffefd6; --scale-orange-4: #ffdfb5; --scale-orange-5: #ffd19a; --scale-orange-6: #ffc182; --scale-orange-7: #f5ae73; --scale-orange-8: #ec9455; --scale-orange-9: #f76b15; --scale-orange-10: #ef5f00; --scale-orange-11: #cc4e00; --scale-orange-12: #582d1d; --scale-orange-a1: color-mix(in srgb, var(--scale-orange-9) 3%, transparent); --scale-orange-a2: color-mix(in srgb, var(--scale-orange-9) 5%, transparent); --scale-orange-a3: color-mix(in srgb, var(--scale-orange-9) 8%, transparent); --scale-orange-a4: color-mix(in srgb, var(--scale-orange-9) 12%, transparent); --scale-orange-a5: color-mix(in srgb, var(--scale-orange-9) 16%, transparent); --scale-orange-a6: color-mix(in srgb, var(--scale-orange-9) 22%, transparent); --scale-orange-a7: color-mix(in srgb, var(--scale-orange-9) 30%, transparent); --scale-orange-a8: color-mix(in srgb, var(--scale-orange-9) 40%, transparent); --scale-orange-a9: color-mix(in srgb, var(--scale-orange-9) 56%, transparent); --scale-orange-a10: color-mix(in srgb, var(--scale-orange-9) 68%, transparent); --scale-orange-a11: color-mix(in srgb, var(--scale-orange-9) 80%, transparent); --scale-orange-a12: color-mix(in srgb, var(--scale-orange-9) 92%, transparent); --scale-red-1: #fffcfc; --scale-red-2: #fff7f7; --scale-red-3: #feebec; --scale-red-4: #ffdbdc; --scale-red-5: #ffcdce; --scale-red-6: #fdbdbe; --scale-red-7: #f4a9aa; --scale-red-8: #eb8e90; --scale-red-9: #e5484d; --scale-red-10: #dc3e42; --scale-red-11: #ce2c31; --scale-red-12: #641723; --scale-red-a1: color-mix(in srgb, var(--scale-red-9) 3%, transparent); --scale-red-a2: color-mix(in srgb, var(--scale-red-9) 5%, transparent); --scale-red-a3: color-mix(in srgb, var(--scale-red-9) 8%, transparent); --scale-red-a4: color-mix(in srgb, var(--scale-red-9) 12%, transparent); --scale-red-a5: color-mix(in srgb, var(--scale-red-9) 16%, transparent); --scale-red-a6: color-mix(in srgb, var(--scale-red-9) 22%, transparent); --scale-red-a7: color-mix(in srgb, var(--scale-red-9) 30%, transparent); --scale-red-a8: color-mix(in srgb, var(--scale-red-9) 40%, transparent); --scale-red-a9: color-mix(in srgb, var(--scale-red-9) 56%, transparent); --scale-red-a10: color-mix(in srgb, var(--scale-red-9) 68%, transparent); --scale-red-a11: color-mix(in srgb, var(--scale-red-9) 80%, transparent); --scale-red-a12: color-mix(in srgb, var(--scale-red-9) 92%, transparent); --scale-pink-1: #fffcfe; --scale-pink-2: #fff7fc; --scale-pink-3: #feeef8; --scale-pink-4: #fce5f3; --scale-pink-5: #f9d8ec; --scale-pink-6: #f3c6e2; --scale-pink-7: #ecadd4; --scale-pink-8: #e38ec3; --scale-pink-9: #d6409f; --scale-pink-10: #d23197; --scale-pink-11: #cd1d8d; --scale-pink-12: #651249; --scale-pink-a1: color-mix(in srgb, var(--scale-pink-9) 3%, transparent); --scale-pink-a2: color-mix(in srgb, var(--scale-pink-9) 5%, transparent); --scale-pink-a3: color-mix(in srgb, var(--scale-pink-9) 8%, transparent); --scale-pink-a4: color-mix(in srgb, var(--scale-pink-9) 12%, transparent); --scale-pink-a5: color-mix(in srgb, var(--scale-pink-9) 16%, transparent); --scale-pink-a6: color-mix(in srgb, var(--scale-pink-9) 22%, transparent); --scale-pink-a7: color-mix(in srgb, var(--scale-pink-9) 30%, transparent); --scale-pink-a8: color-mix(in srgb, var(--scale-pink-9) 40%, transparent); --scale-pink-a9: color-mix(in srgb, var(--scale-pink-9) 56%, transparent); --scale-pink-a10: color-mix(in srgb, var(--scale-pink-9) 68%, transparent); --scale-pink-a11: color-mix(in srgb, var(--scale-pink-9) 80%, transparent); --scale-pink-a12: color-mix(in srgb, var(--scale-pink-9) 92%, transparent); --scale-purple-1: #fefcfe; --scale-purple-2: #fbf7fe; --scale-purple-3: #f7edfe; --scale-purple-4: #f2e2fc; --scale-purple-5: #ead5f9; --scale-purple-6: #e0c4f4; --scale-purple-7: #d1afec; --scale-purple-8: #be93e4; --scale-purple-9: #8e4ec6; --scale-purple-10: #8347b9; --scale-purple-11: #8145b5; --scale-purple-12: #402060; --scale-purple-a1: color-mix(in srgb, var(--scale-purple-9) 3%, transparent); --scale-purple-a2: color-mix(in srgb, var(--scale-purple-9) 5%, transparent); --scale-purple-a3: color-mix(in srgb, var(--scale-purple-9) 8%, transparent); --scale-purple-a4: color-mix(in srgb, var(--scale-purple-9) 12%, transparent); --scale-purple-a5: color-mix(in srgb, var(--scale-purple-9) 16%, transparent); --scale-purple-a6: color-mix(in srgb, var(--scale-purple-9) 22%, transparent); --scale-purple-a7: color-mix(in srgb, var(--scale-purple-9) 30%, transparent); --scale-purple-a8: color-mix(in srgb, var(--scale-purple-9) 40%, transparent); --scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent); --scale-purple-a10: color-mix(in srgb, var(--scale-purple-9) 68%, transparent); --scale-purple-a11: color-mix(in srgb, var(--scale-purple-9) 80%, transparent); --scale-purple-a12: color-mix(in srgb, var(--scale-purple-9) 92%, transparent); --primitive-primary-1: var(--scale-purple-1); --primitive-primary-2: var(--scale-purple-2); --primitive-primary-3: var(--scale-purple-3); --primitive-primary-4: var(--scale-purple-4); --primitive-primary-5: var(--scale-purple-5); --primitive-primary-6: var(--scale-purple-6); --primitive-primary-7: var(--scale-purple-7); --primitive-primary-8: var(--scale-purple-8); --primitive-primary-9: var(--scale-purple-9); --primitive-primary-10: var(--scale-purple-10); --primitive-primary-11: var(--scale-purple-11); --primitive-primary-12: var(--scale-purple-12); --primitive-primary-a1: var(--scale-purple-a1); --primitive-primary-a2: var(--scale-purple-a2); --primitive-primary-a3: var(--scale-purple-a3); --primitive-primary-a4: var(--scale-purple-a4); --primitive-primary-a5: var(--scale-purple-a5); --primitive-primary-a6: var(--scale-purple-a6); --primitive-primary-a7: var(--scale-purple-a7); --primitive-primary-a8: var(--scale-purple-a8); --primitive-primary-a9: var(--scale-purple-a9); --primitive-primary-a10: var(--scale-purple-a10); --primitive-primary-a11: var(--scale-purple-a11); --primitive-primary-a12: var(--scale-purple-a12); --color-primary-track: var(--primitive-primary-1); --color-primary-element: var(--primitive-primary-3); --color-primary-hover: var(--primitive-primary-4); --color-primary-active: var(--primitive-primary-5); --color-primary-border: var(--primitive-primary-6); --color-primary-solid: var(--primitive-primary-9); --color-primary-solid-hover: var(--primitive-primary-10); --color-primary-text: var(--primitive-primary-11); --color-primary-contrast: var(--primitive-primary-12); --primitive-secondary-1: var(--scale-slate-1); --primitive-secondary-2: var(--scale-slate-2); --primitive-secondary-3: var(--scale-slate-3); --primitive-secondary-4: var(--scale-slate-4); --primitive-secondary-5: var(--scale-slate-5); --primitive-secondary-6: var(--scale-slate-6); --primitive-secondary-7: var(--scale-slate-7); --primitive-secondary-8: var(--scale-slate-8); --primitive-secondary-9: var(--scale-slate-9); --primitive-secondary-10: var(--scale-slate-10); --primitive-secondary-11: var(--scale-slate-11); --primitive-secondary-12: var(--scale-slate-12); --primitive-secondary-a1: var(--scale-slate-a1); --primitive-secondary-a2: var(--scale-slate-a2); --primitive-secondary-a3: var(--scale-slate-a3); --primitive-secondary-a4: var(--scale-slate-a4); --primitive-secondary-a5: var(--scale-slate-a5); --primitive-secondary-a6: var(--scale-slate-a6); --primitive-secondary-a7: var(--scale-slate-a7); --primitive-secondary-a8: var(--scale-slate-a8); --primitive-secondary-a9: var(--scale-slate-a9); --primitive-secondary-a10: var(--scale-slate-a10); --primitive-secondary-a11: var(--scale-slate-a11); --primitive-secondary-a12: var(--scale-slate-a12); --color-secondary-track: var(--primitive-secondary-1); --color-secondary-element: var(--primitive-secondary-3); --color-secondary-hover: var(--primitive-secondary-4); --color-secondary-active: var(--primitive-secondary-5); --color-secondary-border: var(--primitive-secondary-6); --color-secondary-solid: var(--primitive-secondary-9); --color-secondary-solid-hover: var(--primitive-secondary-10); --color-secondary-text: var(--primitive-secondary-11); --color-secondary-contrast: var(--primitive-secondary-12); --primitive-tertiary-1: var(--scale-gray-1); --primitive-tertiary-2: var(--scale-gray-2); --primitive-tertiary-3: var(--scale-gray-3); --primitive-tertiary-4: var(--scale-gray-4); --primitive-tertiary-5: var(--scale-gray-5); --primitive-tertiary-6: var(--scale-gray-6); --primitive-tertiary-7: var(--scale-gray-7); --primitive-tertiary-8: var(--scale-gray-8); --primitive-tertiary-9: var(--scale-gray-9); --primitive-tertiary-10: var(--scale-gray-10); --primitive-tertiary-11: var(--scale-gray-11); --primitive-tertiary-12: var(--scale-gray-12); --primitive-tertiary-a1: var(--scale-gray-a1); --primitive-tertiary-a2: var(--scale-gray-a2); --primitive-tertiary-a3: var(--scale-gray-a3); --primitive-tertiary-a4: var(--scale-gray-a4); --primitive-tertiary-a5: var(--scale-gray-a5); --primitive-tertiary-a6: var(--scale-gray-a6); --primitive-tertiary-a7: var(--scale-gray-a7); --primitive-tertiary-a8: var(--scale-gray-a8); --primitive-tertiary-a9: var(--scale-gray-a9); --primitive-tertiary-a10: var(--scale-gray-a10); --primitive-tertiary-a11: var(--scale-gray-a11); --primitive-tertiary-a12: var(--scale-gray-a12); --color-tertiary-track: var(--primitive-tertiary-1); --color-tertiary-element: var(--primitive-tertiary-3); --color-tertiary-hover: var(--primitive-tertiary-4); --color-tertiary-active: var(--primitive-tertiary-5); --color-tertiary-border: var(--primitive-tertiary-6); --color-tertiary-solid: var(--primitive-tertiary-9); --color-tertiary-solid-hover: var(--primitive-tertiary-10); --color-tertiary-text: var(--primitive-tertiary-11); --color-tertiary-contrast: var(--primitive-tertiary-12); --primitive-neutral-1: var(--scale-gray-1); --primitive-neutral-2: var(--scale-gray-2); --primitive-neutral-3: var(--scale-gray-3); --primitive-neutral-4: var(--scale-gray-4); --primitive-neutral-5: var(--scale-gray-5); --primitive-neutral-6: var(--scale-gray-6); --primitive-neutral-7: var(--scale-gray-7); --primitive-neutral-8: var(--scale-gray-8); --primitive-neutral-9: var(--scale-gray-9); --primitive-neutral-10: var(--scale-gray-10); --primitive-neutral-11: var(--scale-gray-11); --primitive-neutral-12: var(--scale-gray-12); --primitive-neutral-a1: var(--scale-gray-a1); --primitive-neutral-a2: var(--scale-gray-a2); --primitive-neutral-a3: var(--scale-gray-a3); --primitive-neutral-a4: var(--scale-gray-a4); --primitive-neutral-a5: var(--scale-gray-a5); --primitive-neutral-a6: var(--scale-gray-a6); --primitive-neutral-a7: var(--scale-gray-a7); --primitive-neutral-a8: var(--scale-gray-a8); --primitive-neutral-a9: var(--scale-gray-a9); --primitive-neutral-a10: var(--scale-gray-a10); --primitive-neutral-a11: var(--scale-gray-a11); --primitive-neutral-a12: var(--scale-gray-a12); --color-neutral-track: var(--primitive-neutral-1); --color-neutral-element: var(--primitive-neutral-3); --color-neutral-hover: var(--primitive-neutral-4); --color-neutral-active: var(--primitive-neutral-5); --color-neutral-border: var(--primitive-neutral-6); --color-neutral-solid: var(--primitive-neutral-9); --color-neutral-solid-hover: var(--primitive-neutral-10); --color-neutral-text: var(--primitive-neutral-11); --color-neutral-contrast: var(--primitive-neutral-12); --primitive-affirm-1: var(--scale-teal-1); --primitive-affirm-2: var(--scale-teal-2); --primitive-affirm-3: var(--scale-teal-3); --primitive-affirm-4: var(--scale-teal-4); --primitive-affirm-5: var(--scale-teal-5); --primitive-affirm-6: var(--scale-teal-6); --primitive-affirm-7: var(--scale-teal-7); --primitive-affirm-8: var(--scale-teal-8); --primitive-affirm-9: var(--scale-teal-9); --primitive-affirm-10: var(--scale-teal-10); --primitive-affirm-11: var(--scale-teal-11); --primitive-affirm-12: var(--scale-teal-12); --primitive-affirm-a1: var(--scale-teal-a1); --primitive-affirm-a2: var(--scale-teal-a2); --primitive-affirm-a3: var(--scale-teal-a3); --primitive-affirm-a4: var(--scale-teal-a4); --primitive-affirm-a5: var(--scale-teal-a5); --primitive-affirm-a6: var(--scale-teal-a6); --primitive-affirm-a7: var(--scale-teal-a7); --primitive-affirm-a8: var(--scale-teal-a8); --primitive-affirm-a9: var(--scale-teal-a9); --primitive-affirm-a10: var(--scale-teal-a10); --primitive-affirm-a11: var(--scale-teal-a11); --primitive-affirm-a12: var(--scale-teal-a12); --color-affirm-track: var(--primitive-affirm-1); --color-affirm-element: var(--primitive-affirm-3); --color-affirm-hover: var(--primitive-affirm-4); --color-affirm-active: var(--primitive-affirm-5); --color-affirm-border: var(--primitive-affirm-6); --color-affirm-solid: var(--primitive-affirm-9); --color-affirm-solid-hover: var(--primitive-affirm-10); --color-affirm-text: var(--primitive-affirm-11); --color-affirm-contrast: var(--primitive-affirm-12); --primitive-fulfill-1: var(--scale-green-1); --primitive-fulfill-2: var(--scale-green-2); --primitive-fulfill-3: var(--scale-green-3); --primitive-fulfill-4: var(--scale-green-4); --primitive-fulfill-5: var(--scale-green-5); --primitive-fulfill-6: var(--scale-green-6); --primitive-fulfill-7: var(--scale-green-7); --primitive-fulfill-8: var(--scale-green-8); --primitive-fulfill-9: var(--scale-green-9); --primitive-fulfill-10: var(--scale-green-10); --primitive-fulfill-11: var(--scale-green-11); --primitive-fulfill-12: var(--scale-green-12); --primitive-fulfill-a1: var(--scale-green-a1); --primitive-fulfill-a2: var(--scale-green-a2); --primitive-fulfill-a3: var(--scale-green-a3); --primitive-fulfill-a4: var(--scale-green-a4); --primitive-fulfill-a5: var(--scale-green-a5); --primitive-fulfill-a6: var(--scale-green-a6); --primitive-fulfill-a7: var(--scale-green-a7); --primitive-fulfill-a8: var(--scale-green-a8); --primitive-fulfill-a9: var(--scale-green-a9); --primitive-fulfill-a10: var(--scale-green-a10); --primitive-fulfill-a11: var(--scale-green-a11); --primitive-fulfill-a12: var(--scale-green-a12); --color-fulfill-track: var(--primitive-fulfill-1); --color-fulfill-element: var(--primitive-fulfill-3); --color-fulfill-hover: var(--primitive-fulfill-4); --color-fulfill-active: var(--primitive-fulfill-5); --color-fulfill-border: var(--primitive-fulfill-6); --color-fulfill-solid: var(--primitive-fulfill-9); --color-fulfill-solid-hover: var(--primitive-fulfill-10); --color-fulfill-text: var(--primitive-fulfill-11); --color-fulfill-contrast: var(--primitive-fulfill-12); --primitive-risk-1: var(--scale-orange-1); --primitive-risk-2: var(--scale-orange-2); --primitive-risk-3: var(--scale-orange-3); --primitive-risk-4: var(--scale-orange-4); --primitive-risk-5: var(--scale-orange-5); --primitive-risk-6: var(--scale-orange-6); --primitive-risk-7: var(--scale-orange-7); --primitive-risk-8: var(--scale-orange-8); --primitive-risk-9: var(--scale-orange-9); --primitive-risk-10: var(--scale-orange-10); --primitive-risk-11: var(--scale-orange-11); --primitive-risk-12: var(--scale-orange-12); --primitive-risk-a1: var(--scale-orange-a1); --primitive-risk-a2: var(--scale-orange-a2); --primitive-risk-a3: var(--scale-orange-a3); --primitive-risk-a4: var(--scale-orange-a4); --primitive-risk-a5: var(--scale-orange-a5); --primitive-risk-a6: var(--scale-orange-a6); --primitive-risk-a7: var(--scale-orange-a7); --primitive-risk-a8: var(--scale-orange-a8); --primitive-risk-a9: var(--scale-orange-a9); --primitive-risk-a10: var(--scale-orange-a10); --primitive-risk-a11: var(--scale-orange-a11); --primitive-risk-a12: var(--scale-orange-a12); --color-risk-track: var(--primitive-risk-1); --color-risk-element: var(--primitive-risk-3); --color-risk-hover: var(--primitive-risk-4); --color-risk-active: var(--primitive-risk-5); --color-risk-border: var(--primitive-risk-6); --color-risk-solid: var(--primitive-risk-9); --color-risk-solid-hover: var(--primitive-risk-10); --color-risk-text: var(--primitive-risk-11); --color-risk-contrast: var(--primitive-risk-12); --primitive-threat-1: var(--scale-red-1); --primitive-threat-2: var(--scale-red-2); --primitive-threat-3: var(--scale-red-3); --primitive-threat-4: var(--scale-red-4); --primitive-threat-5: var(--scale-red-5); --primitive-threat-6: var(--scale-red-6); --primitive-threat-7: var(--scale-red-7); --primitive-threat-8: var(--scale-red-8); --primitive-threat-9: var(--scale-red-9); --primitive-threat-10: var(--scale-red-10); --primitive-threat-11: var(--scale-red-11); --primitive-threat-12: var(--scale-red-12); --primitive-threat-a1: var(--scale-red-a1); --primitive-threat-a2: var(--scale-red-a2); --primitive-threat-a3: var(--scale-red-a3); --primitive-threat-a4: var(--scale-red-a4); --primitive-threat-a5: var(--scale-red-a5); --primitive-threat-a6: var(--scale-red-a6); --primitive-threat-a7: var(--scale-red-a7); --primitive-threat-a8: var(--scale-red-a8); --primitive-threat-a9: var(--scale-red-a9); --primitive-threat-a10: var(--scale-red-a10); --primitive-threat-a11: var(--scale-red-a11); --primitive-threat-a12: var(--scale-red-a12); --color-threat-track: var(--primitive-threat-1); --color-threat-element: var(--primitive-threat-3); --color-threat-hover: var(--primitive-threat-4); --color-threat-active: var(--primitive-threat-5); --color-threat-border: var(--primitive-threat-6); --color-threat-solid: var(--primitive-threat-9); --color-threat-solid-hover: var(--primitive-threat-10); --color-threat-text: var(--primitive-threat-11); --color-threat-contrast: var(--primitive-threat-12); --primitive-loss-1: var(--scale-purple-1); --primitive-loss-2: var(--scale-purple-2); --primitive-loss-3: var(--scale-purple-3); --primitive-loss-4: var(--scale-purple-4); --primitive-loss-5: var(--scale-purple-5); --primitive-loss-6: var(--scale-purple-6); --primitive-loss-7: var(--scale-purple-7); --primitive-loss-8: var(--scale-purple-8); --primitive-loss-9: var(--scale-purple-9); --primitive-loss-10: var(--scale-purple-10); --primitive-loss-11: var(--scale-purple-11); --primitive-loss-12: var(--scale-purple-12); --primitive-loss-a1: var(--scale-purple-a1); --primitive-loss-a2: var(--scale-purple-a2); --primitive-loss-a3: var(--scale-purple-a3); --primitive-loss-a4: var(--scale-purple-a4); --primitive-loss-a5: var(--scale-purple-a5); --primitive-loss-a6: var(--scale-purple-a6); --primitive-loss-a7: var(--scale-purple-a7); --primitive-loss-a8: var(--scale-purple-a8); --primitive-loss-a9: var(--scale-purple-a9); --primitive-loss-a10: var(--scale-purple-a10); --primitive-loss-a11: var(--scale-purple-a11); --primitive-loss-a12: var(--scale-purple-a12); --color-loss-track: var(--primitive-loss-1); --color-loss-element: var(--primitive-loss-3); --color-loss-hover: var(--primitive-loss-4); --color-loss-active: var(--primitive-loss-5); --color-loss-border: var(--primitive-loss-6); --color-loss-solid: var(--primitive-loss-9); --color-loss-solid-hover: var(--primitive-loss-10); --color-loss-text: var(--primitive-loss-11); --color-loss-contrast: var(--primitive-loss-12); --color-surface-default: var(--primitive-neutral-1); --color-surface-raised: var(--primitive-neutral-2); --color-surface-overlay: var(--primitive-neutral-3); --color-surface-muted: var(--primitive-neutral-3); --color-overlay: rgb(28 25 23 / 0.42); --color-content-primary: var(--primitive-neutral-12); --color-content-secondary: var(--primitive-neutral-11); --color-content-muted: var(--primitive-neutral-10); --color-content-disabled: var(--primitive-neutral-8); --color-content-on-solid: #ffffff; --color-border-subtle: var(--primitive-neutral-4); --color-border-default: var(--primitive-neutral-6); --color-border-strong: var(--primitive-neutral-8); --focus-ring-color: color-mix(in srgb, var(--primitive-primary-8) 48%, transparent); --focus-ring-color-error: color-mix(in srgb, var(--primitive-risk-8) 52%, transparent); --shadow-1: 0 1px 2px rgb(15 23 42 / 0.08); --shadow-2: 0 4px 12px rgb(15 23 42 / 0.10); --shadow-3: 0 8px 24px rgb(15 23 42 / 0.12); --shadow-4: 0 14px 36px rgb(15 23 42 / 0.15); --shadow-5: 0 18px 48px rgb(15 23 42 / 0.18); --shadow-6: 0 28px 72px rgb(15 23 42 / 0.22); --shadow-none: none; --shadow-subtle: var(--shadow-1); --shadow-raised: var(--shadow-3); --shadow-overlay: var(--shadow-5); } [data-theme='base-dark'], [data-theme='dark'] { --scale-gray-1: #111111; --scale-gray-2: #191919; --scale-gray-3: #222222; --scale-gray-4: #2a2a2a; --scale-gray-5: #313131; --scale-gray-6: #3a3a3a; --scale-gray-7: #484848; --scale-gray-8: #606060; --scale-gray-9: #6e6e6e; --scale-gray-10: #7b7b7b; --scale-gray-11: #b4b4b4; --scale-gray-12: #eeeeee; --scale-gray-a1: color-mix(in srgb, var(--scale-gray-9) 3%, transparent); --scale-gray-a2: color-mix(in srgb, var(--scale-gray-9) 5%, transparent); --scale-gray-a3: color-mix(in srgb, var(--scale-gray-9) 8%, transparent); --scale-gray-a4: color-mix(in srgb, var(--scale-gray-9) 12%, transparent); --scale-gray-a5: color-mix(in srgb, var(--scale-gray-9) 16%, transparent); --scale-gray-a6: color-mix(in srgb, var(--scale-gray-9) 22%, transparent); --scale-gray-a7: color-mix(in srgb, var(--scale-gray-9) 30%, transparent); --scale-gray-a8: color-mix(in srgb, var(--scale-gray-9) 40%, transparent); --scale-gray-a9: color-mix(in srgb, var(--scale-gray-9) 56%, transparent); --scale-gray-a10: color-mix(in srgb, var(--scale-gray-9) 68%, transparent); --scale-gray-a11: color-mix(in srgb, var(--scale-gray-9) 80%, transparent); --scale-gray-a12: color-mix(in srgb, var(--scale-gray-9) 92%, transparent); --scale-slate-1: #111113; --scale-slate-2: #18191b; --scale-slate-3: #212225; --scale-slate-4: #272a2d; --scale-slate-5: #2e3135; --scale-slate-6: #363a3f; --scale-slate-7: #43484e; --scale-slate-8: #5a6169; --scale-slate-9: #696e77; --scale-slate-10: #777b84; --scale-slate-11: #b0b4ba; --scale-slate-12: #edeef0; --scale-slate-a1: color-mix(in srgb, var(--scale-slate-9) 3%, transparent); --scale-slate-a2: color-mix(in srgb, var(--scale-slate-9) 5%, transparent); --scale-slate-a3: color-mix(in srgb, var(--scale-slate-9) 8%, transparent); --scale-slate-a4: color-mix(in srgb, var(--scale-slate-9) 12%, transparent); --scale-slate-a5: color-mix(in srgb, var(--scale-slate-9) 16%, transparent); --scale-slate-a6: color-mix(in srgb, var(--scale-slate-9) 22%, transparent); --scale-slate-a7: color-mix(in srgb, var(--scale-slate-9) 30%, transparent); --scale-slate-a8: color-mix(in srgb, var(--scale-slate-9) 40%, transparent); --scale-slate-a9: color-mix(in srgb, var(--scale-slate-9) 56%, transparent); --scale-slate-a10: color-mix(in srgb, var(--scale-slate-9) 68%, transparent); --scale-slate-a11: color-mix(in srgb, var(--scale-slate-9) 80%, transparent); --scale-slate-a12: color-mix(in srgb, var(--scale-slate-9) 92%, transparent); --scale-blue-1: #0d1520; --scale-blue-2: #111927; --scale-blue-3: #0d2847; --scale-blue-4: #003362; --scale-blue-5: #004074; --scale-blue-6: #104d87; --scale-blue-7: #205d9e; --scale-blue-8: #2870bd; --scale-blue-9: #0090ff; --scale-blue-10: #3b9eff; --scale-blue-11: #70b8ff; --scale-blue-12: #c2e6ff; --scale-blue-a1: color-mix(in srgb, var(--scale-blue-9) 3%, transparent); --scale-blue-a2: color-mix(in srgb, var(--scale-blue-9) 5%, transparent); --scale-blue-a3: color-mix(in srgb, var(--scale-blue-9) 8%, transparent); --scale-blue-a4: color-mix(in srgb, var(--scale-blue-9) 12%, transparent); --scale-blue-a5: color-mix(in srgb, var(--scale-blue-9) 16%, transparent); --scale-blue-a6: color-mix(in srgb, var(--scale-blue-9) 22%, transparent); --scale-blue-a7: color-mix(in srgb, var(--scale-blue-9) 30%, transparent); --scale-blue-a8: color-mix(in srgb, var(--scale-blue-9) 40%, transparent); --scale-blue-a9: color-mix(in srgb, var(--scale-blue-9) 56%, transparent); --scale-blue-a10: color-mix(in srgb, var(--scale-blue-9) 68%, transparent); --scale-blue-a11: color-mix(in srgb, var(--scale-blue-9) 80%, transparent); --scale-blue-a12: color-mix(in srgb, var(--scale-blue-9) 92%, transparent); --scale-cyan-1: #0b161a; --scale-cyan-2: #101b20; --scale-cyan-3: #082c36; --scale-cyan-4: #003848; --scale-cyan-5: #004558; --scale-cyan-6: #045468; --scale-cyan-7: #12677e; --scale-cyan-8: #11809c; --scale-cyan-9: #00a2c7; --scale-cyan-10: #23afd0; --scale-cyan-11: #4ccce6; --scale-cyan-12: #b6ecf7; --scale-cyan-a1: color-mix(in srgb, var(--scale-cyan-9) 3%, transparent); --scale-cyan-a2: color-mix(in srgb, var(--scale-cyan-9) 5%, transparent); --scale-cyan-a3: color-mix(in srgb, var(--scale-cyan-9) 8%, transparent); --scale-cyan-a4: color-mix(in srgb, var(--scale-cyan-9) 12%, transparent); --scale-cyan-a5: color-mix(in srgb, var(--scale-cyan-9) 16%, transparent); --scale-cyan-a6: color-mix(in srgb, var(--scale-cyan-9) 22%, transparent); --scale-cyan-a7: color-mix(in srgb, var(--scale-cyan-9) 30%, transparent); --scale-cyan-a8: color-mix(in srgb, var(--scale-cyan-9) 40%, transparent); --scale-cyan-a9: color-mix(in srgb, var(--scale-cyan-9) 56%, transparent); --scale-cyan-a10: color-mix(in srgb, var(--scale-cyan-9) 68%, transparent); --scale-cyan-a11: color-mix(in srgb, var(--scale-cyan-9) 80%, transparent); --scale-cyan-a12: color-mix(in srgb, var(--scale-cyan-9) 92%, transparent); --scale-teal-1: #0d1514; --scale-teal-2: #111c1b; --scale-teal-3: #0d2d2a; --scale-teal-4: #023b37; --scale-teal-5: #084843; --scale-teal-6: #145750; --scale-teal-7: #1c6961; --scale-teal-8: #207e73; --scale-teal-9: #12a594; --scale-teal-10: #0eb39e; --scale-teal-11: #0bd8b6; --scale-teal-12: #adf0dd; --scale-teal-a1: color-mix(in srgb, var(--scale-teal-9) 3%, transparent); --scale-teal-a2: color-mix(in srgb, var(--scale-teal-9) 5%, transparent); --scale-teal-a3: color-mix(in srgb, var(--scale-teal-9) 8%, transparent); --scale-teal-a4: color-mix(in srgb, var(--scale-teal-9) 12%, transparent); --scale-teal-a5: color-mix(in srgb, var(--scale-teal-9) 16%, transparent); --scale-teal-a6: color-mix(in srgb, var(--scale-teal-9) 22%, transparent); --scale-teal-a7: color-mix(in srgb, var(--scale-teal-9) 30%, transparent); --scale-teal-a8: color-mix(in srgb, var(--scale-teal-9) 40%, transparent); --scale-teal-a9: color-mix(in srgb, var(--scale-teal-9) 56%, transparent); --scale-teal-a10: color-mix(in srgb, var(--scale-teal-9) 68%, transparent); --scale-teal-a11: color-mix(in srgb, var(--scale-teal-9) 80%, transparent); --scale-teal-a12: color-mix(in srgb, var(--scale-teal-9) 92%, transparent); --scale-green-1: #0e1512; --scale-green-2: #121b17; --scale-green-3: #132d21; --scale-green-4: #113b29; --scale-green-5: #174933; --scale-green-6: #20573e; --scale-green-7: #28684a; --scale-green-8: #2f7c57; --scale-green-9: #30a46c; --scale-green-10: #33b074; --scale-green-11: #3dd68c; --scale-green-12: #b1f1cb; --scale-green-a1: color-mix(in srgb, var(--scale-green-9) 3%, transparent); --scale-green-a2: color-mix(in srgb, var(--scale-green-9) 5%, transparent); --scale-green-a3: color-mix(in srgb, var(--scale-green-9) 8%, transparent); --scale-green-a4: color-mix(in srgb, var(--scale-green-9) 12%, transparent); --scale-green-a5: color-mix(in srgb, var(--scale-green-9) 16%, transparent); --scale-green-a6: color-mix(in srgb, var(--scale-green-9) 22%, transparent); --scale-green-a7: color-mix(in srgb, var(--scale-green-9) 30%, transparent); --scale-green-a8: color-mix(in srgb, var(--scale-green-9) 40%, transparent); --scale-green-a9: color-mix(in srgb, var(--scale-green-9) 56%, transparent); --scale-green-a10: color-mix(in srgb, var(--scale-green-9) 68%, transparent); --scale-green-a11: color-mix(in srgb, var(--scale-green-9) 80%, transparent); --scale-green-a12: color-mix(in srgb, var(--scale-green-9) 92%, transparent); --scale-yellow-1: #14120b; --scale-yellow-2: #1b180f; --scale-yellow-3: #2d2305; --scale-yellow-4: #362b00; --scale-yellow-5: #433500; --scale-yellow-6: #524202; --scale-yellow-7: #665417; --scale-yellow-8: #836a21; --scale-yellow-9: #ffe629; --scale-yellow-10: #ffff57; --scale-yellow-11: #f5e147; --scale-yellow-12: #f6eeb4; --scale-yellow-a1: color-mix(in srgb, var(--scale-yellow-9) 3%, transparent); --scale-yellow-a2: color-mix(in srgb, var(--scale-yellow-9) 5%, transparent); --scale-yellow-a3: color-mix(in srgb, var(--scale-yellow-9) 8%, transparent); --scale-yellow-a4: color-mix(in srgb, var(--scale-yellow-9) 12%, transparent); --scale-yellow-a5: color-mix(in srgb, var(--scale-yellow-9) 16%, transparent); --scale-yellow-a6: color-mix(in srgb, var(--scale-yellow-9) 22%, transparent); --scale-yellow-a7: color-mix(in srgb, var(--scale-yellow-9) 30%, transparent); --scale-yellow-a8: color-mix(in srgb, var(--scale-yellow-9) 40%, transparent); --scale-yellow-a9: color-mix(in srgb, var(--scale-yellow-9) 56%, transparent); --scale-yellow-a10: color-mix(in srgb, var(--scale-yellow-9) 68%, transparent); --scale-yellow-a11: color-mix(in srgb, var(--scale-yellow-9) 80%, transparent); --scale-yellow-a12: color-mix(in srgb, var(--scale-yellow-9) 92%, transparent); --scale-amber-1: #16120c; --scale-amber-2: #1d180f; --scale-amber-3: #302008; --scale-amber-4: #3f2700; --scale-amber-5: #4d3000; --scale-amber-6: #5c3d05; --scale-amber-7: #714f19; --scale-amber-8: #8f6424; --scale-amber-9: #ffc53d; --scale-amber-10: #ffd60a; --scale-amber-11: #ffca16; --scale-amber-12: #ffe7b3; --scale-amber-a1: color-mix(in srgb, var(--scale-amber-9) 3%, transparent); --scale-amber-a2: color-mix(in srgb, var(--scale-amber-9) 5%, transparent); --scale-amber-a3: color-mix(in srgb, var(--scale-amber-9) 8%, transparent); --scale-amber-a4: color-mix(in srgb, var(--scale-amber-9) 12%, transparent); --scale-amber-a5: color-mix(in srgb, var(--scale-amber-9) 16%, transparent); --scale-amber-a6: color-mix(in srgb, var(--scale-amber-9) 22%, transparent); --scale-amber-a7: color-mix(in srgb, var(--scale-amber-9) 30%, transparent); --scale-amber-a8: color-mix(in srgb, var(--scale-amber-9) 40%, transparent); --scale-amber-a9: color-mix(in srgb, var(--scale-amber-9) 56%, transparent); --scale-amber-a10: color-mix(in srgb, var(--scale-amber-9) 68%, transparent); --scale-amber-a11: color-mix(in srgb, var(--scale-amber-9) 80%, transparent); --scale-amber-a12: color-mix(in srgb, var(--scale-amber-9) 92%, transparent); --scale-orange-1: #17120e; --scale-orange-2: #1e160f; --scale-orange-3: #331e0b; --scale-orange-4: #462100; --scale-orange-5: #562800; --scale-orange-6: #66350c; --scale-orange-7: #7e451d; --scale-orange-8: #a35829; --scale-orange-9: #f76b15; --scale-orange-10: #ff801f; --scale-orange-11: #ffa057; --scale-orange-12: #ffe0c2; --scale-orange-a1: color-mix(in srgb, var(--scale-orange-9) 3%, transparent); --scale-orange-a2: color-mix(in srgb, var(--scale-orange-9) 5%, transparent); --scale-orange-a3: color-mix(in srgb, var(--scale-orange-9) 8%, transparent); --scale-orange-a4: color-mix(in srgb, var(--scale-orange-9) 12%, transparent); --scale-orange-a5: color-mix(in srgb, var(--scale-orange-9) 16%, transparent); --scale-orange-a6: color-mix(in srgb, var(--scale-orange-9) 22%, transparent); --scale-orange-a7: color-mix(in srgb, var(--scale-orange-9) 30%, transparent); --scale-orange-a8: color-mix(in srgb, var(--scale-orange-9) 40%, transparent); --scale-orange-a9: color-mix(in srgb, var(--scale-orange-9) 56%, transparent); --scale-orange-a10: color-mix(in srgb, var(--scale-orange-9) 68%, transparent); --scale-orange-a11: color-mix(in srgb, var(--scale-orange-9) 80%, transparent); --scale-orange-a12: color-mix(in srgb, var(--scale-orange-9) 92%, transparent); --scale-red-1: #191111; --scale-red-2: #201314; --scale-red-3: #3b1219; --scale-red-4: #500f1c; --scale-red-5: #611623; --scale-red-6: #72232d; --scale-red-7: #8c333a; --scale-red-8: #b54548; --scale-red-9: #e5484d; --scale-red-10: #ec5d5e; --scale-red-11: #ff9592; --scale-red-12: #ffd1d9; --scale-red-a1: color-mix(in srgb, var(--scale-red-9) 3%, transparent); --scale-red-a2: color-mix(in srgb, var(--scale-red-9) 5%, transparent); --scale-red-a3: color-mix(in srgb, var(--scale-red-9) 8%, transparent); --scale-red-a4: color-mix(in srgb, var(--scale-red-9) 12%, transparent); --scale-red-a5: color-mix(in srgb, var(--scale-red-9) 16%, transparent); --scale-red-a6: color-mix(in srgb, var(--scale-red-9) 22%, transparent); --scale-red-a7: color-mix(in srgb, var(--scale-red-9) 30%, transparent); --scale-red-a8: color-mix(in srgb, var(--scale-red-9) 40%, transparent); --scale-red-a9: color-mix(in srgb, var(--scale-red-9) 56%, transparent); --scale-red-a10: color-mix(in srgb, var(--scale-red-9) 68%, transparent); --scale-red-a11: color-mix(in srgb, var(--scale-red-9) 80%, transparent); --scale-red-a12: color-mix(in srgb, var(--scale-red-9) 92%, transparent); --scale-pink-1: #191117; --scale-pink-2: #21121d; --scale-pink-3: #37172f; --scale-pink-4: #4b143d; --scale-pink-5: #591c47; --scale-pink-6: #692955; --scale-pink-7: #833869; --scale-pink-8: #a84885; --scale-pink-9: #d6409f; --scale-pink-10: #de51a8; --scale-pink-11: #ff8dcc; --scale-pink-12: #fdd1ea; --scale-pink-a1: color-mix(in srgb, var(--scale-pink-9) 3%, transparent); --scale-pink-a2: color-mix(in srgb, var(--scale-pink-9) 5%, transparent); --scale-pink-a3: color-mix(in srgb, var(--scale-pink-9) 8%, transparent); --scale-pink-a4: color-mix(in srgb, var(--scale-pink-9) 12%, transparent); --scale-pink-a5: color-mix(in srgb, var(--scale-pink-9) 16%, transparent); --scale-pink-a6: color-mix(in srgb, var(--scale-pink-9) 22%, transparent); --scale-pink-a7: color-mix(in srgb, var(--scale-pink-9) 30%, transparent); --scale-pink-a8: color-mix(in srgb, var(--scale-pink-9) 40%, transparent); --scale-pink-a9: color-mix(in srgb, var(--scale-pink-9) 56%, transparent); --scale-pink-a10: color-mix(in srgb, var(--scale-pink-9) 68%, transparent); --scale-pink-a11: color-mix(in srgb, var(--scale-pink-9) 80%, transparent); --scale-pink-a12: color-mix(in srgb, var(--scale-pink-9) 92%, transparent); --scale-purple-1: #18111b; --scale-purple-2: #1e1523; --scale-purple-3: #301c3b; --scale-purple-4: #3d224e; --scale-purple-5: #48295c; --scale-purple-6: #54346b; --scale-purple-7: #664282; --scale-purple-8: #8457aa; --scale-purple-9: #8e4ec6; --scale-purple-10: #9a5cd0; --scale-purple-11: #d19dff; --scale-purple-12: #ecd9fa; --scale-purple-a1: color-mix(in srgb, var(--scale-purple-9) 3%, transparent); --scale-purple-a2: color-mix(in srgb, var(--scale-purple-9) 5%, transparent); --scale-purple-a3: color-mix(in srgb, var(--scale-purple-9) 8%, transparent); --scale-purple-a4: color-mix(in srgb, var(--scale-purple-9) 12%, transparent); --scale-purple-a5: color-mix(in srgb, var(--scale-purple-9) 16%, transparent); --scale-purple-a6: color-mix(in srgb, var(--scale-purple-9) 22%, transparent); --scale-purple-a7: color-mix(in srgb, var(--scale-purple-9) 30%, transparent); --scale-purple-a8: color-mix(in srgb, var(--scale-purple-9) 40%, transparent); --scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent); --scale-purple-a10: color-mix(in srgb, var(--scale-purple-9) 68%, transparent); --scale-purple-a11: color-mix(in srgb, var(--scale-purple-9) 80%, transparent); --scale-purple-a12: color-mix(in srgb, var(--scale-purple-9) 92%, transparent); --primitive-primary-1: var(--scale-purple-1); --primitive-primary-2: var(--scale-purple-2); --primitive-primary-3: var(--scale-purple-3); --primitive-primary-4: var(--scale-purple-4); --primitive-primary-5: var(--scale-purple-5); --primitive-primary-6: var(--scale-purple-6); --primitive-primary-7: var(--scale-purple-7); --primitive-primary-8: var(--scale-purple-8); --primitive-primary-9: var(--scale-purple-9); --primitive-primary-10: var(--scale-purple-10); --primitive-primary-11: var(--scale-purple-11); --primitive-primary-12: var(--scale-purple-12); --primitive-primary-a1: var(--scale-purple-a1); --primitive-primary-a2: var(--scale-purple-a2); --primitive-primary-a3: var(--scale-purple-a3); --primitive-primary-a4: var(--scale-purple-a4); --primitive-primary-a5: var(--scale-purple-a5); --primitive-primary-a6: var(--scale-purple-a6); --primitive-primary-a7: var(--scale-purple-a7); --primitive-primary-a8: var(--scale-purple-a8); --primitive-primary-a9: var(--scale-purple-a9); --primitive-primary-a10: var(--scale-purple-a10); --primitive-primary-a11: var(--scale-purple-a11); --primitive-primary-a12: var(--scale-purple-a12); --color-primary-track: var(--primitive-primary-1); --color-primary-element: var(--primitive-primary-3); --color-primary-hover: var(--primitive-primary-4); --color-primary-active: var(--primitive-primary-5); --color-primary-border: var(--primitive-primary-6); --color-primary-solid: var(--primitive-primary-9); --color-primary-solid-hover: var(--primitive-primary-10); --color-primary-text: var(--primitive-primary-11); --color-primary-contrast: var(--primitive-primary-12); --primitive-secondary-1: var(--scale-slate-1); --primitive-secondary-2: var(--scale-slate-2); --primitive-secondary-3: var(--scale-slate-3); --primitive-secondary-4: var(--scale-slate-4); --primitive-secondary-5: var(--scale-slate-5); --primitive-secondary-6: var(--scale-slate-6); --primitive-secondary-7: var(--scale-slate-7); --primitive-secondary-8: var(--scale-slate-8); --primitive-secondary-9: var(--scale-slate-9); --primitive-secondary-10: var(--scale-slate-10); --primitive-secondary-11: var(--scale-slate-11); --primitive-secondary-12: var(--scale-slate-12); --primitive-secondary-a1: var(--scale-slate-a1); --primitive-secondary-a2: var(--scale-slate-a2); --primitive-secondary-a3: var(--scale-slate-a3); --primitive-secondary-a4: var(--scale-slate-a4); --primitive-secondary-a5: var(--scale-slate-a5); --primitive-secondary-a6: var(--scale-slate-a6); --primitive-secondary-a7: var(--scale-slate-a7); --primitive-secondary-a8: var(--scale-slate-a8); --primitive-secondary-a9: var(--scale-slate-a9); --primitive-secondary-a10: var(--scale-slate-a10); --primitive-secondary-a11: var(--scale-slate-a11); --primitive-secondary-a12: var(--scale-slate-a12); --color-secondary-track: var(--primitive-secondary-1); --color-secondary-element: var(--primitive-secondary-3); --color-secondary-hover: var(--primitive-secondary-4); --color-secondary-active: var(--primitive-secondary-5); --color-secondary-border: var(--primitive-secondary-6); --color-secondary-solid: var(--primitive-secondary-9); --color-secondary-solid-hover: var(--primitive-secondary-10); --color-secondary-text: var(--primitive-secondary-11); --color-secondary-contrast: var(--primitive-secondary-12); --primitive-tertiary-1: var(--scale-gray-1); --primitive-tertiary-2: var(--scale-gray-2); --primitive-tertiary-3: var(--scale-gray-3); --primitive-tertiary-4: var(--scale-gray-4); --primitive-tertiary-5: var(--scale-gray-5); --primitive-tertiary-6: var(--scale-gray-6); --primitive-tertiary-7: var(--scale-gray-7); --primitive-tertiary-8: var(--scale-gray-8); --primitive-tertiary-9: var(--scale-gray-9); --primitive-tertiary-10: var(--scale-gray-10); --primitive-tertiary-11: var(--scale-gray-11); --primitive-tertiary-12: var(--scale-gray-12); --primitive-tertiary-a1: var(--scale-gray-a1); --primitive-tertiary-a2: var(--scale-gray-a2); --primitive-tertiary-a3: var(--scale-gray-a3); --primitive-tertiary-a4: var(--scale-gray-a4); --primitive-tertiary-a5: var(--scale-gray-a5); --primitive-tertiary-a6: var(--scale-gray-a6); --primitive-tertiary-a7: var(--scale-gray-a7); --primitive-tertiary-a8: var(--scale-gray-a8); --primitive-tertiary-a9: var(--scale-gray-a9); --primitive-tertiary-a10: var(--scale-gray-a10); --primitive-tertiary-a11: var(--scale-gray-a11); --primitive-tertiary-a12: var(--scale-gray-a12); --color-tertiary-track: var(--primitive-tertiary-1); --color-tertiary-element: var(--primitive-tertiary-3); --color-tertiary-hover: var(--primitive-tertiary-4); --color-tertiary-active: var(--primitive-tertiary-5); --color-tertiary-border: var(--primitive-tertiary-6); --color-tertiary-solid: var(--primitive-tertiary-9); --color-tertiary-solid-hover: var(--primitive-tertiary-10); --color-tertiary-text: var(--primitive-tertiary-11); --color-tertiary-contrast: var(--primitive-tertiary-12); --primitive-neutral-1: var(--scale-gray-1); --primitive-neutral-2: var(--scale-gray-2); --primitive-neutral-3: var(--scale-gray-3); --primitive-neutral-4: var(--scale-gray-4); --primitive-neutral-5: var(--scale-gray-5); --primitive-neutral-6: var(--scale-gray-6); --primitive-neutral-7: var(--scale-gray-7); --primitive-neutral-8: var(--scale-gray-8); --primitive-neutral-9: var(--scale-gray-9); --primitive-neutral-10: var(--scale-gray-10); --primitive-neutral-11: var(--scale-gray-11); --primitive-neutral-12: var(--scale-gray-12); --primitive-neutral-a1: var(--scale-gray-a1); --primitive-neutral-a2: var(--scale-gray-a2); --primitive-neutral-a3: var(--scale-gray-a3); --primitive-neutral-a4: var(--scale-gray-a4); --primitive-neutral-a5: var(--scale-gray-a5); --primitive-neutral-a6: var(--scale-gray-a6); --primitive-neutral-a7: var(--scale-gray-a7); --primitive-neutral-a8: var(--scale-gray-a8); --primitive-neutral-a9: var(--scale-gray-a9); --primitive-neutral-a10: var(--scale-gray-a10); --primitive-neutral-a11: var(--scale-gray-a11); --primitive-neutral-a12: var(--scale-gray-a12); --color-neutral-track: var(--primitive-neutral-1); --color-neutral-element: var(--primitive-neutral-3); --color-neutral-hover: var(--primitive-neutral-4); --color-neutral-active: var(--primitive-neutral-5); --color-neutral-border: var(--primitive-neutral-6); --color-neutral-solid: var(--primitive-neutral-9); --color-neutral-solid-hover: var(--primitive-neutral-10); --color-neutral-text: var(--primitive-neutral-11); --color-neutral-contrast: var(--primitive-neutral-12); --primitive-affirm-1: var(--scale-teal-1); --primitive-affirm-2: var(--scale-teal-2); --primitive-affirm-3: var(--scale-teal-3); --primitive-affirm-4: var(--scale-teal-4); --primitive-affirm-5: var(--scale-teal-5); --primitive-affirm-6: var(--scale-teal-6); --primitive-affirm-7: var(--scale-teal-7); --primitive-affirm-8: var(--scale-teal-8); --primitive-affirm-9: var(--scale-teal-9); --primitive-affirm-10: var(--scale-teal-10); --primitive-affirm-11: var(--scale-teal-11); --primitive-affirm-12: var(--scale-teal-12); --primitive-affirm-a1: var(--scale-teal-a1); --primitive-affirm-a2: var(--scale-teal-a2); --primitive-affirm-a3: var(--scale-teal-a3); --primitive-affirm-a4: var(--scale-teal-a4); --primitive-affirm-a5: var(--scale-teal-a5); --primitive-affirm-a6: var(--scale-teal-a6); --primitive-affirm-a7: var(--scale-teal-a7); --primitive-affirm-a8: var(--scale-teal-a8); --primitive-affirm-a9: var(--scale-teal-a9); --primitive-affirm-a10: var(--scale-teal-a10); --primitive-affirm-a11: var(--scale-teal-a11); --primitive-affirm-a12: var(--scale-teal-a12); --color-affirm-track: var(--primitive-affirm-1); --color-affirm-element: var(--primitive-affirm-3); --color-affirm-hover: var(--primitive-affirm-4); --color-affirm-active: var(--primitive-affirm-5); --color-affirm-border: var(--primitive-affirm-6); --color-affirm-solid: var(--primitive-affirm-9); --color-affirm-solid-hover: var(--primitive-affirm-10); --color-affirm-text: var(--primitive-affirm-11); --color-affirm-contrast: var(--primitive-affirm-12); --primitive-fulfill-1: var(--scale-green-1); --primitive-fulfill-2: var(--scale-green-2); --primitive-fulfill-3: var(--scale-green-3); --primitive-fulfill-4: var(--scale-green-4); --primitive-fulfill-5: var(--scale-green-5); --primitive-fulfill-6: var(--scale-green-6); --primitive-fulfill-7: var(--scale-green-7); --primitive-fulfill-8: var(--scale-green-8); --primitive-fulfill-9: var(--scale-green-9); --primitive-fulfill-10: var(--scale-green-10); --primitive-fulfill-11: var(--scale-green-11); --primitive-fulfill-12: var(--scale-green-12); --primitive-fulfill-a1: var(--scale-green-a1); --primitive-fulfill-a2: var(--scale-green-a2); --primitive-fulfill-a3: var(--scale-green-a3); --primitive-fulfill-a4: var(--scale-green-a4); --primitive-fulfill-a5: var(--scale-green-a5); --primitive-fulfill-a6: var(--scale-green-a6); --primitive-fulfill-a7: var(--scale-green-a7); --primitive-fulfill-a8: var(--scale-green-a8); --primitive-fulfill-a9: var(--scale-green-a9); --primitive-fulfill-a10: var(--scale-green-a10); --primitive-fulfill-a11: var(--scale-green-a11); --primitive-fulfill-a12: var(--scale-green-a12); --color-fulfill-track: var(--primitive-fulfill-1); --color-fulfill-element: var(--primitive-fulfill-3); --color-fulfill-hover: var(--primitive-fulfill-4); --color-fulfill-active: var(--primitive-fulfill-5); --color-fulfill-border: var(--primitive-fulfill-6); --color-fulfill-solid: var(--primitive-fulfill-9); --color-fulfill-solid-hover: var(--primitive-fulfill-10); --color-fulfill-text: var(--primitive-fulfill-11); --color-fulfill-contrast: var(--primitive-fulfill-12); --primitive-risk-1: var(--scale-orange-1); --primitive-risk-2: var(--scale-orange-2); --primitive-risk-3: var(--scale-orange-3); --primitive-risk-4: var(--scale-orange-4); --primitive-risk-5: var(--scale-orange-5); --primitive-risk-6: var(--scale-orange-6); --primitive-risk-7: var(--scale-orange-7); --primitive-risk-8: var(--scale-orange-8); --primitive-risk-9: var(--scale-orange-9); --primitive-risk-10: var(--scale-orange-10); --primitive-risk-11: var(--scale-orange-11); --primitive-risk-12: var(--scale-orange-12); --primitive-risk-a1: var(--scale-orange-a1); --primitive-risk-a2: var(--scale-orange-a2); --primitive-risk-a3: var(--scale-orange-a3); --primitive-risk-a4: var(--scale-orange-a4); --primitive-risk-a5: var(--scale-orange-a5); --primitive-risk-a6: var(--scale-orange-a6); --primitive-risk-a7: var(--scale-orange-a7); --primitive-risk-a8: var(--scale-orange-a8); --primitive-risk-a9: var(--scale-orange-a9); --primitive-risk-a10: var(--scale-orange-a10); --primitive-risk-a11: var(--scale-orange-a11); --primitive-risk-a12: var(--scale-orange-a12); --color-risk-track: var(--primitive-risk-1); --color-risk-element: var(--primitive-risk-3); --color-risk-hover: var(--primitive-risk-4); --color-risk-active: var(--primitive-risk-5); --color-risk-border: var(--primitive-risk-6); --color-risk-solid: var(--primitive-risk-9); --color-risk-solid-hover: var(--primitive-risk-10); --color-risk-text: var(--primitive-risk-11); --color-risk-contrast: var(--primitive-risk-12); --primitive-threat-1: var(--scale-red-1); --primitive-threat-2: var(--scale-red-2); --primitive-threat-3: var(--scale-red-3); --primitive-threat-4: var(--scale-red-4); --primitive-threat-5: var(--scale-red-5); --primitive-threat-6: var(--scale-red-6); --primitive-threat-7: var(--scale-red-7); --primitive-threat-8: var(--scale-red-8); --primitive-threat-9: var(--scale-red-9); --primitive-threat-10: var(--scale-red-10); --primitive-threat-11: var(--scale-red-11); --primitive-threat-12: var(--scale-red-12); --primitive-threat-a1: var(--scale-red-a1); --primitive-threat-a2: var(--scale-red-a2); --primitive-threat-a3: var(--scale-red-a3); --primitive-threat-a4: var(--scale-red-a4); --primitive-threat-a5: var(--scale-red-a5); --primitive-threat-a6: var(--scale-red-a6); --primitive-threat-a7: var(--scale-red-a7); --primitive-threat-a8: var(--scale-red-a8); --primitive-threat-a9: var(--scale-red-a9); --primitive-threat-a10: var(--scale-red-a10); --primitive-threat-a11: var(--scale-red-a11); --primitive-threat-a12: var(--scale-red-a12); --color-threat-track: var(--primitive-threat-1); --color-threat-element: var(--primitive-threat-3); --color-threat-hover: var(--primitive-threat-4); --color-threat-active: var(--primitive-threat-5); --color-threat-border: var(--primitive-threat-6); --color-threat-solid: var(--primitive-threat-9); --color-threat-solid-hover: var(--primitive-threat-10); --color-threat-text: var(--primitive-threat-11); --color-threat-contrast: var(--primitive-threat-12); --primitive-loss-1: var(--scale-purple-1); --primitive-loss-2: var(--scale-purple-2); --primitive-loss-3: var(--scale-purple-3); --primitive-loss-4: var(--scale-purple-4); --primitive-loss-5: var(--scale-purple-5); --primitive-loss-6: var(--scale-purple-6); --primitive-loss-7: var(--scale-purple-7); --primitive-loss-8: var(--scale-purple-8); --primitive-loss-9: var(--scale-purple-9); --primitive-loss-10: var(--scale-purple-10); --primitive-loss-11: var(--scale-purple-11); --primitive-loss-12: var(--scale-purple-12); --primitive-loss-a1: var(--scale-purple-a1); --primitive-loss-a2: var(--scale-purple-a2); --primitive-loss-a3: var(--scale-purple-a3); --primitive-loss-a4: var(--scale-purple-a4); --primitive-loss-a5: var(--scale-purple-a5); --primitive-loss-a6: var(--scale-purple-a6); --primitive-loss-a7: var(--scale-purple-a7); --primitive-loss-a8: var(--scale-purple-a8); --primitive-loss-a9: var(--scale-purple-a9); --primitive-loss-a10: var(--scale-purple-a10); --primitive-loss-a11: var(--scale-purple-a11); --primitive-loss-a12: var(--scale-purple-a12); --color-loss-track: var(--primitive-loss-1); --color-loss-element: var(--primitive-loss-3); --color-loss-hover: var(--primitive-loss-4); --color-loss-active: var(--primitive-loss-5); --color-loss-border: var(--primitive-loss-6); --color-loss-solid: var(--primitive-loss-9); --color-loss-solid-hover: var(--primitive-loss-10); --color-loss-text: var(--primitive-loss-11); --color-loss-contrast: var(--primitive-loss-12); --color-surface-default: var(--primitive-neutral-1); --color-surface-raised: var(--primitive-neutral-2); --color-surface-overlay: var(--primitive-neutral-4); --color-surface-muted: var(--primitive-neutral-3); --color-overlay: rgb(0 0 0 / 0.66); --color-content-primary: var(--primitive-neutral-12); --color-content-secondary: var(--primitive-neutral-11); --color-content-muted: var(--primitive-neutral-10); --color-content-disabled: var(--primitive-neutral-8); --color-content-on-solid: #ffffff; --color-border-subtle: var(--primitive-neutral-4); --color-border-default: var(--primitive-neutral-6); --color-border-strong: var(--primitive-neutral-8); --focus-ring-color: color-mix(in srgb, var(--primitive-primary-8) 52%, transparent); --focus-ring-color-error: color-mix(in srgb, var(--primitive-risk-8) 56%, transparent); --shadow-1: 0 1px 2px rgb(0 0 0 / 0.28); --shadow-2: 0 5px 16px rgb(0 0 0 / 0.34); --shadow-3: 0 10px 30px rgb(0 0 0 / 0.42); --shadow-4: 0 16px 44px rgb(0 0 0 / 0.48); --shadow-5: 0 22px 60px rgb(0 0 0 / 0.55); --shadow-6: 0 34px 88px rgb(0 0 0 / 0.62); --shadow-none: none; --shadow-subtle: var(--shadow-1); --shadow-raised: var(--shadow-3); --shadow-overlay: var(--shadow-5); }