/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --sg-color-error-container: #fce5e3;
  --sg-color-error-on-container: #cb2315;
  --sg-color-warning-container: #feefc3;
  --sg-color-warning-on-container: #de5e02;
  --sg-color-success-container: #e8f8ec;
  --sg-color-success-on-container: #277f3f;
  --sg-color-info-container: #e2ecfd;
  --sg-color-info-on-container: #0e60ea;
  --sg-color-chart-1: #4285f4;
  --sg-color-chart-2: #ea4335;
  --sg-color-chart-3: #fbbc04;
  --sg-color-chart-4: #34a853;
  --sg-color-chart-5: #a142f4;
  --sg-color-chart-6: #24c1e0;
  --sg-color-chart-7: #ff6d01;
  --sg-color-chart-8: #f439a0;
  --sg-color-neutral-0: #ffffff;
  --sg-color-neutral-100: #f7f8fa;
  --sg-color-neutral-200: #eceef2;
  --sg-color-neutral-300: #dcdfe6;
  --sg-color-neutral-400: #c4c9d3;
  --sg-color-neutral-500: #a1a8b7;
  --sg-color-neutral-600: #7a8294;
  --sg-color-neutral-700: #5a6273;
  --sg-color-neutral-800: #3f4653;
  --sg-color-neutral-900: #282e38;
  --sg-color-neutral-1000: #14181f;
  --sg-color-purple-100: #f9f2fd;
  --sg-color-purple-200: #f3e6f9;
  --sg-color-purple-300: #e7d0f1;
  --sg-color-purple-400: #d6b3e6;
  --sg-color-purple-500: #ba84d2;
  --sg-color-purple-600: #9c52bc;
  --sg-color-purple-700: #793795;
  --sg-color-purple-800: #59256f;
  --sg-color-purple-900: #3b164b;
  --sg-color-purple-1000: #200a29;
  --sg-color-scrim: rgba(20, 24, 31, 0.6);
  --sg-breakpoint-compact: 0rem; /** Up to regular. One column, and the starting point: styles outside a media query belong to this, so the narrowest layout is the one that needs no query at all. */
  --sg-breakpoint-regular: 48rem; /** 768px. Room for two columns, or for a table to stop scrolling sideways. */
  --sg-breakpoint-wide: 64rem; /** 1024px. Room for a persistent sidebar beside the content. */
  --sg-duration-100: 100ms; /* @kind other */
  --sg-duration-150: 150ms; /* @kind other */
  --sg-duration-200: 200ms; /* @kind other */
  --sg-duration-600: 600ms; /* @kind other */
  --sg-easing-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --sg-easing-enter: cubic-bezier(0, 0, 0, 1); /* @kind other */
  --sg-easing-exit: cubic-bezier(0.3, 0, 1, 1); /* @kind other */
  --sg-easing-linear: cubic-bezier(0, 0, 1, 1); /* @kind other */
  --sg-radius-0: 0px;
  --sg-radius-2: 2px;
  --sg-radius-4: 4px;
  --sg-radius-6: 6px;
  --sg-radius-8: 8px;
  --sg-radius-12: 12px;
  --sg-radius-16: 16px;
  --sg-radius-24: 24px;
  --sg-radius-full: 9999px;
  --sg-shadow-1: 0px 1px 2px 0px rgba(20, 24, 31, 0.06), 0px 1px 1px -1px rgba(20, 24, 31, 0.08);
  --sg-shadow-2: 0px 2px 4px -1px rgba(20, 24, 31, 0.08), 0px 1px 2px -1px rgba(20, 24, 31, 0.06);
  --sg-shadow-4: 0px 4px 8px -2px rgba(20, 24, 31, 0.10), 0px 2px 4px -2px rgba(20, 24, 31, 0.06);
  --sg-shadow-8: 0px 8px 16px -4px rgba(20, 24, 31, 0.12), 0px 4px 6px -4px rgba(20, 24, 31, 0.08);
  --sg-shadow-right-2: 2px 0px 4px -1px rgba(20, 24, 31, 0.08), 1px 0px 2px -1px rgba(20, 24, 31, 0.06);
  --sg-shadow-left-2: -2px 0px 4px -1px rgba(20, 24, 31, 0.08), -1px 0px 2px -1px rgba(20, 24, 31, 0.06);
  --sg-size-16: 16px;
  --sg-size-20: 20px;
  --sg-size-24: 24px;
  --sg-size-28: 28px;
  --sg-size-32: 32px;
  --sg-size-36: 36px;
  --sg-size-40: 40px;
  --sg-size-44: 44px;
  --sg-size-48: 48px;
  --sg-size-56: 56px;
  --sg-size-64: 64px;
  --sg-spacing-0: 0px;
  --sg-spacing-1: 1px;
  --sg-spacing-2: 2px;
  --sg-spacing-3: 3px;
  --sg-spacing-4: 4px;
  --sg-spacing-5: 5px;
  --sg-spacing-6: 6px;
  --sg-spacing-7: 7px;
  --sg-spacing-8: 8px;
  --sg-spacing-9: 9px;
  --sg-spacing-10: 10px;
  --sg-spacing-11: 11px;
  --sg-spacing-12: 12px;
  --sg-spacing-13: 13px;
  --sg-spacing-14: 14px;
  --sg-spacing-15: 15px;
  --sg-spacing-16: 16px;
  --sg-spacing-20: 20px;
  --sg-spacing-24: 24px;
  --sg-spacing-28: 28px;
  --sg-spacing-32: 32px;
  --sg-spacing-40: 40px;
  --sg-spacing-48: 48px;
  --sg-spacing-56: 56px;
  --sg-spacing-64: 64px;
  --sg-spacing-72: 72px;
  --sg-spacing-80: 80px;
  --sg-spacing-88: 88px;
  --sg-spacing-96: 96px;
  --sg-stroke-1: 1px;
  --sg-stroke-2: 2px;
  --sg-font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sg-font-family-mono: ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;
  --sg-font-size-12: 12px;
  --sg-font-size-14: 14px;
  --sg-font-size-16: 16px;
  --sg-font-size-18: 18px;
  --sg-font-size-20: 20px;
  --sg-font-size-24: 24px;
  --sg-font-size-30: 30px;
  --sg-font-size-36: 36px;
  --sg-font-size-48: 48px;
  --sg-font-size-60: 60px;
  --sg-font-weight-400: 400;
  --sg-font-weight-500: 500;
  --sg-font-weight-600: 600;
  --sg-font-weight-700: 700;
  --sg-font-line-height-100: 1;
  --sg-font-line-height-120: 1.2;
  --sg-font-line-height-140: 1.4;
  --sg-font-line-height-150: 1.5;
  --sg-font-line-height-160: 1.6;
  --sg-accordion-min-height: var(--sg-size-56);
  --sg-action-accent-subtle: var(--sg-color-accent-100);
  --sg-action-success-background: var(--sg-color-success-on-container);
  --sg-action-error-background: var(--sg-color-error-on-container);
  --sg-action-medium-min-height: var(--sg-size-40);
  --sg-action-large-min-height: var(--sg-size-48);
  --sg-alert-error-background: var(--sg-color-error-container);
  --sg-alert-error-icon: var(--sg-color-error-on-container);
  --sg-alert-warning-background: var(--sg-color-warning-container);
  --sg-alert-warning-icon: var(--sg-color-warning-on-container);
  --sg-alert-success-background: var(--sg-color-success-container);
  --sg-alert-success-icon: var(--sg-color-success-on-container);
  --sg-alert-info-background: var(--sg-color-info-container);
  --sg-alert-info-icon: var(--sg-color-info-on-container);
  --sg-alert-min-height: var(--sg-size-48);
  --sg-badge-info-background: var(--sg-color-info-container);
  --sg-badge-info-text: var(--sg-color-info-on-container);
  --sg-badge-success-background: var(--sg-color-success-container);
  --sg-badge-success-text: var(--sg-color-success-on-container);
  --sg-badge-warning-background: var(--sg-color-warning-container);
  --sg-badge-error-background: var(--sg-color-error-container);
  --sg-badge-error-text: var(--sg-color-error-on-container);
  --sg-badge-small-min-height: var(--sg-size-20);
  --sg-badge-small-line-height: var(--sg-font-line-height-120); /** The one place a size and its leading are not taken from a body role. A small badge rides inside a line of text, and body leading would push the lines it sits between apart. */
  --sg-badge-medium-min-height: var(--sg-size-24);
  --sg-badge-large-min-height: var(--sg-size-32);
  --sg-border-subtle: var(--sg-color-neutral-300);
  --sg-border-default: var(--sg-color-neutral-400);
  --sg-border-strong: var(--sg-color-neutral-600);
  --sg-chip-small-min-height: var(--sg-size-20);
  --sg-chip-small-line-height: var(--sg-font-line-height-120); /** Tighter than the body role on purpose, so a small chip matches the small badge it sits beside. */
  --sg-chip-medium-min-height: var(--sg-size-24);
  --sg-chip-large-min-height: var(--sg-size-32);
  --sg-control-size: var(--sg-size-16);
  --sg-datepicker-day-size: var(--sg-size-36);
  --sg-dialog-scrim: var(--sg-color-scrim);
  --sg-divider-thickness: var(--sg-stroke-1);
  --sg-dropdown-item-text-danger: var(--sg-color-error-on-container);
  --sg-dropdown-item-min-height: var(--sg-size-40);
  --sg-elevation-raised: var(--sg-shadow-1); /** A card or panel sitting on the page. Pairs with surface.raised. */
  --sg-elevation-sticky: var(--sg-shadow-2); /** A bar that stays put while content scrolls under it. The shadow is what shows the content is passing behind. */
  --sg-elevation-sticky-start: var(--sg-shadow-right-2); /** Pinned to the start edge, with content scrolling past on the other side. Points at the right-falling shadow, which is correct while the page runs left to right; a right-to-left brand redirects it to shadow.left-2. */
  --sg-elevation-sticky-end: var(--sg-shadow-left-2); /** Pinned to the end edge. The mirror of sticky-start, and redirected the same way. */
  --sg-elevation-overlay: var(--sg-shadow-4); /** Menus, dropdowns and popovers: they cover content and have to read as detached from it. */
  --sg-elevation-dialog: var(--sg-shadow-8); /** A modal over the whole page. It stays modest because the scrim behind it does most of the separating. */
  --sg-field-border-hover: var(--sg-color-neutral-700);
  --sg-field-border-error: var(--sg-color-error-on-container);
  --sg-field-medium-min-height: var(--sg-size-40);
  --sg-field-large-min-height: var(--sg-size-48);
  --sg-heading-1-font-size: var(--sg-font-size-36);
  --sg-heading-1-line-height: var(--sg-font-line-height-120);
  --sg-heading-1-font-weight: var(--sg-font-weight-600);
  --sg-heading-2-font-size: var(--sg-font-size-30);
  --sg-heading-2-line-height: var(--sg-font-line-height-120);
  --sg-heading-2-font-weight: var(--sg-font-weight-600);
  --sg-heading-3-font-size: var(--sg-font-size-24);
  --sg-heading-3-line-height: var(--sg-font-line-height-120);
  --sg-heading-3-font-weight: var(--sg-font-weight-600);
  --sg-heading-4-font-size: var(--sg-font-size-20);
  --sg-heading-4-line-height: var(--sg-font-line-height-140);
  --sg-heading-4-font-weight: var(--sg-font-weight-600);
  --sg-body-large-font-size: var(--sg-font-size-18);
  --sg-body-large-line-height: var(--sg-font-line-height-160);
  --sg-body-large-font-weight: var(--sg-font-weight-400);
  --sg-body-medium-font-size: var(--sg-font-size-16);
  --sg-body-medium-line-height: var(--sg-font-line-height-150);
  --sg-body-medium-font-weight: var(--sg-font-weight-400);
  --sg-body-small-font-size: var(--sg-font-size-14);
  --sg-body-small-line-height: var(--sg-font-line-height-140);
  --sg-body-small-font-weight: var(--sg-font-weight-400);
  --sg-body-x-small-font-size: var(--sg-font-size-12);
  --sg-body-x-small-line-height: var(--sg-font-line-height-140);
  --sg-body-x-small-font-weight: var(--sg-font-weight-400);
  --sg-icon-error: var(--sg-color-error-on-container);
  --sg-icon-warning: var(--sg-color-warning-on-container);
  --sg-icon-success: var(--sg-color-success-on-container);
  --sg-icon-info: var(--sg-color-info-on-container);
  --sg-icon-size-small: var(--sg-size-16);
  --sg-icon-size-medium: var(--sg-size-20);
  --sg-icon-size-large: var(--sg-size-24);
  --sg-icon-size-x-large: var(--sg-size-32);
  --sg-link-visited: var(--sg-color-purple-700);
  --sg-link-visited-hover: var(--sg-color-purple-900);
  --sg-list-row-min-height: var(--sg-size-56);
  --sg-motion-state-duration: var(--sg-duration-100);
  --sg-motion-state-easing: var(--sg-easing-standard);
  --sg-motion-move-duration: var(--sg-duration-150);
  --sg-motion-move-easing: var(--sg-easing-standard);
  --sg-motion-enter-duration: var(--sg-duration-200);
  --sg-motion-enter-easing: var(--sg-easing-enter);
  --sg-motion-loop-duration: var(--sg-duration-600);
  --sg-motion-loop-easing: var(--sg-easing-linear);
  --sg-option-min-height: var(--sg-size-56);
  --sg-picker-button-min-height: var(--sg-size-64);
  --sg-picker-button-min-inline-size: var(--sg-size-16);
  --sg-segmented-min-height: var(--sg-size-40);
  --sg-shape-control: var(--sg-radius-2); /** A checkbox or a radio. The smallest square thing there is, where any more rounding eats the tick. */
  --sg-shape-input: var(--sg-radius-4); /** A field, a badge, a plain tooltip. Small boxes holding one line. */
  --sg-shape-action: var(--sg-radius-6); /** A button, an accordion header, a table. Boxes you press or scan, wider than they are tall. */
  --sg-shape-container: var(--sg-radius-8); /** Anything holding other components: a list, a dropdown, an alert, a tree. */
  --sg-shape-panel: var(--sg-radius-12); /** A card or a dialog. The largest boxes, and the only ones round enough to be noticed as round. */
  --sg-shape-pill: var(--sg-radius-full); /** A chip, a segment, a switch track. Not a step on the scale: a shape that says this is a token, not a box. */
  --sg-padding-none: var(--sg-spacing-0);
  --sg-padding-4xs: var(--sg-spacing-2);
  --sg-padding-3xs: var(--sg-spacing-4);
  --sg-padding-2xs: var(--sg-spacing-6);
  --sg-padding-xs: var(--sg-spacing-8);
  --sg-padding-sm: var(--sg-spacing-12);
  --sg-padding-md: var(--sg-spacing-16);
  --sg-padding-lg: var(--sg-spacing-24);
  --sg-padding-xl: var(--sg-spacing-32);
  --sg-padding-2xl: var(--sg-spacing-40);
  --sg-padding-3xl: var(--sg-spacing-56);
  --sg-margin-none: var(--sg-spacing-0);
  --sg-margin-4xs: var(--sg-spacing-2);
  --sg-margin-3xs: var(--sg-spacing-4);
  --sg-margin-2xs: var(--sg-spacing-6);
  --sg-margin-xs: var(--sg-spacing-8);
  --sg-margin-sm: var(--sg-spacing-12);
  --sg-margin-md: var(--sg-spacing-16);
  --sg-margin-lg: var(--sg-spacing-24);
  --sg-margin-xl: var(--sg-spacing-32);
  --sg-margin-2xl: var(--sg-spacing-48);
  --sg-margin-3xl: var(--sg-spacing-64);
  --sg-surface-base: var(--sg-color-neutral-200);
  --sg-surface-raised: var(--sg-color-neutral-0);
  --sg-surface-sunken: var(--sg-color-neutral-300);
  --sg-surface-hover: var(--sg-color-accent-200);
  --sg-surface-active: var(--sg-color-accent-100); /** The row, chip, item or panel that is chosen. Lighter than hover on purpose: hover is a moment and gets the louder tint, while a selection stays on screen and has text sitting on it for as long as it lasts. */
  --sg-surface-disabled: var(--sg-color-neutral-200);
  --sg-surface-inverted: var(--sg-color-neutral-1000);
  --sg-surface-inverted-hover: var(--sg-color-neutral-900);
  --sg-switch-track-background: var(--sg-color-neutral-600);
  --sg-switch-knob: var(--sg-color-neutral-0);
  --sg-switch-track-width: var(--sg-size-40);
  --sg-switch-track-height: var(--sg-size-24);
  --sg-switch-knob-size: var(--sg-size-20);
  --sg-text-font-body: var(--sg-font-family-system);
  --sg-text-font-heading: var(--sg-font-family-heading);
  --sg-text-primary: var(--sg-color-neutral-1000);
  --sg-text-secondary: var(--sg-color-neutral-800);
  --sg-text-muted: var(--sg-color-neutral-700);
  --sg-text-disabled: var(--sg-color-neutral-500);
  --sg-text-on-accent: var(--sg-color-neutral-0);
  --sg-text-inverted: var(--sg-color-neutral-0);
  --sg-text-inverted-muted: var(--sg-color-neutral-400);
  --sg-tree-row-min-height: var(--sg-size-44);
  --sg-accordion-background: var(--sg-surface-raised);
  --sg-accordion-background-hover: var(--sg-surface-hover);
  --sg-accordion-background-open: var(--sg-surface-active); /** The whole section while it is open, header and panel together. Same role a chosen row uses, because an open panel is a choice somebody made and not a hover they happen to be resting on. */
  --sg-accordion-border: var(--sg-border-subtle);
  --sg-accordion-title: var(--sg-text-primary);
  --sg-accordion-supporting-text: var(--sg-text-muted);
  --sg-accordion-content-text: var(--sg-text-secondary);
  --sg-accordion-radius: var(--sg-shape-action);
  --sg-accordion-icon-size: var(--sg-icon-size-medium);
  --sg-accordion-gap: var(--sg-padding-sm);
  --sg-accordion-padding-block: var(--sg-padding-sm);
  --sg-accordion-padding-inline: var(--sg-padding-md);
  --sg-accordion-title-font-size: var(--sg-body-medium-font-size);
  --sg-accordion-title-line-height: var(--sg-body-medium-line-height);
  --sg-accordion-supporting-font-size: var(--sg-body-small-font-size);
  --sg-accordion-supporting-line-height: var(--sg-body-small-line-height);
  --sg-accordion-content-font-size: var(--sg-body-medium-font-size);
  --sg-accordion-content-line-height: var(--sg-body-medium-line-height);
  --sg-action-accent-base: var(--sg-color-accent-brand);
  --sg-action-accent-strong: var(--sg-color-accent-brand-darker);
  --sg-action-primary-text: var(--sg-text-on-accent);
  --sg-action-secondary-background: var(--sg-surface-raised);
  --sg-action-secondary-background-hover: var(--sg-action-accent-subtle);
  --sg-action-tertiary-background-hover: var(--sg-action-accent-subtle);
  --sg-action-disabled-background: var(--sg-surface-disabled);
  --sg-action-disabled-text: var(--sg-text-disabled);
  --sg-action-success-text: var(--sg-text-on-accent);
  --sg-action-error-text: var(--sg-text-on-accent);
  --sg-action-radius: var(--sg-shape-action);
  --sg-action-medium-padding-block: var(--sg-padding-xs);
  --sg-action-medium-padding-inline: var(--sg-padding-md);
  --sg-action-medium-gap: var(--sg-padding-2xs);
  --sg-action-medium-icon-size: var(--sg-icon-size-small);
  --sg-action-medium-font-size: var(--sg-body-small-font-size);
  --sg-action-medium-line-height: var(--sg-body-small-line-height);
  --sg-action-large-padding-block: var(--sg-padding-sm);
  --sg-action-large-padding-inline: var(--sg-padding-lg);
  --sg-action-large-gap: var(--sg-padding-xs);
  --sg-action-large-icon-size: var(--sg-icon-size-medium);
  --sg-action-large-font-size: var(--sg-body-medium-font-size);
  --sg-action-large-line-height: var(--sg-body-medium-line-height);
  --sg-alert-text: var(--sg-text-primary);
  --sg-alert-radius: var(--sg-shape-container);
  --sg-alert-padding-block: var(--sg-padding-sm);
  --sg-alert-padding-inline: var(--sg-padding-md);
  --sg-alert-gap: var(--sg-padding-sm);
  --sg-alert-icon-size: var(--sg-icon-size-medium);
  --sg-alert-title-font-size: var(--sg-body-small-font-size);
  --sg-alert-title-line-height: var(--sg-body-small-line-height);
  --sg-alert-font-size: var(--sg-body-small-font-size);
  --sg-alert-line-height: var(--sg-body-small-line-height);
  --sg-badge-neutral-background: var(--sg-surface-sunken);
  --sg-badge-neutral-text: var(--sg-text-secondary);
  --sg-badge-warning-text: var(--sg-text-primary);
  --sg-badge-radius: var(--sg-shape-input);
  --sg-badge-small-padding-inline: var(--sg-padding-2xs);
  --sg-badge-small-gap: var(--sg-padding-3xs);
  --sg-badge-small-font-size: var(--sg-body-x-small-font-size);
  --sg-badge-medium-padding-inline: var(--sg-padding-xs);
  --sg-badge-medium-gap: var(--sg-padding-3xs);
  --sg-badge-medium-font-size: var(--sg-body-x-small-font-size);
  --sg-badge-medium-line-height: var(--sg-body-x-small-line-height);
  --sg-badge-large-padding-inline: var(--sg-padding-sm);
  --sg-badge-large-gap: var(--sg-padding-2xs);
  --sg-badge-large-font-size: var(--sg-body-small-font-size);
  --sg-badge-large-line-height: var(--sg-body-small-line-height);
  --sg-card-background: var(--sg-surface-raised);
  --sg-card-background-hover: var(--sg-surface-hover);
  --sg-card-border: var(--sg-border-subtle);
  --sg-card-title: var(--sg-text-primary);
  --sg-card-supporting-text: var(--sg-text-muted);
  --sg-card-content-text: var(--sg-text-primary);
  --sg-card-radius: var(--sg-shape-panel);
  --sg-card-gap: var(--sg-padding-md);
  --sg-card-footer-gap: var(--sg-padding-sm);
  --sg-card-large-padding: var(--sg-padding-lg);
  --sg-card-medium-padding: var(--sg-padding-md);
  --sg-card-supporting-font-size: var(--sg-body-small-font-size);
  --sg-card-supporting-line-height: var(--sg-body-small-line-height);
  --sg-chip-background: var(--sg-surface-raised);
  --sg-chip-background-hover: var(--sg-surface-hover);
  --sg-chip-text: var(--sg-text-secondary);
  --sg-chip-border: var(--sg-border-strong);
  --sg-chip-selected-background: var(--sg-surface-active);
  --sg-chip-radius: var(--sg-shape-pill);
  --sg-chip-small-padding-inline: var(--sg-padding-2xs);
  --sg-chip-small-gap: var(--sg-padding-3xs);
  --sg-chip-small-font-size: var(--sg-body-x-small-font-size);
  --sg-chip-medium-padding-inline: var(--sg-padding-xs);
  --sg-chip-medium-gap: var(--sg-padding-3xs);
  --sg-chip-medium-font-size: var(--sg-body-x-small-font-size);
  --sg-chip-medium-line-height: var(--sg-body-x-small-line-height);
  --sg-chip-large-padding-inline: var(--sg-padding-sm);
  --sg-chip-large-gap: var(--sg-padding-2xs);
  --sg-chip-large-font-size: var(--sg-body-small-font-size);
  --sg-chip-large-line-height: var(--sg-body-small-line-height);
  --sg-control-background: var(--sg-surface-raised);
  --sg-control-background-disabled: var(--sg-surface-disabled);
  --sg-control-border: var(--sg-border-strong);
  --sg-control-radius: var(--sg-shape-control);
  --sg-control-gap: var(--sg-padding-xs);
  --sg-datepicker-background: var(--sg-surface-raised);
  --sg-datepicker-border: var(--sg-border-subtle);
  --sg-datepicker-header-text: var(--sg-text-primary);
  --sg-datepicker-weekday-text: var(--sg-text-muted);
  --sg-datepicker-day-text: var(--sg-text-primary);
  --sg-datepicker-day-text-outside: var(--sg-text-muted);
  --sg-datepicker-day-text-disabled: var(--sg-text-disabled);
  --sg-datepicker-day-background-hover: var(--sg-surface-hover);
  --sg-datepicker-day-text-selected: var(--sg-text-on-accent);
  --sg-datepicker-radius: var(--sg-shape-container);
  --sg-datepicker-day-radius: var(--sg-shape-pill);
  --sg-datepicker-padding: var(--sg-padding-sm);
  --sg-datepicker-gap: var(--sg-padding-4xs);
  --sg-datepicker-icon-size: var(--sg-icon-size-medium);
  --sg-datepicker-header-font-size: var(--sg-body-medium-font-size);
  --sg-datepicker-header-line-height: var(--sg-body-medium-line-height);
  --sg-datepicker-day-font-size: var(--sg-body-small-font-size);
  --sg-datepicker-day-line-height: var(--sg-body-small-line-height);
  --sg-dialog-background: var(--sg-surface-raised);
  --sg-dialog-body-background: var(--sg-surface-base);
  --sg-dialog-title: var(--sg-text-primary);
  --sg-dialog-text: var(--sg-text-secondary);
  --sg-dialog-radius: var(--sg-shape-panel);
  --sg-dialog-padding-block: var(--sg-padding-md);
  --sg-dialog-padding-inline: var(--sg-padding-lg);
  --sg-dialog-gap: var(--sg-padding-sm);
  --sg-divider-color: var(--sg-border-subtle);
  --sg-divider-color-strong: var(--sg-border-strong);
  --sg-divider-space: var(--sg-margin-md);
  --sg-divider-label-text: var(--sg-text-muted);
  --sg-divider-label-gap: var(--sg-padding-sm);
  --sg-divider-label-font-size: var(--sg-body-x-small-font-size);
  --sg-divider-label-line-height: var(--sg-body-x-small-line-height);
  --sg-dropdown-background: var(--sg-surface-raised);
  --sg-dropdown-border: var(--sg-border-subtle);
  --sg-dropdown-item-text: var(--sg-text-primary);
  --sg-dropdown-item-background-hover: var(--sg-surface-hover);
  --sg-dropdown-item-background-selected: var(--sg-surface-active);
  --sg-dropdown-section-label: var(--sg-text-muted);
  --sg-dropdown-radius: var(--sg-shape-container);
  --sg-dropdown-gap: var(--sg-padding-3xs);
  --sg-dropdown-padding-block: var(--sg-padding-3xs);
  --sg-dropdown-icon-size: var(--sg-icon-size-medium);
  --sg-dropdown-item-padding-inline: var(--sg-padding-sm);
  --sg-dropdown-item-gap: var(--sg-padding-xs);
  --sg-dropdown-item-font-size: var(--sg-body-small-font-size);
  --sg-dropdown-item-line-height: var(--sg-body-small-line-height);
  --sg-dropdown-section-label-font-size: var(--sg-body-x-small-font-size);
  --sg-dropdown-section-label-line-height: var(--sg-body-x-small-line-height);
  --sg-field-box-action-background-hover: var(--sg-surface-hover);
  --sg-field-background: var(--sg-surface-raised);
  --sg-field-background-disabled: var(--sg-surface-disabled);
  --sg-field-text: var(--sg-text-primary);
  --sg-field-text-disabled: var(--sg-text-disabled);
  --sg-field-placeholder: var(--sg-text-muted);
  --sg-field-label: var(--sg-text-secondary);
  --sg-field-hint: var(--sg-text-muted);
  --sg-field-border: var(--sg-border-strong);
  --sg-field-radius: var(--sg-shape-input);
  --sg-field-gap: var(--sg-padding-2xs);
  --sg-field-label-font-size: var(--sg-body-small-font-size);
  --sg-field-label-line-height: var(--sg-body-small-line-height);
  --sg-field-hint-font-size: var(--sg-body-x-small-font-size);
  --sg-field-hint-line-height: var(--sg-body-x-small-line-height);
  --sg-field-medium-padding-block: var(--sg-padding-xs);
  --sg-field-medium-padding-inline: var(--sg-padding-sm);
  --sg-field-medium-font-size: var(--sg-body-small-font-size);
  --sg-field-medium-line-height: var(--sg-body-small-line-height);
  --sg-field-large-padding-block: var(--sg-padding-sm);
  --sg-field-large-padding-inline: var(--sg-padding-md);
  --sg-field-large-font-size: var(--sg-body-medium-font-size);
  --sg-field-large-line-height: var(--sg-body-medium-line-height);
  --sg-heading-1-font-family: var(--sg-text-font-heading);
  --sg-heading-2-font-family: var(--sg-text-font-heading);
  --sg-heading-3-font-family: var(--sg-text-font-heading);
  --sg-heading-4-font-family: var(--sg-text-font-heading);
  --sg-body-large-font-family: var(--sg-text-font-body);
  --sg-body-medium-font-family: var(--sg-text-font-body);
  --sg-body-small-font-family: var(--sg-text-font-body);
  --sg-body-x-small-font-family: var(--sg-text-font-body);
  --sg-icon-default: var(--sg-text-primary);
  --sg-icon-muted: var(--sg-text-muted);
  --sg-icon-disabled: var(--sg-text-disabled);
  --sg-icon-inverted: var(--sg-text-inverted);
  --sg-icon-on-accent: var(--sg-text-on-accent);
  --sg-link-hover: var(--sg-text-primary);
  --sg-link-inverted: var(--sg-text-inverted);
  --sg-link-inverted-hover: var(--sg-action-accent-subtle);
  --sg-list-background: var(--sg-surface-raised);
  --sg-list-background-hover: var(--sg-surface-hover);
  --sg-list-background-selected: var(--sg-surface-active);
  --sg-list-border: var(--sg-border-subtle);
  --sg-list-border-interactive: var(--sg-border-strong); /** A list whose rows can be pressed or ticked is a control, and reads as one only if its edge is stronger than a card's. Same reasoning as the chip and the segmented group, which is why it is the same value. */
  --sg-list-text: var(--sg-text-primary);
  --sg-list-supporting-text: var(--sg-text-muted);
  --sg-list-radius: var(--sg-shape-container);
  --sg-list-row-gap: var(--sg-padding-xs);
  --sg-list-padding-block: var(--sg-padding-sm);
  --sg-list-padding-inline: var(--sg-padding-md);
  --sg-list-gap: var(--sg-padding-sm);
  --sg-list-icon-size: var(--sg-icon-size-medium);
  --sg-list-title-font-size: var(--sg-body-medium-font-size);
  --sg-list-title-line-height: var(--sg-body-medium-line-height);
  --sg-list-supporting-font-size: var(--sg-body-small-font-size);
  --sg-list-supporting-line-height: var(--sg-body-small-line-height);
  --sg-option-background: var(--sg-surface-raised);
  --sg-option-background-hover: var(--sg-surface-hover);
  --sg-option-border: var(--sg-border-strong);
  --sg-option-title: var(--sg-text-primary);
  --sg-option-supporting-text: var(--sg-text-muted);
  --sg-option-title-selected: var(--sg-text-on-accent);
  --sg-option-supporting-text-selected: var(--sg-text-on-accent);
  --sg-option-icon-selected: var(--sg-text-on-accent);
  --sg-option-radius: var(--sg-shape-container);
  --sg-option-padding-block: var(--sg-padding-md);
  --sg-option-padding-inline: var(--sg-padding-md);
  --sg-option-gap: var(--sg-padding-3xs);
  --sg-option-group-gap: var(--sg-margin-sm);
  --sg-option-icon-size: var(--sg-icon-size-x-large);
  --sg-option-title-font-size: var(--sg-body-medium-font-size);
  --sg-option-title-line-height: var(--sg-body-medium-line-height);
  --sg-option-supporting-font-size: var(--sg-body-small-font-size);
  --sg-option-supporting-line-height: var(--sg-body-small-line-height);
  --sg-phone-divider: var(--sg-border-default);
  --sg-picker-button-background: var(--sg-surface-raised);
  --sg-picker-button-background-hover: var(--sg-surface-hover);
  --sg-picker-button-background-disabled: var(--sg-surface-disabled);
  --sg-picker-button-border: var(--sg-border-strong);
  --sg-picker-button-title: var(--sg-text-primary);
  --sg-picker-button-supporting-text: var(--sg-text-muted);
  --sg-picker-button-text-disabled: var(--sg-text-disabled);
  --sg-picker-button-radius: var(--sg-shape-container);
  --sg-picker-button-padding-block: var(--sg-padding-md);
  --sg-picker-button-padding-inline: var(--sg-padding-md);
  --sg-picker-button-gap: var(--sg-padding-sm);
  --sg-picker-button-text-gap: var(--sg-padding-3xs);
  --sg-picker-button-group-gap: var(--sg-margin-sm);
  --sg-picker-button-icon-size: var(--sg-icon-size-x-large);
  --sg-picker-button-chevron-size: var(--sg-icon-size-medium); /** Deliberately not the icon size. The leading icon says what is being chosen and can afford to be large; the chevron only says that something opens, and a 32px arrow would argue with the title for attention. */
  --sg-picker-button-title-font-size: var(--sg-body-medium-font-size);
  --sg-picker-button-title-line-height: var(--sg-body-medium-line-height);
  --sg-picker-button-supporting-font-size: var(--sg-body-small-font-size);
  --sg-picker-button-supporting-line-height: var(--sg-body-small-line-height);
  --sg-segmented-background: var(--sg-surface-raised);
  --sg-segmented-background-hover: var(--sg-surface-hover);
  --sg-segmented-background-selected: var(--sg-surface-active);
  --sg-segmented-text: var(--sg-text-muted);
  --sg-segmented-border: var(--sg-border-subtle);
  --sg-segmented-radius: var(--sg-shape-pill);
  --sg-segmented-padding-inline: var(--sg-padding-md);
  --sg-segmented-gap: var(--sg-padding-xs);
  --sg-segmented-icon-size: var(--sg-icon-size-medium);
  --sg-segmented-font-size: var(--sg-body-small-font-size);
  --sg-segmented-line-height: var(--sg-body-small-line-height);
  --sg-snackbar-background: var(--sg-surface-inverted);
  --sg-snackbar-text: var(--sg-text-inverted);
  --sg-snackbar-radius: var(--sg-shape-container);
  --sg-snackbar-gap: var(--sg-padding-sm);
  --sg-snackbar-padding-block: var(--sg-padding-sm);
  --sg-snackbar-padding-inline: var(--sg-padding-md);
  --sg-snackbar-icon-size: var(--sg-icon-size-medium);
  --sg-snackbar-font-size: var(--sg-body-small-font-size);
  --sg-snackbar-line-height: var(--sg-body-small-line-height);
  --sg-stepper-divider: var(--sg-border-default);
  --sg-switch-track-background-disabled: var(--sg-surface-disabled);
  --sg-switch-label: var(--sg-text-primary);
  --sg-switch-label-disabled: var(--sg-text-disabled);
  --sg-switch-supporting-text: var(--sg-text-muted);
  --sg-switch-radius: var(--sg-shape-pill);
  --sg-switch-gap: var(--sg-padding-sm);
  --sg-switch-label-font-size: var(--sg-body-small-font-size);
  --sg-switch-label-line-height: var(--sg-body-small-line-height);
  --sg-switch-supporting-font-size: var(--sg-body-x-small-font-size);
  --sg-switch-supporting-line-height: var(--sg-body-x-small-line-height);
  --sg-table-background: var(--sg-surface-raised);
  --sg-table-text: var(--sg-text-primary);
  --sg-table-muted-text: var(--sg-text-muted);
  --sg-table-header-background: var(--sg-surface-sunken);
  --sg-table-header-text: var(--sg-text-secondary);
  --sg-table-border: var(--sg-border-subtle);
  --sg-table-sticky-border: var(--sg-border-default);
  --sg-table-row-hover: var(--sg-surface-hover);
  --sg-table-radius: var(--sg-shape-action);
  --sg-table-medium-padding-block: var(--sg-padding-xs);
  --sg-table-medium-padding-inline: var(--sg-padding-sm);
  --sg-table-medium-font-size: var(--sg-body-small-font-size);
  --sg-table-medium-line-height: var(--sg-body-small-line-height);
  --sg-table-large-padding-block: var(--sg-padding-sm);
  --sg-table-large-padding-inline: var(--sg-padding-md);
  --sg-table-large-font-size: var(--sg-body-medium-font-size);
  --sg-table-large-line-height: var(--sg-body-medium-line-height);
  --sg-tooltip-plain-background: var(--sg-surface-inverted);
  --sg-tooltip-plain-text: var(--sg-text-inverted);
  --sg-tooltip-plain-radius: var(--sg-shape-input);
  --sg-tooltip-plain-padding-block: var(--sg-padding-2xs);
  --sg-tooltip-plain-padding-inline: var(--sg-padding-xs);
  --sg-tooltip-plain-font-size: var(--sg-body-x-small-font-size);
  --sg-tooltip-plain-line-height: var(--sg-body-x-small-line-height);
  --sg-tooltip-rich-background: var(--sg-surface-raised);
  --sg-tooltip-rich-title: var(--sg-text-primary);
  --sg-tooltip-rich-text: var(--sg-text-secondary);
  --sg-tooltip-rich-radius: var(--sg-shape-container);
  --sg-tooltip-rich-padding-block: var(--sg-padding-sm);
  --sg-tooltip-rich-padding-inline: var(--sg-padding-md);
  --sg-tooltip-rich-gap: var(--sg-padding-xs);
  --sg-tooltip-rich-font-size: var(--sg-body-small-font-size);
  --sg-tooltip-rich-line-height: var(--sg-body-small-line-height);
  --sg-tooltip-offset: var(--sg-margin-2xs);
  --sg-tree-background: var(--sg-surface-raised);
  --sg-tree-background-hover: var(--sg-surface-hover);
  --sg-tree-text: var(--sg-text-primary);
  --sg-tree-radius: var(--sg-shape-container);
  --sg-tree-indent: var(--sg-padding-lg);
  --sg-tree-gap: var(--sg-padding-sm);
  --sg-tree-padding-block: var(--sg-padding-xs);
  --sg-tree-padding-inline: var(--sg-padding-md);
  --sg-tree-icon-size: var(--sg-icon-size-medium);
  --sg-tree-title-font-size: var(--sg-body-medium-font-size);
  --sg-tree-title-line-height: var(--sg-body-medium-line-height);
  --sg-accordion-icon: var(--sg-icon-muted);
  --sg-action-primary-background: var(--sg-action-accent-base);
  --sg-action-primary-background-hover: var(--sg-action-accent-strong);
  --sg-action-secondary-border: var(--sg-action-accent-base);
  --sg-action-secondary-text: var(--sg-action-accent-strong);
  --sg-action-tertiary-text: var(--sg-action-accent-strong);
  --sg-action-focus-ring: var(--sg-action-accent-base);
  --sg-chip-selected-text: var(--sg-action-accent-strong);
  --sg-chip-selected-border: var(--sg-action-accent-base);
  --sg-control-mark: var(--sg-action-primary-text);
  --sg-datepicker-icon: var(--sg-icon-muted);
  --sg-datepicker-day-background-selected: var(--sg-action-accent-base);
  --sg-datepicker-today-marker: var(--sg-action-accent-strong);
  --sg-dropdown-item-text-selected: var(--sg-action-accent-strong);
  --sg-dropdown-icon: var(--sg-icon-muted);
  --sg-icon-accent: var(--sg-action-accent-strong);
  --sg-link-default: var(--sg-action-accent-strong);
  --sg-list-icon: var(--sg-icon-muted);
  --sg-option-background-selected: var(--sg-action-accent-base);
  --sg-option-border-selected: var(--sg-action-accent-base);
  --sg-picker-button-border-hover: var(--sg-action-accent-base);
  --sg-picker-button-chevron: var(--sg-icon-muted);
  --sg-segmented-text-selected: var(--sg-action-accent-strong);
  --sg-snackbar-icon: var(--sg-icon-inverted);
  --sg-snackbar-action-text: var(--sg-link-inverted);
  --sg-switch-track-background-checked: var(--sg-action-accent-base);
  --sg-tree-icon: var(--sg-icon-muted);
  --sg-control-background-selected: var(--sg-action-primary-background);
  --sg-control-border-selected: var(--sg-action-primary-background);
  --sg-field-border-focus: var(--sg-action-focus-ring);
  --sg-option-icon: var(--sg-icon-accent);
  --sg-picker-button-icon: var(--sg-icon-accent);
}