@mixin light-theme {
  color-scheme: light;
  --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 5%; // highlight
  --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 25%; // primary
  --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 35%; // secondary
  --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 45%; // tertiary
  --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%; // disabled
  --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%; // content/input
  --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%; // primary
  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 95%; // secondary
  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 92%; // tertiary/disabled
  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%; // highlight
  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 60%; // control
  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 86%; // primary
  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 90%; // secondary
  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
  // Accents
  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
  --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
  --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
  --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%); // white
  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 60%);
  --sui-primary-accent-color-translucent-light: hsl(var(--sui-base-hue) 80% 50% / 40%);
  // Alerts
  --sui-error-color-hue: 0;
  --sui-warning-color-hue: 40;
  --sui-info-color-hue: 210;
  --sui-success-color-hue: 100;
  --sui-alert-foreground-color-saturation: 85%;
  --sui-alert-foreground-color-lightness: 25%;
  --sui-alert-background-color-saturation: 65%;
  --sui-alert-background-color-lightness: 90%;
  --sui-alert-border-color-saturation: 48%;
  --sui-alert-border-color-lightness: 68%;
}

@mixin dark-theme {
  color-scheme: dark;
  --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 95%; // highlight
  --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 75%; // primary
  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%; // secondary
  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%; // tertiary
  --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%; // disabled
  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 8%; // content/input
  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 10%; // primary
  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 13%; // secondary
  --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%; // tertiary/disabled
  --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%; // highlight
  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 40%; // control
  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 24%; // primary
  --sui-border-color-3-hsl: var(--sui-base-hue) 10% 20%; // secondary
  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
  // Accents
  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%); // lighter
  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
  --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
  --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
  --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%); // white
  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 60%);
  --sui-primary-accent-color-translucent-light: hsl(var(--sui-base-hue) 80% 50% / 40%);
  // Alerts
  --sui-error-color-hue: 0;
  --sui-warning-color-hue: 40;
  --sui-info-color-hue: 210;
  --sui-success-color-hue: 100;
  --sui-alert-foreground-color-saturation: 85%;
  --sui-alert-foreground-color-lightness: 75%;
  --sui-alert-background-color-saturation: 40%;
  --sui-alert-background-color-lightness: 10%;
  --sui-alert-border-color-saturation: 48%;
  --sui-alert-border-color-lightness: 38%;
}

// High-contrast variants, layered over the light and dark themes for `prefers-contrast: more` (or
// `data-contrast="more"`). Every text colour reaches 7:1 and every control boundary 3:1 or better;
// the translucent and faded treatments the default themes use for hierarchy are made opaque.
@mixin high-contrast-light {
  --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 10%; // primary, 17.5:1
  --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 18%; // secondary, 13.7:1
  --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 28%; // tertiary, 9.3:1
  --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 45%; // disabled, 4.8:1
  // The surface levels are spread further apart, so panels read as panels without relying on
  // the faint default steps
  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 93%; // secondary
  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 88%; // tertiary/disabled
  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 70%; // highlight
  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 40%; // control, 5.8:1
  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 55%; // primary, 3.4:1
  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 65%; // secondary
  // Accents
  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 32%); // 8:1
  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 37%);
  --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 32%);
  --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 26%);
  // Alerts
  --sui-alert-foreground-color-lightness: 18%;
  --sui-alert-border-color-saturation: 55%;
  --sui-alert-border-color-lightness: 40%;
  @include high-contrast-common;
}

@mixin high-contrast-dark {
  --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 92%; // primary, 15.3:1
  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 85%; // secondary, 12.9:1
  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 75%; // tertiary, 9.9:1
  --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 55%; // disabled, 5.4:1
  // Near-black content and input surfaces with distinctly lighter panels, the way macOS treats
  // its own windows with Increase Contrast on
  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 4%; // content/input
  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 7%; // primary
  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 12%; // secondary
  --sui-background-color-4-hsl: var(--sui-base-hue) 10% 18%; // tertiary/disabled
  --sui-background-color-5-hsl: var(--sui-base-hue) 10% 40%; // highlight
  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 60%; // control, 6.4:1
  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 50%; // primary, 4.5:1
  --sui-border-color-3-hsl: var(--sui-base-hue) 10% 40%; // secondary, 3.1:1
  // Accents. The fill stays put: lighter would lose the white label on a primary button, darker
  // would lose the fill against the page. The text accent and the focus ring go lighter instead.
  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 70%); // 8.3:1
  --sui-focus-ring-color: var(--sui-primary-accent-color-text);
  // Alerts
  --sui-alert-foreground-color-lightness: 85%;
  --sui-alert-border-color-saturation: 55%;
  --sui-alert-border-color-lightness: 55%;
  @include high-contrast-common;
}

