/* Generated from Figma Variables. First mode = :root default. FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */ :root { --accent-active: rgb(102,193,255); /* @kind color */ --accent-default: rgb(63,177,242); /* @kind color */ --accent-disabled: rgb(205,235,252); /* @kind color */ --accent-hover: rgb(83,158,212); /* @kind color */ --accent-row-hover: rgb(241,249,254); /* @kind color */ --accordion-content-background: var(--content-background); /* @kind color */ --accordion-content-border-color: var(--content-border-color); /* @kind color */ --accordion-content-border-width: 0; /* @kind spacing */ --accordion-content-color: var(--text-primary-color); /* @kind color */ --accordion-content-padding-x: var(--spacing-padding-24); --accordion-content-padding-y: var(--spacing-padding-24); --accordion-header-active-background: var(--content-background); /* @kind color */ --accordion-header-active-color: var(--text-primary-color); /* @kind color */ --accordion-header-active-hover-background: var(--content-hover-background); /* @kind color */ --accordion-header-background: var(--content-background); /* @kind color */ --accordion-header-border-color: var(--content-border-color); /* @kind color */ --accordion-header-border-radius: 0; /* @kind radius */ --accordion-header-border-width: 1; /* @kind spacing */ --accordion-header-color: var(--text-primary-color); /* @kind color */ --accordion-header-first-border-width: 0; /* @kind spacing */ --accordion-header-first-top-border-radius: var(--content-border-radius); --accordion-header-focus-ring-color: var(--focus-ring-color); /* @kind color */ --accordion-header-focus-ring-offset: var(--focus-ring-offset); --accordion-header-focus-ring-width: var(--focus-ring-width); --accordion-header-font-size: var(--font-size-body); --accordion-header-font-weight: var(--font-weight-semibold); --accordion-header-hover-background: var(--content-hover-background); /* @kind color */ --accordion-header-hover-color: var(--text-primary-hover-color); /* @kind color */ --accordion-header-last-active-bottom-border-radius: 0; /* @kind radius */ --accordion-header-last-bottom-border-radius: var(--content-border-radius); --accordion-header-padding-x: var(--spacing-padding-24); --accordion-header-padding-y: var(--spacing-padding-24); --accordion-header-toggle-icon-active-color: var(--icon-default-color); /* @kind color */ --accordion-header-toggle-icon-active-hover-color: var(--icon-default-hover-color); /* @kind color */ --accordion-header-toggle-icon-color: var(--icon-default-color); /* @kind color */ --accordion-header-toggle-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --accordion-panel-border-color: var(--content-border-color); /* @kind color */ --accordion-panel-border-width: 1; /* @kind spacing */ --active-blue-color: rgb(0,61,175); /* @kind color */ --active-gray-color: rgb(123,123,123); /* @kind color */ --active-green-color: rgb(40,145,96); /* @kind color */ --active-navy-color: rgb(64,78,90); /* @kind color */ --active-orange-color: rgb(225,89,0); /* @kind color */ --active-overlay: rgba(0,0,0,0.06); /* @kind color */ --active-red-color: rgb(207,58,62); /* @kind color */ --active-sky-color: rgb(19,130,222); /* @kind color */ --active-violet-color: rgb(95,72,184); /* @kind color */ --active-yellow-color: rgb(240,207,0); /* @kind color */ --alertbanner-close-button-border-radius: 14; /* @kind radius */ --alertbanner-close-button-color: var(--icon-white-color); /* @kind color */ --alertbanner-close-button-focus-ring-color: var(--surface-50); /* @kind color */ --alertbanner-close-button-focus-ring-offset: var(--focus-ring-offset); --alertbanner-close-button-focus-ring-width: var(--focus-ring-width); --alertbanner-close-button-height: 24; /* @kind spacing */ --alertbanner-close-button-hover-background: rgba(246,247,249,0.1); /* @kind color */ --alertbanner-close-button-width: 24; /* @kind spacing */ --alertbanner-close-icon-size: 16; /* @kind spacing */ --alertbanner-content-gap: var(--spacing-gap-8-2); --alertbanner-content-padding-x: var(--spacing-padding-24); --alertbanner-content-padding-y: var(--spacing-padding-8); --alertbanner-contrast-background: var(--foreground-700); /* @kind color */ --alertbanner-contrast-color: var(--text-inverse-color); /* @kind color */ --alertbanner-danger-background: var(--red-700); /* @kind color */ --alertbanner-danger-color: var(--text-inverse-color); /* @kind color */ --alertbanner-font-size: var(--font-size-body); --alertbanner-font-weight: var(--font-weight-semibold); --alertbanner-icon-size: 18; /* @kind spacing */ --alertbanner-info-background: var(--blue-700); /* @kind color */ --alertbanner-info-color: var(--text-inverse-color); /* @kind color */ --alertbanner-marketing-background: var(--orange-700); /* @kind color */ --alertbanner-marketing-color: var(--text-inverse-color); /* @kind color */ --alertbanner-secondary-background: var(--surface-200); /* @kind color */ --alertbanner-secondary-close-button-focus-ring-color: var(--surface-600); /* @kind color */ --alertbanner-secondary-close-button-hover-background: var(--surface-300); /* @kind color */ --alertbanner-secondary-color: var(--text-primary-color); /* @kind color */ --alertbanner-success-background: var(--green-700); /* @kind color */ --alertbanner-success-color: var(--text-inverse-color); /* @kind color */ --alertbanner-warn-background: var(--yellow-900); /* @kind color */ --alertbanner-warn-color: var(--text-inverse-color); /* @kind color */ --amber-400: rgb(251,191,36); /* @kind color */ --amber-500: rgb(245,158,11); /* @kind color */ --amber-600: rgb(217,119,6); /* @kind color */ --amber-900: rgb(120,53,15); /* @kind color */ --anchor-gutter: 4; /* @kind spacing */ --app-card-background: var(--content-background); /* @kind color */ --app-font-size: var(--font-size-body); --app-lg-font-size: var(--font-size-heading-small); --app-lg-line-height: 24; /* @kind font */ --app-sm-font-size: var(--font-size-caption); --app-sm-line-height: 20; /* @kind font */ --autocomplete-chip-focus-color: var(--surface-800); /* @kind color */ --autocomplete-dropdown-active-background: var(--surface-300); /* @kind color */ --autocomplete-focus-ring-color: var(--form-field-focus-ring-color); /* @kind color */ --autocomplete-option-group-background: var(--list-option-group-background); /* @kind color */ --avatar-background: var(--content-border-color); /* @kind color */ --avatar-border-radius: var(--content-border-radius); --avatar-color: var(--content-color); /* @kind color */ --avatar-figma-circle-border-radius: 14; /* @kind radius */ --avatar-figma-circle-lg-border-radius: 24; /* @kind radius */ --avatar-figma-circle-xl-border-radius: 32; /* @kind radius */ --avatar-font-size: var(--font-size-body); --avatar-group-border-color: var(--content-background); /* @kind color */ --avatar-group-offset: -12; /* @kind spacing */ --avatar-height: 32; /* @kind spacing */ --avatar-icon-size: 14; /* @kind spacing */ --avatar-lg-font-size: var(--font-size-heading-small); --avatar-lg-group-offset: -14; /* @kind spacing */ --avatar-lg-height: 42; /* @kind spacing */ --avatar-lg-icon-size: 24; /* @kind spacing */ --avatar-lg-width: 42; /* @kind spacing */ --avatar-width: 32; /* @kind spacing */ --avatar-xl-font-size: var(--font-size-heading-medium); --avatar-xl-group-offset: -24; /* @kind spacing */ --avatar-xl-height: 56; /* @kind spacing */ --avatar-xl-icon-size: 32; /* @kind spacing */ --avatar-xl-width: 56; /* @kind spacing */ --background-background: var(--neutral-light-gray); /* @kind color */ --background-container-border: var(--neutral-mid-gray); /* @kind color */ --background-white: var(--neutral-white); /* @kind color */ --background: rgba(0,0,0,0); /* @kind color */ --badge-border-radius: var(--border-radius-md); --badge-contrast-background: var(--foreground-700); /* @kind color */ --badge-contrast-color: var(--text-inverse-color); /* @kind color */ --badge-danger-background: var(--red-700); /* @kind color */ --badge-danger-color: var(--text-inverse-color); /* @kind color */ --badge-default-border-radius: 10; /* @kind radius */ --badge-default-height: 20; /* @kind spacing */ --badge-default-min-width: 20; /* @kind spacing */ --badge-font-height: 11; /* @kind font */ --badge-font-size: var(--font-size-caption); --badge-font-weight: var(--font-weight-semibold); --badge-info-background: var(--blue-700); /* @kind color */ --badge-info-color: var(--text-inverse-color); /* @kind color */ --badge-lg-border-radius: 12; /* @kind radius */ --badge-lg-font-height: 18; /* @kind font */ --badge-lg-font-size: var(--font-size-body); --badge-lg-height: 24; /* @kind spacing */ --badge-lg-min-width: 24; /* @kind spacing */ --badge-primary-background: var(--primary-color); /* @kind color */ --badge-primary-color: var(--text-inverse-color); /* @kind color */ --badge-secondary-background: var(--surface-200); /* @kind color */ --badge-secondary-color: var(--text-primary-color); /* @kind color */ --badge-sm-border-radius: 8; /* @kind radius */ --badge-sm-font-height: 8; /* @kind font */ --badge-sm-font-size: 10; /* @kind font */ --badge-sm-height: 16; /* @kind spacing */ --badge-sm-min-width: 16; /* @kind spacing */ --badge-success-background: var(--green-700); /* @kind color */ --badge-success-color: var(--text-inverse-color); /* @kind color */ --badge-warn-background: var(--orange-700); /* @kind color */ --badge-warn-color: var(--text-inverse-color); /* @kind color */ --badge-xl-border-radius: 14; /* @kind radius */ --badge-xl-font-height: 18; /* @kind font */ --badge-xl-font-size: var(--font-size-body); --badge-xl-height: 28; /* @kind spacing */ --badge-xl-min-width: 28; /* @kind spacing */ --blue-100: rgb(246,250,255); /* @kind color */ --blue-200: rgb(235,243,254); /* @kind color */ --blue-300: rgb(220,235,255); /* @kind color */ --blue-400: rgb(203,224,255); /* @kind color */ --blue-500: rgb(182,211,255); /* @kind color */ --blue-50: rgb(252,253,254); /* @kind color */ --blue-600: rgb(125,168,241); /* @kind color */ --blue-700: rgb(0,82,204); /* @kind color */ --blue-800: rgb(0,65,186); /* @kind color */ --blue-900: rgb(32,95,202); /* @kind color */ --blue-950: rgb(20,47,93); /* @kind color */ --border-radius-lg: 12; /* @kind radius */ --border-radius-md: 8; /* @kind radius */ --border-radius-none: 0; /* @kind radius */ --border-radius-sm: 4; /* @kind radius */ --border-radius-xs: 2; /* @kind radius */ --breadcrumb-background: var(--content-background); /* @kind color */ --breadcrumb-gap: var(--spacing-gap-8-2); --breadcrumb-item-border-radius: var(--content-border-radius); --breadcrumb-item-color: var(--text-secondary-color); /* @kind color */ --breadcrumb-item-focus-ring-color: var(--focus-ring-color); /* @kind color */ --breadcrumb-item-focus-ring-offset: var(--focus-ring-offset); --breadcrumb-item-focus-ring-width: var(--focus-ring-width); --breadcrumb-item-gap: var(--navigation-item-gap); --breadcrumb-item-hover-color: var(--text-primary-color); /* @kind color */ --breadcrumb-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --breadcrumb-item-icon-hover-color: var(--navigation-item-icon-focus-color); /* @kind color */ --breadcrumb-padding-x: var(--spacing-padding-32); --breadcrumb-padding-y: var(--spacing-padding-12); --breadcrumb-separator-color: var(--navigation-item-icon-color); /* @kind color */ --button-border-radius: var(--form-field-border-radius); --button-contrast-active-background: var(--foreground-700); /* @kind color */ --button-contrast-active-border-color: var(--foreground-700); /* @kind color */ --button-contrast-active-color: var(--text-inverse-color); /* @kind color */ --button-contrast-background: var(--foreground-700); /* @kind color */ --button-contrast-border-color: var(--foreground-700); /* @kind color */ --button-contrast-color: var(--text-inverse-color); /* @kind color */ --button-contrast-focus-ring-color: var(--foreground-700); /* @kind color */ --button-contrast-hover-background: var(--foreground-800); /* @kind color */ --button-contrast-hover-border-color: var(--foreground-800); /* @kind color */ --button-contrast-hover-color: var(--text-inverse-color); /* @kind color */ --button-danger-active-background: var(--active-red-color); /* @kind color */ --button-danger-active-border-color: var(--active-red-color); /* @kind color */ --button-danger-active-color: var(--text-inverse-color); /* @kind color */ --button-danger-background: var(--red-700); /* @kind color */ --button-danger-border-color: var(--red-700); /* @kind color */ --button-danger-color: var(--text-inverse-color); /* @kind color */ --button-danger-focus-ring-color: var(--red-700); /* @kind color */ --button-danger-hover-background: var(--red-800); /* @kind color */ --button-danger-hover-border-color: var(--red-800); /* @kind color */ --button-danger-hover-color: var(--text-inverse-color); /* @kind color */ --button-destructive-active: var(--semantic-red-active); /* @kind color */ --button-destructive-default: var(--semantic-red-default); /* @kind color */ --button-destructive-disabled: var(--semantic-red-disabled); /* @kind color */ --button-destructive-hover: var(--semantic-red-hover); /* @kind color */ --button-focus-ring-offset: var(--focus-ring-offset); --button-focus-ring-width: var(--focus-ring-width); --button-gap-2: 7; /* @kind spacing */ --button-gap: var(--spacing-gap-4); --button-group-padding: var(--spacing-padding-8); --button-height: 32; /* @kind spacing */ --button-help-active-background: var(--active-violet-color); /* @kind color */ --button-help-active-border-color: var(--active-violet-color); /* @kind color */ --button-help-active-color: var(--text-inverse-color); /* @kind color */ --button-help-background: var(--violet-700); /* @kind color */ --button-help-border-color: var(--violet-700); /* @kind color */ --button-help-color: var(--text-inverse-color); /* @kind color */ --button-help-focus-ring-color: var(--violet-700); /* @kind color */ --button-help-hover-background: var(--violet-800); /* @kind color */ --button-help-hover-border-color: var(--violet-800); /* @kind color */ --button-help-hover-color: var(--text-inverse-color); /* @kind color */ --button-icon-only-height: 36; /* @kind spacing */ --button-icon-only-width: 36; /* @kind spacing */ --button-info-active-background: var(--active-blue-color); /* @kind color */ --button-info-active-border-color: var(--active-blue-color); /* @kind color */ --button-info-active-color: var(--text-inverse-color); /* @kind color */ --button-info-background: var(--blue-700); /* @kind color */ --button-info-border-color: var(--blue-700); /* @kind color */ --button-info-color: var(--text-inverse-color); /* @kind color */ --button-info-focus-ring-color: var(--blue-700); /* @kind color */ --button-info-hover-background: var(--blue-800); /* @kind color */ --button-info-hover-border-color: var(--blue-800); /* @kind color */ --button-info-hover-color: var(--text-inverse-color); /* @kind color */ --button-label-font-height: 18; /* @kind font */ --button-label-font-size: var(--font-size-body); --button-label-font-weight-2: 500; /* @kind font */ --button-label-font-weight: var(--font-weight-semibold); --button-lg-font-size: var(--font-size-body-large); --button-lg-icon-only-width: 42; /* @kind spacing */ --button-lg-padding-x: var(--spacing-padding-16); --button-lg-padding-y: var(--spacing-padding-12); --button-link-active-color: rgb(3,50,90); /* @kind color */ --button-link-color: var(--primary-900); /* @kind color */ --button-link-hover-color: var(--primary-950); /* @kind color */ --button-marketing-active-background: var(--active-orange-color); /* @kind color */ --button-marketing-active-border-color: var(--active-orange-color); /* @kind color */ --button-marketing-active-color: var(--text-inverse-color); /* @kind color */ --button-marketing-background: var(--orange-700); /* @kind color */ --button-marketing-border-color: var(--orange-700); /* @kind color */ --button-marketing-color: var(--text-inverse-color); /* @kind color */ --button-marketing-focus-ring-color: var(--orange-700); /* @kind color */ --button-marketing-hover-background: var(--orange-800); /* @kind color */ --button-marketing-hover-border-color: var(--orange-800); /* @kind color */ --button-marketing-hover-color: var(--text-inverse-color); /* @kind color */ --button-min-width: 120; /* @kind spacing */ --button-outlined-contrast-active-background: var(--foreground-700); /* @kind color */ --button-outlined-contrast-border-color: var(--foreground-700); /* @kind color */ --button-outlined-contrast-color: var(--foreground-700); /* @kind color */ --button-outlined-contrast-hover-background: var(--foreground-800); /* @kind color */ --button-outlined-danger-active-background: var(--red-700); /* @kind color */ --button-outlined-danger-border-color: var(--red-700); /* @kind color */ --button-outlined-danger-color: var(--red-700); /* @kind color */ --button-outlined-danger-hover-background: var(--red-800); /* @kind color */ --button-outlined-help-active-background: var(--violet-700); /* @kind color */ --button-outlined-help-border-color: var(--violet-700); /* @kind color */ --button-outlined-help-color: var(--violet-700); /* @kind color */ --button-outlined-help-hover-background: var(--violet-800); /* @kind color */ --button-outlined-info-active-background: var(--blue-700); /* @kind color */ --button-outlined-info-border-color: var(--blue-700); /* @kind color */ --button-outlined-info-color: var(--blue-700); /* @kind color */ --button-outlined-info-hover-background: var(--blue-800); /* @kind color */ --button-outlined-plain-active-background: var(--surface-100); /* @kind color */ --button-outlined-plain-border-color: var(--surface-200); /* @kind color */ --button-outlined-plain-color: var(--surface-700); /* @kind color */ --button-outlined-plain-hover-background: var(--surface-50); /* @kind color */ --button-outlined-primary-active-background: var(--primary-color); /* @kind color */ --button-outlined-primary-border-color: var(--primary-color); /* @kind color */ --button-outlined-primary-color: var(--primary-color); /* @kind color */ --button-outlined-primary-hover-background: var(--primary-hover-color); /* @kind color */ --button-outlined-secondary-active-background: var(--foreground-700); /* @kind color */ --button-outlined-secondary-border-color: var(--surface-600); /* @kind color */ --button-outlined-secondary-color: var(--foreground-950); /* @kind color */ --button-outlined-secondary-hover-background: var(--surface-700); /* @kind color */ --button-outlined-success-active-background: var(--green-700); /* @kind color */ --button-outlined-success-border-color: var(--green-700); /* @kind color */ --button-outlined-success-color: var(--green-700); /* @kind color */ --button-outlined-success-hover-background: var(--green-800); /* @kind color */ --button-outlined-warn-active-background: var(--orange-700); /* @kind color */ --button-outlined-warn-border-color: var(--orange-700); /* @kind color */ --button-outlined-warn-color: var(--orange-700); /* @kind color */ --button-outlined-warn-hover-background: var(--orange-800); /* @kind color */ --button-outlined-white-active-background: var(--white-0); /* @kind color */ --button-outlined-white-active-color: var(--text-primary-color); /* @kind color */ --button-outlined-white-border-color: var(--white-0); /* @kind color */ --button-outlined-white-color: var(--white-0); /* @kind color */ --button-outlined-white-hover-background: var(--white-0); /* @kind color */ --button-outlined-white-hover-color: var(--text-primary-color); /* @kind color */ --button-padding-x: var(--form-field-padding-x); --button-padding-y: var(--form-field-padding-y); --button-primary-active-background: var(--primary-active-color); /* @kind color */ --button-primary-active-border-color: var(--primary-active-color); /* @kind color */ --button-primary-active-color: var(--text-inverse-color); /* @kind color */ --button-primary-active: var(--semantic-green-active); /* @kind color */ --button-primary-background: var(--primary-color); /* @kind color */ --button-primary-border-color: var(--primary-color); /* @kind color */ --button-primary-color: var(--text-inverse-color); /* @kind color */ --button-primary-default: var(--semantic-green-default); /* @kind color */ --button-primary-disabled: var(--semantic-green-disabled); /* @kind color */ --button-primary-focus-ring-color: var(--primary-color); /* @kind color */ --button-primary-hover-background: var(--primary-hover-color); /* @kind color */ --button-primary-hover-border-color: var(--primary-hover-color); /* @kind color */ --button-primary-hover-color: var(--text-inverse-color); /* @kind color */ --button-primary-hover-primary-color: var(--primary-color); /* @kind color */ --button-primary-hover: var(--semantic-green-hover); /* @kind color */ --button-rounded-border-radius: 32; /* @kind radius */ --button-secondary-active-background: var(--surface-300); /* @kind color */ --button-secondary-active-border-color: var(--surface-300); /* @kind color */ --button-secondary-active-color: var(--surface-800); /* @kind color */ --button-secondary-background-2: var(--white-0); /* @kind color */ --button-secondary-background: var(--surface-100); /* @kind color */ --button-secondary-border-color: var(--surface-600); /* @kind color */ --button-secondary-color: var(--foreground-950); /* @kind color */ --button-secondary-default: var(--secondary-default); /* @kind color */ --button-secondary-disabled: var(--secondary-disabled); /* @kind color */ --button-secondary-focus-ring-color: var(--foreground-700); /* @kind color */ --button-secondary-hover-background: var(--surface-200); /* @kind color */ --button-secondary-hover-border-color: var(--surface-200); /* @kind color */ --button-secondary-hover-color: var(--surface-700); /* @kind color */ --button-secondary-hover: var(--secondary-hover); /* @kind color */ --button-secondary-icon-color: var(--icon-default-color); /* @kind color */ --button-sm-font-size: var(--font-size-caption); --button-sm-icon-only-width: 32; /* @kind spacing */ --button-sm-padding-x: var(--spacing-padding-8); --button-sm-padding-y: var(--spacing-padding-4); --button-success-active-background: var(--active-green-color); /* @kind color */ --button-success-active-border-color: var(--active-green-color); /* @kind color */ --button-success-active-color: var(--text-inverse-color); /* @kind color */ --button-success-background: var(--green-700); /* @kind color */ --button-success-border-color: var(--green-700); /* @kind color */ --button-success-color: var(--text-inverse-color); /* @kind color */ --button-success-focus-ring-color: var(--green-700); /* @kind color */ --button-success-hover-background: var(--green-800); /* @kind color */ --button-success-hover-border-color: var(--green-800); /* @kind color */ --button-success-hover-color: var(--text-inverse-color); /* @kind color */ --button-text-contrast-active-background: var(--surface-100); /* @kind color */ --button-text-contrast-color: var(--surface-950); /* @kind color */ --button-text-contrast-hover-background: var(--surface-50); /* @kind color */ --button-text-danger-active-background: var(--red-300); /* @kind color */ --button-text-danger-color: var(--red-900); /* @kind color */ --button-text-danger-hover-background: var(--red-200); /* @kind color */ --button-text-help-active-background: var(--violet-300); /* @kind color */ --button-text-help-color: var(--violet-900); /* @kind color */ --button-text-help-hover-background: var(--violet-200); /* @kind color */ --button-text-info-active-background: var(--blue-300); /* @kind color */ --button-text-info-color: var(--blue-900); /* @kind color */ --button-text-info-hover-background: var(--blue-200); /* @kind color */ --button-text-marketing-active-background: var(--orange-300); /* @kind color */ --button-text-marketing-color: var(--orange-900); /* @kind color */ --button-text-marketing-hover-background: var(--orange-200); /* @kind color */ --button-text-plain-active-background: var(--foreground-800); /* @kind color */ --button-text-plain-color: var(--foreground-700); /* @kind color */ --button-text-plain-hover-background: var(--foreground-800); /* @kind color */ --button-text-primary-active-background: var(--primary-300); /* @kind color */ --button-text-primary-color: var(--primary-900); /* @kind color */ --button-text-primary-hover-background: var(--primary-200); /* @kind color */ --button-text-secondary-active-background: var(--surface-300); /* @kind color */ --button-text-secondary-color: var(--foreground-950); /* @kind color */ --button-text-secondary-hover-background: var(--surface-200); /* @kind color */ --button-text-success-active-background: var(--green-300); /* @kind color */ --button-text-success-color: var(--green-900); /* @kind color */ --button-text-success-hover-background: var(--green-200); /* @kind color */ --card-background: var(--content-background); /* @kind color */ --card-body-gap: var(--spacing-gap-16-2); --card-body-padding: var(--spacing-padding-24); --card-border-radius: var(--border-radius-lg); --card-button-gap: var(--spacing-gap-8-2); --card-caption-gap: var(--spacing-gap-8-2); --card-color: var(--content-color); /* @kind color */ --card-container-border: var(--content-border-color); /* @kind color */ --card-content-gap: var(--spacing-gap-8-2); --card-content-padding-y: 8; /* @kind spacing */ --card-featurelist-gap: var(--spacing-gap-12); --card-header-font-size: var(--font-size-heading-large); --card-header-font-weight: var(--font-weight-semibold); --card-header-gap: var(--spacing-gap-4); --card-header-image-padding: 8; /* @kind spacing */ --card-hover-background-color: var(--content-hover-background); /* @kind color */ --card-subtitle-color: var(--text-secondary-color); /* @kind color */ --cardbutton-action-gap: var(--spacing-gap-8-2); --cardbutton-background-selected: var(--primary-50); /* @kind color */ --cardbutton-background: var(--card-background); /* @kind color */ --cardbutton-body-gap: var(--spacing-gap-8-2); --cardbutton-border-radius: var(--card-border-radius); --cardbutton-border: var(--card-container-border); /* @kind color */ --cardbutton-color: var(--card-color); /* @kind color */ --cardbutton-disabled-background: var(--surface-100); /* @kind color */ --cardbutton-filled-hover-background: var(--card-hover-background-color); /* @kind color */ --cardbutton-focus-border-color: var(--select-focus-border-color); /* @kind color */ --cardbutton-header-gap: var(--spacing-gap-8-2); --cardbutton-hover-border-color: var(--select-hover-border-color); /* @kind color */ --cardbutton-icon-gap: var(--spacing-gap-8-2); --cardbutton-padding: var(--spacing-padding-16); --cardbutton-subtitle-color: var(--card-subtitle-color); /* @kind color */ --cardbutton-title-font-size: var(--font-size-body-large); --carousel-content-gap: var(--spacing-gap-4); --carousel-focus-ring-color: var(--focus-ring-color); /* @kind color */ --carousel-focus-ring-offset: var(--focus-ring-offset); --carousel-focus-ring-width: var(--focus-ring-width); --carousel-font-size: var(--font-size-body); --carousel-gap: var(--spacing-gap-8-2); --carousel-hover-fill-color: var(--surface-50); /* @kind color */ --carousel-indicator-active-background: var(--primary-color); /* @kind color */ --carousel-indicator-background: var(--surface-200); /* @kind color */ --carousel-indicator-border-radius: var(--content-border-radius); --carousel-indicator-height: 8; /* @kind spacing */ --carousel-indicator-hover-background: var(--surface-300); /* @kind color */ --carousel-indicator-list-gap: var(--spacing-gap-8-2); --carousel-indicator-list-padding: var(--spacing-padding-16); --carousel-indicator-width: 32; /* @kind spacing */ --carousel-subtitle-font-weight: var(--font-weight-regular); --carousel-title-font-weight: var(--font-weight-semibold); --cascadeselect-background: var(--form-field-background); /* @kind color */ --cascadeselect-border-color: var(--form-field-border-color); /* @kind color */ --cascadeselect-border-radius: var(--form-field-border-radius); --cascadeselect-clear-icon-color: var(--form-field-icon-color); /* @kind color */ --cascadeselect-color: var(--form-field-option-color); /* @kind color */ --cascadeselect-disabled-background: var(--form-field-disabled-background); /* @kind color */ --cascadeselect-disabled-color: var(--form-field-disabled-color); /* @kind color */ --cascadeselect-dropdown-color: var(--form-field-icon-color); /* @kind color */ --cascadeselect-dropdown-width: 36; /* @kind spacing */ --cascadeselect-filled-background: var(--form-field-filled-background); /* @kind color */ --cascadeselect-filled-focus-background: var(--form-field-filled-focus-background); /* @kind color */ --cascadeselect-filled-hover-background: var(--form-field-filled-hover-background); /* @kind color */ --cascadeselect-focus-border-color: var(--form-field-focus-border-color); /* @kind color */ --cascadeselect-focus-ring-color: var(--form-field-focus-ring-color); /* @kind color */ --cascadeselect-focus-ring-offset: var(--form-field-focus-ring-offset); --cascadeselect-focus-ring-width: var(--form-field-focus-ring-width); --cascadeselect-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --cascadeselect-input-gap: var(--form-field-gap); --cascadeselect-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --cascadeselect-invalid-placeholder-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --cascadeselect-lg-font-size: var(--form-field-lg-font-size); --cascadeselect-lg-padding-x: var(--form-field-lg-padding-x); --cascadeselect-lg-padding-y: var(--form-field-lg-padding-y); --cascadeselect-list-gap: var(--list-gap); --cascadeselect-list-mobile-indent: 14; /* @kind spacing */ --cascadeselect-list-x-padding: var(--list-padding-x); --cascadeselect-list-y-padding: var(--list-padding-y); --cascadeselect-option-border-radius: var(--list-option-border-radius); --cascadeselect-option-color: var(--list-option-color); /* @kind color */ --cascadeselect-option-focus-background: var(--list-option-focus-background); /* @kind color */ --cascadeselect-option-focus-color: var(--list-option-focus-color); /* @kind color */ --cascadeselect-option-icon-color: var(--list-option-icon-color); /* @kind color */ --cascadeselect-option-icon-focus-color: var(--list-option-icon-focus-color); /* @kind color */ --cascadeselect-option-icon-size: 14; /* @kind spacing */ --cascadeselect-option-selected-background: var(--list-option-selected-background); /* @kind color */ --cascadeselect-option-selected-color: var(--list-option-selected-color); /* @kind color */ --cascadeselect-option-selected-focus-background: var(--list-option-selected-focus-background); /* @kind color */ --cascadeselect-option-selected-focus-color: var(--list-option-selected-focus-color); /* @kind color */ --cascadeselect-overlay-background: var(--overlay-select-background); /* @kind color */ --cascadeselect-overlay-border-color: var(--overlay-select-border-color); /* @kind color */ --cascadeselect-overlay-border-radius: var(--overlay-select-border-radius); --cascadeselect-overlay-color: var(--overlay-select-color); /* @kind color */ --cascadeselect-padding-x: var(--form-field-padding-x); --cascadeselect-padding-y: var(--form-field-padding-y); --cascadeselect-placeholder-color: var(--form-field-placeholder-color); /* @kind color */ --cascadeselect-sm-font-size: var(--form-field-sm-font-size); --cascadeselect-sm-padding-x: var(--form-field-sm-padding-x); --cascadeselect-sm-padding-y: var(--form-field-sm-padding-y); --checkbox-background: var(--form-field-background); /* @kind color */ --checkbox-border-color: var(--form-field-border-color); /* @kind color */ --checkbox-border-radius: var(--border-radius-sm); --checkbox-checked-background: var(--primary-color); /* @kind color */ --checkbox-checked-border-color: var(--primary-color); /* @kind color */ --checkbox-checked-disabled-border-color: var(--form-field-border-color); /* @kind color */ --checkbox-checked-focus-border-color: var(--primary-color); /* @kind color */ --checkbox-checked-hover-background: var(--primary-hover-color); /* @kind color */ --checkbox-checked-hover-border-color: var(--primary-hover-color); /* @kind color */ --checkbox-color: var(--form-field-option-color); /* @kind color */ --checkbox-disabled-background: var(--form-field-disabled-background); /* @kind color */ --checkbox-filled-background: var(--form-field-filled-background); /* @kind color */ --checkbox-focus-border-color: var(--form-field-border-color); /* @kind color */ --checkbox-focus-ring-color: var(--focus-ring-color); /* @kind color */ --checkbox-focus-ring-offset: var(--focus-ring-offset); --checkbox-focus-ring-width: var(--focus-ring-width); --checkbox-gap: var(--spacing-gap-8-2); --checkbox-group-options-gap-x: var(--spacing-gap-12); --checkbox-group-options-gap-y: var(--spacing-gap-16-2); --checkbox-height: 20; /* @kind spacing */ --checkbox-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --checkbox-icon-checked-color: var(--icon-white-color); /* @kind color */ --checkbox-icon-checked-hover-color: var(--icon-white-color); /* @kind color */ --checkbox-icon-color: var(--form-field-icon-color); /* @kind color */ --checkbox-icon-disabled-color: var(--form-field-disabled-color); /* @kind color */ --checkbox-icon-lg-size: 16; /* @kind spacing */ --checkbox-icon-size: 14; /* @kind spacing */ --checkbox-icon-sm-size: 12; /* @kind spacing */ --checkbox-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --checkbox-lg-height: 24; /* @kind spacing */ --checkbox-lg-width: 24; /* @kind spacing */ --checkbox-sm-height: 14; /* @kind spacing */ --checkbox-sm-width: 14; /* @kind spacing */ --checkbox-width: 20; /* @kind spacing */ --chip-background: var(--surface-200); /* @kind color */ --chip-border-radius: 16; /* @kind radius */ --chip-color: var(--text-primary-color); /* @kind color */ --chip-figma-image-padding-left: 4; /* @kind spacing */ --chip-figma-image-padding-y: 4; /* @kind spacing */ --chip-font-height: 18; /* @kind font */ --chip-font-size-2: var(--font-size-body); --chip-font-size: var(--font-size-body); --chip-font-weight-2: var(--font-weight-regular); --chip-font-weight: var(--font-weight-regular); --chip-gap: var(--spacing-gap-8-2); --chip-icon-color: var(--icon-default-color); /* @kind color */ --chip-icon-focus-ring-color: var(--focus-ring-color); /* @kind color */ --chip-icon-focus-ring-offset: var(--focus-ring-offset); --chip-icon-focus-ring-width: var(--focus-ring-width); --chip-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --chip-icon-size: 14; /* @kind spacing */ --chip-image-height: 32; /* @kind spacing */ --chip-image-width: 32; /* @kind spacing */ --chip-padding-x: var(--spacing-padding-12); --chip-padding-y: var(--spacing-padding-8); --chip-remove-icon-color: var(--icon-default-color); /* @kind color */ --chip-remove-icon-size: 14; /* @kind spacing */ --chip-sm-padding-x: var(--spacing-padding-12); --chip-sm-padding-y: var(--spacing-padding-4); --color-sky-500: rgb(16,158,239); /* @kind color */ --color-text-link-default: var(--color-sky-500); /* @kind color */ --color: var(--content-color); /* @kind color */ --colorpicker-panel-background: var(--surface-800); /* @kind color */ --colorpicker-panel-border-color: var(--surface-500); /* @kind color */ --colorpicker-panel-border-radius: var(--overlay-popover-border-radius); --colorpicker-preview-border-radius: var(--form-field-border-radius); --colorpicker-preview-focus-ring-color: var(--focus-ring-color); /* @kind color */ --colorpicker-preview-focus-ring-offset: var(--focus-ring-offset); --colorpicker-preview-focus-ring-width: var(--focus-ring-width); --colorpicker-preview-handle-color: var(--white-0); /* @kind color */ --colorpicker-preview-height: 24; /* @kind spacing */ --colorpicker-preview-width: 24; /* @kind spacing */ --confirmdialog-content-gap: var(--spacing-gap-16-2); --confirmdialog-icon-color: var(--overlay-modal-color); /* @kind color */ --confirmdialog-icon-size: 32; /* @kind spacing */ --confirmpopup-arrow-offset: 20; /* @kind spacing */ --confirmpopup-background: var(--overlay-popover-background); /* @kind color */ --confirmpopup-border-color: var(--overlay-popover-border-color); /* @kind color */ --confirmpopup-border-radius: var(--overlay-popover-border-radius); --confirmpopup-color: var(--overlay-popover-color); /* @kind color */ --confirmpopup-content-gap: var(--spacing-gap-16-2); --confirmpopup-content-padding: var(--overlay-popover-padding); --confirmpopup-footer-gap: var(--spacing-gap-8-2); --confirmpopup-gutter: 10; /* @kind spacing */ --confirmpopup-icon-color: var(--overlay-popover-color); /* @kind color */ --confirmpopup-icon-size: 24; /* @kind spacing */ --content-background: var(--white-0); /* @kind color */ --content-border-color: var(--surface-500); /* @kind color */ --content-border-radius: var(--border-radius-md); --content-color: var(--text-primary-color); /* @kind color */ --content-hover-background: var(--surface-100); /* @kind color */ --content-hover-color-2: var(--text-primary-color); /* @kind color */ --content-hover-color: var(--text-primary-hover-color); /* @kind color */ --contextmenu-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --datatable-body-cell-background: var(--content-background); /* @kind color */ --datatable-body-cell-border-color-2: var(--datatable-border-color); /* @kind color */ --datatable-body-cell-border-color: var(--datatable-border-color); /* @kind color */ --datatable-body-cell-color: var(--content-color); /* @kind color */ --datatable-body-cell-hover-background: var(--content-hover-background); /* @kind color */ --datatable-body-cell-hover-color: var(--content-hover-color-2); /* @kind color */ --datatable-border-color: var(--content-border-color); /* @kind color */ --datatable-border-radius: var(--border-radius-sm); --datatable-column-footer-font-weight: var(--font-weight-semibold); --datatable-column-resizer-width: 8; /* @kind spacing */ --datatable-column-title-font-weight: var(--font-weight-semibold); --datatable-content-gap: var(--spacing-gap-12); --datatable-drop-point-color: var(--primary-color); /* @kind color */ --datatable-filter-constraint-border-radius: var(--list-option-border-radius); --datatable-filter-constraint-color: var(--list-option-color); /* @kind color */ --datatable-filter-constraint-focus-background: var(--list-option-focus-background); /* @kind color */ --datatable-filter-constraint-focus-color: var(--list-option-focus-color); /* @kind color */ --datatable-filter-constraint-list-gap: var(--list-gap); --datatable-filter-constraint-selected-background: var(--list-option-selected-background); /* @kind color */ --datatable-filter-constraint-selected-color: var(--list-option-selected-color); /* @kind color */ --datatable-filter-constraint-selected-focus-background: var(--list-option-selected-focus-background); /* @kind color */ --datatable-filter-constraint-selected-focus-color: var(--list-option-selected-focus-color); /* @kind color */ --datatable-filter-constraint-separator-border-color: var(--content-border-color); /* @kind color */ --datatable-filter-inline-gap: var(--spacing-gap-8-2); --datatable-filter-overlay-popover-background: var(--overlay-popover-background); /* @kind color */ --datatable-filter-overlay-popover-border-color: var(--overlay-popover-border-color); /* @kind color */ --datatable-filter-overlay-popover-border-radius: var(--overlay-popover-border-radius); --datatable-filter-overlay-popover-color: var(--overlay-popover-color); /* @kind color */ --datatable-filter-overlay-popover-gap: var(--spacing-gap-8-2); --datatable-filter-overlay-popover-padding: var(--overlay-popover-padding); --datatable-filter-overlay-select-background: var(--overlay-select-background); /* @kind color */ --datatable-filter-overlay-select-border-color: var(--overlay-select-border-color); /* @kind color */ --datatable-filter-overlay-select-border-radius: var(--overlay-select-border-radius); --datatable-filter-overlay-select-color: var(--overlay-select-color); /* @kind color */ --datatable-filter-rule-border-color: var(--content-border-color); /* @kind color */ --datatable-footer-background: var(--content-background); /* @kind color */ --datatable-footer-border-color: var(--datatable-border-color); /* @kind color */ --datatable-footer-border-width: 1; /* @kind spacing */ --datatable-footer-cell-background: var(--content-background); /* @kind color */ --datatable-footer-cell-border-color: var(--datatable-border-color); /* @kind color */ --datatable-footer-cell-color: var(--content-color); /* @kind color */ --datatable-footer-color: var(--content-color); /* @kind color */ --datatable-header-background: var(--content-background); /* @kind color */ --datatable-header-border-color: var(--datatable-border-color); /* @kind color */ --datatable-header-border-width: 1; /* @kind spacing */ --datatable-header-cell-background: var(--surface-50); /* @kind color */ --datatable-header-cell-border-color: var(--datatable-border-color); /* @kind color */ --datatable-header-cell-color: var(--content-color); /* @kind color */ --datatable-header-cell-focus-ring-color: var(--focus-ring-color); /* @kind color */ --datatable-header-cell-focus-ring-offset: -1; /* @kind spacing */ --datatable-header-cell-focus-ring-width: var(--focus-ring-width); --datatable-header-cell-gap: var(--spacing-gap-8-2); --datatable-header-cell-hover-background: var(--surface-100); /* @kind color */ --datatable-header-cell-hover-color: var(--content-hover-color-2); /* @kind color */ --datatable-header-cell-icon-color: var(--icon-default-color); /* @kind color */ --datatable-header-cell-selected-background: var(--surface-50); /* @kind color */ --datatable-header-cell-selected-color: var(--content-color); /* @kind color */ --datatable-header-color: var(--content-color); /* @kind color */ --datatable-loading-icon-size: 32; /* @kind spacing */ --datatable-paginator-bottom-border-color: var(--datatable-border-color); /* @kind color */ --datatable-paginator-bottom-border-width: 1; /* @kind spacing */ --datatable-paginator-top-border-color: var(--datatable-border-color); /* @kind color */ --datatable-paginator-top-border-width: 1; /* @kind spacing */ --datatable-resize-indicator-color: var(--primary-color); /* @kind color */ --datatable-resize-indicator-width: 1; /* @kind spacing */ --datatable-row-background: var(--content-background); /* @kind color */ --datatable-row-color: var(--content-color); /* @kind color */ --datatable-row-focus-ring-color: var(--focus-ring-color); /* @kind color */ --datatable-row-focus-ring-offset: -1; /* @kind spacing */ --datatable-row-focus-ring-width: var(--focus-ring-width); --datatable-row-hover-background: var(--content-hover-background); /* @kind color */ --datatable-row-hover-color: var(--content-hover-color-2); /* @kind color */ --datatable-row-selected-background: var(--highlight-background); /* @kind color */ --datatable-row-selected-color: var(--highlight-color); /* @kind color */ --datatable-row-striped-background: var(--surface-50); /* @kind color */ --datatable-row-toggle-button-border-radius: 10; /* @kind radius */ --datatable-row-toggle-button-color: var(--text-secondary-color); /* @kind color */ --datatable-row-toggle-button-focus-ring-color: var(--focus-ring-color); /* @kind color */ --datatable-row-toggle-button-focus-ring-offset: var(--focus-ring-offset); --datatable-row-toggle-button-focus-ring-width: var(--focus-ring-width); --datatable-row-toggle-button-hover-background: var(--content-hover-background); /* @kind color */ --datatable-row-toggle-button-hover-color: var(--text-primary-color); /* @kind color */ --datatable-row-toggle-button-selected-hover-background: var(--content-background); /* @kind color */ --datatable-row-toggle-button-selected-hover-color: var(--primary-color); /* @kind color */ --datatable-row-toggle-button-size: 20; /* @kind spacing */ --datatable-sort-icon-color: var(--icon-default-color); /* @kind color */ --datatable-sort-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --datatable-sort-icon-size: 14; /* @kind spacing */ --dataview-border-color: var(--content-border-color); /* @kind color */ --dataview-border-radius: 0; /* @kind radius */ --dataview-border-width: 0; /* @kind spacing */ --dataview-content-background: var(--content-background); /* @kind color */ --dataview-content-border-color: var(--content-border-color); /* @kind color */ --dataview-content-border-radius: 0; /* @kind radius */ --dataview-content-border-width: 0; /* @kind spacing */ --dataview-content-color: var(--content-color); /* @kind color */ --dataview-content-padding: var(--spacing-padding-0); --dataview-footer-background: var(--content-background); /* @kind color */ --dataview-footer-border-color: var(--content-border-color); /* @kind color */ --dataview-footer-border-radius: 0; /* @kind radius */ --dataview-footer-border-width: 1; /* @kind spacing */ --dataview-footer-color: var(--content-color); /* @kind color */ --dataview-header-background: var(--content-background); /* @kind color */ --dataview-header-border-color: var(--content-border-color); /* @kind color */ --dataview-header-border-radius: 0; /* @kind radius */ --dataview-header-border-width: 1; /* @kind spacing */ --dataview-header-color: var(--content-color); /* @kind color */ --dataview-padding: var(--spacing-padding-0); --dataview-paginator-bottom-border-color: var(--content-border-color); /* @kind color */ --dataview-paginator-bottom-border-width: 1; /* @kind spacing */ --dataview-paginator-top-border-color: var(--content-border-color); /* @kind color */ --dataview-paginator-top-border-width: 1; /* @kind spacing */ --datepicker-buttonbar-border-color: var(--content-border-color); /* @kind color */ --datepicker-date-border-radius: 16; /* @kind radius */ --datepicker-date-color: var(--content-color); /* @kind color */ --datepicker-date-focus-ring-color: var(--focus-ring-color); /* @kind color */ --datepicker-date-focus-ring-offset: var(--focus-ring-offset); --datepicker-date-focus-ring-width: var(--focus-ring-width); --datepicker-date-height: 32; /* @kind spacing */ --datepicker-date-hover-background: var(--content-hover-background); /* @kind color */ --datepicker-date-hover-color: var(--content-hover-color-2); /* @kind color */ --datepicker-date-padding: var(--spacing-padding-4); --datepicker-date-range-selected-background: var(--highlight-background); /* @kind color */ --datepicker-date-range-selected-color: var(--highlight-color); /* @kind color */ --datepicker-date-selected-background: var(--primary-color); /* @kind color */ --datepicker-date-selected-color: var(--primary-contrast-color); /* @kind color */ --datepicker-date-width: 32; /* @kind spacing */ --datepicker-dropdown-active-background: var(--surface-300); /* @kind color */ --datepicker-dropdown-active-border-color: var(--form-field-border-color); /* @kind color */ --datepicker-dropdown-active-color: var(--surface-800); /* @kind color */ --datepicker-dropdown-background: var(--surface-100); /* @kind color */ --datepicker-dropdown-border-color: var(--form-field-border-color); /* @kind color */ --datepicker-dropdown-border-radius: var(--form-field-border-radius); --datepicker-dropdown-color: var(--surface-600); /* @kind color */ --datepicker-dropdown-focus-ring-color: var(--focus-ring-color); /* @kind color */ --datepicker-dropdown-focus-ring-offset: var(--focus-ring-offset); --datepicker-dropdown-focus-ring-width: var(--focus-ring-width); --datepicker-dropdown-hover-background: var(--surface-200); /* @kind color */ --datepicker-dropdown-hover-border-color: var(--form-field-border-color); /* @kind color */ --datepicker-dropdown-hover-color: var(--surface-700); /* @kind color */ --datepicker-dropdown-lg-width: 48; /* @kind spacing */ --datepicker-dropdown-sm-width: 32; /* @kind spacing */ --datepicker-dropdown-width: 40; /* @kind spacing */ --datepicker-group-border-color: var(--content-border-color); /* @kind color */ --datepicker-group-gap: var(--overlay-popover-padding); --datepicker-header-background: var(--content-background); /* @kind color */ --datepicker-header-border-color: var(--content-border-color); /* @kind color */ --datepicker-header-color: var(--content-color); /* @kind color */ --datepicker-input-icon-color: var(--form-field-icon-color); /* @kind color */ --datepicker-month-border-radius: var(--content-border-radius); --datepicker-month-padding: var(--spacing-padding-8); --datepicker-panel-background: var(--content-background); /* @kind color */ --datepicker-panel-border-color: var(--content-border-color); /* @kind color */ --datepicker-panel-border-radius: var(--content-border-radius); --datepicker-panel-color: var(--content-color); /* @kind color */ --datepicker-panel-padding: var(--overlay-popover-padding); --datepicker-select-month-border-radius: var(--content-border-radius); --datepicker-select-month-color: var(--content-color); /* @kind color */ --datepicker-select-month-hover-background: var(--content-hover-background); /* @kind color */ --datepicker-select-month-hover-color: var(--content-hover-color-2); /* @kind color */ --datepicker-select-year-border-radius: var(--content-border-radius); --datepicker-select-year-color: var(--content-color); /* @kind color */ --datepicker-select-year-hover-background: var(--content-hover-background); /* @kind color */ --datepicker-select-year-hover-color: var(--content-hover-color-2); /* @kind color */ --datepicker-time-picker-border-color: var(--content-border-color); /* @kind color */ --datepicker-time-picker-button-gap: var(--spacing-gap-4); --datepicker-time-picker-gap: var(--spacing-gap-8-2); --datepicker-title-font-weight: var(--font-weight-semibold); --datepicker-title-gap: var(--spacing-gap-8-2); --datepicker-today-background: var(--surface-200); /* @kind color */ --datepicker-today-color: var(--surface-900); /* @kind color */ --datepicker-week-day-color: var(--content-color); /* @kind color */ --datepicker-week-day-font-weight: var(--font-weight-semibold); --datepicker-week-day-padding: var(--spacing-padding-4); --datepicker-year-border-radius: var(--content-border-radius); --datepicker-year-padding: var(--spacing-padding-8); --dialog-background: var(--overlay-modal-background); /* @kind color */ --dialog-border-color: var(--overlay-modal-border-color); /* @kind color */ --dialog-border-radius: var(--overlay-modal-border-radius); --dialog-color: var(--overlay-modal-color); /* @kind color */ --dialog-dialog-mask-background: var(--mask-background); /* @kind color */ --dialog-footer-gap: var(--spacing-gap-8-2); --dialog-gap: var(--spacing-gap-24); --dialog-padding: var(--overlay-modal-padding); --dialog-title-font-size: var(--font-size-heading-large); --dialog-title-font-weight: var(--font-weight-semibold); --disabled-opacity-2: 60; /* @kind other */ --disabled-opacity: 60; /* @kind other */ --divider-border-color: var(--content-border-color); /* @kind color */ --divider-content-background: var(--content-background); /* @kind color */ --divider-content-color: var(--text-primary-color); /* @kind color */ --divider-content-gap: var(--spacing-gap-8-2); --divider-font-size-2: 14; /* @kind font */ --divider-font-size: 14; /* @kind font */ --divider-font-weight-2: 700; /* @kind font */ --divider-font-weight: 700; /* @kind font */ --divider-horizontal-content-padding: var(--spacing-padding-8); --divider-horizontal-padding: var(--spacing-padding-8); --divider-vertical-content-padding: var(--spacing-padding-8); --divider-vertical-padding: var(--spacing-padding-8); --drawer-background: var(--overlay-modal-background); /* @kind color */ --drawer-border-color: var(--overlay-modal-border-color); /* @kind color */ --drawer-border-radius: var(--overlay-modal-border-radius); --drawer-button-gap: var(--spacing-gap-8-2); --drawer-color: var(--overlay-modal-color); /* @kind color */ --drawer-content-gap: var(--spacing-gap-24); --drawer-content-padding: var(--spacing-padding-24); --drawer-footer-gap: var(--spacing-gap-8-2); --drawer-footer-padding: var(--overlay-modal-padding); --drawer-gap: var(--spacing-gap-24); --drawer-header-padding: var(--overlay-modal-padding); --drawer-mask-background: var(--mask-background); /* @kind color */ --drawer-title-font-size: var(--font-size-heading-small); --drawer-title-font-weight: var(--font-weight-semibold); --editor-toolbar-background: var(--content-background); /* @kind color */ --fieldmapping-content-gap: var(--spacing-gap-8-2); --fieldmapping-gap: var(--spacing-gap-16-2); --fieldmapping-icon-color: var(--icon-default-color); /* @kind color */ --fieldmapping-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --fieldmapping-icon-size: 14; /* @kind spacing */ --fieldmapping-input-gap: var(--spacing-gap-4); --fieldmapping-input-padding-x: var(--spacing-padding-12); --fieldmapping-input-padding-y: var(--spacing-padding-8); --fileupload-background: var(--content-background); /* @kind color */ --fileupload-basic-gap: var(--spacing-gap-8-2); --fileupload-border-color: var(--content-border-color); /* @kind color */ --fileupload-border-radius: var(--content-border-radius); --fileupload-color: var(--content-color); /* @kind color */ --fileupload-content-gap: var(--spacing-gap-16-2); --fileupload-content-highlight-border-color: var(--primary-color); /* @kind color */ --fileupload-file-border-color: var(--content-border-color); /* @kind color */ --fileupload-file-gap: var(--spacing-gap-16-2); --fileupload-file-info-gap: var(--spacing-gap-8-2); --fileupload-file-list-gap: var(--spacing-gap-8-2); --fileupload-file-padding: var(--spacing-padding-16); --fileupload-header-background: rgba(0,0,0,0); /* @kind color */ --fileupload-header-border-color: rgba(0,0,0,0); /* @kind color */ --fileupload-header-border-radius: 0; /* @kind radius */ --fileupload-header-border-width: 0; /* @kind spacing */ --fileupload-header-color: var(--text-primary-color); /* @kind color */ --fileupload-header-gap: var(--spacing-gap-8-2); --fileupload-header-padding: var(--spacing-padding-16); --fileupload-progressbar-height: 4; /* @kind spacing */ --floatlabel-active-font-size: var(--font-size-caption); --floatlabel-active-font-weight: var(--font-weight-regular); --floatlabel-color: var(--form-field-float-label-color); /* @kind color */ --floatlabel-focus-color: var(--form-field-float-label-focus-color); /* @kind color */ --floatlabel-in-active-top: 8; /* @kind other */ --floatlabel-in-input-padding-bottom: 8; /* @kind spacing */ --floatlabel-in-input-padding-top: 24; /* @kind spacing */ --floatlabel-invalid-color: var(--form-field-float-label-invalid-color); /* @kind color */ --floatlabel-on-border-radius: 2; /* @kind radius */ --floatlabel-position-x: var(--form-field-padding-x); --flowstep-background: var(--card-background); /* @kind color */ --flowstep-border-radius: 12; /* @kind radius */ --flowstep-button-background: var(--button-primary-background); /* @kind color */ --flowstep-button-hover-background: var(--button-primary-hover-background); /* @kind color */ --flowstep-connector-button-border-radius: 16; /* @kind radius */ --flowstep-connector-color: var(--timeline-event-connector-color); /* @kind color */ --flowstep-container-border: var(--card-container-border); /* @kind color */ --flowstep-gap: var(--spacing-gap-16-2); --flowstep-hover-background: var(--primary-50); /* @kind color */ --flowstep-icon-error-color: var(--icon-destructive-color); /* @kind color */ --flowstep-icon-error-hover-color: var(--icon-destructive-hover-color); /* @kind color */ --flowstep-icon-gap: var(--spacing-gap-8-2); --flowstep-number-gap: var(--spacing-gap-8-2); --flowstep-padding-x: var(--spacing-padding-24); --flowstep-padding-y: var(--spacing-padding-24); --flowstep-step-content-gap: var(--spacing-gap-4); --flowstep-step-hover: var(--chip-icon-focus-ring-color); /* @kind color */ --flowstep-step-padding-x: var(--spacing-padding-24); --flowstep-step-padding-y: var(--spacing-padding-24); --flowstep-subtitle-color: var(--card-subtitle-color); /* @kind color */ --focus-ring-color: var(--primary-color); /* @kind color */ --focus-ring-offset: 2; /* @kind spacing */ --focus-ring-width: 1; /* @kind spacing */ --font-size-body-large: 16; /* @kind font */ --font-size-body: 14; /* @kind font */ --font-size-caption: 12; /* @kind font */ --font-size-display: 48; /* @kind font */ --font-size-heading-large: 30; /* @kind font */ --font-size-heading-medium: 24; /* @kind font */ --font-size-heading-small: 20; /* @kind font */ --font-weight-bold: 700; /* @kind font */ --font-weight-regular: 400; /* @kind font */ --font-weight-semibold: 600; /* @kind font */ --foreground-100: var(--navy-100); /* @kind color */ --foreground-200: var(--navy-200); /* @kind color */ --foreground-300: var(--navy-300); /* @kind color */ --foreground-400: var(--navy-400); /* @kind color */ --foreground-500: var(--navy-500); /* @kind color */ --foreground-50: var(--navy-50); /* @kind color */ --foreground-600: var(--navy-600); /* @kind color */ --foreground-700: var(--navy-700); /* @kind color */ --foreground-800: var(--navy-800); /* @kind color */ --foreground-900: var(--navy-900); /* @kind color */ --foreground-950: var(--navy-950); /* @kind color */ --form-field-background: var(--white-0); /* @kind color */ --form-field-border-color: var(--surface-500); /* @kind color */ --form-field-border-radius: var(--border-radius-md); --form-field-color: var(--text-primary-color); /* @kind color */ --form-field-description-color: var(--text-secondary-color); /* @kind color */ --form-field-description-font-height: 16; /* @kind font */ --form-field-description-font-size: var(--font-size-caption); --form-field-description-font-weight: var(--font-weight-regular); --form-field-disabled-background: var(--surface-300); /* @kind color */ --form-field-disabled-color: var(--text-primary-color); /* @kind color */ --form-field-filled-background: var(--surface-50); /* @kind color */ --form-field-filled-focus-background: var(--surface-50); /* @kind color */ --form-field-filled-hover-background: var(--surface-50); /* @kind color */ --form-field-float-label-color: var(--text-secondary-color); /* @kind color */ --form-field-float-label-focus-color: var(--surface-500); /* @kind color */ --form-field-float-label-invalid-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --form-field-focus-border-color: var(--primary-color); /* @kind color */ --form-field-focus-ring-color: var(--focus-ring-color); /* @kind color */ --form-field-focus-ring-offset: var(--focus-ring-offset); --form-field-focus-ring-width: var(--focus-ring-width); --form-field-gap: var(--spacing-gap-4); --form-field-helper-color: var(--text-primary-color); /* @kind color */ --form-field-helper-font-height: 16; /* @kind font */ --form-field-helper-font-size: var(--font-size-caption); --form-field-helper-font-weight: var(--font-weight-regular); --form-field-hover-border-color: var(--surface-600); /* @kind color */ --form-field-icon-color: var(--icon-default-color); /* @kind color */ --form-field-icon-gap: var(--spacing-gap-8-2); --form-field-invalid-border-color: var(--red-700); /* @kind color */ --form-field-invalid-placeholder-color: var(--text-destructive-color); /* @kind color */ --form-field-label-color: var(--text-primary-color); /* @kind color */ --form-field-label-font-height: 18; /* @kind font */ --form-field-label-font-size: var(--font-size-body); --form-field-label-font-weight: var(--font-weight-semibold); --form-field-label-gap: var(--spacing-gap-4); --form-field-lg-font-size: var(--font-size-body); --form-field-lg-padding-x: var(--spacing-padding-16); --form-field-lg-padding-y: var(--spacing-padding-12); --form-field-option-color: var(--text-primary-color); /* @kind color */ --form-field-option-font-height: 18; /* @kind font */ --form-field-option-font-size: var(--font-size-body); --form-field-option-font-weight: var(--font-weight-regular); --form-field-option-gap: var(--spacing-gap-4); --form-field-options-gap: var(--spacing-gap-12); --form-field-padding-x: var(--spacing-padding-12); --form-field-padding-y: var(--spacing-padding-8); --form-field-placeholder-color: var(--text-secondary-color); /* @kind color */ --form-field-sm-font-size: var(--font-size-body); --form-field-sm-padding-x: var(--spacing-padding-8); --form-field-sm-padding-y: var(--spacing-padding-4); --gap: 8; /* @kind spacing */ --gray-100: rgb(249,249,249); /* @kind color */ --gray-200-2: rgb(229,231,235); /* @kind color */ --gray-200: rgb(240,240,240); /* @kind color */ --gray-300: rgb(232,232,232); /* @kind color */ --gray-400: rgb(224,224,224); /* @kind color */ --gray-500-2: rgb(107,114,128); /* @kind color */ --gray-500: rgb(217,217,217); /* @kind color */ --gray-50: rgb(252,252,252); /* @kind color */ --gray-600-2: rgb(75,85,99); /* @kind color */ --gray-600: rgb(187,187,187); /* @kind color */ --gray-700: rgb(141,141,141); /* @kind color */ --gray-800: rgb(131,131,131); /* @kind color */ --gray-900: rgb(100,100,100); /* @kind color */ --gray-950: rgb(32,32,32); /* @kind color */ --green-100: rgb(244,251,246); /* @kind color */ --green-200: rgb(230,246,235); /* @kind color */ --green-300: rgb(214,241,223); /* @kind color */ --green-400: rgb(196,232,209); /* @kind color */ --green-500-2: rgb(34,197,94); /* @kind color */ --green-500: rgb(173,221,192); /* @kind color */ --green-50: rgb(251,254,252); /* @kind color */ --green-600-2: rgb(22,163,74); /* @kind color */ --green-600: rgb(91,185,139); /* @kind color */ --green-700: rgb(48,164,108); /* @kind color */ --green-800: rgb(43,154,102); /* @kind color */ --green-900: rgb(6,117,75); /* @kind color */ --green-950: rgb(25,59,45); /* @kind color */ --highlight-background: var(--primary-100); /* @kind color */ --highlight-color: var(--text-primary-color); /* @kind color */ --highlight-focus-background: var(--primary-200); /* @kind color */ --highlight-focus-color: var(--primary-900); /* @kind color */ --icon-accent-color: var(--primary-color); /* @kind color */ --icon-accent-disabled-color: var(--primary-disabled-color); /* @kind color */ --icon-accent-hover-color: var(--primary-hover-color); /* @kind color */ --icon-accent: var(--accent-default); /* @kind color */ --icon-default-color: var(--foreground-700); /* @kind color */ --icon-default-disabled-color: rgba(82,97,111,0.6); /* @kind color */ --icon-default-hover-color: var(--foreground-800); /* @kind color */ --icon-destructive-color: var(--red-700); /* @kind color */ --icon-destructive-disabled-color: rgba(229,72,77,0.6); /* @kind color */ --icon-destructive-hover-color: var(--red-800); /* @kind color */ --icon-disabled: var(--secondary-hover); /* @kind color */ --icon-gray-default: var(--surface-500-2); /* @kind color */ --icon-gray: var(--neutral-dark-gray); /* @kind color */ --icon-light-color: var(--foreground-200); /* @kind color */ --icon-light-disabled-color: rgba(236,241,246,0.6); /* @kind color */ --icon-light-hover-color: var(--foreground-300); /* @kind color */ --icon-navy-default: var(--navy-900-2); /* @kind color */ --icon-primary: var(--primary-default); /* @kind color */ --icon-size: 14; /* @kind spacing */ --icon-sky-default: var(--sky-500-2); /* @kind color */ --icon-success-color: var(--green-700); /* @kind color */ --icon-success-default: var(--green-500-2); /* @kind color */ --icon-success-disabled-color: rgba(48,164,108,0.6); /* @kind color */ --icon-success-hover-color: var(--green-800); /* @kind color */ --icon-white-color: var(--white-0); /* @kind color */ --icon-white-default: var(--surface-0-2); /* @kind color */ --icon-white: var(--neutral-white); /* @kind color */ --iconfield-figma-lg-icon-size: var(--inputtext-lg-font-size); --iconfield-figma-sm-icon-size: var(--inputtext-sm-font-size); --iconfield-icon-color: var(--form-field-icon-color); /* @kind color */ --iftalabel-color: var(--form-field-float-label-color); /* @kind color */ --iftalabel-focus-color: var(--form-field-float-label-focus-color); /* @kind color */ --iftalabel-font-size: var(--font-size-caption); --iftalabel-font-weight: var(--font-weight-regular); --iftalabel-input-padding-bottom: var(--form-field-padding-y); --iftalabel-input-padding-top: 24; /* @kind spacing */ --iftalabel-invalid-color: var(--form-field-float-label-invalid-color); /* @kind color */ --iftalabel-position-x: var(--form-field-padding-x); --iftalabel-top: var(--form-field-padding-y); --image-preview-icon-size: 24; /* @kind spacing */ --image-preview-mask-background: var(--mask-background); /* @kind color */ --image-preview-mask-color: var(--mask-color); /* @kind color */ --input-height: 32; /* @kind spacing */ --input-label-width-padding: 2; /* @kind spacing */ --input-vertical-margin: 8; /* @kind spacing */ --input-width-padding: 10; /* @kind spacing */ --inputgroup-addon-background: var(--form-field-background); /* @kind color */ --inputgroup-addon-border-color: var(--form-field-border-color); /* @kind color */ --inputgroup-addon-border-radius: var(--form-field-border-radius); --inputgroup-addon-color: var(--form-field-description-color); /* @kind color */ --inputgroup-addon-min-width: 40; /* @kind spacing */ --inputgroup-addon-padding: var(--spacing-padding-8); --inputnumber-button-active-background: var(--surface-200); /* @kind color */ --inputnumber-button-active-border-color: var(--form-field-border-color); /* @kind color */ --inputnumber-button-active-color: var(--surface-600); /* @kind color */ --inputnumber-button-background: rgba(0,0,0,0); /* @kind color */ --inputnumber-button-border-color: var(--form-field-border-color); /* @kind color */ --inputnumber-button-border-radius: var(--form-field-border-radius); --inputnumber-button-color: var(--surface-400); /* @kind color */ --inputnumber-button-hover-background: var(--surface-100); /* @kind color */ --inputnumber-button-hover-border-color: var(--form-field-border-color); /* @kind color */ --inputnumber-button-hover-color: var(--surface-500); /* @kind color */ --inputnumber-button-vertical-padding: var(--form-field-padding-y); --inputnumber-button-width: 35; /* @kind spacing */ --inputotp-gap: var(--spacing-gap-8-2); --inputotp-input-lg-width: 48; /* @kind spacing */ --inputotp-input-sm-width: 32; /* @kind spacing */ --inputotp-input-width: 40; /* @kind spacing */ --inputtext-background: var(--form-field-background); /* @kind color */ --inputtext-border-color: var(--form-field-border-color); /* @kind color */ --inputtext-border-radius: var(--form-field-border-radius); --inputtext-color: var(--form-field-color); /* @kind color */ --inputtext-disabled-background: var(--form-field-disabled-background); /* @kind color */ --inputtext-disabled-color: var(--form-field-disabled-color); /* @kind color */ --inputtext-filled-background: var(--form-field-filled-background); /* @kind color */ --inputtext-filled-focus-background: var(--form-field-filled-focus-background); /* @kind color */ --inputtext-filled-hover-background: var(--form-field-filled-hover-background); /* @kind color */ --inputtext-focus-border-color: var(--form-field-focus-border-color); /* @kind color */ --inputtext-focus-ring-color: var(--form-field-focus-ring-color); /* @kind color */ --inputtext-focus-ring-offset: var(--form-field-focus-ring-offset); --inputtext-focus-ring-width: var(--form-field-focus-ring-width); --inputtext-gap: var(--form-field-gap); --inputtext-gutter: 4; /* @kind spacing */ --inputtext-helper-color: var(--form-field-helper-color); /* @kind color */ --inputtext-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --inputtext-icon-color: var(--form-field-icon-color); /* @kind color */ --inputtext-icon-gap: var(--form-field-icon-gap); --inputtext-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --inputtext-invalid-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --inputtext-invalid-placeholder-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --inputtext-lg-font-size: var(--form-field-lg-font-size); --inputtext-lg-padding-x: var(--form-field-lg-padding-x); --inputtext-lg-padding-y: var(--form-field-lg-padding-y); --inputtext-padding-x: var(--form-field-padding-x); --inputtext-padding-y: var(--form-field-padding-y); --inputtext-placeholder-color: var(--form-field-placeholder-color); /* @kind color */ --inputtext-sm-font-size: var(--form-field-sm-font-size); --inputtext-sm-padding-x: var(--form-field-sm-padding-x); --inputtext-sm-padding-y: var(--form-field-sm-padding-y); --label-font-weight: var(--font-weight-semibold); --list-gap: var(--spacing-gap-2); --list-group-color: var(--text-secondary-color); /* @kind color */ --list-group-font-weight: var(--font-weight-semibold); --list-option-border-radius: var(--border-radius-sm); --list-option-color: var(--text-primary-color); /* @kind color */ --list-option-focus-background: var(--surface-200); /* @kind color */ --list-option-focus-color: var(--text-primary-color); /* @kind color */ --list-option-font-height: 20; /* @kind font */ --list-option-font-size: var(--font-size-body); --list-option-font-weight: var(--font-weight-regular); --list-option-group-background: var(--white-0); /* @kind color */ --list-option-group-color: var(--text-secondary-color); /* @kind color */ --list-option-group-font-weight: var(--font-weight-semibold); --list-option-icon-color: var(--icon-default-color); /* @kind color */ --list-option-icon-focus-color: var(--icon-default-hover-color); /* @kind color */ --list-option-padding-x: var(--spacing-padding-12); --list-option-padding-y: var(--spacing-padding-8); --list-option-selected-background: var(--highlight-background); /* @kind color */ --list-option-selected-color: var(--highlight-color); /* @kind color */ --list-option-selected-focus-background: var(--highlight-focus-background); /* @kind color */ --list-option-selected-focus-color: var(--highlight-focus-color); /* @kind color */ --list-padding-x: var(--spacing-padding-4); --list-padding-y: var(--spacing-padding-4); --margin-10x: 10; /* @kind spacing */ --margin-32x: 32; /* @kind spacing */ --margin-4x: 4; /* @kind spacing */ --margin-50x: 50; /* @kind spacing */ --margin-8x: 8; /* @kind spacing */ --marketingbanner-basic-background: var(--primary-100); /* @kind color */ --marketingbanner-basic-secondary-background: var(--surface-100); /* @kind color */ --marketingbanner-button-gap: var(--spacing-gap-8-2); --marketingbanner-close-icon-default: var(--icon-default-color); /* @kind color */ --marketingbanner-close-icon-hover: var(--icon-default-hover-color); /* @kind color */ --marketingbanner-color: var(--text-primary-color); /* @kind color */ --marketingbanner-content-gap: var(--spacing-gap-24); --marketingbanner-content-padding: var(--spacing-padding-24); --marketingbanner-description-font-size: var(--font-size-body-large); --marketingbanner-font-size: 16; /* @kind font */ --marketingbanner-font-weight: "400"; --marketingbanner-header-gap: var(--spacing-gap-8-2); --marketingbanner-image-content-padding-y: var(--spacing-padding-32); --marketingbanner-image-padding-x: var(--spacing-padding-32); --marketingbanner-padding-x: 180; /* @kind spacing */ --marketingbanner-padding-y: var(--spacing-padding-32); --marketingbanner-title-gap: var(--spacing-gap-8-2); --mask-background: rgba(0,0,0,0.4); /* @kind color */ --mask-color: var(--surface-200); /* @kind color */ --megamenu-mobile-button-hover-color: var(--text-secondary-hover-color); /* @kind color */ --menu-background: var(--content-background); /* @kind color */ --menu-border-color: var(--content-border-color); /* @kind color */ --menu-border-radius: var(--content-border-radius); --menu-color: var(--content-color); /* @kind color */ --menu-item-border-radius: var(--navigation-item-border-radius); --menu-item-color: var(--navigation-item-color); /* @kind color */ --menu-item-destructive-color: var(--navigation-item-destructive-color); /* @kind color */ --menu-item-destructive-focus-color: var(--text-destructive-color); /* @kind color */ --menu-item-destructive-icon-color: var(--navigation-item-destructive-icon-color); /* @kind color */ --menu-item-destructive-icon-focus-color: var(--navigation-item-destructive-hover-icon-color); /* @kind color */ --menu-item-focus-background: var(--navigation-item-focus-background); /* @kind color */ --menu-item-focus-color: var(--navigation-item-focus-color); /* @kind color */ --menu-item-gap: var(--navigation-item-gap); --menu-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --menu-item-icon-focus-color: var(--navigation-item-icon-focus-color); /* @kind color */ --menu-item-padding-x: var(--navigation-item-padding-x); --menu-item-padding-y: var(--navigation-item-padding-y); --menu-list-gap: var(--navigation-list-gap); --menu-list-padding-x: var(--navigation-list-padding-x); --menu-list-padding-y: var(--navigation-list-padding-y); --menu-separator-border-color: var(--content-border-color); /* @kind color */ --menu-submenu-label-background: var(--navigation-submenu-label-background); /* @kind color */ --menu-submenu-label-color: var(--navigation-submenu-label-color); /* @kind color */ --menu-submenu-label-font-weight: var(--navigation-submenu-label-font-weight); --menu-submenu-label-padding-x: var(--navigation-submenu-label-padding-x); --menu-submenu-label-padding-y: var(--navigation-submenu-label-padding-y); --menubar-menubar-background: var(--content-background); /* @kind color */ --menubar-menubar-base-item-border-radius: var(--content-border-radius); --menubar-menubar-border-color: var(--content-border-color); /* @kind color */ --menubar-menubar-border-radius: var(--content-border-radius); --menubar-menubar-color: var(--content-color); /* @kind color */ --menubar-menubar-gap: var(--spacing-gap-8-2); --menubar-menubar-item-active-background: var(--navigation-item-active-background); /* @kind color */ --menubar-menubar-item-active-color: var(--navigation-item-active-color); /* @kind color */ --menubar-menubar-item-border-radius: var(--navigation-item-border-radius); --menubar-menubar-item-color: var(--navigation-item-color); /* @kind color */ --menubar-menubar-item-focus-background: var(--navigation-item-focus-background); /* @kind color */ --menubar-menubar-item-focus-color: var(--navigation-item-focus-color); /* @kind color */ --menubar-menubar-item-gap: var(--navigation-item-gap); --menubar-menubar-item-icon-active-color: var(--navigation-item-icon-active-color); /* @kind color */ --menubar-menubar-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --menubar-menubar-item-icon-focus-color: var(--navigation-item-icon-focus-color); /* @kind color */ --menubar-menubar-mobile-button-border-radius: 14; /* @kind radius */ --menubar-menubar-mobile-button-color: var(--text-secondary-color); /* @kind color */ --menubar-menubar-mobile-button-focus-ring-color: var(--focus-ring-color); /* @kind color */ --menubar-menubar-mobile-button-focus-ring-offset: var(--focus-ring-offset); --menubar-menubar-mobile-button-focus-ring-width: var(--focus-ring-width); --menubar-menubar-mobile-button-hover-background: var(--content-hover-background); /* @kind color */ --menubar-menubar-mobile-button-hover-color: var(--text-secondary-hover-color); /* @kind color */ --menubar-menubar-mobile-button-size: 32; /* @kind spacing */ --menubar-menubar-separator-border-color: var(--content-border-color); /* @kind color */ --menubar-menubar-submenu-background: var(--content-background); /* @kind color */ --menubar-menubar-submenu-border-color: var(--content-border-color); /* @kind color */ --menubar-menubar-submenu-border-radius: var(--content-border-radius); --menubar-menubar-submenu-gap: var(--navigation-list-gap); --menubar-menubar-submenu-icon-active-color: var(--navigation-submenu-icon-active-color); /* @kind color */ --menubar-menubar-submenu-icon-color: var(--navigation-submenu-icon-color); /* @kind color */ --menubar-menubar-submenu-icon-focus-color: var(--navigation-submenu-icon-focus-color); /* @kind color */ --menubar-menubar-submenu-icon-size: var(--navigation-submenu-icon-size); --menubar-menubar-submenu-mobile-indent: 14; /* @kind spacing */ --message-border-radius: var(--content-border-radius); --message-border-width: 1; /* @kind spacing */ --message-close-button-border-radius: 14; /* @kind radius */ --message-close-button-focus-ring-offset: var(--focus-ring-offset); --message-close-button-focus-ring-width: var(--focus-ring-width); --message-close-button-height: 24; /* @kind spacing */ --message-close-button-width: 24; /* @kind spacing */ --message-close-icon-lg-size: 18; /* @kind spacing */ --message-close-icon-size: 16; /* @kind spacing */ --message-close-icon-sm-size: 14; /* @kind spacing */ --message-color: var(--text-primary-color); /* @kind color */ --message-content-gap: var(--spacing-gap-4); --message-contrast-background: var(--foreground-700); /* @kind color */ --message-contrast-border-color: var(--foreground-700); /* @kind color */ --message-contrast-close-button-focus-ring-color: var(--foreground-700); /* @kind color */ --message-contrast-close-button-hover-background: var(--foreground-800); /* @kind color */ --message-contrast-color: var(--text-inverse-color); /* @kind color */ --message-contrast-outlined-border-color: var(--surface-950); /* @kind color */ --message-contrast-outlined-color: var(--surface-950); /* @kind color */ --message-contrast-simple-color: var(--surface-950); /* @kind color */ --message-detail-font-size: var(--font-size-body); --message-detail-font-weight: var(--font-weight-regular); --message-error-background: var(--red-100); /* @kind color */ --message-error-border-color: var(--red-500); /* @kind color */ --message-error-close-button-focus-ring-color: var(--red-700); /* @kind color */ --message-error-close-button-hover-background: var(--red-200); /* @kind color */ --message-error-color: var(--red-900); /* @kind color */ --message-error-outlined-border-color: var(--red-600); /* @kind color */ --message-error-outlined-color: var(--red-900); /* @kind color */ --message-error-simple-color: var(--red-900); /* @kind color */ --message-gap: var(--spacing-gap-8-2); --message-icon-lg-size: 20; /* @kind spacing */ --message-icon-size: 18; /* @kind spacing */ --message-icon-sm-size: 16; /* @kind spacing */ --message-info-background: var(--blue-100); /* @kind color */ --message-info-border-color: var(--blue-500); /* @kind color */ --message-info-close-button-focus-ring-color: var(--blue-700); /* @kind color */ --message-info-close-button-hover-background: var(--blue-200); /* @kind color */ --message-info-color: var(--blue-900); /* @kind color */ --message-info-outlined-border-color: var(--blue-600); /* @kind color */ --message-info-outlined-color: var(--blue-900); /* @kind color */ --message-info-simple-color: var(--blue-900); /* @kind color */ --message-marketing-background: var(--orange-100); /* @kind color */ --message-marketing-border-color: var(--orange-500); /* @kind color */ --message-marketing-close-button-focus-ring-color: var(--orange-700); /* @kind color */ --message-marketing-close-button-hover-background: var(--orange-200); /* @kind color */ --message-marketing-color: var(--orange-900); /* @kind color */ --message-marketing-outlined-border-color: var(--orange-600); /* @kind color */ --message-marketing-outlined-color: var(--orange-900); /* @kind color */ --message-marketing-simple-color: var(--orange-900); /* @kind color */ --message-outlined-border-width: 1; /* @kind spacing */ --message-padding-x: var(--spacing-padding-12); --message-padding-y: var(--spacing-padding-8); --message-secondary-background: var(--surface-100); /* @kind color */ --message-secondary-border-color: var(--surface-500); /* @kind color */ --message-secondary-close-button-focus-ring-color: var(--surface-700); /* @kind color */ --message-secondary-close-button-hover-background: var(--surface-200); /* @kind color */ --message-secondary-color: var(--text-primary-color); /* @kind color */ --message-secondary-outlined-border-color: var(--surface-600); /* @kind color */ --message-secondary-outlined-color: var(--surface-900); /* @kind color */ --message-secondary-simple-color: var(--text-secondary-color); /* @kind color */ --message-simple-content-padding: var(--spacing-padding-0); --message-success-background: var(--green-100); /* @kind color */ --message-success-border-color: var(--green-500); /* @kind color */ --message-success-close-button-focus-ring-color: var(--green-700); /* @kind color */ --message-success-close-button-hover-background: var(--green-200); /* @kind color */ --message-success-color: var(--green-900); /* @kind color */ --message-success-outlined-border-color: var(--green-600); /* @kind color */ --message-success-outlined-color: var(--green-900); /* @kind color */ --message-success-simple-color: var(--green-900); /* @kind color */ --message-summary-font-size: var(--font-size-body-large); --message-summary-font-weight: var(--font-weight-semibold); --message-warn-background: var(--yellow-100); /* @kind color */ --message-warn-border-color: var(--yellow-500); /* @kind color */ --message-warn-close-button-focus-ring-color: var(--yellow-700); /* @kind color */ --message-warn-close-button-hover-background: var(--yellow-200); /* @kind color */ --message-warn-color: var(--yellow-900); /* @kind color */ --message-warn-outlined-border-color: var(--yellow-600); /* @kind color */ --message-warn-outlined-color: var(--yellow-900); /* @kind color */ --message-warn-simple-color: var(--yellow-900); /* @kind color */ --messagecontainer-body-gap: var(--spacing-gap-16-2); --messagecontainer-content-font-size: var(--font-size-body); --messagecontainer-content-font-weight: var(--font-weight-regular); --messagecontainer-gap: var(--spacing-gap-24); --messagecontainer-header-font-size: var(--font-size-heading-large); --messagecontainer-header-font-weight: var(--font-weight-semibold); --messagecontainer-padding-y: var(--spacing-padding-32); --metergroup-border-radius: var(--content-border-radius); --metergroup-gap: var(--spacing-gap-16-2); --metergroup-label-gap: var(--spacing-gap-8-2); --metergroup-label-icon-size: 14; /* @kind spacing */ --metergroup-label-list-horizontal-gap: var(--spacing-gap-16-2); --metergroup-label-list-vertical-gap: var(--spacing-gap-8-2); --metergroup-label-marker-size: 8; /* @kind spacing */ --metergroup-meters-background: var(--content-border-color); /* @kind color */ --metergroup-meters-size: 8; /* @kind spacing */ --metrictile-background: var(--content-background); /* @kind color */ --metrictile-border-color: var(--content-border-color); /* @kind color */ --metrictile-border-radius: var(--content-border-radius); --metrictile-content-gap: 4; /* @kind spacing */ --metrictile-gap: 16; /* @kind spacing */ --metrictile-header-gap: 8; /* @kind spacing */ --metrictile-padding-x: 16; /* @kind spacing */ --metrictile-padding-y: 16; /* @kind spacing */ --metrictile-trend-border-radius: var(--border-radius-md); --metrictile-trend-font-size: var(--font-size-body); --metrictile-trend-font-weight: var(--font-weight-bold); --metrictile-trend-gap: 4; /* @kind spacing */ --metrictile-trend-negative-background: var(--red-100); /* @kind color */ --metrictile-trend-negative-color: var(--red-700); /* @kind color */ --metrictile-trend-padding-x: 8; /* @kind spacing */ --metrictile-trend-padding-y: 4; /* @kind spacing */ --metrictile-trend-positive-background: var(--green-100); /* @kind color */ --metrictile-trend-positive-color: var(--green-700); /* @kind color */ --metrictile-unit-color: var(--text-primary-color); /* @kind color */ --metrictile-unit-font-height: 42; /* @kind font */ --metrictile-unit-font-size: 36; /* @kind font */ --metrictile-unit-font-weight: var(--font-weight-bold); --metrictile-unit-gap: 8; /* @kind spacing */ --multiselect-background: var(--form-field-background); /* @kind color */ --multiselect-border-color: var(--form-field-border-color); /* @kind color */ --multiselect-border-radius: var(--form-field-border-radius); --multiselect-chip-border-radius: var(--border-radius-sm); --multiselect-clear-icon-color: var(--form-field-icon-color); /* @kind color */ --multiselect-color: var(--form-field-option-color); /* @kind color */ --multiselect-disabled-background: var(--form-field-disabled-background); /* @kind color */ --multiselect-disabled-color: var(--form-field-disabled-color); /* @kind color */ --multiselect-dropdown-color: var(--form-field-icon-color); /* @kind color */ --multiselect-dropdown-gutter: 4; /* @kind spacing */ --multiselect-figma-chip-padding-bottom: 4; /* @kind spacing */ --multiselect-figma-chip-padding-top: 4; /* @kind spacing */ --multiselect-figma-input-multiple-gap: 4; /* @kind spacing */ --multiselect-filled-hover-background: var(--form-field-filled-hover-background); /* @kind color */ --multiselect-filter-padding-x: 16; /* @kind spacing */ --multiselect-filter-y-bottom: 4; /* @kind other */ --multiselect-focus-border-color: var(--form-field-focus-border-color); /* @kind color */ --multiselect-focus-ring-color: var(--form-field-focus-ring-color); /* @kind color */ --multiselect-focus-ring-offset: var(--form-field-focus-ring-offset); --multiselect-focus-ring-width: var(--form-field-focus-ring-width); --multiselect-gap: 12; /* @kind spacing */ --multiselect-group-option-padding-x: 24; /* @kind spacing */ --multiselect-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --multiselect-icon-color: var(--icon-default-color); /* @kind color */ --multiselect-icon-dropdown-color: var(--icon-default-color); /* @kind color */ --multiselect-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --multiselect-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --multiselect-invalid-hover-background: rgba(255,210,210,0.6); /* @kind color */ --multiselect-invalid-placeholder-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --multiselect-lg-font-size: var(--form-field-lg-font-size); --multiselect-lg-padding-x: var(--form-field-lg-padding-x); --multiselect-lg-padding-y: var(--form-field-lg-padding-y); --multiselect-list-gap: var(--list-gap); --multiselect-option-border-radius: var(--list-option-border-radius); --multiselect-option-color: var(--list-option-color); /* @kind color */ --multiselect-option-focus-background: var(--list-option-focus-background); /* @kind color */ --multiselect-option-focus-color: var(--list-option-focus-color); /* @kind color */ --multiselect-option-gap: 8; /* @kind spacing */ --multiselect-option-group-background: var(--list-option-group-background); /* @kind color */ --multiselect-option-group-color: var(--list-option-group-color); /* @kind color */ --multiselect-option-group-font-weight: var(--list-option-group-font-weight); --multiselect-option-padding-x: 12; /* @kind spacing */ --multiselect-option-selected-background: var(--list-option-selected-background); /* @kind color */ --multiselect-option-selected-color: var(--list-option-selected-color); /* @kind color */ --multiselect-option-selected-focus-background: var(--list-option-selected-focus-background); /* @kind color */ --multiselect-option-selected-focus-color: var(--list-option-selected-focus-color); /* @kind color */ --multiselect-overlay-background: var(--overlay-select-background); /* @kind color */ --multiselect-overlay-border-color: var(--overlay-select-border-color); /* @kind color */ --multiselect-overlay-border-radius: var(--overlay-select-border-radius); --multiselect-overlay-color: var(--overlay-select-color); /* @kind color */ --multiselect-padding-x: var(--form-field-padding-x); --multiselect-padding-y: 8; /* @kind spacing */ --multiselect-placeholder-color: var(--form-field-placeholder-color); /* @kind color */ --multiselect-search-gap: 8; /* @kind spacing */ --multiselect-search-padding-x: 4; /* @kind spacing */ --multiselect-sm-font-size: var(--form-field-sm-font-size); --multiselect-sm-padding-x: var(--form-field-sm-padding-x); --multiselect-sm-padding-y: var(--form-field-sm-padding-y); --multiselect-template-color: var(--textarea-placeholder-color); /* @kind color */ --multiselect-template-option-description-padding-x: 32; /* @kind spacing */ --navigation-account-header-gap: 12; /* @kind spacing */ --navigation-account-header-padding-x: 16; /* @kind spacing */ --navigation-account-header-padding-y: 8; /* @kind spacing */ --navigation-item-active-background: var(--surface-300); /* @kind color */ --navigation-item-active-color: var(--text-primary-color); /* @kind color */ --navigation-item-border-radius: var(--border-radius-sm); --navigation-item-color: var(--text-primary-color); /* @kind color */ --navigation-item-destructive-color: var(--text-destructive-color); /* @kind color */ --navigation-item-destructive-hover-color: var(--text-destructive-hover-color); /* @kind color */ --navigation-item-destructive-hover-icon-color: var(--icon-destructive-hover-color); /* @kind color */ --navigation-item-destructive-icon-color: var(--icon-destructive-color); /* @kind color */ --navigation-item-focus-background: var(--surface-200); /* @kind color */ --navigation-item-focus-color: var(--text-primary-color); /* @kind color */ --navigation-item-gap: var(--spacing-gap-8-2); --navigation-item-icon-active-color: var(--icon-default-hover-color); /* @kind color */ --navigation-item-icon-color: var(--icon-default-color); /* @kind color */ --navigation-item-icon-focus-color: var(--icon-default-hover-color); /* @kind color */ --navigation-item-padding-x: var(--spacing-padding-12); --navigation-item-padding-y: var(--spacing-padding-8); --navigation-list-gap: var(--spacing-gap-2); --navigation-list-padding-x: var(--spacing-padding-4); --navigation-list-padding-y: var(--spacing-padding-4); --navigation-submenu-icon-active-color: var(--icon-default-color); /* @kind color */ --navigation-submenu-icon-color: var(--icon-default-color); /* @kind color */ --navigation-submenu-icon-focus-color: var(--icon-default-color); /* @kind color */ --navigation-submenu-icon-size: 14; /* @kind spacing */ --navigation-submenu-label-background: rgba(0,0,0,0); /* @kind color */ --navigation-submenu-label-color: var(--text-secondary-color); /* @kind color */ --navigation-submenu-label-font-weight: var(--font-weight-semibold); --navigation-submenu-label-padding-x: var(--spacing-padding-12); --navigation-submenu-label-padding-y: var(--spacing-padding-8); --navigation-top-icon-gap: 8; /* @kind spacing */ --navigation-top-paddingx: 24; /* @kind spacing */ --navigation-topaccount-icon-hover-size: 34; /* @kind spacing */ --navigation-topaccount-icon-size: 30; /* @kind spacing */ --navy-100-2: rgb(234,237,241); /* @kind color */ --navy-100: rgb(247,249,252); /* @kind color */ --navy-200: rgb(236,241,246); /* @kind color */ --navy-300: rgb(227,233,239); /* @kind color */ --navy-400: rgb(218,226,234); /* @kind color */ --navy-500-2: rgb(108,128,157); /* @kind color */ --navy-500: rgb(209,219,228); /* @kind color */ --navy-50: rgb(251,252,254); /* @kind color */ --navy-600: rgb(172,189,205); /* @kind color */ --navy-700: rgb(82,97,111); /* @kind color */ --navy-800: rgb(68,83,96); /* @kind color */ --navy-900-2: rgb(39,53,73); /* @kind color */ --navy-900: rgb(99,115,129); /* @kind color */ --navy-950-2: rgb(27,36,50); /* @kind color */ --navy-950: rgb(33,43,53); /* @kind color */ --neutral-black: rgb(0,0,0); /* @kind color */ --neutral-dark-gray: rgb(105,124,147); /* @kind color */ --neutral-light-gray: rgb(249,250,251); /* @kind color */ --neutral-mid-gray: rgb(224,231,239); /* @kind color */ --neutral-white: rgb(255,255,255); /* @kind color */ --orange-100: rgb(255,247,237); /* @kind color */ --orange-200: rgb(255,239,214); /* @kind color */ --orange-300: rgb(255,223,181); /* @kind color */ --orange-400: rgb(255,209,154); /* @kind color */ --orange-500: rgb(255,193,130); /* @kind color */ --orange-50: rgb(254,252,251); /* @kind color */ --orange-600: rgb(236,148,85); /* @kind color */ --orange-700: rgb(247,107,21); /* @kind color */ --orange-800: rgb(239,95,0); /* @kind color */ --orange-900: rgb(178,49,0); /* @kind color */ --orange-950: rgb(88,45,29); /* @kind color */ --overlay-modal-background: var(--white-0); /* @kind color */ --overlay-modal-border-color: var(--surface-500); /* @kind color */ --overlay-modal-border-radius: var(--border-radius-lg); --overlay-modal-color: var(--text-primary-color); /* @kind color */ --overlay-modal-padding: var(--spacing-padding-24); --overlay-popover-background: var(--white-0); /* @kind color */ --overlay-popover-border-color: var(--surface-500); /* @kind color */ --overlay-popover-border-radius: var(--border-radius-md); --overlay-popover-color: var(--text-primary-color); /* @kind color */ --overlay-popover-padding: var(--spacing-padding-12); --overlay-select-background: var(--white-0); /* @kind color */ --overlay-select-border-color: var(--surface-500); /* @kind color */ --overlay-select-border-radius: var(--border-radius-md); --overlay-select-color: var(--text-primary-color); /* @kind color */ --overlaybadge-outline-color: var(--content-background); /* @kind color */ --overlaybadge-outline-width: 2; /* @kind spacing */ --padding-10x: 10; /* @kind spacing */ --padding-16px: 16; /* @kind spacing */ --padding-21x: 21; /* @kind spacing */ --padding-32x: 32; /* @kind spacing */ --padding-4x: 4; /* @kind spacing */ --padding-8x: 8; /* @kind spacing */ --paginator-background: var(--content-background); /* @kind color */ --paginator-border-radius: var(--content-border-radius); --paginator-color: var(--content-color); /* @kind color */ --paginator-current-page-report-color: var(--text-secondary-color); /* @kind color */ --paginator-gap: 4; /* @kind spacing */ --paginator-jump-to-page-input-max-width-2: 36; /* @kind spacing */ --paginator-jump-to-page-input-max-width-3: 36; /* @kind spacing */ --paginator-jump-to-page-input-max-width-4: 36; /* @kind spacing */ --paginator-jump-to-page-input-max-width: 36; /* @kind spacing */ --paginator-nav-button-background: var(--content-background); /* @kind color */ --paginator-nav-button-border-radius: 20; /* @kind radius */ --paginator-nav-button-color: var(--text-secondary-color); /* @kind color */ --paginator-nav-button-disabled-opacity: var(--disabled-opacity); --paginator-nav-button-focus-ring-color: var(--focus-ring-color); /* @kind color */ --paginator-nav-button-focus-ring-offset: var(--focus-ring-offset); --paginator-nav-button-focus-ring-width: var(--focus-ring-width); --paginator-nav-button-height: 36; /* @kind spacing */ --paginator-nav-button-hover-background: var(--content-hover-background); /* @kind color */ --paginator-nav-button-hover-color: var(--content-hover-color-2); /* @kind color */ --paginator-nav-button-selected-background: var(--highlight-background); /* @kind color */ --paginator-nav-button-selected-color: var(--highlight-color); /* @kind color */ --paginator-nav-button-width: 36; /* @kind spacing */ --paginator-padding-x: 16; /* @kind spacing */ --paginator-padding-y: 8; /* @kind spacing */ --panel-background: var(--content-background); /* @kind color */ --panel-border-color: var(--content-border-color); /* @kind color */ --panel-border-radius: var(--content-border-radius); --panel-color: var(--content-color); /* @kind color */ --panel-header-background: var(--content-background); /* @kind color */ --panel-header-border-color: var(--content-border-color); /* @kind color */ --panel-header-border-radius: var(--content-border-radius); --panel-header-color: var(--text-primary-color); /* @kind color */ --panel-header-padding-x: 20; /* @kind spacing */ --panel-header-padding-y: 8; /* @kind spacing */ --panel-padding-x: 20; /* @kind spacing */ --panel-padding-y: 20; /* @kind spacing */ --panelmenu-gap: 8; /* @kind spacing */ --panelmenu-item-active-background: var(--primary-200); /* @kind color */ --panelmenu-item-active-color: var(--icon-accent-color); /* @kind color */ --panelmenu-item-border-radius: var(--content-border-radius); --panelmenu-item-color: var(--navigation-item-color); /* @kind color */ --panelmenu-item-focus-background: var(--navigation-item-focus-background); /* @kind color */ --panelmenu-item-focus-color: var(--navigation-item-focus-color); /* @kind color */ --panelmenu-item-gap: 8; /* @kind spacing */ --panelmenu-item-icon-active: var(--panelmenu-item-icon-color); /* @kind color */ --panelmenu-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --panelmenu-item-icon-focus-color: var(--navigation-item-icon-focus-color); /* @kind color */ --panelmenu-item-padding-x: 12; /* @kind spacing */ --panelmenu-item-padding-y: 8; /* @kind spacing */ --panelmenu-panel-background: var(--surface-100); /* @kind color */ --panelmenu-panel-border-color: var(--content-border-color); /* @kind color */ --panelmenu-panel-border-radius: var(--content-border-radius); --panelmenu-panel-border-width: 1; /* @kind spacing */ --panelmenu-panel-color: var(--content-color); /* @kind color */ --panelmenu-panel-first-border-width: 1; /* @kind spacing */ --panelmenu-panel-first-top-border-radius: var(--content-border-radius); --panelmenu-panel-last-border-width: 1; /* @kind spacing */ --panelmenu-panel-last-bottom-border-radius: var(--content-border-radius); --panelmenu-panel-padding: 4; /* @kind spacing */ --panelmenu-submenu-icon-color: var(--navigation-submenu-icon-color); /* @kind color */ --panelmenu-submenu-icon-focus-color: var(--navigation-submenu-icon-focus-color); /* @kind color */ --panelmenu-submenu-indent: 14; /* @kind spacing */ --password-content-gap: 8; /* @kind spacing */ --password-icon-color: var(--form-field-icon-color); /* @kind color */ --password-meter-background: var(--content-border-color); /* @kind color */ --password-meter-border-radius: var(--content-border-radius); --password-meter-height: 12; /* @kind spacing */ --password-overlay-background: var(--overlay-popover-background); /* @kind color */ --password-overlay-border-color: var(--overlay-popover-border-color); /* @kind color */ --password-overlay-border-radius: var(--overlay-popover-border-radius); --password-overlay-color: var(--overlay-popover-color); /* @kind color */ --password-overlay-padding: var(--overlay-popover-padding); --password-strength-medium-background: var(--amber-500); /* @kind color */ --password-strength-strong-background: var(--green-500); /* @kind color */ --password-strength-weak-background: var(--red-500); /* @kind color */ --popover-arrow-offset: 20; /* @kind spacing */ --popover-background: var(--overlay-popover-background); /* @kind color */ --popover-border-color: var(--overlay-popover-border-color); /* @kind color */ --popover-border-radius: var(--overlay-popover-border-radius); --popover-color: var(--overlay-popover-color); /* @kind color */ --popover-content-padding: var(--overlay-popover-padding); --popover-gutter: 10; /* @kind spacing */ --primary-100: var(--sky-100); /* @kind color */ --primary-200: var(--sky-200); /* @kind color */ --primary-300: var(--sky-300); /* @kind color */ --primary-400-2: var(--sky-400-2); /* @kind color */ --primary-400: var(--sky-400); /* @kind color */ --primary-500-2: var(--sky-500-2); /* @kind color */ --primary-500: var(--sky-500); /* @kind color */ --primary-50: var(--sky-50); /* @kind color */ --primary-600: var(--sky-600); /* @kind color */ --primary-700: var(--sky-700); /* @kind color */ --primary-800: var(--sky-800); /* @kind color */ --primary-900: var(--sky-900); /* @kind color */ --primary-950: var(--sky-950); /* @kind color */ --primary-active-color: var(--active-sky-color); /* @kind color */ --primary-color-2: var(--primary-500-2); /* @kind color */ --primary-color: var(--primary-700); /* @kind color */ --primary-contrast-color: var(--surface-0); /* @kind color */ --primary-default: rgb(39,53,73); /* @kind color */ --primary-disabled-color: rgba(27,150,255,0.6); /* @kind color */ --primary-hover-color: var(--primary-800); /* @kind color */ --productsubscription-active-color: var(--primary-500); /* @kind color */ --productsubscription-color: var(--surface-200); /* @kind color */ --progressbar-background: var(--surface-200); /* @kind color */ --progressbar-border-radius: var(--content-border-radius); --progressbar-color: var(--text-primary-color); /* @kind color */ --progressbar-gap: var(--spacing-gap-8-2); --progressbar-height: 20; /* @kind spacing */ --progressbar-label-color: var(--primary-contrast-color); /* @kind color */ --progressbar-label-font-size: var(--font-size-caption); --progressbar-label-font-weight: var(--font-weight-semibold); --progressbar-value-background: var(--primary-color); /* @kind color */ --progressbar-value-color: var(--text-inverse-color); /* @kind color */ --progressspinner-color-accent: var(--primary-color); /* @kind color */ --progressspinner-color-four: var(--yellow-500); /* @kind color */ --progressspinner-color-one: var(--red-500); /* @kind color */ --progressspinner-color-three: var(--green-500); /* @kind color */ --progressspinner-color-two: var(--blue-500); /* @kind color */ --progressspinner-color-white: var(--white-0); /* @kind color */ --radiobutton-background: var(--form-field-background); /* @kind color */ --radiobutton-border-color: var(--form-field-border-color); /* @kind color */ --radiobutton-checked-background: var(--primary-color); /* @kind color */ --radiobutton-checked-border-color: var(--primary-color); /* @kind color */ --radiobutton-checked-disabled-border-color: var(--form-field-border-color); /* @kind color */ --radiobutton-checked-focus-border-color: var(--primary-color); /* @kind color */ --radiobutton-checked-hover-background: var(--primary-hover-color); /* @kind color */ --radiobutton-checked-hover-border-color: var(--primary-hover-color); /* @kind color */ --radiobutton-disabled-background: var(--form-field-disabled-background); /* @kind color */ --radiobutton-filled-background: var(--form-field-filled-background); /* @kind color */ --radiobutton-focus-border-color: var(--form-field-border-color); /* @kind color */ --radiobutton-focus-ring-color: var(--focus-ring-color); /* @kind color */ --radiobutton-focus-ring-offset: var(--focus-ring-offset); --radiobutton-focus-ring-width: var(--focus-ring-width); --radiobutton-gap: var(--spacing-gap-8-2); --radiobutton-group-options-gap-x: 12; /* @kind spacing */ --radiobutton-group-options-gap-y: 16; /* @kind spacing */ --radiobutton-height: 20; /* @kind spacing */ --radiobutton-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --radiobutton-icon-checked-color: var(--primary-contrast-color); /* @kind color */ --radiobutton-icon-checked-hover-color: var(--white-0); /* @kind color */ --radiobutton-icon-disabled-color: var(--icon-default-disabled-color); /* @kind color */ --radiobutton-icon-lg-size: 14; /* @kind spacing */ --radiobutton-icon-size: 12; /* @kind spacing */ --radiobutton-icon-sm-size: 8; /* @kind spacing */ --radiobutton-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --radiobutton-lg-height: 24; /* @kind spacing */ --radiobutton-lg-width: 24; /* @kind spacing */ --radiobutton-sm-height: 14; /* @kind spacing */ --radiobutton-sm-width: 14; /* @kind spacing */ --radiobutton-width: 20; /* @kind spacing */ --radius-4px: 4; /* @kind radius */ --radius-pill: 14; /* @kind radius */ --rating-focus-ring-color: var(--focus-ring-color); /* @kind color */ --rating-focus-ring-offset: var(--focus-ring-offset); --rating-focus-ring-width: var(--focus-ring-width); --rating-gap: var(--spacing-gap-4); --rating-icon-active-color: var(--primary-color); /* @kind color */ --rating-icon-color: var(--icon-default-color); /* @kind color */ --rating-icon-hover-color: var(--primary-color); /* @kind color */ --rating-icon-lg-size: 30; /* @kind spacing */ --rating-icon-size: 14; /* @kind spacing */ --red-100: rgb(255,247,247); /* @kind color */ --red-200: rgb(254,235,236); /* @kind color */ --red-300: rgb(255,219,220); /* @kind color */ --red-400-2: rgb(248,113,113); /* @kind color */ --red-400: rgb(255,205,206); /* @kind color */ --red-500-2: rgb(239,68,68); /* @kind color */ --red-500: rgb(253,189,190); /* @kind color */ --red-50: rgb(255,252,252); /* @kind color */ --red-600: rgb(235,142,144); /* @kind color */ --red-700: rgb(229,72,77); /* @kind color */ --red-800: rgb(220,62,66); /* @kind color */ --red-900: rgb(185,28,28); /* @kind color */ --red-950: rgb(100,23,35); /* @kind color */ --rule-background-color: var(--surface-50); /* @kind color */ --rule-border-color: var(--surface-500); /* @kind color */ --rule-border-radius: var(--border-radius-md); --rule-color: var(--text-primary-color); /* @kind color */ --rule-gap: var(--spacing-gap-8-2); --rule-group-gap: var(--spacing-gap-12); --rule-icon-color: var(--icon-default-color); /* @kind color */ --rule-icon-gap: var(--spacing-gap-12); --rule-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --rule-icon-size: var(--icon-size); --rule-nested-group-border-color: var(--surface-500); /* @kind color */ --rule-nested-group-gap: var(--spacing-gap-2); --rule-nested-group-padding-x: 32; /* @kind spacing */ --rule-padding-x: 12; /* @kind spacing */ --rule-padding-y: 8; /* @kind spacing */ --scrollpanel-bar-background: var(--gray-300); /* @kind color */ --scrollpanel-bar-border-radius: var(--border-radius-sm); --scrollpanel-bar-focus-ring-color: var(--focus-ring-color); /* @kind color */ --scrollpanel-bar-hover-color: var(--gray-400); /* @kind color */ --scrollpanel-bar-size: 9; /* @kind spacing */ --searchbar-background: var(--form-field-background); /* @kind color */ --searchbar-border-color: var(--form-field-border-color); /* @kind color */ --searchbar-border-hover-color: var(--form-field-hover-border-color); /* @kind color */ --searchbar-border-infocus-color: var(--form-field-focus-border-color); /* @kind color */ --searchbar-border-radius: var(--form-field-border-radius); --searchbar-close-icon-color: var(--icon-default-color); /* @kind color */ --searchbar-close-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --searchbar-close-icon-width: 32; /* @kind spacing */ --searchbar-filterbar-gap: var(--spacing-gap-24); --searchbar-gap: var(--spacing-gap-8-2); --searchbar-icon-color-2: var(--form-field-icon-color); /* @kind color */ --searchbar-icon-color: var(--form-field-icon-color); /* @kind color */ --searchbar-icon-hover-color: var(--form-field-icon-color); /* @kind color */ --searchbar-padding-x: var(--form-field-padding-x); --searchbar-padding-y: var(--form-field-padding-y); --secondary-default: rgb(223,228,232); /* @kind color */ --secondary-disabled: rgb(244,246,248); /* @kind color */ --secondary-hover: rgb(195,205,213); /* @kind color */ --select-background: var(--form-field-background); /* @kind color */ --select-border-color: var(--form-field-border-color); /* @kind color */ --select-border-radius: var(--form-field-border-radius); --select-checkmark-color: var(--list-option-color); /* @kind color */ --select-checkmark-gutter-end: 6; /* @kind spacing */ --select-checkmark-gutter-start: -6; /* @kind spacing */ --select-clear-icon-color: var(--form-field-icon-color); /* @kind color */ --select-color: var(--form-field-color); /* @kind color */ --select-content-gap: 16; /* @kind spacing */ --select-disabled-background: var(--form-field-disabled-background); /* @kind color */ --select-disabled-color: var(--form-field-disabled-color); /* @kind color */ --select-dropdown-color: var(--form-field-icon-color); /* @kind color */ --select-dropdown-width: 36; /* @kind spacing */ --select-filled-background: var(--form-field-filled-background); /* @kind color */ --select-filled-focus-background: var(--form-field-filled-focus-background); /* @kind color */ --select-filled-hover-background: var(--form-field-filled-hover-background); /* @kind color */ --select-filter-list-padding-x: 4; /* @kind spacing */ --select-filter-list-padding-y: 4; /* @kind spacing */ --select-filter-padding-x: 12; /* @kind spacing */ --select-filter-padding-y-bottom: 4; /* @kind spacing */ --select-filter-padding-y: 8; /* @kind spacing */ --select-filterbar-gap: 8; /* @kind spacing */ --select-focus-border-color: var(--form-field-focus-border-color); /* @kind color */ --select-focus-ring-color: var(--form-field-focus-ring-color); /* @kind color */ --select-focus-ring-offset: var(--form-field-focus-ring-offset); --select-focus-ring-width: var(--form-field-focus-ring-width); --select-gap: var(--form-field-gap); --select-gutter: 4; /* @kind spacing */ --select-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --select-icon-color: var(--icon-default-color); /* @kind color */ --select-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --select-invalid-placeholder-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --select-lg-font-size: var(--form-field-lg-font-size); --select-lg-padding-x: var(--form-field-lg-padding-x); --select-lg-padding-y: var(--form-field-lg-padding-y); --select-list-gap: var(--list-gap); --select-option-border-radius: var(--list-option-border-radius); --select-option-color: var(--list-option-color); /* @kind color */ --select-option-focus-background: var(--list-option-focus-background); /* @kind color */ --select-option-focus-color: var(--list-option-focus-color); /* @kind color */ --select-option-group-background: var(--list-option-group-background); /* @kind color */ --select-option-group-color: var(--list-option-group-color); /* @kind color */ --select-option-group-font-weight: var(--list-option-group-font-weight); --select-option-padding-x: 16; /* @kind spacing */ --select-option-padding-y: 8; /* @kind spacing */ --select-option-selected-background: var(--list-option-selected-background); /* @kind color */ --select-option-selected-color: var(--list-option-selected-color); /* @kind color */ --select-option-selected-focus-background: var(--list-option-selected-focus-background); /* @kind color */ --select-option-selected-focus-color: var(--list-option-selected-focus-color); /* @kind color */ --select-overlay-background: var(--overlay-select-background); /* @kind color */ --select-overlay-border-color: var(--overlay-select-border-color); /* @kind color */ --select-overlay-border-radius: var(--overlay-select-border-radius); --select-overlay-color: var(--overlay-select-color); /* @kind color */ --select-padding-x: var(--form-field-padding-x); --select-padding-y: var(--form-field-padding-y); --select-placeholder-color: var(--form-field-placeholder-color); /* @kind color */ --select-sm-font-size: var(--form-field-sm-font-size); --select-sm-padding-x: var(--form-field-sm-padding-x); --select-sm-padding-y: var(--form-field-sm-padding-y); --select-template-color: var(--textarea-placeholder-color); /* @kind color */ --selectbutton-background: var(--surface-100); /* @kind color */ --selectbutton-border-radius: var(--form-field-border-radius); --selectbutton-button-padding: 4; /* @kind spacing */ --selectbutton-color: var(--surface-500); /* @kind color */ --selectbutton-gap: 8; /* @kind spacing */ --selectbutton-icon-color: var(--icon-default-color); /* @kind color */ --selectbutton-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --selectbutton-padding: 4; /* @kind spacing */ --semantic-green-active: rgb(108,220,134); /* @kind color */ --semantic-green-default: rgb(46,204,113); /* @kind color */ --semantic-green-disabled: rgb(172,236,199); /* @kind color */ --semantic-green-hover: rgb(89,180,110); /* @kind color */ --semantic-orange-default: rgb(245,128,37); /* @kind color */ --semantic-red-active: rgb(245,93,71); /* @kind color */ --semantic-red-default: rgb(239,72,54); /* @kind color */ --semantic-red-disabled: rgb(249,204,197); /* @kind color */ --semantic-red-hover: rgb(201,76,58); /* @kind color */ --semantic-yellow-default: rgb(254,201,0); /* @kind color */ --sidenavigation-background: rgb(39,53,73); /* @kind color */ --sidenavigation-border-color: var(--surface-500); /* @kind color */ --sidenavigation-content-gap: 16; /* @kind spacing */ --sidenavigation-gap: 16; /* @kind spacing */ --sidenavigation-header-color: var(--text-secondary-color); /* @kind color */ --sidenavigation-header-padding: 12; /* @kind spacing */ --sidenavigation-icon-active-color: var(--primary-700); /* @kind color */ --sidenavigation-icon-color: var(--icon-white-color); /* @kind color */ --sidenavigation-icon-size: var(--icon-size); --sidenavigation-item-active-color: var(--primary-700); /* @kind color */ --sidenavigation-item-border-radius: var(--navigation-item-border-radius); --sidenavigation-item-color: var(--text-inverse-color); /* @kind color */ --sidenavigation-item-gap: var(--navigation-item-gap); --sidenavigation-item-group-gap: 4; /* @kind spacing */ --sidenavigation-item-hover-background: rgba(255,255,255,0.1); /* @kind color */ --sidenavigation-item-hover-color: var(--text-inverse-color); /* @kind color */ --sidenavigation-item-padding-x: var(--navigation-item-padding-x); --sidenavigation-item-padding-y: var(--navigation-item-padding-y); --sidenavigation-padding-x: 4; /* @kind spacing */ --skeleton-background: var(--foreground-200); /* @kind color */ --skeleton-border-radius: var(--content-border-radius); --sky-100: rgb(244,250,255); /* @kind color */ --sky-200: rgb(232,243,255); /* @kind color */ --sky-300: rgb(217,237,255); /* @kind color */ --sky-400-2: rgb(63,177,242); /* @kind color */ --sky-400: rgb(199,227,255); /* @kind color */ --sky-500-2: rgb(16,158,239); /* @kind color */ --sky-500: rgb(178,214,253); /* @kind color */ --sky-50: rgb(251,253,255); /* @kind color */ --sky-600-2: rgb(10,127,194); /* @kind color */ --sky-600: rgb(111,174,240); /* @kind color */ --sky-700: rgb(27,150,255); /* @kind color */ --sky-800: rgb(20,138,236); /* @kind color */ --sky-900: rgb(0,116,216); /* @kind color */ --sky-950: rgb(7,97,174); /* @kind color */ --sky-primeone-400: rgb(56,189,248); /* @kind color */ --sky-primeone-950: rgb(8,47,73); /* @kind color */ --slider-border-radius: 6; /* @kind radius */ --slider-gap: 16; /* @kind spacing */ --slider-handle-background: var(--content-border-color); /* @kind color */ --slider-handle-border-radius: 10; /* @kind radius */ --slider-handle-content-background: var(--white-0); /* @kind color */ --slider-handle-content-border-radius: 8; /* @kind radius */ --slider-handle-content-height: 16; /* @kind spacing */ --slider-handle-content-hover-background: var(--content-background); /* @kind color */ --slider-handle-content-width: 16; /* @kind spacing */ --slider-handle-focus-ring-color: var(--focus-ring-color); /* @kind color */ --slider-handle-focus-ring-offset: var(--focus-ring-offset); --slider-handle-focus-ring-width: var(--focus-ring-width); --slider-handle-height: 20; /* @kind spacing */ --slider-handle-hover-background: var(--content-border-color); /* @kind color */ --slider-handle-width: 20; /* @kind spacing */ --slider-range-background: var(--primary-color); /* @kind color */ --slider-track-background: var(--content-border-color); /* @kind color */ --slider-track-border-radius: var(--content-border-radius); --slider-track-size: 3; /* @kind spacing */ --spacing-gap-0: 0; /* @kind spacing */ --spacing-gap-12: 12; /* @kind spacing */ --spacing-gap-16-2: 16; /* @kind spacing */ --spacing-gap-16: var(--spacing-gap-16-2); --spacing-gap-24: 24; /* @kind spacing */ --spacing-gap-2: 2; /* @kind spacing */ --spacing-gap-32: 32; /* @kind spacing */ --spacing-gap-40: 40; /* @kind spacing */ --spacing-gap-48: 48; /* @kind spacing */ --spacing-gap-4: 4; /* @kind spacing */ --spacing-gap-56: 56; /* @kind spacing */ --spacing-gap-64: 64; /* @kind spacing */ --spacing-gap-8-2: 8; /* @kind spacing */ --spacing-gap-8: var(--spacing-gap-8-2); --spacing-padding-0: 0; /* @kind spacing */ --spacing-padding-12: 12; /* @kind spacing */ --spacing-padding-16: 16; /* @kind spacing */ --spacing-padding-24: 24; /* @kind spacing */ --spacing-padding-2: 2; /* @kind spacing */ --spacing-padding-32: 32; /* @kind spacing */ --spacing-padding-40: 40; /* @kind spacing */ --spacing-padding-48: 48; /* @kind spacing */ --spacing-padding-4: 4; /* @kind spacing */ --spacing-padding-56: 56; /* @kind spacing */ --spacing-padding-64: 64; /* @kind spacing */ --spacing-padding-8: 8; /* @kind spacing */ --splitter-handle-focus-ring-width: var(--focus-ring-width); --state-error: var(--semantic-red-default); /* @kind color */ --state-focus: var(--accent-default); /* @kind color */ --status-alert: var(--semantic-yellow-default); /* @kind color */ --stepper-button-gap: 8; /* @kind spacing */ --stepper-padding-y: 24; /* @kind spacing */ --stepper-separator-active-background: var(--primary-color); /* @kind color */ --stepper-separator-background: var(--content-border-color); /* @kind color */ --stepper-separator-size: 2; /* @kind spacing */ --stepper-step-gap: 16; /* @kind spacing */ --stepper-step-header-border-radius: var(--content-border-radius); --stepper-step-header-focus-ring-color-2: var(--focus-ring-color); /* @kind color */ --stepper-step-header-focus-ring-color-3: var(--focus-ring-color); /* @kind color */ --stepper-step-header-focus-ring-color-4: var(--focus-ring-color); /* @kind color */ --stepper-step-header-focus-ring-color-5: var(--focus-ring-color); /* @kind color */ --stepper-step-header-focus-ring-color-6: var(--focus-ring-color); /* @kind color */ --stepper-step-header-focus-ring-color: var(--focus-ring-color); /* @kind color */ --stepper-step-header-focus-ring-offset: var(--focus-ring-offset); --stepper-step-header-focus-ring-width: var(--focus-ring-width); --stepper-step-header-gap: 8; /* @kind spacing */ --stepper-step-header-padding: 0; /* @kind spacing */ --stepper-step-number-active-background: var(--content-background); /* @kind color */ --stepper-step-number-active-border-color: var(--content-border-color); /* @kind color */ --stepper-step-number-active-color: var(--primary-color); /* @kind color */ --stepper-step-number-background: var(--content-background); /* @kind color */ --stepper-step-number-border-color: var(--content-border-color); /* @kind color */ --stepper-step-number-border-radius: 14; /* @kind radius */ --stepper-step-number-color: var(--text-secondary-color); /* @kind color */ --stepper-step-number-font-size: var(--font-size-body-large); --stepper-step-number-font-weight: var(--font-weight-semibold); --stepper-step-number-size: 32; /* @kind spacing */ --stepper-step-padding: 8; /* @kind spacing */ --stepper-step-title-active-color: var(--primary-color); /* @kind color */ --stepper-step-title-color: var(--text-secondary-color); /* @kind color */ --stepper-step-title-font-weight: var(--font-weight-semibold); --stepper-steppanel-background: var(--content-background); /* @kind color */ --stepper-steppanel-color: var(--content-color); /* @kind color */ --stepper-steppanel-padding-x: 8; /* @kind spacing */ --stepper-steppanel-padding-y: 16; /* @kind spacing */ --surface-0-2: rgb(255,255,255); /* @kind color */ --surface-0: rgb(255,255,255); /* @kind color */ --surface-100: var(--gray-100); /* @kind color */ --surface-200: var(--gray-200); /* @kind color */ --surface-300: var(--gray-300); /* @kind color */ --surface-400: var(--gray-400); /* @kind color */ --surface-500-2: var(--gray-500-2); /* @kind color */ --surface-500: var(--gray-500); /* @kind color */ --surface-50: var(--gray-50); /* @kind color */ --surface-600-2: var(--gray-600-2); /* @kind color */ --surface-600: var(--gray-600); /* @kind color */ --surface-700: var(--gray-700); /* @kind color */ --surface-800: var(--gray-800); /* @kind color */ --surface-900: var(--gray-900); /* @kind color */ --surface-950: var(--gray-950); /* @kind color */ --tabs-active-background: rgba(0,0,0,0); /* @kind color */ --tabs-active-bar-background: var(--primary-color); /* @kind color */ --tabs-active-bar-bottom: -1; /* @kind other */ --tabs-active-bar-height: 1; /* @kind spacing */ --tabs-active-border-color: var(--primary-color); /* @kind color */ --tabs-active-color: var(--primary-color); /* @kind color */ --tabs-border-color: var(--content-border-color); /* @kind color */ --tabs-color: var(--text-secondary-color); /* @kind color */ --tabs-focus-ring-color: var(--focus-ring-color); /* @kind color */ --tabs-focus-ring-width: var(--focus-ring-width); --tabs-hover-background: rgba(0,0,0,0); /* @kind color */ --tabs-hover-border-color: var(--content-border-color); /* @kind color */ --tabs-hover-color: var(--text-primary-color); /* @kind color */ --tabs-info-icon-color: var(--blue-900); /* @kind color */ --tabs-marketing-icon-color: var(--orange-900); /* @kind color */ --tabs-nav-button-background: var(--content-background); /* @kind color */ --tabs-nav-button-color: var(--text-secondary-color); /* @kind color */ --tabs-nav-button-focus-ring-color: var(--focus-ring-color); /* @kind color */ --tabs-nav-button-focus-ring-offset: -1; /* @kind spacing */ --tabs-nav-button-focus-ring-width: var(--focus-ring-width); --tabs-nav-button-hover-color: var(--text-primary-color); /* @kind color */ --tabs-nav-button-width: 35; /* @kind spacing */ --tabs-tab-font-weight-2: 600; /* @kind font */ --tabs-tab-font-weight: 600; /* @kind font */ --tabs-tablist-background: var(--content-background); /* @kind color */ --tabs-tablist-border-color: var(--content-border-color); /* @kind color */ --tabs-tablist-border-width: 1; /* @kind spacing */ --tabs-tabpanel-background: var(--content-background); /* @kind color */ --tabs-tabpanel-color: var(--content-color); /* @kind color */ --tabs-tabpanel-focus-ring-color: var(--focus-ring-color); /* @kind color */ --tabs-tabpanel-focus-ring-offset: var(--focus-ring-offset); --tabs-tabpanel-focus-ring-width: var(--focus-ring-width); --tabs-warning-icon-color: var(--yellow-900); /* @kind color */ --tag-ai-background: var(--violet-200); /* @kind color */ --tag-ai-color: var(--violet-900); /* @kind color */ --tag-border-radius: var(--content-border-radius); --tag-contrast-background: var(--foreground-700); /* @kind color */ --tag-contrast-color: var(--text-inverse-color); /* @kind color */ --tag-danger-background: var(--red-200); /* @kind color */ --tag-danger-color: var(--red-900); /* @kind color */ --tag-figma-container-background: rgba(0,0,0,0); /* @kind color */ --tag-font-height: 13; /* @kind font */ --tag-font-size-2: var(--font-size-caption); --tag-font-size: var(--font-size-caption); --tag-font-weight-2: var(--font-weight-semibold); --tag-font-weight: var(--font-weight-semibold); --tag-gap: 4; /* @kind spacing */ --tag-icon-size: 14; /* @kind spacing */ --tag-info-background: var(--blue-200); /* @kind color */ --tag-info-color: var(--blue-900); /* @kind color */ --tag-marketing-background: var(--orange-200); /* @kind color */ --tag-marketing-color: var(--orange-900); /* @kind color */ --tag-padding-x: 8; /* @kind spacing */ --tag-padding-y: 4; /* @kind spacing */ --tag-primary-background: var(--primary-200); /* @kind color */ --tag-primary-color: var(--primary-900); /* @kind color */ --tag-rounded-border-radius: var(--border-radius-lg); --tag-secondary-background: var(--surface-200); /* @kind color */ --tag-secondary-color: var(--foreground-700); /* @kind color */ --tag-success-background: var(--green-200); /* @kind color */ --tag-success-color: var(--green-900); /* @kind color */ --tag-warn-background: var(--yellow-200); /* @kind color */ --tag-warn-color: var(--yellow-900); /* @kind color */ --template-background: var(--white-0); /* @kind color */ --template-content-gap: 32; /* @kind spacing */ --template-content-padding-x: 32; /* @kind spacing */ --template-content-padding-y: 32; /* @kind spacing */ --text-body-default: var(--navy-900-2); /* @kind color */ --text-body-muted: var(--surface-500); /* @kind color */ --text-color-default: var(--primary-default); /* @kind color */ --text-color-disabled: var(--secondary-hover); /* @kind color */ --text-color-error: var(--semantic-red-default); /* @kind color */ --text-color-light: var(--neutral-white); /* @kind color */ --text-color-link: var(--accent-default); /* @kind color */ --text-color-placeholder: var(--neutral-dark-gray); /* @kind color */ --text-destructive-color: var(--red-900); /* @kind color */ --text-destructive-disabled-color: rgba(185,28,28,0.6); /* @kind color */ --text-destructive-hover-color: var(--red-950); /* @kind color */ --text-error-default: var(--red-500-2); /* @kind color */ --text-hyperlink-default: var(--primary-color-2); /* @kind color */ --text-inverse-color: var(--white-0); /* @kind color */ --text-link-color: var(--primary-900); /* @kind color */ --text-link-disabled-color: rgba(0,116,216,0.6); /* @kind color */ --text-link-hover-color: var(--primary-950); /* @kind color */ --text-placeholder-default: var(--navy-500-2); /* @kind color */ --text-primary-color: var(--foreground-950); /* @kind color */ --text-primary-disabled-color: rgba(33,43,53,0.6); /* @kind color */ --text-primary-hover-color: var(--foreground-950); /* @kind color */ --text-secondary-color: var(--foreground-900); /* @kind color */ --text-secondary-hover-color: rgb(99,115,129); /* @kind color */ --text-white-default: var(--surface-0-2); /* @kind color */ --textarea-background: var(--form-field-background); /* @kind color */ --textarea-border-color: var(--form-field-border-color); /* @kind color */ --textarea-border-radius: var(--form-field-border-radius); --textarea-color: var(--form-field-color); /* @kind color */ --textarea-disabled-background: var(--form-field-disabled-background); /* @kind color */ --textarea-disabled-color: var(--form-field-disabled-color); /* @kind color */ --textarea-filled-background: var(--form-field-filled-background); /* @kind color */ --textarea-filled-focus-background: var(--form-field-filled-focus-background); /* @kind color */ --textarea-filled-hover-background: var(--form-field-filled-hover-background); /* @kind color */ --textarea-focus-border-color: var(--form-field-focus-border-color); /* @kind color */ --textarea-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --textarea-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --textarea-invalid-placeholder-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --textarea-lg-font-size: var(--form-field-lg-font-size); --textarea-lg-padding-x: var(--form-field-lg-padding-x); --textarea-lg-padding-y: var(--form-field-lg-padding-y); --textarea-padding-x: var(--form-field-padding-x); --textarea-padding-y: var(--form-field-padding-y); --textarea-placeholder-color: var(--form-field-placeholder-color); /* @kind color */ --textarea-sm-font-size: var(--form-field-sm-font-size); --textarea-sm-padding-x: var(--form-field-sm-padding-x); --textarea-sm-padding-y: var(--form-field-sm-padding-y); --tieredmenu-background: var(--content-background); /* @kind color */ --tieredmenu-border-color: var(--content-border-color); /* @kind color */ --tieredmenu-border-radius: var(--content-border-radius); --tieredmenu-color: var(--content-color); /* @kind color */ --tieredmenu-item-active-background: var(--navigation-item-active-background); /* @kind color */ --tieredmenu-item-active-color: var(--navigation-item-active-color); /* @kind color */ --tieredmenu-item-border-radius: var(--navigation-item-border-radius); --tieredmenu-item-color: var(--navigation-item-color); /* @kind color */ --tieredmenu-item-focus-background: var(--navigation-item-focus-background); /* @kind color */ --tieredmenu-item-focus-color: var(--navigation-item-focus-color); /* @kind color */ --tieredmenu-item-gap: var(--navigation-item-gap); --tieredmenu-item-icon-active-color: var(--navigation-item-icon-active-color); /* @kind color */ --tieredmenu-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --tieredmenu-item-icon-focus-color: var(--navigation-item-icon-focus-color); /* @kind color */ --tieredmenu-list-gap: var(--navigation-list-gap); --tieredmenu-separator-border-color: var(--content-border-color); /* @kind color */ --tieredmenu-submenu-icon-active-color: var(--navigation-submenu-icon-active-color); /* @kind color */ --tieredmenu-submenu-icon-color: var(--navigation-submenu-icon-color); /* @kind color */ --tieredmenu-submenu-icon-focus-color: var(--navigation-submenu-icon-focus-color); /* @kind color */ --tieredmenu-submenu-icon-size: var(--navigation-submenu-icon-size); --tieredmenu-submenu-mobile-indent: 14; /* @kind spacing */ --timeline-editor-content-gap: 8; /* @kind spacing */ --timeline-event-connector-color: var(--content-border-color); /* @kind color */ --timeline-event-connector-size: 2; /* @kind spacing */ --timeline-event-marker-background: var(--content-background); /* @kind color */ --timeline-event-marker-border-color: var(--content-border-color); /* @kind color */ --timeline-event-marker-border-radius: 8; /* @kind radius */ --timeline-event-marker-content-background: var(--primary-color); /* @kind color */ --timeline-event-marker-content-border-radius-2: 3; /* @kind radius */ --timeline-event-marker-content-border-radius: 2.625; /* @kind radius */ --timeline-event-marker-content-size-2: 6; /* @kind spacing */ --timeline-event-marker-content-size: 5.25; /* @kind spacing */ --timeline-event-marker-icon-border-radius: 16; /* @kind radius */ --timeline-event-marker-icon-size: 32; /* @kind spacing */ --timeline-event-marker-size-2: 18; /* @kind spacing */ --timeline-event-marker-size: 15.75; /* @kind spacing */ --timeline-event-min-height: 70; /* @kind spacing */ --timeline-horizontal-event-content-padding: var(--spacing-padding-16); --timeline-vertical-content-padding: 28; /* @kind spacing */ --titleblock-description-color: var(--text-secondary-color); /* @kind color */ --titleblock-gap: var(--spacing-gap-24); --titleblock-header-color: var(--text-primary-color); /* @kind color */ --titleblock-header-gap-x: var(--spacing-gap-16-2); --titleblock-header-gap-y: var(--spacing-gap-8-2); --titleblock-header-icon-color: var(--icon-default-color); /* @kind color */ --titleblock-header-item-gap: var(--spacing-gap-8-2); --titleblock-heading-subtext-gap: 8; /* @kind spacing */ --toast-blur: 1.5; /* @kind other */ --toast-border-radius: var(--content-border-radius); --toast-border-width: 1; /* @kind spacing */ --toast-close-button-border-radius: 14; /* @kind radius */ --toast-close-button-focus-ring-offset: var(--focus-ring-offset); --toast-close-button-focus-ring-width: var(--focus-ring-width); --toast-close-button-height: 24; /* @kind spacing */ --toast-close-button-width: 24; /* @kind spacing */ --toast-close-icon-size: 18; /* @kind spacing */ --toast-content-gap: 4; /* @kind spacing */ --toast-content-padding: var(--overlay-popover-padding); --toast-contrast-background: var(--foreground-700); /* @kind color */ --toast-contrast-border-color: var(--foreground-700); /* @kind color */ --toast-contrast-close-button-focus-ring-color: var(--foreground-700); /* @kind color */ --toast-contrast-close-button-hover-background: var(--foreground-800); /* @kind color */ --toast-contrast-color: var(--text-inverse-color); /* @kind color */ --toast-contrast-detail-color: var(--text-inverse-color); /* @kind color */ --toast-detail-font-size: var(--font-size-body); --toast-detail-font-weight: var(--font-weight-regular); --toast-error-background: var(--red-100); /* @kind color */ --toast-error-border-color: var(--red-500); /* @kind color */ --toast-error-close-button-focus-ring-color: var(--red-700); /* @kind color */ --toast-error-close-button-hover-background: var(--red-200); /* @kind color */ --toast-error-color: var(--red-900); /* @kind color */ --toast-error-detail-color: var(--text-primary-color); /* @kind color */ --toast-gap: 8; /* @kind spacing */ --toast-icon-size: 18; /* @kind spacing */ --toast-info-background: var(--blue-100); /* @kind color */ --toast-info-border-color: var(--blue-500); /* @kind color */ --toast-info-close-button-focus-ring-color: var(--blue-700); /* @kind color */ --toast-info-close-button-hover-background: var(--blue-200); /* @kind color */ --toast-info-color: var(--blue-900); /* @kind color */ --toast-info-detail-color: var(--text-primary-color); /* @kind color */ --toast-secondary-background: var(--surface-100); /* @kind color */ --toast-secondary-border-color: var(--surface-500); /* @kind color */ --toast-secondary-close-button-focus-ring-color: var(--foreground-700); /* @kind color */ --toast-secondary-close-button-hover-background: var(--foreground-200); /* @kind color */ --toast-secondary-color: var(--text-primary-color); /* @kind color */ --toast-secondary-detail-color: var(--text-primary-color); /* @kind color */ --toast-success-background: var(--green-100); /* @kind color */ --toast-success-border-color: var(--green-500); /* @kind color */ --toast-success-close-button-focus-ring-color: var(--green-700); /* @kind color */ --toast-success-close-button-hover-background: var(--green-200); /* @kind color */ --toast-success-color: var(--green-900); /* @kind color */ --toast-success-detail-color: var(--text-primary-color); /* @kind color */ --toast-summary-font-size: var(--font-size-body-large); --toast-summary-font-weight: var(--font-weight-semibold); --toast-text-gap: 4; /* @kind spacing */ --toast-warn-background: var(--yellow-100); /* @kind color */ --toast-warn-border-color: var(--yellow-500); /* @kind color */ --toast-warn-close-button-focus-ring-color: var(--yellow-700); /* @kind color */ --toast-warn-close-button-hover-background: var(--yellow-200); /* @kind color */ --toast-warn-color: var(--yellow-900); /* @kind color */ --toast-warn-detail-color: var(--text-primary-color); /* @kind color */ --toast-width: 400; /* @kind spacing */ --togglebutton-background: var(--surface-200); /* @kind color */ --togglebutton-border-color: var(--surface-200); /* @kind color */ --togglebutton-border-radius: var(--content-border-radius); --togglebutton-checked-background: var(--surface-200); /* @kind color */ --togglebutton-checked-border-color: var(--surface-200); /* @kind color */ --togglebutton-checked-color: var(--form-field-label-color); /* @kind color */ --togglebutton-color: var(--text-secondary-color); /* @kind color */ --togglebutton-content-border-radius: var(--content-border-radius); --togglebutton-content-checked-background: var(--form-field-background); /* @kind color */ --togglebutton-content-left: 4; /* @kind other */ --togglebutton-content-top: 4; /* @kind other */ --togglebutton-disabled-background: var(--form-field-disabled-background); /* @kind color */ --togglebutton-disabled-border-color: var(--form-field-disabled-background); /* @kind color */ --togglebutton-disabled-color: var(--form-field-disabled-color); /* @kind color */ --togglebutton-figma-content-padding-x: 12; /* @kind spacing */ --togglebutton-figma-content-padding-y: 4; /* @kind spacing */ --togglebutton-focus-ring-color: var(--focus-ring-color); /* @kind color */ --togglebutton-focus-ring-offset: var(--focus-ring-offset); --togglebutton-focus-ring-width: var(--focus-ring-width); --togglebutton-font-weight: var(--font-weight-semibold); --togglebutton-gap: 8; /* @kind spacing */ --togglebutton-hover-background: var(--surface-300); /* @kind color */ --togglebutton-hover-color: var(--text-secondary-color); /* @kind color */ --togglebutton-icon-checked-color: var(--icon-default-color); /* @kind color */ --togglebutton-icon-color: var(--icon-default-color); /* @kind color */ --togglebutton-icon-disabled-color: var(--icon-default-disabled-color); /* @kind color */ --togglebutton-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --togglebutton-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --togglebutton-lg-font-size: var(--form-field-lg-font-size); --togglebutton-lg-padding: 4; /* @kind spacing */ --togglebutton-lg-zadding-x: 20; /* @kind other */ --togglebutton-lg-zadding-y: 10; /* @kind other */ --togglebutton-padding: 4; /* @kind spacing */ --togglebutton-sm-font-size: var(--form-field-sm-font-size); --togglebutton-sm-padding: 4; /* @kind spacing */ --togglebutton-sm-zadding-x: 12; /* @kind other */ --togglebutton-sm-zadding-y: 6; /* @kind other */ --togglebutton-zadding-x: 16; /* @kind other */ --togglebutton-zadding-y: 8; /* @kind other */ --togglebuttongroup-gap: 8; /* @kind spacing */ --togglebuttongroup-padding-x: 16; /* @kind spacing */ --togglebuttongroup-padding-y: 8; /* @kind spacing */ --toggleswitch-background: var(--surface-500); /* @kind color */ --toggleswitch-border-color: var(--form-field-border-color); /* @kind color */ --toggleswitch-border-radius: 30; /* @kind radius */ --toggleswitch-border-width: 1; /* @kind spacing */ --toggleswitch-checked-background: var(--green-700); /* @kind color */ --toggleswitch-checked-border-color: var(--green-700); /* @kind color */ --toggleswitch-checked-hover-background: var(--green-800); /* @kind color */ --toggleswitch-checked-hover-border-color: var(--green-800); /* @kind color */ --toggleswitch-disabled-background: var(--form-field-disabled-background); /* @kind color */ --toggleswitch-focus-ring-color: var(--focus-ring-color); /* @kind color */ --toggleswitch-focus-ring-offset: var(--focus-ring-offset); --toggleswitch-focus-ring-width: var(--focus-ring-width); --toggleswitch-gap: var(--spacing-gap-4); --toggleswitch-handle-background: var(--white-0); /* @kind color */ --toggleswitch-handle-border-radius: 8; /* @kind radius */ --toggleswitch-handle-checked-background: var(--white-0); /* @kind color */ --toggleswitch-handle-checked-color: var(--green-500); /* @kind color */ --toggleswitch-handle-checked-hover-background: var(--white-0); /* @kind color */ --toggleswitch-handle-checked-hover-color: var(--green-600); /* @kind color */ --toggleswitch-handle-color: var(--text-secondary-color); /* @kind color */ --toggleswitch-handle-disabled-background: var(--icon-default-disabled-color); /* @kind color */ --toggleswitch-handle-hover-background: var(--white-0); /* @kind color */ --toggleswitch-handle-hover-color: var(--text-primary-color); /* @kind color */ --toggleswitch-handle-size: 16; /* @kind spacing */ --toggleswitch-height: 24; /* @kind spacing */ --toggleswitch-hover-background: var(--surface-600); /* @kind color */ --toggleswitch-hover-border-color: var(--surface-600); /* @kind color */ --toggleswitch-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --toggleswitch-label-font-size: var(--font-size-body-large); --toggleswitch-width: 40; /* @kind spacing */ --toolbar-background: var(--content-background); /* @kind color */ --toolbar-border-color: var(--content-border-color); /* @kind color */ --toolbar-border-radius: var(--content-border-radius); --toolbar-color: var(--content-color); /* @kind color */ --toolbar-gap: var(--spacing-gap-8-2); --toolbar-padding: var(--spacing-padding-12); --tooltip-background: var(--foreground-950); /* @kind color */ --tooltip-border-radius: var(--overlay-popover-border-radius); --tooltip-color: var(--text-inverse-color); /* @kind color */ --tooltip-gap: 8; /* @kind spacing */ --tooltip-gutter: 4; /* @kind spacing */ --tooltip-max-width: 200; /* @kind spacing */ --tooltip-padding-x: 8; /* @kind spacing */ --tooltip-padding-y: 4; /* @kind spacing */ --tree-background: var(--content-background); /* @kind color */ --tree-color: var(--content-color); /* @kind color */ --tree-filter-margin: 8; /* @kind spacing */ --tree-gap: var(--spacing-gap-2); --tree-indent: 16; /* @kind spacing */ --tree-loading-icon-size: 32; /* @kind spacing */ --tree-node-border-radius: var(--content-border-radius); --tree-node-color: var(--text-primary-color); /* @kind color */ --tree-node-focus-ring-color: var(--focus-ring-color); /* @kind color */ --tree-node-focus-ring-offset: -1; /* @kind spacing */ --tree-node-focus-ring-width: var(--focus-ring-width); --tree-node-gap: var(--spacing-gap-4); --tree-node-hover-background: var(--content-hover-background); /* @kind color */ --tree-node-hover-color: var(--content-hover-color-2); /* @kind color */ --tree-node-icon-color: var(--text-secondary-color); /* @kind color */ --tree-node-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --tree-node-icon-selected-color: var(--highlight-color); /* @kind color */ --tree-node-selected-background: var(--highlight-background); /* @kind color */ --tree-node-selected-color: var(--highlight-color); /* @kind color */ --tree-node-toggle-button-border-radius: 14; /* @kind radius */ --tree-node-toggle-button-color: var(--icon-default-color); /* @kind color */ --tree-node-toggle-button-focus-ring-color: var(--focus-ring-color); /* @kind color */ --tree-node-toggle-button-focus-ring-offset: var(--focus-ring-offset); --tree-node-toggle-button-focus-ring-width: var(--focus-ring-width); --tree-node-toggle-button-hover-background: var(--content-hover-background); /* @kind color */ --tree-node-toggle-button-hover-color: var(--icon-default-hover-color); /* @kind color */ --tree-node-toggle-button-selected-hover-background: var(--content-background); /* @kind color */ --tree-node-toggle-button-selected-hover-color: var(--primary-color); /* @kind color */ --tree-node-toggle-button-size: 24; /* @kind spacing */ --tree-padding: var(--spacing-padding-16); --treetable-row-selected-background: var(--highlight-background); /* @kind color */ --treetable-row-selected-color: var(--highlight-color); /* @kind color */ --violet-100: rgb(250,248,255); /* @kind color */ --violet-200: rgb(244,240,254); /* @kind color */ --violet-300: rgb(235,228,255); /* @kind color */ --violet-400: rgb(225,217,255); /* @kind color */ --violet-500: rgb(212,202,254); /* @kind color */ --violet-50: rgb(253,252,254); /* @kind color */ --violet-600: rgb(170,153,236); /* @kind color */ --violet-700: rgb(110,86,207); /* @kind color */ --violet-800: rgb(101,77,196); /* @kind color */ --violet-900: rgb(101,80,185); /* @kind color */ --violet-950: rgb(47,38,95); /* @kind color */ --weight: var(--font-weight-semibold); --white-0: rgb(255,255,255); /* @kind color */ --yellow-100: rgb(254,252,233); /* @kind color */ --yellow-200: rgb(255,250,184); /* @kind color */ --yellow-300: rgb(255,243,148); /* @kind color */ --yellow-400: rgb(255,231,112); /* @kind color */ --yellow-500: rgb(243,215,104); /* @kind color */ --yellow-50: rgb(253,253,249); /* @kind color */ --yellow-600: rgb(213,174,57); /* @kind color */ --yellow-700: rgb(255,230,41); /* @kind color */ --yellow-800: rgb(255,220,0); /* @kind color */ --yellow-900: rgb(127,95,1); /* @kind color */ --yellow-950: rgb(71,59,31); /* @kind color */ --zinc-100: rgb(244,244,245); /* @kind color */ --zinc-200: rgb(228,228,231); /* @kind color */ --zinc-300: rgb(212,212,216); /* @kind color */ --zinc-400: rgb(161,161,170); /* @kind color */ --zinc-500: rgb(113,113,122); /* @kind color */ --zinc-50: rgb(250,250,250); /* @kind color */ --zinc-600: rgb(82,82,91); /* @kind color */ --zinc-700: rgb(63,63,70); /* @kind color */ --zinc-800: rgb(39,39,42); /* @kind color */ --zinc-900: rgb(24,24,27); /* @kind color */ --zinc-950: rgb(9,9,11); /* @kind color */ } :root[data-theme="dark"], .dark { --accordion-content-background: var(--content-background); /* @kind color */ --accordion-content-border-color: var(--content-border-color); /* @kind color */ --accordion-content-border-width: 0; /* @kind spacing */ --accordion-content-color: var(--text-primary-color); /* @kind color */ --accordion-content-padding-x: var(--spacing-padding-24); --accordion-content-padding-y: var(--spacing-padding-24); --accordion-header-active-background: var(--content-background); /* @kind color */ --accordion-header-active-color: var(--text-primary-color); /* @kind color */ --accordion-header-active-hover-background: var(--content-hover-background); /* @kind color */ --accordion-header-background: var(--content-background); /* @kind color */ --accordion-header-border-color: var(--content-border-color); /* @kind color */ --accordion-header-border-radius: 0; /* @kind radius */ --accordion-header-border-width: 1; /* @kind spacing */ --accordion-header-color: var(--text-primary-color); /* @kind color */ --accordion-header-first-border-width: 0; /* @kind spacing */ --accordion-header-first-top-border-radius: var(--content-border-radius); --accordion-header-focus-ring-color: var(--focus-ring-color); /* @kind color */ --accordion-header-focus-ring-offset: var(--focus-ring-offset); --accordion-header-focus-ring-width: var(--focus-ring-width); --accordion-header-font-size: var(--font-size-body); --accordion-header-font-weight: var(--font-weight-semibold); --accordion-header-hover-background: var(--content-hover-background); /* @kind color */ --accordion-header-hover-color: var(--text-primary-hover-color); /* @kind color */ --accordion-header-last-active-bottom-border-radius: 0; /* @kind radius */ --accordion-header-last-bottom-border-radius: var(--content-border-radius); --accordion-header-padding-x: var(--spacing-padding-24); --accordion-header-padding-y: var(--spacing-padding-24); --accordion-header-toggle-icon-active-color: var(--icon-default-color); /* @kind color */ --accordion-header-toggle-icon-active-hover-color: var(--icon-default-hover-color); /* @kind color */ --accordion-header-toggle-icon-color: var(--icon-default-color); /* @kind color */ --accordion-header-toggle-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --accordion-panel-border-color: var(--content-border-color); /* @kind color */ --accordion-panel-border-width: 1; /* @kind spacing */ --active-blue-color: rgb(15,76,190); /* @kind color */ --active-gray-color: rgb(138,138,138); /* @kind color */ --active-green-color: rgb(56,160,111); /* @kind color */ --active-navy-color: rgb(79,93,106); /* @kind color */ --active-orange-color: rgb(240,105,15); /* @kind color */ --active-overlay: rgba(255,255,255,0.06); /* @kind color */ --active-red-color: rgb(222,74,77); /* @kind color */ --active-sky-color: rgb(34,145,237); /* @kind color */ --active-violet-color: rgb(132,113,208); /* @kind color */ --active-yellow-color: rgb(255,222,15); /* @kind color */ --alertbanner-close-button-border-radius: 14; /* @kind radius */ --alertbanner-close-button-color: var(--icon-white-color); /* @kind color */ --alertbanner-close-button-focus-ring-color: var(--surface-950); /* @kind color */ --alertbanner-close-button-focus-ring-offset: var(--focus-ring-offset); --alertbanner-close-button-focus-ring-width: var(--focus-ring-width); --alertbanner-close-button-height: 24; /* @kind spacing */ --alertbanner-close-button-hover-background: var(--surface-100); /* @kind color */ --alertbanner-close-button-width: 24; /* @kind spacing */ --alertbanner-close-icon-size: 16; /* @kind spacing */ --alertbanner-content-gap: var(--spacing-gap-8-2); --alertbanner-content-padding-x: var(--spacing-padding-24); --alertbanner-content-padding-y: var(--spacing-padding-8); --alertbanner-contrast-background: var(--foreground-700); /* @kind color */ --alertbanner-contrast-color: var(--text-inverse-color); /* @kind color */ --alertbanner-danger-background: var(--red-700); /* @kind color */ --alertbanner-danger-color: var(--text-inverse-color); /* @kind color */ --alertbanner-font-size: var(--font-size-body); --alertbanner-font-weight: var(--font-weight-semibold); --alertbanner-icon-size: 18; /* @kind spacing */ --alertbanner-info-background: var(--blue-700); /* @kind color */ --alertbanner-info-color: var(--text-inverse-color); /* @kind color */ --alertbanner-marketing-background: var(--orange-600); /* @kind color */ --alertbanner-marketing-color: var(--text-inverse-color); /* @kind color */ --alertbanner-secondary-background: var(--surface-200); /* @kind color */ --alertbanner-secondary-close-button-focus-ring-color: var(--surface-300); /* @kind color */ --alertbanner-secondary-close-button-hover-background: var(--surface-300); /* @kind color */ --alertbanner-secondary-color: var(--text-primary-color); /* @kind color */ --alertbanner-success-background: var(--green-700); /* @kind color */ --alertbanner-success-color: var(--text-inverse-color); /* @kind color */ --alertbanner-warn-background: var(--yellow-900); /* @kind color */ --alertbanner-warn-color: var(--text-inverse-color); /* @kind color */ --amber-400: rgb(251,191,36); /* @kind color */ --amber-500: rgb(245,158,11); /* @kind color */ --amber-600: rgb(217,119,6); /* @kind color */ --amber-900: rgb(120,53,15); /* @kind color */ --anchor-gutter: 4; /* @kind spacing */ --app-card-background: var(--content-background); /* @kind color */ --app-font-size: var(--font-size-body); --app-lg-font-size: var(--font-size-heading-small); --app-lg-line-height: 24; /* @kind font */ --app-sm-font-size: var(--font-size-caption); --app-sm-line-height: 20; /* @kind font */ --autocomplete-chip-focus-color: var(--white-0); /* @kind color */ --autocomplete-dropdown-active-background: var(--surface-600); /* @kind color */ --autocomplete-focus-ring-color: var(--form-field-focus-ring-color); /* @kind color */ --autocomplete-option-group-background: var(--list-option-group-background); /* @kind color */ --avatar-background: var(--content-border-color); /* @kind color */ --avatar-border-radius: var(--content-border-radius); --avatar-color: var(--content-color); /* @kind color */ --avatar-figma-circle-border-radius: 14; /* @kind radius */ --avatar-figma-circle-lg-border-radius: 24; /* @kind radius */ --avatar-figma-circle-xl-border-radius: 32; /* @kind radius */ --avatar-font-size: var(--font-size-body); --avatar-group-border-color: var(--content-background); /* @kind color */ --avatar-group-offset: -12; /* @kind spacing */ --avatar-height: 32; /* @kind spacing */ --avatar-icon-size: 14; /* @kind spacing */ --avatar-lg-font-size: var(--font-size-heading-small); --avatar-lg-group-offset: -14; /* @kind spacing */ --avatar-lg-height: 42; /* @kind spacing */ --avatar-lg-icon-size: 24; /* @kind spacing */ --avatar-lg-width: 42; /* @kind spacing */ --avatar-width: 32; /* @kind spacing */ --avatar-xl-font-size: var(--font-size-heading-medium); --avatar-xl-group-offset: -24; /* @kind spacing */ --avatar-xl-height: 56; /* @kind spacing */ --avatar-xl-icon-size: 32; /* @kind spacing */ --avatar-xl-width: 56; /* @kind spacing */ --background: rgba(0,0,0,0); /* @kind color */ --badge-border-radius: var(--border-radius-md); --badge-contrast-background: var(--foreground-700); /* @kind color */ --badge-contrast-color: var(--text-inverse-color); /* @kind color */ --badge-danger-background: var(--red-700); /* @kind color */ --badge-danger-color: var(--text-inverse-color); /* @kind color */ --badge-default-border-radius: 10; /* @kind radius */ --badge-default-height: 20; /* @kind spacing */ --badge-default-min-width: 20; /* @kind spacing */ --badge-font-height: 11; /* @kind font */ --badge-font-size: var(--font-size-caption); --badge-font-weight: var(--font-weight-semibold); --badge-info-background: var(--blue-700); /* @kind color */ --badge-info-color: var(--text-inverse-color); /* @kind color */ --badge-lg-border-radius: 12; /* @kind radius */ --badge-lg-font-height: 18; /* @kind font */ --badge-lg-font-size: var(--font-size-body); --badge-lg-height: 24; /* @kind spacing */ --badge-lg-min-width: 24; /* @kind spacing */ --badge-primary-background: var(--primary-color); /* @kind color */ --badge-primary-color: var(--text-inverse-color); /* @kind color */ --badge-secondary-background: var(--surface-200); /* @kind color */ --badge-secondary-color: var(--text-primary-color); /* @kind color */ --badge-sm-border-radius: 8; /* @kind radius */ --badge-sm-font-height: 8; /* @kind font */ --badge-sm-font-size: 10; /* @kind font */ --badge-sm-height: 16; /* @kind spacing */ --badge-sm-min-width: 16; /* @kind spacing */ --badge-success-background: var(--green-700); /* @kind color */ --badge-success-color: var(--text-inverse-color); /* @kind color */ --badge-warn-background: var(--orange-700); /* @kind color */ --badge-warn-color: var(--text-inverse-color); /* @kind color */ --badge-xl-border-radius: 14; /* @kind radius */ --badge-xl-font-height: 18; /* @kind font */ --badge-xl-font-size: var(--font-size-body); --badge-xl-height: 28; /* @kind spacing */ --badge-xl-min-width: 28; /* @kind spacing */ --blue-100: rgb(12,24,44); /* @kind color */ --blue-200: rgb(5,35,87); /* @kind color */ --blue-300: rgb(0,42,119); /* @kind color */ --blue-400: rgb(0,53,140); /* @kind color */ --blue-500: rgb(7,66,159); /* @kind color */ --blue-50: rgb(8,17,33); /* @kind color */ --blue-600: rgb(17,93,216); /* @kind color */ --blue-700: rgb(0,82,204); /* @kind color */ --blue-800: rgb(59,126,232); /* @kind color */ --blue-900: rgb(130,181,255); /* @kind color */ --blue-950: rgb(201,227,255); /* @kind color */ --border-radius-lg: 12; /* @kind radius */ --border-radius-md: 8; /* @kind radius */ --border-radius-none: 0; /* @kind radius */ --border-radius-sm: 4; /* @kind radius */ --border-radius-xs: 2; /* @kind radius */ --breadcrumb-background: var(--content-background); /* @kind color */ --breadcrumb-gap: var(--spacing-gap-8-2); --breadcrumb-item-border-radius: var(--content-border-radius); --breadcrumb-item-color: var(--text-secondary-color); /* @kind color */ --breadcrumb-item-focus-ring-color: var(--focus-ring-color); /* @kind color */ --breadcrumb-item-focus-ring-offset: var(--focus-ring-offset); --breadcrumb-item-focus-ring-width: var(--focus-ring-width); --breadcrumb-item-gap: var(--navigation-item-gap); --breadcrumb-item-hover-color: var(--text-primary-color); /* @kind color */ --breadcrumb-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --breadcrumb-item-icon-hover-color: var(--navigation-item-icon-focus-color); /* @kind color */ --breadcrumb-padding-x: var(--spacing-padding-32); --breadcrumb-padding-y: var(--spacing-padding-12); --breadcrumb-separator-color: var(--navigation-item-icon-color); /* @kind color */ --button-border-radius: var(--form-field-border-radius); --button-contrast-active-background: var(--foreground-700); /* @kind color */ --button-contrast-active-border-color: var(--foreground-700); /* @kind color */ --button-contrast-active-color: var(--text-inverse-color); /* @kind color */ --button-contrast-background: var(--foreground-700); /* @kind color */ --button-contrast-border-color: var(--foreground-700); /* @kind color */ --button-contrast-color: var(--text-inverse-color); /* @kind color */ --button-contrast-focus-ring-color: var(--foreground-700); /* @kind color */ --button-contrast-hover-background: var(--foreground-800); /* @kind color */ --button-contrast-hover-border-color: var(--foreground-800); /* @kind color */ --button-contrast-hover-color: var(--text-inverse-color); /* @kind color */ --button-danger-active-background: var(--active-red-color); /* @kind color */ --button-danger-active-border-color: var(--active-red-color); /* @kind color */ --button-danger-active-color: var(--text-inverse-color); /* @kind color */ --button-danger-background: var(--red-700); /* @kind color */ --button-danger-border-color: var(--red-700); /* @kind color */ --button-danger-color: var(--text-inverse-color); /* @kind color */ --button-danger-focus-ring-color: var(--red-700); /* @kind color */ --button-danger-hover-background: var(--red-800); /* @kind color */ --button-danger-hover-border-color: var(--red-800); /* @kind color */ --button-danger-hover-color: var(--text-inverse-color); /* @kind color */ --button-focus-ring-offset: var(--focus-ring-offset); --button-focus-ring-width: var(--focus-ring-width); --button-gap-2: 7; /* @kind spacing */ --button-gap: var(--spacing-gap-4); --button-group-padding: var(--spacing-padding-8); --button-help-active-background: var(--active-violet-color); /* @kind color */ --button-help-active-border-color: var(--active-violet-color); /* @kind color */ --button-help-active-color: var(--text-inverse-color); /* @kind color */ --button-help-background: var(--violet-700); /* @kind color */ --button-help-border-color: var(--violet-700); /* @kind color */ --button-help-color: var(--text-inverse-color); /* @kind color */ --button-help-focus-ring-color: var(--violet-700); /* @kind color */ --button-help-hover-background: var(--violet-800); /* @kind color */ --button-help-hover-border-color: var(--violet-800); /* @kind color */ --button-help-hover-color: var(--text-inverse-color); /* @kind color */ --button-icon-only-height: 36; /* @kind spacing */ --button-icon-only-width: 36; /* @kind spacing */ --button-info-active-background: var(--active-blue-color); /* @kind color */ --button-info-active-border-color: var(--active-blue-color); /* @kind color */ --button-info-active-color: var(--text-inverse-color); /* @kind color */ --button-info-background: var(--blue-700); /* @kind color */ --button-info-border-color: var(--blue-700); /* @kind color */ --button-info-color: var(--text-inverse-color); /* @kind color */ --button-info-focus-ring-color: var(--blue-700); /* @kind color */ --button-info-hover-background: var(--blue-800); /* @kind color */ --button-info-hover-border-color: var(--blue-800); /* @kind color */ --button-info-hover-color: var(--text-inverse-color); /* @kind color */ --button-label-font-height: 18; /* @kind font */ --button-label-font-size: var(--font-size-body); --button-label-font-weight-2: 500; /* @kind font */ --button-label-font-weight: var(--font-weight-semibold); --button-lg-font-size: var(--font-size-body-large); --button-lg-icon-only-width: 42; /* @kind spacing */ --button-lg-padding-x: var(--spacing-padding-16); --button-lg-padding-y: var(--spacing-padding-12); --button-link-active-color: rgb(18,65,106); /* @kind color */ --button-link-color: var(--primary-900); /* @kind color */ --button-link-hover-color: var(--primary-900); /* @kind color */ --button-marketing-active-background: var(--active-orange-color); /* @kind color */ --button-marketing-active-border-color: var(--active-orange-color); /* @kind color */ --button-marketing-active-color: var(--text-inverse-color); /* @kind color */ --button-marketing-background: var(--orange-700); /* @kind color */ --button-marketing-border-color: var(--orange-700); /* @kind color */ --button-marketing-color: var(--text-inverse-color); /* @kind color */ --button-marketing-focus-ring-color: var(--orange-700); /* @kind color */ --button-marketing-hover-background: var(--orange-800); /* @kind color */ --button-marketing-hover-border-color: var(--orange-800); /* @kind color */ --button-marketing-hover-color: var(--text-inverse-color); /* @kind color */ --button-outlined-contrast-active-background: var(--foreground-700); /* @kind color */ --button-outlined-contrast-border-color: var(--foreground-700); /* @kind color */ --button-outlined-contrast-color: var(--foreground-700); /* @kind color */ --button-outlined-contrast-hover-background: var(--foreground-800); /* @kind color */ --button-outlined-danger-active-background: var(--red-700); /* @kind color */ --button-outlined-danger-border-color: var(--red-700); /* @kind color */ --button-outlined-danger-color: var(--red-700); /* @kind color */ --button-outlined-danger-hover-background: var(--red-800); /* @kind color */ --button-outlined-help-active-background: var(--violet-700); /* @kind color */ --button-outlined-help-border-color: var(--violet-700); /* @kind color */ --button-outlined-help-color: var(--violet-700); /* @kind color */ --button-outlined-help-hover-background: var(--violet-800); /* @kind color */ --button-outlined-info-active-background: var(--blue-700); /* @kind color */ --button-outlined-info-border-color: var(--blue-700); /* @kind color */ --button-outlined-info-color: var(--blue-700); /* @kind color */ --button-outlined-info-hover-background: var(--blue-800); /* @kind color */ --button-outlined-plain-active-background: var(--surface-700); /* @kind color */ --button-outlined-plain-border-color: var(--surface-600); /* @kind color */ --button-outlined-plain-color: var(--white-0); /* @kind color */ --button-outlined-plain-hover-background: var(--surface-800); /* @kind color */ --button-outlined-primary-active-background: var(--primary-color); /* @kind color */ --button-outlined-primary-border-color: var(--primary-color); /* @kind color */ --button-outlined-primary-color: var(--primary-color); /* @kind color */ --button-outlined-primary-hover-background: var(--primary-hover-color); /* @kind color */ --button-outlined-secondary-active-background: var(--foreground-700); /* @kind color */ --button-outlined-secondary-border-color: var(--surface-600); /* @kind color */ --button-outlined-secondary-color: var(--foreground-950); /* @kind color */ --button-outlined-secondary-hover-background: var(--surface-700); /* @kind color */ --button-outlined-success-active-background: var(--green-700); /* @kind color */ --button-outlined-success-border-color: var(--green-700); /* @kind color */ --button-outlined-success-color: var(--green-700); /* @kind color */ --button-outlined-success-hover-background: var(--green-800); /* @kind color */ --button-outlined-warn-active-background: var(--orange-700); /* @kind color */ --button-outlined-warn-border-color: var(--orange-700); /* @kind color */ --button-outlined-warn-color: var(--orange-700); /* @kind color */ --button-outlined-warn-hover-background: var(--orange-800); /* @kind color */ --button-outlined-white-active-background: var(--white-0); /* @kind color */ --button-outlined-white-active-color: var(--text-primary-color); /* @kind color */ --button-outlined-white-border-color: var(--white-0); /* @kind color */ --button-outlined-white-color: var(--white-0); /* @kind color */ --button-outlined-white-hover-background: var(--white-0); /* @kind color */ --button-outlined-white-hover-color: var(--text-primary-color); /* @kind color */ --button-padding-x: var(--form-field-padding-x); --button-padding-y: var(--form-field-padding-y); --button-primary-active-background: var(--primary-active-color); /* @kind color */ --button-primary-active-border-color: var(--primary-active-color); /* @kind color */ --button-primary-active-color: var(--text-inverse-color); /* @kind color */ --button-primary-background: var(--primary-color); /* @kind color */ --button-primary-border-color: var(--primary-color); /* @kind color */ --button-primary-color: var(--text-inverse-color); /* @kind color */ --button-primary-focus-ring-color: var(--primary-color); /* @kind color */ --button-primary-hover-background: var(--primary-hover-color); /* @kind color */ --button-primary-hover-border-color: var(--primary-hover-color); /* @kind color */ --button-primary-hover-color: var(--text-inverse-color); /* @kind color */ --button-primary-hover-primary-color: var(--primary-color); /* @kind color */ --button-rounded-border-radius: 32; /* @kind radius */ --button-secondary-active-background: var(--surface-300); /* @kind color */ --button-secondary-active-border-color: var(--surface-600); /* @kind color */ --button-secondary-active-color: var(--surface-100); /* @kind color */ --button-secondary-background-2: var(--white-0); /* @kind color */ --button-secondary-background: var(--surface-800); /* @kind color */ --button-secondary-border-color: var(--surface-600); /* @kind color */ --button-secondary-color: var(--foreground-950); /* @kind color */ --button-secondary-focus-ring-color: var(--foreground-700); /* @kind color */ --button-secondary-hover-background: var(--surface-200); /* @kind color */ --button-secondary-hover-border-color: var(--surface-700); /* @kind color */ --button-secondary-hover-color: var(--surface-200); /* @kind color */ --button-secondary-icon-color: var(--icon-default-color); /* @kind color */ --button-sm-font-size: var(--font-size-caption); --button-sm-icon-only-width: 32; /* @kind spacing */ --button-sm-padding-x: var(--spacing-padding-8); --button-sm-padding-y: var(--spacing-padding-4); --button-success-active-background: var(--active-green-color); /* @kind color */ --button-success-active-border-color: var(--active-green-color); /* @kind color */ --button-success-active-color: var(--text-inverse-color); /* @kind color */ --button-success-background: var(--green-700); /* @kind color */ --button-success-border-color: var(--green-700); /* @kind color */ --button-success-color: var(--text-inverse-color); /* @kind color */ --button-success-focus-ring-color: var(--green-700); /* @kind color */ --button-success-hover-background: var(--green-800); /* @kind color */ --button-success-hover-border-color: var(--green-800); /* @kind color */ --button-success-hover-color: var(--text-inverse-color); /* @kind color */ --button-text-contrast-active-background: var(--surface-700); /* @kind color */ --button-text-contrast-color: var(--surface-950); /* @kind color */ --button-text-contrast-hover-background: var(--surface-800); /* @kind color */ --button-text-danger-active-background: var(--red-300); /* @kind color */ --button-text-danger-color: var(--red-900); /* @kind color */ --button-text-danger-hover-background: var(--red-200); /* @kind color */ --button-text-help-active-background: var(--violet-300); /* @kind color */ --button-text-help-color: var(--violet-900); /* @kind color */ --button-text-help-hover-background: var(--violet-200); /* @kind color */ --button-text-info-active-background: var(--blue-300); /* @kind color */ --button-text-info-color: var(--blue-900); /* @kind color */ --button-text-info-hover-background: var(--blue-200); /* @kind color */ --button-text-marketing-active-background: var(--orange-300); /* @kind color */ --button-text-marketing-color: var(--orange-900); /* @kind color */ --button-text-marketing-hover-background: var(--orange-200); /* @kind color */ --button-text-plain-active-background: var(--foreground-800); /* @kind color */ --button-text-plain-color: var(--foreground-700); /* @kind color */ --button-text-plain-hover-background: var(--foreground-800); /* @kind color */ --button-text-primary-active-background: var(--primary-300); /* @kind color */ --button-text-primary-color: var(--primary-900); /* @kind color */ --button-text-primary-hover-background: var(--primary-200); /* @kind color */ --button-text-secondary-active-background: var(--surface-300); /* @kind color */ --button-text-secondary-color: var(--foreground-950); /* @kind color */ --button-text-secondary-hover-background: var(--surface-200); /* @kind color */ --button-text-success-active-background: var(--green-300); /* @kind color */ --button-text-success-color: var(--green-900); /* @kind color */ --button-text-success-hover-background: var(--green-200); /* @kind color */ --card-background: var(--content-background); /* @kind color */ --card-body-gap: var(--spacing-gap-16-2); --card-body-padding: var(--spacing-padding-24); --card-border-radius: var(--border-radius-lg); --card-button-gap: var(--spacing-gap-8-2); --card-caption-gap: var(--spacing-gap-8-2); --card-color: var(--content-color); /* @kind color */ --card-container-border: var(--content-border-color); /* @kind color */ --card-content-gap: var(--spacing-gap-8-2); --card-content-padding-y: 8; /* @kind spacing */ --card-featurelist-gap: var(--spacing-gap-12); --card-header-font-size: var(--font-size-heading-large); --card-header-font-weight: var(--font-weight-semibold); --card-header-gap: var(--spacing-gap-4); --card-header-image-padding: 8; /* @kind spacing */ --card-hover-background-color: var(--content-hover-background); /* @kind color */ --card-subtitle-color: var(--text-secondary-color); /* @kind color */ --cardbutton-action-gap: var(--spacing-gap-8-2); --cardbutton-background-selected: var(--primary-50); /* @kind color */ --cardbutton-background: var(--card-background); /* @kind color */ --cardbutton-body-gap: var(--spacing-gap-8-2); --cardbutton-border-radius: var(--card-border-radius); --cardbutton-border: var(--card-container-border); /* @kind color */ --cardbutton-color: var(--card-color); /* @kind color */ --cardbutton-disabled-background: var(--surface-100); /* @kind color */ --cardbutton-filled-hover-background: var(--card-hover-background-color); /* @kind color */ --cardbutton-focus-border-color: var(--select-focus-border-color); /* @kind color */ --cardbutton-header-gap: var(--spacing-gap-8-2); --cardbutton-hover-border-color: var(--select-hover-border-color); /* @kind color */ --cardbutton-icon-gap: var(--spacing-gap-8-2); --cardbutton-padding: var(--spacing-padding-16); --cardbutton-subtitle-color: var(--card-subtitle-color); /* @kind color */ --cardbutton-title-font-size: var(--font-size-body-large); --carousel-content-gap: var(--spacing-gap-4); --carousel-focus-ring-color: var(--focus-ring-color); /* @kind color */ --carousel-focus-ring-offset: var(--focus-ring-offset); --carousel-focus-ring-width: var(--focus-ring-width); --carousel-font-size: var(--font-size-body); --carousel-gap: var(--spacing-gap-8-2); --carousel-hover-fill-color: var(--surface-50); /* @kind color */ --carousel-indicator-active-background: var(--primary-color); /* @kind color */ --carousel-indicator-background: var(--surface-200); /* @kind color */ --carousel-indicator-border-radius: var(--content-border-radius); --carousel-indicator-height: 8; /* @kind spacing */ --carousel-indicator-hover-background: var(--surface-300); /* @kind color */ --carousel-indicator-list-gap: var(--spacing-gap-8-2); --carousel-indicator-list-padding: var(--spacing-padding-16); --carousel-indicator-width: 32; /* @kind spacing */ --carousel-subtitle-font-weight: var(--font-weight-regular); --carousel-title-font-weight: var(--font-weight-semibold); --cascadeselect-background: var(--form-field-background); /* @kind color */ --cascadeselect-border-color: var(--form-field-border-color); /* @kind color */ --cascadeselect-border-radius: var(--form-field-border-radius); --cascadeselect-clear-icon-color: var(--form-field-icon-color); /* @kind color */ --cascadeselect-color: var(--form-field-option-color); /* @kind color */ --cascadeselect-disabled-background: var(--form-field-disabled-background); /* @kind color */ --cascadeselect-disabled-color: var(--form-field-disabled-color); /* @kind color */ --cascadeselect-dropdown-color: var(--form-field-icon-color); /* @kind color */ --cascadeselect-dropdown-width: 36; /* @kind spacing */ --cascadeselect-filled-background: var(--form-field-filled-background); /* @kind color */ --cascadeselect-filled-focus-background: var(--form-field-filled-focus-background); /* @kind color */ --cascadeselect-filled-hover-background: var(--form-field-filled-hover-background); /* @kind color */ --cascadeselect-focus-border-color: var(--form-field-focus-border-color); /* @kind color */ --cascadeselect-focus-ring-color: var(--form-field-focus-ring-color); /* @kind color */ --cascadeselect-focus-ring-offset: var(--form-field-focus-ring-offset); --cascadeselect-focus-ring-width: var(--form-field-focus-ring-width); --cascadeselect-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --cascadeselect-input-gap: var(--form-field-gap); --cascadeselect-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --cascadeselect-invalid-placeholder-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --cascadeselect-lg-font-size: var(--form-field-lg-font-size); --cascadeselect-lg-padding-x: var(--form-field-lg-padding-x); --cascadeselect-lg-padding-y: var(--form-field-lg-padding-y); --cascadeselect-list-gap: var(--list-gap); --cascadeselect-list-mobile-indent: 14; /* @kind spacing */ --cascadeselect-list-x-padding: var(--list-padding-x); --cascadeselect-list-y-padding: var(--list-padding-y); --cascadeselect-option-border-radius: var(--list-option-border-radius); --cascadeselect-option-color: var(--list-option-color); /* @kind color */ --cascadeselect-option-focus-background: var(--list-option-focus-background); /* @kind color */ --cascadeselect-option-focus-color: var(--list-option-focus-color); /* @kind color */ --cascadeselect-option-icon-color: var(--list-option-icon-color); /* @kind color */ --cascadeselect-option-icon-focus-color: var(--list-option-icon-focus-color); /* @kind color */ --cascadeselect-option-icon-size: 14; /* @kind spacing */ --cascadeselect-option-selected-background: var(--list-option-selected-background); /* @kind color */ --cascadeselect-option-selected-color: var(--list-option-selected-color); /* @kind color */ --cascadeselect-option-selected-focus-background: var(--list-option-selected-focus-background); /* @kind color */ --cascadeselect-option-selected-focus-color: var(--list-option-selected-focus-color); /* @kind color */ --cascadeselect-overlay-background: var(--overlay-select-background); /* @kind color */ --cascadeselect-overlay-border-color: var(--overlay-select-border-color); /* @kind color */ --cascadeselect-overlay-border-radius: var(--overlay-select-border-radius); --cascadeselect-overlay-color: var(--overlay-select-color); /* @kind color */ --cascadeselect-padding-x: var(--form-field-padding-x); --cascadeselect-padding-y: var(--form-field-padding-y); --cascadeselect-placeholder-color: var(--form-field-placeholder-color); /* @kind color */ --cascadeselect-sm-font-size: var(--form-field-sm-font-size); --cascadeselect-sm-padding-x: var(--form-field-sm-padding-x); --cascadeselect-sm-padding-y: var(--form-field-sm-padding-y); --checkbox-background: var(--form-field-background); /* @kind color */ --checkbox-border-color: var(--form-field-border-color); /* @kind color */ --checkbox-border-radius: var(--border-radius-sm); --checkbox-checked-background: var(--primary-color); /* @kind color */ --checkbox-checked-border-color: var(--primary-color); /* @kind color */ --checkbox-checked-disabled-border-color: var(--form-field-border-color); /* @kind color */ --checkbox-checked-focus-border-color: var(--primary-color); /* @kind color */ --checkbox-checked-hover-background: var(--primary-hover-color); /* @kind color */ --checkbox-checked-hover-border-color: var(--primary-hover-color); /* @kind color */ --checkbox-color: var(--form-field-option-color); /* @kind color */ --checkbox-disabled-background: var(--form-field-disabled-background); /* @kind color */ --checkbox-filled-background: var(--form-field-filled-background); /* @kind color */ --checkbox-focus-border-color: var(--form-field-border-color); /* @kind color */ --checkbox-focus-ring-color: var(--focus-ring-color); /* @kind color */ --checkbox-focus-ring-offset: var(--focus-ring-offset); --checkbox-focus-ring-width: var(--focus-ring-width); --checkbox-gap: var(--spacing-gap-8-2); --checkbox-group-options-gap-x: var(--spacing-gap-12); --checkbox-group-options-gap-y: var(--spacing-gap-16-2); --checkbox-height: 20; /* @kind spacing */ --checkbox-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --checkbox-icon-checked-color: var(--icon-white-color); /* @kind color */ --checkbox-icon-checked-hover-color: var(--icon-white-color); /* @kind color */ --checkbox-icon-color: var(--form-field-icon-color); /* @kind color */ --checkbox-icon-disabled-color: var(--form-field-disabled-color); /* @kind color */ --checkbox-icon-lg-size: 16; /* @kind spacing */ --checkbox-icon-size: 14; /* @kind spacing */ --checkbox-icon-sm-size: 12; /* @kind spacing */ --checkbox-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --checkbox-lg-height: 24; /* @kind spacing */ --checkbox-lg-width: 24; /* @kind spacing */ --checkbox-sm-height: 14; /* @kind spacing */ --checkbox-sm-width: 14; /* @kind spacing */ --checkbox-width: 20; /* @kind spacing */ --chip-background: var(--surface-200); /* @kind color */ --chip-border-radius: 16; /* @kind radius */ --chip-color: var(--text-primary-color); /* @kind color */ --chip-figma-image-padding-left: 4; /* @kind spacing */ --chip-figma-image-padding-y: 4; /* @kind spacing */ --chip-font-height: 18; /* @kind font */ --chip-font-size-2: var(--font-size-body); --chip-font-size: var(--font-size-body); --chip-font-weight-2: var(--font-weight-regular); --chip-font-weight: var(--font-weight-regular); --chip-gap: var(--spacing-gap-8-2); --chip-icon-color: var(--icon-default-color); /* @kind color */ --chip-icon-focus-ring-color: var(--focus-ring-color); /* @kind color */ --chip-icon-focus-ring-offset: var(--focus-ring-offset); --chip-icon-focus-ring-width: var(--focus-ring-width); --chip-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --chip-icon-size: 14; /* @kind spacing */ --chip-image-height: 32; /* @kind spacing */ --chip-image-width: 32; /* @kind spacing */ --chip-padding-x: var(--spacing-padding-12); --chip-padding-y: var(--spacing-padding-8); --chip-remove-icon-color: var(--icon-default-color); /* @kind color */ --chip-remove-icon-size: 14; /* @kind spacing */ --chip-sm-padding-x: var(--spacing-padding-12); --chip-sm-padding-y: var(--spacing-padding-4); --color: var(--content-color); /* @kind color */ --colorpicker-panel-background: var(--surface-900); /* @kind color */ --colorpicker-panel-border-color: var(--surface-500); /* @kind color */ --colorpicker-panel-border-radius: var(--overlay-popover-border-radius); --colorpicker-preview-border-radius: var(--form-field-border-radius); --colorpicker-preview-focus-ring-color: var(--focus-ring-color); /* @kind color */ --colorpicker-preview-focus-ring-offset: var(--focus-ring-offset); --colorpicker-preview-focus-ring-width: var(--focus-ring-width); --colorpicker-preview-handle-color: var(--white-0); /* @kind color */ --colorpicker-preview-height: 24; /* @kind spacing */ --colorpicker-preview-width: 24; /* @kind spacing */ --confirmdialog-content-gap: var(--spacing-gap-16-2); --confirmdialog-icon-color: var(--overlay-modal-color); /* @kind color */ --confirmdialog-icon-size: 32; /* @kind spacing */ --confirmpopup-arrow-offset: 20; /* @kind spacing */ --confirmpopup-background: var(--overlay-popover-background); /* @kind color */ --confirmpopup-border-color: var(--overlay-popover-border-color); /* @kind color */ --confirmpopup-border-radius: var(--overlay-popover-border-radius); --confirmpopup-color: var(--overlay-popover-color); /* @kind color */ --confirmpopup-content-gap: var(--spacing-gap-16-2); --confirmpopup-content-padding: var(--overlay-popover-padding); --confirmpopup-footer-gap: var(--spacing-gap-8-2); --confirmpopup-gutter: 10; /* @kind spacing */ --confirmpopup-icon-color: var(--overlay-popover-color); /* @kind color */ --confirmpopup-icon-size: 24; /* @kind spacing */ --content-background: var(--surface-200); /* @kind color */ --content-border-color: var(--surface-500); /* @kind color */ --content-border-radius: var(--border-radius-md); --content-color: var(--text-primary-color); /* @kind color */ --content-hover-background: var(--surface-300); /* @kind color */ --content-hover-color-2: var(--text-primary-color); /* @kind color */ --content-hover-color: var(--text-primary-hover-color); /* @kind color */ --contextmenu-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --datatable-body-cell-background: var(--content-background); /* @kind color */ --datatable-body-cell-border-color-2: var(--datatable-border-color); /* @kind color */ --datatable-body-cell-border-color: var(--datatable-border-color); /* @kind color */ --datatable-body-cell-color: var(--content-color); /* @kind color */ --datatable-body-cell-hover-background: var(--content-hover-background); /* @kind color */ --datatable-body-cell-hover-color: var(--content-hover-color-2); /* @kind color */ --datatable-border-color: var(--surface-800); /* @kind color */ --datatable-border-radius: var(--border-radius-sm); --datatable-column-footer-font-weight: var(--font-weight-semibold); --datatable-column-resizer-width: 8; /* @kind spacing */ --datatable-column-title-font-weight: var(--font-weight-semibold); --datatable-content-gap: var(--spacing-gap-12); --datatable-drop-point-color: var(--primary-color); /* @kind color */ --datatable-filter-constraint-border-radius: var(--list-option-border-radius); --datatable-filter-constraint-color: var(--list-option-color); /* @kind color */ --datatable-filter-constraint-focus-background: var(--list-option-focus-background); /* @kind color */ --datatable-filter-constraint-focus-color: var(--list-option-focus-color); /* @kind color */ --datatable-filter-constraint-list-gap: var(--list-gap); --datatable-filter-constraint-selected-background: var(--list-option-selected-background); /* @kind color */ --datatable-filter-constraint-selected-color: var(--list-option-selected-color); /* @kind color */ --datatable-filter-constraint-selected-focus-background: var(--list-option-selected-focus-background); /* @kind color */ --datatable-filter-constraint-selected-focus-color: var(--list-option-selected-focus-color); /* @kind color */ --datatable-filter-constraint-separator-border-color: var(--content-border-color); /* @kind color */ --datatable-filter-inline-gap: var(--spacing-gap-8-2); --datatable-filter-overlay-popover-background: var(--overlay-popover-background); /* @kind color */ --datatable-filter-overlay-popover-border-color: var(--overlay-popover-border-color); /* @kind color */ --datatable-filter-overlay-popover-border-radius: var(--overlay-popover-border-radius); --datatable-filter-overlay-popover-color: var(--overlay-popover-color); /* @kind color */ --datatable-filter-overlay-popover-gap: var(--spacing-gap-8-2); --datatable-filter-overlay-popover-padding: var(--overlay-popover-padding); --datatable-filter-overlay-select-background: var(--overlay-select-background); /* @kind color */ --datatable-filter-overlay-select-border-color: var(--overlay-select-border-color); /* @kind color */ --datatable-filter-overlay-select-border-radius: var(--overlay-select-border-radius); --datatable-filter-overlay-select-color: var(--overlay-select-color); /* @kind color */ --datatable-filter-rule-border-color: var(--content-border-color); /* @kind color */ --datatable-footer-background: var(--content-background); /* @kind color */ --datatable-footer-border-color: var(--datatable-border-color); /* @kind color */ --datatable-footer-border-width: 1; /* @kind spacing */ --datatable-footer-cell-background: var(--content-background); /* @kind color */ --datatable-footer-cell-border-color: var(--datatable-border-color); /* @kind color */ --datatable-footer-cell-color: var(--content-color); /* @kind color */ --datatable-footer-color: var(--content-color); /* @kind color */ --datatable-header-background: var(--content-background); /* @kind color */ --datatable-header-border-color: var(--datatable-border-color); /* @kind color */ --datatable-header-border-width: 1; /* @kind spacing */ --datatable-header-cell-background: var(--surface-50); /* @kind color */ --datatable-header-cell-border-color: var(--datatable-border-color); /* @kind color */ --datatable-header-cell-color: var(--content-color); /* @kind color */ --datatable-header-cell-focus-ring-color: var(--focus-ring-color); /* @kind color */ --datatable-header-cell-focus-ring-offset: -1; /* @kind spacing */ --datatable-header-cell-focus-ring-width: var(--focus-ring-width); --datatable-header-cell-gap: var(--spacing-gap-8-2); --datatable-header-cell-hover-background: var(--surface-100); /* @kind color */ --datatable-header-cell-hover-color: var(--surface-100); /* @kind color */ --datatable-header-cell-icon-color: var(--icon-default-color); /* @kind color */ --datatable-header-cell-selected-background: var(--surface-50); /* @kind color */ --datatable-header-cell-selected-color: var(--content-color); /* @kind color */ --datatable-header-color: var(--content-color); /* @kind color */ --datatable-loading-icon-size: 32; /* @kind spacing */ --datatable-paginator-bottom-border-color: var(--datatable-border-color); /* @kind color */ --datatable-paginator-bottom-border-width: 1; /* @kind spacing */ --datatable-paginator-top-border-color: var(--datatable-border-color); /* @kind color */ --datatable-paginator-top-border-width: 1; /* @kind spacing */ --datatable-resize-indicator-color: var(--primary-color); /* @kind color */ --datatable-resize-indicator-width: 1; /* @kind spacing */ --datatable-row-background: var(--content-background); /* @kind color */ --datatable-row-color: var(--content-color); /* @kind color */ --datatable-row-focus-ring-color: var(--focus-ring-color); /* @kind color */ --datatable-row-focus-ring-offset: -1; /* @kind spacing */ --datatable-row-focus-ring-width: var(--focus-ring-width); --datatable-row-hover-background: var(--content-hover-background); /* @kind color */ --datatable-row-hover-color: var(--content-hover-color-2); /* @kind color */ --datatable-row-selected-background: var(--highlight-background); /* @kind color */ --datatable-row-selected-color: var(--highlight-color); /* @kind color */ --datatable-row-striped-background: var(--surface-950); /* @kind color */ --datatable-row-toggle-button-border-radius: 10; /* @kind radius */ --datatable-row-toggle-button-color: var(--text-secondary-color); /* @kind color */ --datatable-row-toggle-button-focus-ring-color: var(--focus-ring-color); /* @kind color */ --datatable-row-toggle-button-focus-ring-offset: var(--focus-ring-offset); --datatable-row-toggle-button-focus-ring-width: var(--focus-ring-width); --datatable-row-toggle-button-hover-background: var(--content-hover-background); /* @kind color */ --datatable-row-toggle-button-hover-color: var(--text-primary-color); /* @kind color */ --datatable-row-toggle-button-selected-hover-background: var(--content-background); /* @kind color */ --datatable-row-toggle-button-selected-hover-color: var(--primary-color); /* @kind color */ --datatable-row-toggle-button-size: 20; /* @kind spacing */ --datatable-sort-icon-color: var(--icon-default-color); /* @kind color */ --datatable-sort-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --datatable-sort-icon-size: 14; /* @kind spacing */ --dataview-border-color: var(--content-border-color); /* @kind color */ --dataview-border-radius: 0; /* @kind radius */ --dataview-border-width: 0; /* @kind spacing */ --dataview-content-background: var(--content-background); /* @kind color */ --dataview-content-border-color: var(--content-border-color); /* @kind color */ --dataview-content-border-radius: 0; /* @kind radius */ --dataview-content-border-width: 0; /* @kind spacing */ --dataview-content-color: var(--content-color); /* @kind color */ --dataview-content-padding: var(--spacing-padding-0); --dataview-footer-background: var(--content-background); /* @kind color */ --dataview-footer-border-color: var(--content-border-color); /* @kind color */ --dataview-footer-border-radius: 0; /* @kind radius */ --dataview-footer-border-width: 1; /* @kind spacing */ --dataview-footer-color: var(--content-color); /* @kind color */ --dataview-header-background: var(--content-background); /* @kind color */ --dataview-header-border-color: var(--content-border-color); /* @kind color */ --dataview-header-border-radius: 0; /* @kind radius */ --dataview-header-border-width: 1; /* @kind spacing */ --dataview-header-color: var(--content-color); /* @kind color */ --dataview-padding: var(--spacing-padding-0); --dataview-paginator-bottom-border-color: var(--content-border-color); /* @kind color */ --dataview-paginator-bottom-border-width: 1; /* @kind spacing */ --dataview-paginator-top-border-color: var(--content-border-color); /* @kind color */ --dataview-paginator-top-border-width: 1; /* @kind spacing */ --datepicker-buttonbar-border-color: var(--content-border-color); /* @kind color */ --datepicker-date-border-radius: 16; /* @kind radius */ --datepicker-date-color: var(--content-color); /* @kind color */ --datepicker-date-focus-ring-color: var(--focus-ring-color); /* @kind color */ --datepicker-date-focus-ring-offset: var(--focus-ring-offset); --datepicker-date-focus-ring-width: var(--focus-ring-width); --datepicker-date-height: 32; /* @kind spacing */ --datepicker-date-hover-background: var(--content-hover-background); /* @kind color */ --datepicker-date-hover-color: var(--content-hover-color-2); /* @kind color */ --datepicker-date-padding: var(--spacing-padding-4); --datepicker-date-range-selected-background: var(--highlight-background); /* @kind color */ --datepicker-date-range-selected-color: var(--highlight-color); /* @kind color */ --datepicker-date-selected-background: var(--primary-color); /* @kind color */ --datepicker-date-selected-color: var(--primary-contrast-color); /* @kind color */ --datepicker-date-width: 32; /* @kind spacing */ --datepicker-dropdown-active-background: var(--surface-600); /* @kind color */ --datepicker-dropdown-active-border-color: var(--form-field-border-color); /* @kind color */ --datepicker-dropdown-active-color: var(--surface-100); /* @kind color */ --datepicker-dropdown-background: var(--surface-800); /* @kind color */ --datepicker-dropdown-border-color: var(--form-field-border-color); /* @kind color */ --datepicker-dropdown-border-radius: var(--form-field-border-radius); --datepicker-dropdown-color: var(--surface-300); /* @kind color */ --datepicker-dropdown-focus-ring-color: var(--focus-ring-color); /* @kind color */ --datepicker-dropdown-focus-ring-offset: var(--focus-ring-offset); --datepicker-dropdown-focus-ring-width: var(--focus-ring-width); --datepicker-dropdown-hover-background: var(--surface-700); /* @kind color */ --datepicker-dropdown-hover-border-color: var(--form-field-border-color); /* @kind color */ --datepicker-dropdown-hover-color: var(--surface-200); /* @kind color */ --datepicker-dropdown-lg-width: 48; /* @kind spacing */ --datepicker-dropdown-sm-width: 32; /* @kind spacing */ --datepicker-dropdown-width: 40; /* @kind spacing */ --datepicker-group-border-color: var(--content-border-color); /* @kind color */ --datepicker-group-gap: var(--overlay-popover-padding); --datepicker-header-background: var(--content-background); /* @kind color */ --datepicker-header-border-color: var(--content-border-color); /* @kind color */ --datepicker-header-color: var(--content-color); /* @kind color */ --datepicker-input-icon-color: var(--form-field-icon-color); /* @kind color */ --datepicker-month-border-radius: var(--content-border-radius); --datepicker-month-padding: var(--spacing-padding-8); --datepicker-panel-background: var(--content-background); /* @kind color */ --datepicker-panel-border-color: var(--content-border-color); /* @kind color */ --datepicker-panel-border-radius: var(--content-border-radius); --datepicker-panel-color: var(--content-color); /* @kind color */ --datepicker-panel-padding: var(--overlay-popover-padding); --datepicker-select-month-border-radius: var(--content-border-radius); --datepicker-select-month-color: var(--content-color); /* @kind color */ --datepicker-select-month-hover-background: var(--content-hover-background); /* @kind color */ --datepicker-select-month-hover-color: var(--content-hover-color-2); /* @kind color */ --datepicker-select-year-border-radius: var(--content-border-radius); --datepicker-select-year-color: var(--content-color); /* @kind color */ --datepicker-select-year-hover-background: var(--content-hover-background); /* @kind color */ --datepicker-select-year-hover-color: var(--content-hover-color-2); /* @kind color */ --datepicker-time-picker-border-color: var(--content-border-color); /* @kind color */ --datepicker-time-picker-button-gap: var(--spacing-gap-4); --datepicker-time-picker-gap: var(--spacing-gap-8-2); --datepicker-title-font-weight: var(--font-weight-semibold); --datepicker-title-gap: var(--spacing-gap-8-2); --datepicker-today-background: var(--surface-700); /* @kind color */ --datepicker-today-color: var(--white-0); /* @kind color */ --datepicker-week-day-color: var(--content-color); /* @kind color */ --datepicker-week-day-font-weight: var(--font-weight-semibold); --datepicker-week-day-padding: var(--spacing-padding-4); --datepicker-year-border-radius: var(--content-border-radius); --datepicker-year-padding: var(--spacing-padding-8); --dialog-background: var(--overlay-modal-background); /* @kind color */ --dialog-border-color: var(--overlay-modal-border-color); /* @kind color */ --dialog-border-radius: var(--overlay-modal-border-radius); --dialog-color: var(--overlay-modal-color); /* @kind color */ --dialog-dialog-mask-background: var(--mask-background); /* @kind color */ --dialog-footer-gap: var(--spacing-gap-8-2); --dialog-gap: var(--spacing-gap-24); --dialog-padding: var(--overlay-modal-padding); --dialog-title-font-size: var(--font-size-heading-large); --dialog-title-font-weight: var(--font-weight-semibold); --disabled-opacity-2: 60; /* @kind other */ --disabled-opacity: 60; /* @kind other */ --divider-border-color: var(--content-border-color); /* @kind color */ --divider-content-background: var(--content-background); /* @kind color */ --divider-content-color: var(--text-primary-color); /* @kind color */ --divider-content-gap: var(--spacing-gap-8-2); --divider-font-size-2: 14; /* @kind font */ --divider-font-size: 14; /* @kind font */ --divider-font-weight-2: 700; /* @kind font */ --divider-font-weight: 700; /* @kind font */ --divider-horizontal-content-padding: var(--spacing-padding-8); --divider-horizontal-padding: var(--spacing-padding-8); --divider-vertical-content-padding: var(--spacing-padding-8); --divider-vertical-padding: var(--spacing-padding-8); --drawer-background: var(--overlay-modal-background); /* @kind color */ --drawer-border-color: var(--overlay-modal-border-color); /* @kind color */ --drawer-border-radius: var(--overlay-modal-border-radius); --drawer-button-gap: var(--spacing-gap-8-2); --drawer-color: var(--overlay-modal-color); /* @kind color */ --drawer-content-gap: var(--spacing-gap-24); --drawer-content-padding: var(--spacing-padding-24); --drawer-footer-gap: var(--spacing-gap-8-2); --drawer-footer-padding: var(--overlay-modal-padding); --drawer-gap: var(--spacing-gap-24); --drawer-header-padding: var(--overlay-modal-padding); --drawer-mask-background: var(--mask-background); /* @kind color */ --drawer-title-font-size: var(--font-size-heading-small); --drawer-title-font-weight: var(--font-weight-semibold); --editor-toolbar-background: var(--content-background); /* @kind color */ --fieldmapping-content-gap: var(--spacing-gap-8-2); --fieldmapping-gap: var(--spacing-gap-16-2); --fieldmapping-icon-color: var(--icon-default-color); /* @kind color */ --fieldmapping-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --fieldmapping-icon-size: 14; /* @kind spacing */ --fieldmapping-input-gap: var(--spacing-gap-4); --fieldmapping-input-padding-x: var(--spacing-padding-12); --fieldmapping-input-padding-y: var(--spacing-padding-8); --fileupload-background: var(--content-background); /* @kind color */ --fileupload-basic-gap: var(--spacing-gap-8-2); --fileupload-border-color: var(--content-border-color); /* @kind color */ --fileupload-border-radius: var(--content-border-radius); --fileupload-color: var(--content-color); /* @kind color */ --fileupload-content-gap: var(--spacing-gap-16-2); --fileupload-content-highlight-border-color: var(--primary-color); /* @kind color */ --fileupload-file-border-color: var(--content-border-color); /* @kind color */ --fileupload-file-gap: var(--spacing-gap-16-2); --fileupload-file-info-gap: var(--spacing-gap-8-2); --fileupload-file-list-gap: var(--spacing-gap-8-2); --fileupload-file-padding: var(--spacing-padding-16); --fileupload-header-background: rgba(0,0,0,0); /* @kind color */ --fileupload-header-border-color: rgba(0,0,0,0); /* @kind color */ --fileupload-header-border-radius: 0; /* @kind radius */ --fileupload-header-border-width: 0; /* @kind spacing */ --fileupload-header-color: var(--text-primary-color); /* @kind color */ --fileupload-header-gap: var(--spacing-gap-8-2); --fileupload-header-padding: var(--spacing-padding-16); --fileupload-progressbar-height: 4; /* @kind spacing */ --floatlabel-active-font-size: var(--font-size-caption); --floatlabel-active-font-weight: var(--font-weight-regular); --floatlabel-color: var(--form-field-float-label-color); /* @kind color */ --floatlabel-focus-color: var(--form-field-float-label-focus-color); /* @kind color */ --floatlabel-in-active-top: 8; /* @kind other */ --floatlabel-in-input-padding-bottom: 8; /* @kind spacing */ --floatlabel-in-input-padding-top: 24; /* @kind spacing */ --floatlabel-invalid-color: var(--form-field-float-label-invalid-color); /* @kind color */ --floatlabel-on-border-radius: 2; /* @kind radius */ --floatlabel-position-x: var(--form-field-padding-x); --flowstep-background: var(--card-background); /* @kind color */ --flowstep-border-radius: 12; /* @kind radius */ --flowstep-button-background: var(--button-primary-background); /* @kind color */ --flowstep-button-hover-background: var(--button-primary-hover-background); /* @kind color */ --flowstep-connector-button-border-radius: 16; /* @kind radius */ --flowstep-connector-color: var(--timeline-event-connector-color); /* @kind color */ --flowstep-container-border: var(--card-container-border); /* @kind color */ --flowstep-gap: var(--spacing-gap-16-2); --flowstep-hover-background: var(--primary-50); /* @kind color */ --flowstep-icon-error-color: var(--icon-destructive-color); /* @kind color */ --flowstep-icon-error-hover-color: var(--icon-destructive-hover-color); /* @kind color */ --flowstep-icon-gap: var(--spacing-gap-8-2); --flowstep-number-gap: var(--spacing-gap-8-2); --flowstep-padding-x: var(--spacing-padding-24); --flowstep-padding-y: var(--spacing-padding-24); --flowstep-step-content-gap: var(--spacing-gap-4); --flowstep-step-hover: var(--chip-icon-focus-ring-color); /* @kind color */ --flowstep-step-padding-x: var(--spacing-padding-24); --flowstep-step-padding-y: var(--spacing-padding-24); --flowstep-subtitle-color: var(--card-subtitle-color); /* @kind color */ --focus-ring-color: var(--primary-color); /* @kind color */ --focus-ring-offset: 2; /* @kind spacing */ --focus-ring-width: 1; /* @kind spacing */ --font-size-body-large: 16; /* @kind font */ --font-size-body: 14; /* @kind font */ --font-size-caption: 12; /* @kind font */ --font-size-display: 48; /* @kind font */ --font-size-heading-large: 30; /* @kind font */ --font-size-heading-medium: 24; /* @kind font */ --font-size-heading-small: 20; /* @kind font */ --font-weight-bold: 700; /* @kind font */ --font-weight-regular: 400; /* @kind font */ --font-weight-semibold: 600; /* @kind font */ --foreground-100: var(--navy-100); /* @kind color */ --foreground-200: var(--navy-200); /* @kind color */ --foreground-300: var(--navy-300); /* @kind color */ --foreground-400: var(--navy-400); /* @kind color */ --foreground-500: var(--navy-500); /* @kind color */ --foreground-50: var(--navy-50); /* @kind color */ --foreground-600: var(--navy-600); /* @kind color */ --foreground-700: var(--navy-700); /* @kind color */ --foreground-800: var(--navy-800); /* @kind color */ --foreground-900: var(--navy-900); /* @kind color */ --foreground-950: var(--navy-950); /* @kind color */ --form-field-background: var(--surface-200); /* @kind color */ --form-field-border-color: var(--surface-500); /* @kind color */ --form-field-border-radius: var(--border-radius-md); --form-field-color: var(--text-primary-color); /* @kind color */ --form-field-description-color: var(--text-secondary-color); /* @kind color */ --form-field-description-font-height: 16; /* @kind font */ --form-field-description-font-size: var(--font-size-caption); --form-field-description-font-weight: var(--font-weight-regular); --form-field-disabled-background: var(--surface-300); /* @kind color */ --form-field-disabled-color: var(--text-primary-color); /* @kind color */ --form-field-filled-background: var(--surface-800); /* @kind color */ --form-field-filled-focus-background: var(--surface-800); /* @kind color */ --form-field-filled-hover-background: var(--surface-800); /* @kind color */ --form-field-float-label-color: var(--text-secondary-color); /* @kind color */ --form-field-float-label-focus-color: var(--surface-400); /* @kind color */ --form-field-float-label-invalid-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --form-field-focus-border-color: var(--primary-color); /* @kind color */ --form-field-focus-ring-color: var(--focus-ring-color); /* @kind color */ --form-field-focus-ring-offset: var(--focus-ring-offset); --form-field-focus-ring-width: var(--focus-ring-width); --form-field-gap: var(--spacing-gap-4); --form-field-helper-color: var(--text-primary-color); /* @kind color */ --form-field-helper-font-height: 16; /* @kind font */ --form-field-helper-font-size: var(--font-size-caption); --form-field-helper-font-weight: var(--font-weight-regular); --form-field-hover-border-color: var(--surface-600); /* @kind color */ --form-field-icon-color: var(--icon-default-color); /* @kind color */ --form-field-icon-gap: var(--spacing-gap-8-2); --form-field-invalid-border-color: var(--red-700); /* @kind color */ --form-field-invalid-placeholder-color: var(--text-destructive-color); /* @kind color */ --form-field-label-color: var(--text-primary-color); /* @kind color */ --form-field-label-font-height: 18; /* @kind font */ --form-field-label-font-size: var(--font-size-body); --form-field-label-font-weight: var(--font-weight-semibold); --form-field-label-gap: var(--spacing-gap-4); --form-field-lg-font-size: var(--font-size-body); --form-field-lg-padding-x: var(--spacing-padding-16); --form-field-lg-padding-y: var(--spacing-padding-12); --form-field-option-color: var(--text-primary-color); /* @kind color */ --form-field-option-font-height: 18; /* @kind font */ --form-field-option-font-size: var(--font-size-body); --form-field-option-font-weight: var(--font-weight-regular); --form-field-option-gap: var(--spacing-gap-4); --form-field-options-gap: var(--spacing-gap-12); --form-field-padding-x: var(--spacing-padding-12); --form-field-padding-y: var(--spacing-padding-8); --form-field-placeholder-color: var(--text-secondary-color); /* @kind color */ --form-field-sm-font-size: var(--font-size-body); --form-field-sm-padding-x: var(--spacing-padding-8); --form-field-sm-padding-y: var(--spacing-padding-4); --gap: 8; /* @kind spacing */ --gray-100: rgb(25,25,25); /* @kind color */ --gray-200-2: rgb(229,231,235); /* @kind color */ --gray-200: rgb(34,34,34); /* @kind color */ --gray-300: rgb(42,42,42); /* @kind color */ --gray-400: rgb(49,49,49); /* @kind color */ --gray-500-2: rgb(107,114,128); /* @kind color */ --gray-500: rgb(58,58,58); /* @kind color */ --gray-50: rgb(17,17,17); /* @kind color */ --gray-600-2: rgb(75,85,99); /* @kind color */ --gray-600: rgb(96,96,96); /* @kind color */ --gray-700: rgb(110,110,110); /* @kind color */ --gray-800: rgb(123,123,123); /* @kind color */ --gray-900: rgb(180,180,180); /* @kind color */ --gray-950: rgb(238,238,238); /* @kind color */ --green-100: rgb(18,27,23); /* @kind color */ --green-200: rgb(19,45,33); /* @kind color */ --green-300: rgb(17,59,41); /* @kind color */ --green-400: rgb(23,73,51); /* @kind color */ --green-500-2: rgb(34,197,94); /* @kind color */ --green-500: rgb(32,87,62); /* @kind color */ --green-50: rgb(14,21,18); /* @kind color */ --green-600-2: rgb(22,163,74); /* @kind color */ --green-600: rgb(47,124,87); /* @kind color */ --green-700: rgb(48,164,108); /* @kind color */ --green-800: rgb(51,176,116); /* @kind color */ --green-900: rgb(61,214,140); /* @kind color */ --green-950: rgb(177,241,203); /* @kind color */ --highlight-background: var(--primary-100); /* @kind color */ --highlight-color: var(--text-primary-color); /* @kind color */ --highlight-focus-background: var(--primary-200); /* @kind color */ --highlight-focus-color: var(--primary-900); /* @kind color */ --icon-accent-color: var(--primary-color); /* @kind color */ --icon-accent-disabled-color: var(--primary-disabled-color); /* @kind color */ --icon-accent-hover-color: var(--primary-hover-color); /* @kind color */ --icon-default-color: var(--foreground-700); /* @kind color */ --icon-default-disabled-color: rgba(82,97,111,0.6); /* @kind color */ --icon-default-hover-color: var(--foreground-800); /* @kind color */ --icon-destructive-color: var(--red-700); /* @kind color */ --icon-destructive-disabled-color: rgba(229,72,77,0.6); /* @kind color */ --icon-destructive-hover-color: var(--red-800); /* @kind color */ --icon-gray-default: var(--surface-600-2); /* @kind color */ --icon-light-color: var(--foreground-200); /* @kind color */ --icon-light-disabled-color: rgba(31,35,40,0.6); /* @kind color */ --icon-light-hover-color: var(--foreground-300); /* @kind color */ --icon-navy-default: var(--navy-950-2); /* @kind color */ --icon-size: 14; /* @kind spacing */ --icon-sky-default: var(--sky-600-2); /* @kind color */ --icon-success-color: var(--green-700); /* @kind color */ --icon-success-default: var(--green-600-2); /* @kind color */ --icon-success-disabled-color: rgba(48,164,108,0.6); /* @kind color */ --icon-success-hover-color: var(--green-800); /* @kind color */ --icon-white-color: var(--white-0); /* @kind color */ --icon-white-default: var(--surface-0-2); /* @kind color */ --iconfield-figma-lg-icon-size: var(--inputtext-lg-font-size); --iconfield-figma-sm-icon-size: var(--inputtext-sm-font-size); --iconfield-icon-color: var(--form-field-icon-color); /* @kind color */ --iftalabel-color: var(--form-field-float-label-color); /* @kind color */ --iftalabel-focus-color: var(--form-field-float-label-focus-color); /* @kind color */ --iftalabel-font-size: var(--font-size-caption); --iftalabel-font-weight: var(--font-weight-regular); --iftalabel-input-padding-bottom: var(--form-field-padding-y); --iftalabel-input-padding-top: 24; /* @kind spacing */ --iftalabel-invalid-color: var(--form-field-float-label-invalid-color); /* @kind color */ --iftalabel-position-x: var(--form-field-padding-x); --iftalabel-top: var(--form-field-padding-y); --image-preview-icon-size: 24; /* @kind spacing */ --image-preview-mask-background: var(--mask-background); /* @kind color */ --image-preview-mask-color: var(--mask-color); /* @kind color */ --inputgroup-addon-background: var(--form-field-background); /* @kind color */ --inputgroup-addon-border-color: var(--form-field-border-color); /* @kind color */ --inputgroup-addon-border-radius: var(--form-field-border-radius); --inputgroup-addon-color: var(--form-field-description-color); /* @kind color */ --inputgroup-addon-min-width: 40; /* @kind spacing */ --inputgroup-addon-padding: var(--spacing-padding-8); --inputnumber-button-active-background: var(--surface-700); /* @kind color */ --inputnumber-button-active-border-color: var(--form-field-border-color); /* @kind color */ --inputnumber-button-active-color: var(--surface-200); /* @kind color */ --inputnumber-button-background: rgba(0,0,0,0); /* @kind color */ --inputnumber-button-border-color: var(--form-field-border-color); /* @kind color */ --inputnumber-button-border-radius: var(--form-field-border-radius); --inputnumber-button-color: var(--surface-400); /* @kind color */ --inputnumber-button-hover-background: var(--surface-800); /* @kind color */ --inputnumber-button-hover-border-color: var(--form-field-border-color); /* @kind color */ --inputnumber-button-hover-color: var(--surface-300); /* @kind color */ --inputnumber-button-vertical-padding: var(--form-field-padding-y); --inputnumber-button-width: 35; /* @kind spacing */ --inputotp-gap: var(--spacing-gap-8-2); --inputotp-input-lg-width: 48; /* @kind spacing */ --inputotp-input-sm-width: 32; /* @kind spacing */ --inputotp-input-width: 40; /* @kind spacing */ --inputtext-background: var(--form-field-background); /* @kind color */ --inputtext-border-color: var(--form-field-border-color); /* @kind color */ --inputtext-border-radius: var(--form-field-border-radius); --inputtext-color: var(--form-field-color); /* @kind color */ --inputtext-disabled-background: var(--form-field-disabled-background); /* @kind color */ --inputtext-disabled-color: var(--form-field-disabled-color); /* @kind color */ --inputtext-filled-background: var(--form-field-filled-background); /* @kind color */ --inputtext-filled-focus-background: var(--form-field-filled-focus-background); /* @kind color */ --inputtext-filled-hover-background: var(--form-field-filled-hover-background); /* @kind color */ --inputtext-focus-border-color: var(--form-field-focus-border-color); /* @kind color */ --inputtext-focus-ring-color: var(--form-field-focus-ring-color); /* @kind color */ --inputtext-focus-ring-offset: var(--form-field-focus-ring-offset); --inputtext-focus-ring-width: var(--form-field-focus-ring-width); --inputtext-gap: var(--form-field-gap); --inputtext-gutter: 4; /* @kind spacing */ --inputtext-helper-color: var(--form-field-helper-color); /* @kind color */ --inputtext-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --inputtext-icon-color: var(--form-field-icon-color); /* @kind color */ --inputtext-icon-gap: var(--form-field-icon-gap); --inputtext-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --inputtext-invalid-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --inputtext-invalid-placeholder-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --inputtext-lg-font-size: var(--form-field-lg-font-size); --inputtext-lg-padding-x: var(--form-field-lg-padding-x); --inputtext-lg-padding-y: var(--form-field-lg-padding-y); --inputtext-padding-x: var(--form-field-padding-x); --inputtext-padding-y: var(--form-field-padding-y); --inputtext-placeholder-color: var(--form-field-placeholder-color); /* @kind color */ --inputtext-sm-font-size: var(--form-field-sm-font-size); --inputtext-sm-padding-x: var(--form-field-sm-padding-x); --inputtext-sm-padding-y: var(--form-field-sm-padding-y); --label-font-weight: var(--font-weight-semibold); --list-gap: var(--spacing-gap-2); --list-group-color: var(--text-secondary-color); /* @kind color */ --list-group-font-weight: var(--font-weight-semibold); --list-option-border-radius: var(--border-radius-sm); --list-option-color: var(--text-primary-color); /* @kind color */ --list-option-focus-background: var(--surface-800); /* @kind color */ --list-option-focus-color: var(--text-primary-color); /* @kind color */ --list-option-font-height: 20; /* @kind font */ --list-option-font-size: var(--font-size-body); --list-option-font-weight: var(--font-weight-regular); --list-option-group-background: var(--white-0); /* @kind color */ --list-option-group-color: var(--text-secondary-color); /* @kind color */ --list-option-group-font-weight: var(--font-weight-semibold); --list-option-icon-color: var(--icon-default-color); /* @kind color */ --list-option-icon-focus-color: var(--icon-default-hover-color); /* @kind color */ --list-option-padding-x: var(--spacing-padding-12); --list-option-padding-y: var(--spacing-padding-8); --list-option-selected-background: var(--highlight-background); /* @kind color */ --list-option-selected-color: var(--highlight-color); /* @kind color */ --list-option-selected-focus-background: var(--highlight-focus-background); /* @kind color */ --list-option-selected-focus-color: var(--highlight-focus-color); /* @kind color */ --list-padding-x: var(--spacing-padding-4); --list-padding-y: var(--spacing-padding-4); --marketingbanner-basic-background: var(--primary-100); /* @kind color */ --marketingbanner-basic-secondary-background: var(--surface-100); /* @kind color */ --marketingbanner-button-gap: var(--spacing-gap-8-2); --marketingbanner-close-icon-default: var(--icon-default-color); /* @kind color */ --marketingbanner-close-icon-hover: var(--icon-default-hover-color); /* @kind color */ --marketingbanner-color: var(--text-primary-color); /* @kind color */ --marketingbanner-content-gap: var(--spacing-gap-24); --marketingbanner-content-padding: var(--spacing-padding-24); --marketingbanner-description-font-size: var(--font-size-body-large); --marketingbanner-font-size: 16; /* @kind font */ --marketingbanner-font-weight: "400"; --marketingbanner-header-gap: var(--spacing-gap-8-2); --marketingbanner-image-content-padding-y: var(--spacing-padding-32); --marketingbanner-image-padding-x: var(--spacing-padding-32); --marketingbanner-padding-x: 180; /* @kind spacing */ --marketingbanner-padding-y: var(--spacing-padding-32); --marketingbanner-title-gap: var(--spacing-gap-8-2); --mask-background: rgba(0,0,0,0.6); /* @kind color */ --mask-color: var(--surface-200); /* @kind color */ --megamenu-mobile-button-hover-color: var(--text-secondary-hover-color); /* @kind color */ --menu-background: var(--content-background); /* @kind color */ --menu-border-color: var(--content-border-color); /* @kind color */ --menu-border-radius: var(--content-border-radius); --menu-color: var(--content-color); /* @kind color */ --menu-item-border-radius: var(--navigation-item-border-radius); --menu-item-color: var(--navigation-item-color); /* @kind color */ --menu-item-destructive-color: var(--navigation-item-destructive-color); /* @kind color */ --menu-item-destructive-focus-color: var(--text-destructive-color); /* @kind color */ --menu-item-destructive-icon-color: var(--navigation-item-destructive-icon-color); /* @kind color */ --menu-item-destructive-icon-focus-color: var(--navigation-item-destructive-hover-icon-color); /* @kind color */ --menu-item-focus-background: var(--navigation-item-focus-background); /* @kind color */ --menu-item-focus-color: var(--navigation-item-focus-color); /* @kind color */ --menu-item-gap: var(--navigation-item-gap); --menu-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --menu-item-icon-focus-color: var(--navigation-item-icon-focus-color); /* @kind color */ --menu-item-padding-x: var(--navigation-item-padding-x); --menu-item-padding-y: var(--navigation-item-padding-y); --menu-list-gap: var(--navigation-list-gap); --menu-list-padding-x: var(--navigation-list-padding-x); --menu-list-padding-y: var(--navigation-list-padding-y); --menu-separator-border-color: var(--content-border-color); /* @kind color */ --menu-submenu-label-background: var(--navigation-submenu-label-background); /* @kind color */ --menu-submenu-label-color: var(--navigation-submenu-label-color); /* @kind color */ --menu-submenu-label-font-weight: var(--navigation-submenu-label-font-weight); --menu-submenu-label-padding-x: var(--navigation-submenu-label-padding-x); --menu-submenu-label-padding-y: var(--navigation-submenu-label-padding-y); --menubar-menubar-background: var(--content-background); /* @kind color */ --menubar-menubar-base-item-border-radius: var(--content-border-radius); --menubar-menubar-border-color: var(--content-border-color); /* @kind color */ --menubar-menubar-border-radius: var(--content-border-radius); --menubar-menubar-color: var(--content-color); /* @kind color */ --menubar-menubar-gap: var(--spacing-gap-8-2); --menubar-menubar-item-active-background: var(--navigation-item-active-background); /* @kind color */ --menubar-menubar-item-active-color: var(--navigation-item-active-color); /* @kind color */ --menubar-menubar-item-border-radius: var(--navigation-item-border-radius); --menubar-menubar-item-color: var(--navigation-item-color); /* @kind color */ --menubar-menubar-item-focus-background: var(--navigation-item-focus-background); /* @kind color */ --menubar-menubar-item-focus-color: var(--navigation-item-focus-color); /* @kind color */ --menubar-menubar-item-gap: var(--navigation-item-gap); --menubar-menubar-item-icon-active-color: var(--navigation-item-icon-active-color); /* @kind color */ --menubar-menubar-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --menubar-menubar-item-icon-focus-color: var(--navigation-item-icon-focus-color); /* @kind color */ --menubar-menubar-mobile-button-border-radius: 14; /* @kind radius */ --menubar-menubar-mobile-button-color: var(--text-secondary-color); /* @kind color */ --menubar-menubar-mobile-button-focus-ring-color: var(--focus-ring-color); /* @kind color */ --menubar-menubar-mobile-button-focus-ring-offset: var(--focus-ring-offset); --menubar-menubar-mobile-button-focus-ring-width: var(--focus-ring-width); --menubar-menubar-mobile-button-hover-background: var(--content-hover-background); /* @kind color */ --menubar-menubar-mobile-button-hover-color: var(--text-secondary-hover-color); /* @kind color */ --menubar-menubar-mobile-button-size: 32; /* @kind spacing */ --menubar-menubar-separator-border-color: var(--content-border-color); /* @kind color */ --menubar-menubar-submenu-background: var(--content-background); /* @kind color */ --menubar-menubar-submenu-border-color: var(--content-border-color); /* @kind color */ --menubar-menubar-submenu-border-radius: var(--content-border-radius); --menubar-menubar-submenu-gap: var(--navigation-list-gap); --menubar-menubar-submenu-icon-active-color: var(--navigation-submenu-icon-active-color); /* @kind color */ --menubar-menubar-submenu-icon-color: var(--navigation-submenu-icon-color); /* @kind color */ --menubar-menubar-submenu-icon-focus-color: var(--navigation-submenu-icon-focus-color); /* @kind color */ --menubar-menubar-submenu-icon-size: var(--navigation-submenu-icon-size); --menubar-menubar-submenu-mobile-indent: 14; /* @kind spacing */ --message-border-radius: var(--content-border-radius); --message-border-width: 1; /* @kind spacing */ --message-close-button-border-radius: 14; /* @kind radius */ --message-close-button-focus-ring-offset: var(--focus-ring-offset); --message-close-button-focus-ring-width: var(--focus-ring-width); --message-close-button-height: 24; /* @kind spacing */ --message-close-button-width: 24; /* @kind spacing */ --message-close-icon-lg-size: 18; /* @kind spacing */ --message-close-icon-size: 16; /* @kind spacing */ --message-close-icon-sm-size: 14; /* @kind spacing */ --message-color: var(--text-primary-color); /* @kind color */ --message-content-gap: var(--spacing-gap-4); --message-contrast-background: var(--foreground-700); /* @kind color */ --message-contrast-border-color: var(--foreground-700); /* @kind color */ --message-contrast-close-button-focus-ring-color: var(--surface-950); /* @kind color */ --message-contrast-close-button-hover-background: var(--surface-100); /* @kind color */ --message-contrast-color: var(--text-inverse-color); /* @kind color */ --message-contrast-outlined-border-color: var(--surface-950); /* @kind color */ --message-contrast-outlined-color: var(--surface-950); /* @kind color */ --message-contrast-simple-color: var(--surface-950); /* @kind color */ --message-detail-font-size: var(--font-size-body); --message-detail-font-weight: var(--font-weight-regular); --message-error-background: var(--red-100); /* @kind color */ --message-error-border-color: var(--red-500); /* @kind color */ --message-error-close-button-focus-ring-color: var(--red-700); /* @kind color */ --message-error-close-button-hover-background: var(--red-100); /* @kind color */ --message-error-color: var(--red-900); /* @kind color */ --message-error-outlined-border-color: var(--red-600); /* @kind color */ --message-error-outlined-color: var(--red-900); /* @kind color */ --message-error-simple-color: var(--red-900); /* @kind color */ --message-gap: var(--spacing-gap-8-2); --message-icon-lg-size: 20; /* @kind spacing */ --message-icon-size: 18; /* @kind spacing */ --message-icon-sm-size: 16; /* @kind spacing */ --message-info-background: var(--blue-100); /* @kind color */ --message-info-border-color: var(--blue-500); /* @kind color */ --message-info-close-button-focus-ring-color: var(--blue-700); /* @kind color */ --message-info-close-button-hover-background: var(--blue-100); /* @kind color */ --message-info-color: var(--blue-900); /* @kind color */ --message-info-outlined-border-color: var(--blue-600); /* @kind color */ --message-info-outlined-color: var(--blue-900); /* @kind color */ --message-info-simple-color: var(--blue-900); /* @kind color */ --message-marketing-background: var(--orange-100); /* @kind color */ --message-marketing-border-color: var(--orange-500); /* @kind color */ --message-marketing-close-button-focus-ring-color: var(--orange-700); /* @kind color */ --message-marketing-close-button-hover-background: rgba(255,255,255,0.05); /* @kind color */ --message-marketing-color: var(--orange-900); /* @kind color */ --message-marketing-outlined-border-color: var(--orange-600); /* @kind color */ --message-marketing-outlined-color: var(--orange-900); /* @kind color */ --message-marketing-simple-color: var(--orange-900); /* @kind color */ --message-outlined-border-width: 1; /* @kind spacing */ --message-padding-x: var(--spacing-padding-12); --message-padding-y: var(--spacing-padding-8); --message-secondary-background: var(--surface-100); /* @kind color */ --message-secondary-border-color: var(--surface-500); /* @kind color */ --message-secondary-close-button-focus-ring-color: var(--surface-700); /* @kind color */ --message-secondary-close-button-hover-background: var(--surface-700); /* @kind color */ --message-secondary-color: var(--text-primary-color); /* @kind color */ --message-secondary-outlined-border-color: var(--surface-600); /* @kind color */ --message-secondary-outlined-color: var(--surface-900); /* @kind color */ --message-secondary-simple-color: var(--text-secondary-color); /* @kind color */ --message-simple-content-padding: var(--spacing-padding-0); --message-success-background: var(--green-100); /* @kind color */ --message-success-border-color: var(--green-500); /* @kind color */ --message-success-close-button-focus-ring-color: var(--green-700); /* @kind color */ --message-success-close-button-hover-background: rgba(255,255,255,0.05); /* @kind color */ --message-success-color: var(--green-900); /* @kind color */ --message-success-outlined-border-color: var(--green-600); /* @kind color */ --message-success-outlined-color: var(--green-900); /* @kind color */ --message-success-simple-color: var(--green-900); /* @kind color */ --message-summary-font-size: var(--font-size-body-large); --message-summary-font-weight: var(--font-weight-semibold); --message-warn-background: var(--yellow-100); /* @kind color */ --message-warn-border-color: var(--yellow-500); /* @kind color */ --message-warn-close-button-focus-ring-color: var(--yellow-700); /* @kind color */ --message-warn-close-button-hover-background: rgba(255,255,255,0.05); /* @kind color */ --message-warn-color: var(--yellow-900); /* @kind color */ --message-warn-outlined-border-color: var(--yellow-600); /* @kind color */ --message-warn-outlined-color: var(--yellow-900); /* @kind color */ --message-warn-simple-color: var(--yellow-900); /* @kind color */ --messagecontainer-body-gap: var(--spacing-gap-16-2); --messagecontainer-content-font-size: var(--font-size-body); --messagecontainer-content-font-weight: var(--font-weight-regular); --messagecontainer-gap: var(--spacing-gap-24); --messagecontainer-header-font-size: var(--font-size-heading-large); --messagecontainer-header-font-weight: var(--font-weight-semibold); --messagecontainer-padding-y: var(--spacing-padding-32); --metergroup-border-radius: var(--content-border-radius); --metergroup-gap: var(--spacing-gap-16-2); --metergroup-label-gap: var(--spacing-gap-8-2); --metergroup-label-icon-size: 14; /* @kind spacing */ --metergroup-label-list-horizontal-gap: var(--spacing-gap-16-2); --metergroup-label-list-vertical-gap: var(--spacing-gap-8-2); --metergroup-label-marker-size: 8; /* @kind spacing */ --metergroup-meters-background: var(--content-border-color); /* @kind color */ --metergroup-meters-size: 8; /* @kind spacing */ --metrictile-background: var(--content-background); /* @kind color */ --metrictile-border-color: var(--content-border-color); /* @kind color */ --metrictile-border-radius: var(--content-border-radius); --metrictile-content-gap: 4; /* @kind spacing */ --metrictile-gap: 16; /* @kind spacing */ --metrictile-header-gap: 8; /* @kind spacing */ --metrictile-padding-x: 16; /* @kind spacing */ --metrictile-padding-y: 0; /* @kind spacing */ --metrictile-trend-border-radius: var(--border-radius-md); --metrictile-trend-font-size: var(--font-size-body); --metrictile-trend-font-weight: var(--font-weight-bold); --metrictile-trend-gap: 4; /* @kind spacing */ --metrictile-trend-negative-background: rgba(239,68,68,0.16); /* @kind color */ --metrictile-trend-negative-color: var(--red-300); /* @kind color */ --metrictile-trend-padding-x: 8; /* @kind spacing */ --metrictile-trend-padding-y: 4; /* @kind spacing */ --metrictile-trend-positive-background: rgba(34,197,94,0.16); /* @kind color */ --metrictile-trend-positive-color: var(--green-300); /* @kind color */ --metrictile-unit-color: var(--text-primary-color); /* @kind color */ --metrictile-unit-font-height: 42; /* @kind font */ --metrictile-unit-font-size: 36; /* @kind font */ --metrictile-unit-font-weight: var(--font-weight-bold); --metrictile-unit-gap: 8; /* @kind spacing */ --multiselect-background: var(--form-field-background); /* @kind color */ --multiselect-border-color: var(--form-field-border-color); /* @kind color */ --multiselect-border-radius: var(--form-field-border-radius); --multiselect-chip-border-radius: var(--border-radius-sm); --multiselect-clear-icon-color: var(--form-field-icon-color); /* @kind color */ --multiselect-color: var(--form-field-color); /* @kind color */ --multiselect-disabled-background: var(--form-field-disabled-background); /* @kind color */ --multiselect-disabled-color: var(--form-field-disabled-color); /* @kind color */ --multiselect-dropdown-color: var(--form-field-icon-color); /* @kind color */ --multiselect-dropdown-gutter: 4; /* @kind spacing */ --multiselect-figma-chip-padding-bottom: 4; /* @kind spacing */ --multiselect-figma-chip-padding-top: 4; /* @kind spacing */ --multiselect-figma-input-multiple-gap: 4; /* @kind spacing */ --multiselect-filled-hover-background: var(--form-field-filled-hover-background); /* @kind color */ --multiselect-filter-padding-x: 0; /* @kind spacing */ --multiselect-filter-y-bottom: 4; /* @kind other */ --multiselect-focus-border-color: var(--form-field-focus-border-color); /* @kind color */ --multiselect-focus-ring-color: var(--form-field-focus-ring-color); /* @kind color */ --multiselect-focus-ring-offset: var(--form-field-focus-ring-offset); --multiselect-focus-ring-width: var(--form-field-focus-ring-width); --multiselect-gap: 12; /* @kind spacing */ --multiselect-group-option-padding-x: 24; /* @kind spacing */ --multiselect-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --multiselect-icon-color: var(--icon-default-color); /* @kind color */ --multiselect-icon-dropdown-color: var(--icon-default-color); /* @kind color */ --multiselect-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --multiselect-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --multiselect-invalid-hover-background: rgba(255,210,210,0.6); /* @kind color */ --multiselect-invalid-placeholder-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --multiselect-lg-font-size: var(--form-field-lg-font-size); --multiselect-lg-padding-x: var(--form-field-lg-padding-x); --multiselect-lg-padding-y: var(--form-field-lg-padding-y); --multiselect-list-gap: var(--list-gap); --multiselect-option-border-radius: var(--list-option-border-radius); --multiselect-option-color: var(--list-option-color); /* @kind color */ --multiselect-option-focus-background: var(--list-option-focus-background); /* @kind color */ --multiselect-option-focus-color: var(--list-option-focus-color); /* @kind color */ --multiselect-option-gap: 8; /* @kind spacing */ --multiselect-option-group-background: var(--list-option-group-background); /* @kind color */ --multiselect-option-group-color: var(--list-option-group-color); /* @kind color */ --multiselect-option-group-font-weight: var(--list-option-group-font-weight); --multiselect-option-padding-x: 12; /* @kind spacing */ --multiselect-option-selected-background: var(--list-option-selected-background); /* @kind color */ --multiselect-option-selected-color: var(--list-option-selected-color); /* @kind color */ --multiselect-option-selected-focus-background: var(--list-option-selected-focus-background); /* @kind color */ --multiselect-option-selected-focus-color: var(--list-option-selected-focus-color); /* @kind color */ --multiselect-overlay-background: var(--overlay-select-background); /* @kind color */ --multiselect-overlay-border-color: var(--overlay-select-border-color); /* @kind color */ --multiselect-overlay-border-radius: var(--overlay-select-border-radius); --multiselect-overlay-color: var(--overlay-select-color); /* @kind color */ --multiselect-padding-x: var(--form-field-padding-x); --multiselect-padding-y: var(--form-field-padding-y); --multiselect-placeholder-color: var(--form-field-placeholder-color); /* @kind color */ --multiselect-search-gap: 8; /* @kind spacing */ --multiselect-search-padding-x: 4; /* @kind spacing */ --multiselect-sm-font-size: var(--form-field-sm-font-size); --multiselect-sm-padding-x: var(--form-field-sm-padding-x); --multiselect-sm-padding-y: var(--form-field-sm-padding-y); --multiselect-template-color: var(--textarea-placeholder-color); /* @kind color */ --multiselect-template-option-description-padding-x: 32; /* @kind spacing */ --navigation-account-header-gap: 12; /* @kind spacing */ --navigation-account-header-padding-x: 16; /* @kind spacing */ --navigation-account-header-padding-y: 8; /* @kind spacing */ --navigation-item-active-background: var(--surface-300); /* @kind color */ --navigation-item-active-color: var(--text-primary-color); /* @kind color */ --navigation-item-border-radius: var(--border-radius-sm); --navigation-item-color: var(--text-primary-color); /* @kind color */ --navigation-item-destructive-color: var(--text-destructive-color); /* @kind color */ --navigation-item-destructive-hover-color: var(--text-destructive-hover-color); /* @kind color */ --navigation-item-destructive-hover-icon-color: var(--icon-destructive-hover-color); /* @kind color */ --navigation-item-destructive-icon-color: var(--icon-destructive-color); /* @kind color */ --navigation-item-focus-background: var(--surface-200); /* @kind color */ --navigation-item-focus-color: var(--text-primary-color); /* @kind color */ --navigation-item-gap: var(--spacing-gap-8-2); --navigation-item-icon-active-color: var(--icon-default-hover-color); /* @kind color */ --navigation-item-icon-color: var(--icon-default-color); /* @kind color */ --navigation-item-icon-focus-color: var(--icon-default-hover-color); /* @kind color */ --navigation-item-padding-x: var(--spacing-padding-12); --navigation-item-padding-y: var(--spacing-padding-8); --navigation-list-gap: var(--spacing-gap-2); --navigation-list-padding-x: var(--spacing-padding-4); --navigation-list-padding-y: var(--spacing-padding-4); --navigation-submenu-icon-active-color: var(--icon-default-color); /* @kind color */ --navigation-submenu-icon-color: var(--icon-default-color); /* @kind color */ --navigation-submenu-icon-focus-color: var(--icon-default-color); /* @kind color */ --navigation-submenu-icon-size: 14; /* @kind spacing */ --navigation-submenu-label-background: rgba(0,0,0,0); /* @kind color */ --navigation-submenu-label-color: var(--text-secondary-color); /* @kind color */ --navigation-submenu-label-font-weight: var(--font-weight-semibold); --navigation-submenu-label-padding-x: var(--spacing-padding-12); --navigation-submenu-label-padding-y: var(--spacing-padding-8); --navigation-top-icon-gap: 8; /* @kind spacing */ --navigation-top-paddingx: 24; /* @kind spacing */ --navigation-topaccount-icon-hover-size: 34; /* @kind spacing */ --navigation-topaccount-icon-size: 30; /* @kind spacing */ --navy-100-2: rgb(234,237,241); /* @kind color */ --navy-100: rgb(23,25,28); /* @kind color */ --navy-200: rgb(31,35,40); /* @kind color */ --navy-300: rgb(36,43,50); /* @kind color */ --navy-400: rgb(43,51,58); /* @kind color */ --navy-500-2: rgb(108,128,157); /* @kind color */ --navy-500: rgb(51,61,69); /* @kind color */ --navy-50: rgb(15,17,20); /* @kind color */ --navy-600: rgb(85,100,114); /* @kind color */ --navy-700: rgb(82,97,111); /* @kind color */ --navy-800: rgb(165,179,192); /* @kind color */ --navy-900-2: rgb(39,53,73); /* @kind color */ --navy-900: rgb(168,182,195); /* @kind color */ --navy-950-2: rgb(27,36,50); /* @kind color */ --navy-950: rgb(232,237,243); /* @kind color */ --orange-100: rgb(30,22,15); /* @kind color */ --orange-200: rgb(51,30,11); /* @kind color */ --orange-300: rgb(70,33,0); /* @kind color */ --orange-400: rgb(86,40,0); /* @kind color */ --orange-500: rgb(102,53,12); /* @kind color */ --orange-50: rgb(23,18,14); /* @kind color */ --orange-600: rgb(163,88,41); /* @kind color */ --orange-700: rgb(247,107,21); /* @kind color */ --orange-800: rgb(255,128,31); /* @kind color */ --orange-900: rgb(255,160,87); /* @kind color */ --orange-950: rgb(255,224,194); /* @kind color */ --overlay-modal-background: var(--surface-200); /* @kind color */ --overlay-modal-border-color: var(--surface-500); /* @kind color */ --overlay-modal-border-radius: var(--border-radius-lg); --overlay-modal-color: var(--text-primary-color); /* @kind color */ --overlay-modal-padding: var(--spacing-padding-24); --overlay-popover-background: var(--surface-200); /* @kind color */ --overlay-popover-border-color: var(--surface-500); /* @kind color */ --overlay-popover-border-radius: var(--border-radius-md); --overlay-popover-color: var(--text-primary-color); /* @kind color */ --overlay-popover-padding: var(--spacing-padding-12); --overlay-select-background: var(--surface-200); /* @kind color */ --overlay-select-border-color: var(--surface-500); /* @kind color */ --overlay-select-border-radius: var(--border-radius-md); --overlay-select-color: var(--text-primary-color); /* @kind color */ --overlaybadge-outline-color: var(--content-background); /* @kind color */ --overlaybadge-outline-width: 2; /* @kind spacing */ --paginator-background: var(--content-background); /* @kind color */ --paginator-border-radius: var(--content-border-radius); --paginator-color: var(--content-color); /* @kind color */ --paginator-current-page-report-color: var(--text-secondary-color); /* @kind color */ --paginator-gap: 4; /* @kind spacing */ --paginator-jump-to-page-input-max-width-2: 36; /* @kind spacing */ --paginator-jump-to-page-input-max-width-3: 36; /* @kind spacing */ --paginator-jump-to-page-input-max-width-4: 36; /* @kind spacing */ --paginator-jump-to-page-input-max-width: 36; /* @kind spacing */ --paginator-nav-button-background: var(--content-background); /* @kind color */ --paginator-nav-button-border-radius: 20; /* @kind radius */ --paginator-nav-button-color: var(--text-secondary-color); /* @kind color */ --paginator-nav-button-disabled-opacity: var(--disabled-opacity); --paginator-nav-button-focus-ring-color: var(--focus-ring-color); /* @kind color */ --paginator-nav-button-focus-ring-offset: var(--focus-ring-offset); --paginator-nav-button-focus-ring-width: var(--focus-ring-width); --paginator-nav-button-height: 36; /* @kind spacing */ --paginator-nav-button-hover-background: var(--content-hover-background); /* @kind color */ --paginator-nav-button-hover-color: var(--content-hover-color-2); /* @kind color */ --paginator-nav-button-selected-background: var(--highlight-background); /* @kind color */ --paginator-nav-button-selected-color: var(--highlight-color); /* @kind color */ --paginator-nav-button-width: 36; /* @kind spacing */ --paginator-padding-x: 16; /* @kind spacing */ --paginator-padding-y: 8; /* @kind spacing */ --panel-background: var(--content-background); /* @kind color */ --panel-border-color: var(--content-border-color); /* @kind color */ --panel-border-radius: var(--content-border-radius); --panel-color: var(--content-color); /* @kind color */ --panel-header-background: var(--content-background); /* @kind color */ --panel-header-border-color: var(--content-border-color); /* @kind color */ --panel-header-border-radius: var(--content-border-radius); --panel-header-color: var(--text-primary-color); /* @kind color */ --panel-header-padding-x: 20; /* @kind spacing */ --panel-header-padding-y: 8; /* @kind spacing */ --panel-padding-x: 20; /* @kind spacing */ --panel-padding-y: 20; /* @kind spacing */ --panelmenu-gap: 8; /* @kind spacing */ --panelmenu-item-active-background: var(--primary-200); /* @kind color */ --panelmenu-item-active-color: var(--icon-accent-color); /* @kind color */ --panelmenu-item-border-radius: var(--content-border-radius); --panelmenu-item-color: var(--navigation-item-color); /* @kind color */ --panelmenu-item-focus-background: var(--navigation-item-focus-background); /* @kind color */ --panelmenu-item-focus-color: var(--navigation-item-focus-color); /* @kind color */ --panelmenu-item-gap: 8; /* @kind spacing */ --panelmenu-item-icon-active: var(--panelmenu-item-icon-color); /* @kind color */ --panelmenu-item-icon-color: var(--navigation-item-icon-color); /* @kind color */ --panelmenu-item-icon-focus-color: var(--navigation-item-icon-focus-color); /* @kind color */ --panelmenu-item-padding-x: 12; /* @kind spacing */ --panelmenu-item-padding-y: 8; /* @kind spacing */ --panelmenu-panel-background: var(--content-background); /* @kind color */ --panelmenu-panel-border-color: var(--content-border-color); /* @kind color */ --panelmenu-panel-border-radius: var(--content-border-radius); --panelmenu-panel-border-width: 1; /* @kind spacing */ --panelmenu-panel-color: var(--content-color); /* @kind color */ --panelmenu-panel-first-border-width: 1; /* @kind spacing */ --panelmenu-panel-first-top-border-radius: var(--content-border-radius); --panelmenu-panel-last-border-width: 1; /* @kind spacing */ --panelmenu-panel-last-bottom-border-radius: var(--content-border-radius); --panelmenu-panel-padding: 4; /* @kind spacing */ --panelmenu-submenu-icon-color: var(--navigation-submenu-icon-color); /* @kind color */ --panelmenu-submenu-icon-focus-color: var(--navigation-submenu-icon-focus-color); /* @kind color */ --panelmenu-submenu-indent: 14; /* @kind spacing */ --password-content-gap: 8; /* @kind spacing */ --password-icon-color: var(--form-field-icon-color); /* @kind color */ --password-meter-background: var(--content-border-color); /* @kind color */ --password-meter-border-radius: var(--content-border-radius); --password-meter-height: 12; /* @kind spacing */ --password-overlay-background: var(--overlay-popover-background); /* @kind color */ --password-overlay-border-color: var(--overlay-popover-border-color); /* @kind color */ --password-overlay-border-radius: var(--overlay-popover-border-radius); --password-overlay-color: var(--overlay-popover-color); /* @kind color */ --password-overlay-padding: var(--overlay-popover-padding); --password-strength-medium-background: var(--amber-400); /* @kind color */ --password-strength-strong-background: var(--green-400); /* @kind color */ --password-strength-weak-background: var(--red-400); /* @kind color */ --popover-arrow-offset: 20; /* @kind spacing */ --popover-background: var(--overlay-popover-background); /* @kind color */ --popover-border-color: var(--overlay-popover-border-color); /* @kind color */ --popover-border-radius: var(--overlay-popover-border-radius); --popover-color: var(--overlay-popover-color); /* @kind color */ --popover-content-padding: var(--overlay-popover-padding); --popover-gutter: 10; /* @kind spacing */ --primary-100: var(--sky-100); /* @kind color */ --primary-200: var(--sky-200); /* @kind color */ --primary-300: var(--sky-300); /* @kind color */ --primary-400-2: var(--sky-400-2); /* @kind color */ --primary-400: var(--sky-400); /* @kind color */ --primary-500-2: var(--sky-500-2); /* @kind color */ --primary-500: var(--sky-500); /* @kind color */ --primary-50: var(--sky-50); /* @kind color */ --primary-600: var(--sky-600); /* @kind color */ --primary-700: var(--sky-700); /* @kind color */ --primary-800: var(--sky-800); /* @kind color */ --primary-900: var(--sky-900); /* @kind color */ --primary-950: var(--sky-950); /* @kind color */ --primary-active-color: var(--active-sky-color); /* @kind color */ --primary-color-2: var(--primary-400-2); /* @kind color */ --primary-color: var(--primary-700); /* @kind color */ --primary-contrast-color: var(--surface-900); /* @kind color */ --primary-disabled-color: rgba(27,150,255,0.6); /* @kind color */ --primary-hover-color: var(--primary-800); /* @kind color */ --productsubscription-active-color: rgb(255,255,255); /* @kind color */ --productsubscription-color: rgb(255,255,255); /* @kind color */ --progressbar-background: var(--surface-200); /* @kind color */ --progressbar-border-radius: var(--content-border-radius); --progressbar-color: var(--text-primary-color); /* @kind color */ --progressbar-gap: var(--spacing-gap-8-2); --progressbar-height: 20; /* @kind spacing */ --progressbar-label-color: var(--primary-contrast-color); /* @kind color */ --progressbar-label-font-size: var(--font-size-caption); --progressbar-label-font-weight: var(--font-weight-semibold); --progressbar-value-background: var(--primary-color); /* @kind color */ --progressbar-value-color: var(--text-inverse-color); /* @kind color */ --progressspinner-color-accent: var(--primary-color); /* @kind color */ --progressspinner-color-four: var(--yellow-400); /* @kind color */ --progressspinner-color-one: var(--red-400); /* @kind color */ --progressspinner-color-three: var(--green-400); /* @kind color */ --progressspinner-color-two: var(--blue-400); /* @kind color */ --progressspinner-color-white: var(--white-0); /* @kind color */ --radiobutton-background: var(--form-field-background); /* @kind color */ --radiobutton-border-color: var(--form-field-border-color); /* @kind color */ --radiobutton-checked-background: var(--primary-color); /* @kind color */ --radiobutton-checked-border-color: var(--primary-color); /* @kind color */ --radiobutton-checked-disabled-border-color: var(--form-field-border-color); /* @kind color */ --radiobutton-checked-focus-border-color: var(--primary-color); /* @kind color */ --radiobutton-checked-hover-background: var(--primary-hover-color); /* @kind color */ --radiobutton-checked-hover-border-color: var(--primary-hover-color); /* @kind color */ --radiobutton-disabled-background: var(--form-field-disabled-background); /* @kind color */ --radiobutton-filled-background: var(--form-field-filled-background); /* @kind color */ --radiobutton-focus-border-color: var(--form-field-border-color); /* @kind color */ --radiobutton-focus-ring-color: var(--focus-ring-color); /* @kind color */ --radiobutton-focus-ring-offset: var(--focus-ring-offset); --radiobutton-focus-ring-width: var(--focus-ring-width); --radiobutton-gap: var(--spacing-gap-8-2); --radiobutton-group-options-gap-x: 12; /* @kind spacing */ --radiobutton-group-options-gap-y: 16; /* @kind spacing */ --radiobutton-height: 20; /* @kind spacing */ --radiobutton-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --radiobutton-icon-checked-color: var(--primary-contrast-color); /* @kind color */ --radiobutton-icon-checked-hover-color: var(--white-0); /* @kind color */ --radiobutton-icon-disabled-color: var(--icon-default-disabled-color); /* @kind color */ --radiobutton-icon-lg-size: 14; /* @kind spacing */ --radiobutton-icon-size: 12; /* @kind spacing */ --radiobutton-icon-sm-size: 8; /* @kind spacing */ --radiobutton-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --radiobutton-lg-height: 24; /* @kind spacing */ --radiobutton-lg-width: 24; /* @kind spacing */ --radiobutton-sm-height: 14; /* @kind spacing */ --radiobutton-sm-width: 14; /* @kind spacing */ --radiobutton-width: 20; /* @kind spacing */ --rating-focus-ring-color: var(--focus-ring-color); /* @kind color */ --rating-focus-ring-offset: var(--focus-ring-offset); --rating-focus-ring-width: var(--focus-ring-width); --rating-gap: var(--spacing-gap-4); --rating-icon-active-color: var(--primary-color); /* @kind color */ --rating-icon-color: var(--icon-default-color); /* @kind color */ --rating-icon-hover-color: var(--primary-color); /* @kind color */ --rating-icon-lg-size: 30; /* @kind spacing */ --rating-icon-size: 14; /* @kind spacing */ --red-100: rgb(32,19,20); /* @kind color */ --red-200: rgb(59,18,25); /* @kind color */ --red-300: rgb(80,15,28); /* @kind color */ --red-400-2: rgb(248,113,113); /* @kind color */ --red-400: rgb(97,22,35); /* @kind color */ --red-500-2: rgb(239,68,68); /* @kind color */ --red-500: rgb(114,35,45); /* @kind color */ --red-50: rgb(25,17,17); /* @kind color */ --red-600: rgb(181,69,72); /* @kind color */ --red-700: rgb(229,72,77); /* @kind color */ --red-800: rgb(236,93,94); /* @kind color */ --red-900: rgb(255,149,146); /* @kind color */ --red-950: rgb(255,209,217); /* @kind color */ --rule-background-color: var(--surface-50); /* @kind color */ --rule-border-color: var(--surface-500); /* @kind color */ --rule-border-radius: var(--border-radius-md); --rule-color: var(--text-primary-color); /* @kind color */ --rule-gap: var(--spacing-gap-8-2); --rule-group-gap: var(--spacing-gap-12); --rule-icon-color: var(--icon-default-color); /* @kind color */ --rule-icon-gap: var(--spacing-gap-12); --rule-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --rule-icon-size: var(--icon-size); --rule-nested-group-border-color: var(--surface-500); /* @kind color */ --rule-nested-group-gap: var(--spacing-gap-2); --rule-nested-group-padding-x: 32; /* @kind spacing */ --rule-padding-x: 12; /* @kind spacing */ --rule-padding-y: 8; /* @kind spacing */ --scrollpanel-bar-background: var(--surface-800); /* @kind color */ --scrollpanel-bar-border-radius: var(--border-radius-sm); --scrollpanel-bar-focus-ring-color: var(--focus-ring-color); /* @kind color */ --scrollpanel-bar-hover-color: rgb(255,255,255); /* @kind color */ --scrollpanel-bar-size: 9; /* @kind spacing */ --searchbar-background: var(--form-field-background); /* @kind color */ --searchbar-border-color: var(--form-field-border-color); /* @kind color */ --searchbar-border-hover-color: var(--form-field-hover-border-color); /* @kind color */ --searchbar-border-infocus-color: var(--form-field-focus-border-color); /* @kind color */ --searchbar-border-radius: var(--form-field-border-radius); --searchbar-close-icon-color: var(--icon-default-color); /* @kind color */ --searchbar-close-icon-hover-color: var(--icon-default-hover-color); /* @kind color */ --searchbar-close-icon-width: 32; /* @kind spacing */ --searchbar-filterbar-gap: var(--spacing-gap-24); --searchbar-gap: var(--spacing-gap-8-2); --searchbar-icon-color-2: var(--form-field-icon-color); /* @kind color */ --searchbar-icon-color: var(--form-field-icon-color); /* @kind color */ --searchbar-icon-hover-color: var(--form-field-icon-color); /* @kind color */ --searchbar-padding-x: var(--form-field-padding-x); --searchbar-padding-y: var(--form-field-padding-y); --select-background: var(--form-field-background); /* @kind color */ --select-border-color: var(--form-field-border-color); /* @kind color */ --select-border-radius: var(--form-field-border-radius); --select-checkmark-color: var(--list-option-color); /* @kind color */ --select-checkmark-gutter-end: 6; /* @kind spacing */ --select-checkmark-gutter-start: -6; /* @kind spacing */ --select-clear-icon-color: var(--form-field-icon-color); /* @kind color */ --select-color: var(--form-field-color); /* @kind color */ --select-content-gap: 16; /* @kind spacing */ --select-disabled-background: var(--form-field-disabled-background); /* @kind color */ --select-disabled-color: var(--form-field-disabled-color); /* @kind color */ --select-dropdown-color: var(--form-field-icon-color); /* @kind color */ --select-dropdown-width: 36; /* @kind spacing */ --select-filled-background: var(--form-field-filled-background); /* @kind color */ --select-filled-focus-background: var(--form-field-filled-focus-background); /* @kind color */ --select-filled-hover-background: var(--form-field-filled-hover-background); /* @kind color */ --select-filter-list-padding-x: 4; /* @kind spacing */ --select-filter-list-padding-y: 4; /* @kind spacing */ --select-filter-padding-x: 0; /* @kind spacing */ --select-filter-padding-y-bottom: 4; /* @kind spacing */ --select-filter-padding-y: 0; /* @kind spacing */ --select-filterbar-gap: 16; /* @kind spacing */ --select-focus-border-color: var(--form-field-focus-border-color); /* @kind color */ --select-focus-ring-color: var(--form-field-focus-ring-color); /* @kind color */ --select-focus-ring-offset: var(--form-field-focus-ring-offset); --select-focus-ring-width: var(--form-field-focus-ring-width); --select-gap: var(--form-field-gap); --select-gutter: var(--select-overlay-border-radius); --select-hover-border-color: var(--form-field-hover-border-color); /* @kind color */ --select-icon-color: rgb(255,255,255); /* @kind color */ --select-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --select-invalid-placeholder-color: var(--form-field-invalid-placeholder-color); /* @kind color */ --select-lg-font-size: var(--form-field-lg-font-size); --select-lg-padding-x: var(--form-field-lg-padding-x); --select-lg-padding-y: var(--form-field-lg-padding-y); --select-list-gap: var(--list-gap); --select-option-border-radius: var(--list-option-border-radius); --select-option-color: var(--list-option-color); /* @kind color */ --select-option-focus-background: var(--list-option-focus-background); /* @kind color */ --select-option-focus-color: var(--list-option-focus-color); /* @kind color */ --select-option-group-background: var(--list-option-group-background); /* @kind color */ --select-option-group-color: var(--list-option-group-color); /* @kind color */ --select-option-group-font-weight: var(--list-option-group-font-weight); --select-option-padding-x: 0; /* @kind spacing */ --select-option-padding-y: 0; /* @kind spacing */ --select-option-selected-background: var(--list-option-selected-background); /* @kind color */ --select-option-selected-color: var(--list-option-selected-color); /* @kind color */ --select-option-selected-focus-background: var(--list-option-selected-focus-background); /* @kind color */ --select-option-selected-focus-color: var(--list-option-selected-focus-color); /* @kind color */ --select-overlay-background: var(--overlay-select-background); /* @kind color */ --select-overlay-border-color: var(--overlay-select-border-color); /* @kind color */ --select-overlay-border-radius: var(--overlay-select-border-radius); --select-overlay-color: var(--overlay-select-color); /* @kind color */ --select-padding-x: var(--form-field-padding-x); --select-padding-y: var(--form-field-padding-y); --select-placeholder-color: var(--form-field-placeholder-color); /* @kind color */ --select-sm-font-size: var(--form-field-sm-font-size); --select-sm-padding-x: var(--form-field-sm-padding-x); --select-sm-padding-y: var(--form-field-sm-padding-y); --select-template-color: var(--textarea-placeholder-color); /* @kind color */ --selectbutton-background: var(--surface-950); /* @kind color */ --selectbutton-border-radius: var(--form-field-border-radius); --selectbutton-button-padding: 0; /* @kind spacing */ --selectbutton-color: var(--surface-400); /* @kind color */ --selectbutton-gap: 8; /* @kind spacing */ --selectbutton-icon-color: var(--surface-400); /* @kind color */ --selectbutton-invalid-border-color: var(--form-field-invalid-border-color); /* @kind color */ --selectbutton-padding: 4; /* @kind spacing */ --sidenavigation-background: rgb(39,53,73); /* @kind color */ --sidenavigation-border-color: var(--surface-500); /* @kind color */ --sidenavigation-content-gap: 16; /* @kind spacing */ --sidenavigation-gap: 16; /* @kind spacing */ --sidenavigation-header-color: var(--text-secondary-color); /* @kind color */ --sidenavigation-header-padding: 12; /* @kind spacing */ --sidenavigation-icon-active-color: var(--primary-700); /* @kind color */ --sidenavigation-icon-color: var(--icon-white-color); /* @kind color */ --sidenavigation-icon-size: var(--icon-size); --sidenavigation-item-active-color: var(--primary-700); /* @kind color */ --sidenavigation-item-border-radius: var(--navigation-item-border-radius); --sidenavigation-item-color: var(--text-inverse-color); /* @kind color */ --sidenavigation-item-gap: var(--navigation-item-gap); --sidenavigation-item-group-gap: 4; /* @kind spacing */ --sidenavigation-item-hover-background: rgba(255,255,255,0.1); /* @kind color */ --sidenavigation-item-hover-color: var(--text-inverse-color); /* @kind color */ --sidenavigation-item-padding-x: var(--navigation-item-padding-x); --sidenavigation-item-padding-y: var(--navigation-item-padding-y); --sidenavigation-padding-x: 4; /* @kind spacing */ --skeleton-background: rgba(255,255,255,0.06); /* @kind color */ --skeleton-border-radius: var(--content-border-radius); --sky-100: rgb(14,25,37); /* @kind color */ --sky-200: rgb(11,40,69); /* @kind color */ --sky-300: rgb(0,50,96); /* @kind color */ --sky-400-2: rgb(63,177,242); /* @kind color */ --sky-400: rgb(3,63,114); /* @kind color */ --sky-500-2: rgb(16,158,239); /* @kind color */ --sky-500: rgb(19,78,132); /* @kind color */ --sky-50: rgb(9,18,28); /* @kind color */ --sky-600-2: rgb(10,127,194); /* @kind color */ --sky-600: rgb(39,114,185); /* @kind color */ --sky-700: rgb(27,150,255); /* @kind color */ --sky-800: rgb(0,137,241); /* @kind color */ --sky-900: rgb(114,184,255); /* @kind color */ --sky-950: rgb(201,227,255); /* @kind color */ --sky-primeone-400: rgb(56,189,248); /* @kind color */ --sky-primeone-950: rgb(8,47,73); /* @kind color */ --slider-border-radius: 6; /* @kind radius */ --slider-gap: 16; /* @kind spacing */ --slider-handle-background: var(--content-border-color); /* @kind color */ --slider-handle-border-radius: 10; /* @kind radius */ --slider-handle-content-background: var(--surface-950); /* @kind color */ --slider-handle-content-border-radius: 8; /* @kind radius */ --slider-handle-content-height: 16; /* @kind spacing */ --slider-handle-content-hover-background: var(--content-background); /* @kind color */ --slider-handle-content-width: 16; /* @kind spacing */ --slider-handle-focus-ring-color: var(--focus-ring-color); /* @kind color */ --slider-handle-focus-ring-offset: var(--focus-ring-offset); --slider-handle-focus-ring-width: var(--focus-ring-width); --slider-handle-height: 20; /* @kind spacing */ }