// Apply the high-contrast variant matching the active theme, however the theme was chosen
@mixin high-contrast-themes {
  &[data-theme="light"] {
    @include high-contrast-light;
  }

  &[data-theme="dark"] {
    @include high-contrast-dark;
  }

  &:not([data-theme]) {
    @media (prefers-color-scheme: light) {
      @include high-contrast-light;
    }

    @media (prefers-color-scheme: dark) {
      @include high-contrast-dark;
    }
  }
}

// Shared by both high-contrast variants: solid state backgrounds and boundaries in place of the
// translucent ones, and placeholder text at full strength
@mixin high-contrast-common {
  --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
  --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
  --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
  --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
  --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
  --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
  --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 70%);
  --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 60%);
  // A text box shares the page background, so its border is what marks the field
  --sui-textbox-border-color: hsl(var(--sui-border-color-1-hsl));
  --sui-textbox-placeholder-foreground-color: var(--sui-tertiary-foreground-color);
  --sui-textbox-placeholder-opacity: 1;
  // Disabled controls are dimmed less; the loss of colour still marks them
  --sui-disabled-opacity: 0.6;
  // Dialogs and drawers get an outline, as the OS draws around its own windows
  --sui-modal-border-width: 1px;
}

:global {
  :root,
  :host {
    // Base HSL values
    --sui-base-hue: 210;
    // Foreground
    --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
    --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
    --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
    --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
    --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-5-hsl));
    --sui-error-foreground-color: hsl(
      var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
        var(--sui-alert-foreground-color-lightness)
    );
    --sui-warning-foreground-color: hsl(
      var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
        var(--sui-alert-foreground-color-lightness)
    );
    --sui-info-foreground-color: hsl(
      var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
        var(--sui-alert-foreground-color-lightness)
    );
    --sui-success-foreground-color: hsl(
      var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
        var(--sui-alert-foreground-color-lightness)
    );
    // Background
    --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
    --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
    --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
    --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
    --sui-code-background-color: hsl(var(--sui-background-color-3-hsl));
    --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
    --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
    --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
    --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
    --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
    --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
    --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
    --sui-error-background-color: hsl(
      var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
        var(--sui-alert-background-color-lightness)
    );
    --sui-warning-background-color: hsl(
      var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
        var(--sui-alert-background-color-lightness)
    );
    --sui-info-background-color: hsl(
      var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
        var(--sui-alert-background-color-lightness)
    );
    --sui-success-background-color: hsl(
      var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
        var(--sui-alert-background-color-lightness)
    );
    // Disabled controls: how far they fade (they also lose their colour)
    --sui-disabled-opacity: 0.35;
    // Dialog & drawer outline; none by default, drawn by the high-contrast theme
    --sui-modal-border-width: 0;
    // Outline
    --sui-focus-ring-width: 2px;
    // Opaque, so the ring reaches 3:1 against the page (WCAG 1.4.11); the offset keeps a sliver of
    // page background between the ring and a control filled with the same accent colour
    --sui-focus-ring-color: var(--sui-primary-accent-color);
    --sui-focus-ring-offset: 1px;
    // Borders
    --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
    --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
    --sui-error-border-color: hsl(
      var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
        var(--sui-alert-border-color-lightness)
    );
    --sui-warning-border-color: hsl(
      var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
        var(--sui-alert-border-color-lightness)
    );
    --sui-info-border-color: hsl(
      var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
        var(--sui-alert-border-color-lightness)
    );
    --sui-success-border-color: hsl(
      var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
        var(--sui-alert-border-color-lightness)
    );
    // Shadows
    --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
    --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
    // Text
    --sui-font-family-default: "Source Sans 3", system-ui, sans-serif;
    --sui-font-size-xxx-large: 25px;
    --sui-font-size-xx-large: 21px;
    --sui-font-size-x-large: 19px;
    --sui-font-size-large: 17px;
    --sui-font-size-default: 15px;
    --sui-font-size-small: 13px;
    --sui-font-size-x-small: 11px;
    --sui-font-weight-normal: 400;
    --sui-font-weight-bold: 700;
    --sui-font-family-monospace: "Noto Sans Mono", ui-monospace, monospace;
    --sui-font-size-monospace: 0.9em;
    --sui-line-height-default: 1.2;
    --sui-line-height-compact: 1.4;
    --sui-line-height-comfortable: 1.6;
    --sui-word-spacing-normal: 1px;
    --sui-heading-margin: 0;
    --sui-heading-font-family: var(--sui-font-family-default);
    --sui-heading-font-weight: var(--sui-font-weight-bold);
    --sui-heading-line-height: var(--sui-line-height-default);
    --sui-paragraph-margin: 1.75em;
    // Controls
    --sui-control-small-border-width: 1px;
    --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
    --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
    --sui-control-small-height: 24px;
    --sui-control-medium-border-width: 1px;
    --sui-control-medium-border-radius: calc(var(--sui-control-medium-height) / 8);
    --sui-control-medium-padding: 0 calc((var(--sui-control-medium-height) / 4));
    --sui-control-medium-height: 32px;
    --sui-control-large-border-width: 1px;
    --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
    --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
    --sui-control-large-height: 40px;
    --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
    --sui-control-foreground-color: var(--sui-primary-foreground-color);
    --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
    --sui-control-font-family: var(--sui-font-family-default);
    --sui-control-font-size: var(--sui-font-size-default);
    --sui-control-line-height: var(--sui-line-height-compact);
    // Button
    --sui-button-small-border-radius: var(--sui-control-small-border-radius);
    --sui-button-small-padding: var(--sui-control-small-padding);
    --sui-button-small-height: var(--sui-control-small-height);
    --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
    --sui-button-medium-padding: var(--sui-control-medium-padding);
    --sui-button-medium-height: var(--sui-control-medium-height);
    --sui-button-large-border-radius: var(--sui-control-large-border-radius);
    --sui-button-large-padding: var(--sui-control-large-padding);
    --sui-button-large-height: var(--sui-control-large-height);
    --sui-button-border-color: var(--sui-control-border-color);
    --sui-button-background-color: var(--sui-control-background-color);
    // Checkbox, radio button, switch
    --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
    --sui-checkbox-height: 20px;
    --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
    --sui-checkbox-background-color: var(--sui-control-background-color);
    // Option & menu item
    --sui-option-border-radius: var(--sui-control-medium-border-radius);
    --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
      calc((var(--sui-control-medium-height) / 5));
    --sui-option-height: var(--sui-control-medium-height);
    // Listbox
    --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
    --sui-listbox-border-color: var(--sui-control-border-color);
    --sui-listbox-foreground-color: var(--sui-control-foreground-color);
    --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
    // Tree
    --sui-tree-border-radius: var(--sui-control-medium-border-radius);
    --sui-tree-border-color: var(--sui-control-border-color);
    --sui-tree-foreground-color: var(--sui-control-foreground-color);
    --sui-tree-background-color: hsl(var(--sui-background-color-1-hsl));
    --sui-tree-item-border-radius: var(--sui-control-medium-border-radius);
    --sui-tree-item-padding: var(--sui-option-padding);
    --sui-tree-item-height: var(--sui-control-medium-height);
    --sui-tree-item-indent: 16px;
    // Textbox: singleline & multiline text fields
    --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
    --sui-textbox-height: var(--sui-control-medium-height);
    --sui-textbox-border-color: var(--sui-control-border-color);
    --sui-textbox-foreground-color: var(--sui-control-foreground-color);
    --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
    --sui-textbox-font-family: var(--sui-font-family-default);
    --sui-textbox-font-size: var(--sui-font-size-default);
    --sui-textbox-singleline-padding: 0 8px;
    --sui-textbox-singleline-min-width: 240px;
    --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
    --sui-textbox-multiline-padding: 16px;
    --sui-textbox-multiline-min-width: 480px;
    --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
    // Tab
    --sui-tab-height: var(--sui-control-medium-height);
    --sui-tab-small-height: var(--sui-control-small-height);
    --sui-tab-medium-height: var(--sui-control-medium-height);
    --sui-tab-large-height: var(--sui-control-large-height);
    // Toolbar
    --sui-primary-toolbar-size: 56px;
    --sui-secondary-toolbar-size: 48px;
    --sui-bottom-navigation-height: var(--sui-primary-toolbar-size);
    // table
    --sui-primary-row-height: 56px;
    --sui-secondary-row-height: 40px;

    // Make controls larger on touch devices, e.g. mobile & tablet
    @media (pointer: coarse) {
      --sui-control-small-height: 32px;
      --sui-control-medium-height: 40px;
      --sui-control-large-height: 48px;
      --sui-checkbox-height: 24px;
      --sui-secondary-row-height: 48px;
    }

    @media (prefers-reduced-transparency) {
      --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
      --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
      --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
    }

    &[data-theme="light"] {
      @include light-theme;
    }

    &[data-theme="dark"] {
      @include dark-theme;
    }

    // Follow the system appearance setting when the `data-theme` attribute is not set (yet)
    &:not([data-theme]) {
      @media (prefers-color-scheme: light) {
        @include light-theme;
      }

      @media (prefers-color-scheme: dark) {
        @include dark-theme;
      }
    }

    // High contrast is a second dimension on top of the light/dark theme, and is resolved the same
    // way: `data-contrast="more"` turns it on, any other value keeps the standard palette, and
    // without the attribute the system setting decides. The selectors here are more specific than
    // the theme blocks above, so these overrides win whichever way the theme was picked.
    &[data-contrast="more"] {
      @include high-contrast-themes;
    }

    &:not([data-contrast]) {
      @media (prefers-contrast: more) {
        @include high-contrast-themes;
      }
    }
  }
}