/* Cascade layers declared by @cruglobal/cornerstone-components. Kept first so layer order is
   established before any rule. Everything unlayered below — this system's tokens.css — therefore
   wins over the library's layered defaults, which is what lets the theme picker drive the real
   components. */
@layer cs-native, cs-base, cs-utilities, cs-color-palette, cs-color-variant, cs-theme, cs-theme-dimension, cs-theme-overrides;

/* ══════════════════════════════════════════════════════════════════════════
   @cruglobal/cornerstone-components 0.6.2 — styles/cornerstone.css, flattened
   ══════════════════════════════════════════════════════════════════════════
   21 stylesheets inlined in import order (@import cannot resolve inside an artifact).
   Generated from the published package; do not hand-edit. Re-flatten on upgrade. */

/* ── cornerstone: styles/layers.css ── */
/* Order of precedence for all cascade layers in Cornerstone */

@layer cs-base {
  /**
    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
    IE: \`<a href="#id-for-h2">\` anchors.
    */
  cs-page :is(*, *:after, *:before) {
    scroll-margin-top: var(--scroll-margin-top);
  }

  cs-page[view='desktop'] [data-toggle-nav] {
    display: none;
  }

  cs-page[view='mobile'] .cs-desktop-only,
  cs-page[view='desktop'] .cs-mobile-only {
    display: none !important;
  }
}

/* ── cornerstone: styles/utilities/size.css ── */
@layer cs-utilities {
  .cs-size-xs {
    font-size: var(--cs-font-size-xs);
  }

  .cs-size-s {
    font-size: var(--cs-font-size-s);
  }

  .cs-size-m {
    font-size: var(--cs-font-size-m);
  }

  .cs-size-l {
    font-size: var(--cs-font-size-l);
  }

  .cs-size-xl {
    font-size: var(--cs-font-size-xl);
  }
}

/* ── cornerstone: styles/utilities/variants.css ── */
@layer cs-utilities {
  :where(:root),
  .cs-neutral,
  .cs-invert {
    --cs-color-fill-loud: var(--cs-color-neutral-fill-loud);
    --cs-color-fill-normal: var(--cs-color-neutral-fill-normal);
    --cs-color-fill-quiet: var(--cs-color-neutral-fill-quiet);
    --cs-color-border-loud: var(--cs-color-neutral-border-loud);
    --cs-color-border-normal: var(--cs-color-neutral-border-normal);
    --cs-color-border-quiet: var(--cs-color-neutral-border-quiet);
    --cs-color-on-loud: var(--cs-color-neutral-on-loud);
    --cs-color-on-normal: var(--cs-color-neutral-on-normal);
    --cs-color-on-quiet: var(--cs-color-neutral-on-quiet);
  }

  .cs-brand {
    --cs-color-fill-loud: var(--cs-color-brand-fill-loud);
    --cs-color-fill-normal: var(--cs-color-brand-fill-normal);
    --cs-color-fill-quiet: var(--cs-color-brand-fill-quiet);
    --cs-color-border-loud: var(--cs-color-brand-border-loud);
    --cs-color-border-normal: var(--cs-color-brand-border-normal);
    --cs-color-border-quiet: var(--cs-color-brand-border-quiet);
    --cs-color-on-loud: var(--cs-color-brand-on-loud);
    --cs-color-on-normal: var(--cs-color-brand-on-normal);
    --cs-color-on-quiet: var(--cs-color-brand-on-quiet);
  }

  .cs-success {
    --cs-color-fill-loud: var(--cs-color-success-fill-loud);
    --cs-color-fill-normal: var(--cs-color-success-fill-normal);
    --cs-color-fill-quiet: var(--cs-color-success-fill-quiet);
    --cs-color-border-loud: var(--cs-color-success-border-loud);
    --cs-color-border-normal: var(--cs-color-success-border-normal);
    --cs-color-border-quiet: var(--cs-color-success-border-quiet);
    --cs-color-on-loud: var(--cs-color-success-on-loud);
    --cs-color-on-normal: var(--cs-color-success-on-normal);
    --cs-color-on-quiet: var(--cs-color-success-on-quiet);
  }

  .cs-warning {
    --cs-color-fill-loud: var(--cs-color-warning-fill-loud);
    --cs-color-fill-normal: var(--cs-color-warning-fill-normal);
    --cs-color-fill-quiet: var(--cs-color-warning-fill-quiet);
    --cs-color-border-loud: var(--cs-color-warning-border-loud);
    --cs-color-border-normal: var(--cs-color-warning-border-normal);
    --cs-color-border-quiet: var(--cs-color-warning-border-quiet);
    --cs-color-on-loud: var(--cs-color-warning-on-loud);
    --cs-color-on-normal: var(--cs-color-warning-on-normal);
    --cs-color-on-quiet: var(--cs-color-warning-on-quiet);
  }

  .cs-highlight {
    --cs-color-fill-loud: var(--cs-color-highlight-fill-loud);
    --cs-color-fill-normal: var(--cs-color-highlight-fill-normal);
    --cs-color-fill-quiet: var(--cs-color-highlight-fill-quiet);
    --cs-color-border-loud: var(--cs-color-highlight-border-loud);
    --cs-color-border-normal: var(--cs-color-highlight-border-normal);
    --cs-color-border-quiet: var(--cs-color-highlight-border-quiet);
    --cs-color-on-loud: var(--cs-color-highlight-on-loud);
    --cs-color-on-normal: var(--cs-color-highlight-on-normal);
    --cs-color-on-quiet: var(--cs-color-highlight-on-quiet);
  }

  .cs-information {
    --cs-color-fill-loud: var(--cs-color-information-fill-loud);
    --cs-color-fill-normal: var(--cs-color-information-fill-normal);
    --cs-color-fill-quiet: var(--cs-color-information-fill-quiet);
    --cs-color-border-loud: var(--cs-color-information-border-loud);
    --cs-color-border-normal: var(--cs-color-information-border-normal);
    --cs-color-border-quiet: var(--cs-color-information-border-quiet);
    --cs-color-on-loud: var(--cs-color-information-on-loud);
    --cs-color-on-normal: var(--cs-color-information-on-normal);
    --cs-color-on-quiet: var(--cs-color-information-on-quiet);
  }

  .cs-danger {
    --cs-color-fill-loud: var(--cs-color-danger-fill-loud);
    --cs-color-fill-normal: var(--cs-color-danger-fill-normal);
    --cs-color-fill-quiet: var(--cs-color-danger-fill-quiet);
    --cs-color-border-loud: var(--cs-color-danger-border-loud);
    --cs-color-border-normal: var(--cs-color-danger-border-normal);
    --cs-color-border-quiet: var(--cs-color-danger-border-quiet);
    --cs-color-on-loud: var(--cs-color-danger-on-loud);
    --cs-color-on-normal: var(--cs-color-danger-on-normal);
    --cs-color-on-quiet: var(--cs-color-danger-on-quiet);
  }
}

/* ── cornerstone: styles/native.css ── */
/* Required utilities */



@layer cs-native {
  /* #region General ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    tab-size: 4;

    background-color: var(--cs-color-surface-default);
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  body {
    min-height: 100vh;
    margin: 0;
    padding: 0;

    color: var(--cs-color-text-normal);
    font-family: var(--cs-font-family-body);
    font-size: var(--cs-font-size-m);
    font-weight: var(--cs-font-weight-body);
    line-height: var(--cs-line-height-normal);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
  }
  /* #endregion */

  /* #region Content Flow ~~~~~~~~~~~~~~~~~~~~ */
  address,
  audio,
  blockquote,
  dd,
  details,
  dl,
  fieldset,
  figure,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  iframe,
  ol,
  p,
  pre,
  table,
  ul,
  video {
    margin: 0;

    &:has(+ *) {
      margin-block-end: var(--cs-content-spacing);
    }
  }
  /* #endregion */

  /* #region Block Text ~~~~~~~~~~~~~~~~~~~~~~ */

  /* A floor so a single unbreakable token — a long URL, a package specifier, a generated
     identifier — wraps instead of overflowing its column and forcing the page sideways.
     `break-word` only acts when the word cannot fit on a line of its own, so ordinary text
     is untouched; `cs-prose` deliberately goes further and sets `overflow-wrap: anywhere`
     on `code`/`pre` inside a prose container, which still wins by being the later rule.

     Stated here rather than left to the document because the alternative is every consumer
     writing their own universal reset — and a document-level `*` rule is exactly what
     flattens the components' own `::slotted()` spacing (see `callout.styles.ts`). */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  code {
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--cs-font-family-heading);
    font-weight: var(--cs-font-weight-heading);
    line-height: var(--cs-line-height-condensed);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--cs-font-size-3xl);
  }

  h2 {
    font-size: var(--cs-font-size-2xl);
  }

  h3 {
    font-size: var(--cs-font-size-xl);
  }

  h4 {
    font-size: var(--cs-font-size-l);
  }

  h5 {
    font-size: var(--cs-font-size-m);
  }

  h6 {
    font-size: var(--cs-font-size-xs);
  }

  p {
    text-wrap: wrap;
  }
  @supports (text-wrap: pretty) {
    p {
      text-wrap: pretty;
    }
  }
  blockquote {
    padding: var(--cs-space-xl);

    color: var(--cs-color-text-quiet);
    font-family: var(--cs-font-family-longform);
    font-size: var(--cs-font-size-larger);

    border-inline-start: var(--cs-border-style) var(--cs-border-width-l) var(--cs-color-neutral-border-quiet);
  }

  hr {
    margin: var(--cs-content-spacing) 0;

    border: none;
    border-bottom: solid var(--cs-border-width-s) var(--cs-color-surface-border);
  }

  figcaption {
    margin-block-start: var(--cs-space-xs);

    color: var(--cs-color-text-quiet);
    font-size: var(--cs-font-size-smaller);
    line-height: var(--cs-line-height-condensed);
  }
  /* #endregion */

  /* #region Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  ul,
  ol {
    padding: 0;
  }

  li > ul,
  li > ol {
    margin-inline-start: 0.25em;
  }

  ul {
    list-style: disc;
  }

  li {
    margin-inline-start: 1.125em;
    padding: 0;
  }

  /* `ul` markers are graphical (3:1 contrast threshold); `ol` markers are text
     (4.5:1). Numerals also wear transparency more than discs, so they keep more
     contrast. `currentColor` lets markers ride along when text color changes. */
  ul > li::marker {
    color: color-mix(in oklch, currentColor 40%, transparent);
  }

  ol > li::marker {
    color: color-mix(in oklch, currentColor 60%, transparent);
  }

  dt {
    font-weight: var(--cs-font-weight-bold);
  }

  menu {
    list-style: none;
    margin: 0;
    padding: 0;

    & > li {
      margin: 0;
    }
  }
  /* #endregion */

  /* #region Inline Text ~~~~~~~~~~~~~~~~~~~~~ */
  strong,
  b {
    font-weight: var(--cs-font-weight-bold);
  }

  em,
  i {
    font-style: italic;
  }

  u {
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  s {
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  ins {
    text-decoration-color: var(--cs-color-success-on-quiet);
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  del {
    color: color-mix(in oklab, currentColor, transparent 10%);
    text-decoration-color: var(--cs-color-danger-on-quiet);
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  mark {
    padding: 0.125em 0.25em;

    color: var(--cs-color-warning-on-quiet);

    background-color: var(--cs-color-warning-fill-quiet);
    border-radius: var(--cs-border-radius-s);
  }

  small {
    font-size: var(--cs-font-size-smaller);
  }

  sub,
  sup {
    font-size: var(--cs-font-size-smaller);
    line-height: 0;
  }

  sub {
    vertical-align: sub;
  }

  sup {
    vertical-align: super;
  }

  abbr[title] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;

    cursor: help;
  }

  kbd {
    padding: 0.125em 0.25em;

    font-family: var(--cs-font-family-code);
    font-size: var(--cs-font-size-smaller);
    font-weight: var(--cs-font-weight-code);

    border: solid var(--cs-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
    border-radius: var(--cs-border-radius-s);
    box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);

    cs-icon {
      vertical-align: -2px;
    }
  }
  /* #endregion */

  /* #region Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  a {
    color: var(--cs-color-text-link);
    text-decoration: var(--cs-link-decoration-default);
    -webkit-text-decoration: var(--cs-link-decoration-default);
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  *:is([appearance~='accent'], .cs-accent) {
    a,
    a:hover {
      color: currentColor;
    }
  }

  a:hover {
    color: color-mix(in oklab, var(--cs-color-text-link), var(--cs-color-mix-hover));
    text-decoration: var(--cs-link-decoration-hover);
    -webkit-text-decoration: var(--cs-link-decoration-hover);
  }

  a:focus,
  button:focus {
    outline: none;
  }

  a:focus-visible,
  button:focus-visible {
    outline: var(--cs-focus-ring);
    outline-offset: var(--cs-focus-ring-offset);
  }
  /* #endregion */

  /* #region Code ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  code,
  samp,
  var {
    padding: 0.125em 0.25em;

    font-family: var(--cs-font-family-code);
    font-size: var(--cs-font-size-smaller);
    font-weight: var(--cs-font-weight-code);

    background-color: var(--cs-color-overlay-inline);
    border-radius: var(--cs-border-radius-s);
  }

  pre {
    padding: var(--cs-space-m);

    font-family: var(--cs-font-family-code);
    font-size: var(--cs-font-size-smaller);
    font-weight: var(--cs-font-weight-code);
    white-space: pre;

    background-color: var(--cs-color-overlay-inline);
    border-radius: var(--cs-panel-border-radius);
    overflow-x: auto;

    /* Remove overlapping styles for child code elements */
    & code,
    & samp,
    & var {
      padding: 0;

      font-size: 1em;

      background-color: transparent;
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--cs-border-width-s) var(--cs-color-surface-border);
    }
  }
  /* #endregion */

  /* #region Media ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  img,
  svg,
  picture,
  video {
    max-width: 100%;
    height: auto;
  }

  img,
  picture,
  video {
    border-radius: var(--cs-border-radius-m);
  }

  embed,
  iframe,
  object {
    max-width: 100%;
  }

  iframe {
    border: none;
  }
  /* #endregion */

  /* #region Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  table {
    width: 100%;

    border: none;
    border-collapse: collapse;

    &.cs-tabular-nums,
    & .cs-tabular-nums {
      font-variant-numeric: tabular-nums;
    }
  }

  caption {
    color: var(--cs-color-text-quiet);
    font-size: var(--cs-font-size-smaller);

    &:has(+ *) {
      margin-block-end: 0.75em;
    }
  }

  tbody {
    tr {
      border-block-start: var(--cs-border-style) var(--cs-border-width-s) var(--cs-color-border-quiet);

      :where(table.cs-zebra-rows) &:nth-child(odd) {
        background-color: color-mix(in oklab, var(--cs-color-fill-quiet) 60%, transparent);
      }

      :where(table.cs-hover-rows) & {
        @media (hover: hover) {
          &:hover {
            background-color: var(--cs-color-fill-quiet);

            &,
            + tr {
              border-block-start-color: var(--cs-color-border-normal);
            }
          }
        }
      }
    }
  }

  td,
  th {
    padding: 0.75em;

    text-align: start;
    vertical-align: top;
  }

  th {
    font-weight: var(--cs-font-weight-bold);

    /* Column headers only, ruled out by [scope="row"] or by a following non-header cell.
     * Row headers keep the body font size because padding here is em-relative, so smaller
     * type would pull their text out of alignment with the cells beside them. */
    &:not([scope='row']):not(:has(+ td)) {
      font-size: var(--cs-font-size-smaller);
      border-block-end: var(--cs-border-style) var(--cs-border-width-s) var(--cs-color-border-normal);
    }
  }
  /* #endregion */

  /* #region Details ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  details {
    padding: 0;

    background-color: var(--cs-color-surface-default);
    border: var(--cs-panel-border-width) var(--cs-color-surface-border) var(--cs-panel-border-style);
    border-radius: var(--cs-panel-border-radius);

    overflow-anchor: none;

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: var(--cs-space-m);

      border-radius: calc(var(--cs-panel-border-radius) - var(--cs-panel-border-width));

      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;

      > * {
        margin: 0;
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: var(--cs-focus-ring);
        outline-offset: calc(var(--cs-panel-border-width) + var(--cs-focus-ring-offset));
      }
    }

    &[open] {
      padding: 0 var(--cs-space-m) var(--cs-space-m) var(--cs-space-m);

      summary {
        margin-inline: calc(-1 * var(--cs-space-m));

        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
    }

    &::details-content {
      box-sizing: border-box; /* Ensure contents don't overflow */
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--cs-border-width-s) var(--cs-color-surface-border);

      summary {
        list-style: none;
      }
    }
  }

  /* Replace the summary marker */
  details summary {
    &::marker,
    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: '';
      background-color: var(--cs-color-text-quiet);
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z"/></svg>')
        center no-repeat;
      width: 1rem;
      height: 1rem;
      rotate: 0deg;
    }

    &:dir(rtl)::after {
      rotate: 180deg;
    }
  }

  details[open] summary::after {
    rotate: 90deg;
  }
  /* #endregion */

  /* #region Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  dialog {
    flex-direction: column;
    align-items: start;

    width: 32rem;
    max-width: calc(100% - var(--cs-space-l));
    padding: var(--cs-space-l);

    background-color: var(--cs-color-surface-raised);
    border-radius: var(--cs-panel-border-radius);
    border: none;
    box-shadow: var(--cs-shadow-l);

    transition: var(--cs-transition-slow, 200ms) var(--cs-transition-easing);

    /* Center the dialog */
    margin: auto;
    inset: 0;

    &[open] {
      display: flex;
    }

    &:focus {
      outline: none;
    }
  }

  dialog::backdrop {
    background-color: var(--cs-color-overlay-modal, rgb(0 0 0 / 0.25));
  }
  /* #endregion */

  /* #region Form Labels ~~~~~~~~~~~~~~~~~~~~~ */
  label {
    display: inline-block;
    position: relative;

    color: var(--cs-form-control-label-color);
    font-weight: var(--cs-form-control-label-font-weight);
    line-height: var(--cs-form-control-label-line-height);

    &:has(
      input:not(
        [type='button'],
        [type='checkbox'],
        [type='color'],
        [type='file'],
        [type='hidden'],
        [type='image'],
        [type='radio'],
        [type='reset'],
        [type='submit']
      ),
      textarea,
      select
    ) {
      width: 100%;
    }

    & + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
    & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
      margin-block-start: 0.5em;
    }
  }
  /* #endregion */

  /* #region Fieldsets ~~~~~~~~~~~~~~~~~~~~~~~ */
  fieldset {
    padding: var(--cs-space-l);
    padding-block-start: calc(var(--cs-space-l) - 0.5em);

    border: solid 1px var(--cs-color-surface-border);
    border-radius: var(--cs-border-radius-m);
  }

  legend {
    padding: 0;
    padding-inline: var(--cs-space-xs);

    font-weight: var(--cs-form-control-label-font-weight);
  }
  /* #endregion */

  /* #region Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'],
  input[type='file'],
  a.cs-button {
    /* We allow modifier classes on <input type="file">,
     * but these selectors ensure the styles only apply to
     * the file selector button in the user agent's shadow root */
    &:not(input[type='file']),
    &::file-selector-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      height: var(--cs-form-control-height);
      padding: 0 var(--cs-form-control-padding-inline);

      font-family: inherit;
      font-size: inherit;
      font-weight: var(--cs-font-weight-action);
      text-decoration: none;
      vertical-align: middle;
      white-space: nowrap;

      border-style: var(--cs-border-style);
      border-width: max(1px, var(--cs-form-control-border-width));

      /* These read the button group's internal custom properties so native buttons can be grouped */
      border-start-start-radius: var(--_button-start-start-radius, var(--cs-form-control-border-radius));
      border-start-end-radius: var(--_button-start-end-radius, var(--cs-form-control-border-radius));
      border-end-start-radius: var(--_button-end-start-radius, var(--cs-form-control-border-radius));
      border-end-end-radius: var(--_button-end-end-radius, var(--cs-form-control-border-radius));

      transition-property: background, border, box-shadow, color;
      transition-duration: var(--cs-transition-fast);
      transition-timing-function: var(--cs-transition-easing);

      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;

      /* Collapse adjacent borders */
      margin-inline-start: var(--_button-horizontal-indent);
      margin-block-start: var(--_button-vertical-indent);
    }

    /* Outlined variants use a negative indent so adjacent borders overlap */
    &.cs-outlined {
      &:not(input[type='file']),
      &::file-selector-button {
        margin-inline-start: var(--_button-horizontal-indent-outlined);
        margin-block-start: var(--_button-vertical-indent-outlined);
      }
    }

    /* Default styles for standard buttons */
    &:not(input[type='file']) {
      color: var(--cs-color-on-loud, var(--cs-color-neutral-on-loud));
      background-color: var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud));
      border-color: transparent;

      &:not(:disabled) {
        @media (hover: hover) {
          &:hover {
            background-color: color-mix(
              in oklab,
              var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud)),
              var(--cs-color-mix-hover)
            );
            transform: var(--cs-button-transform-hover);
          }
        }

        &:active {
          background-color: color-mix(
            in oklab,
            var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud)),
            var(--cs-color-mix-active)
          );
          transform: var(--cs-button-transform-active);
        }

        @media (prefers-reduced-motion: reduce) {
          &:hover,
          &:active {
            transform: none;
          }
        }
      }
    }

    /* Default styles for file selector buttons */
    &:is(input[type='file']) {
      &::file-selector-button {
        color: var(--cs-color-on-normal, var(--cs-color-neutral-on-normal));
        background-color: var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal));
        border-color: transparent;
      }

      &:not(:disabled) {
        &::file-selector-button:hover {
          background-color: color-mix(
            in oklab,
            var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal)),
            var(--cs-color-mix-hover)
          );
        }

        &::file-selector-button:active {
          background-color: color-mix(
            in oklab,
            var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal)),
            var(--cs-color-mix-active)
          );
        }
      }
    }

    /* Modifier classes */
    &.cs-plain {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
        background-color: transparent;
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
          background-color: var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet));
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
          background-color: color-mix(
            in oklab,
            var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet)),
            var(--cs-color-mix-active)
          );
        }
      }
    }

    &.cs-outlined {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
        background-color: transparent;
        border-color: var(--cs-color-border-loud, var(--cs-color-neutral-border-loud));
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
          background-color: var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet));
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--cs-color-on-quiet, var(--cs-color-neutral-on-quiet));
          background-color: color-mix(
            in oklab,
            var(--cs-color-fill-quiet, var(--cs-color-neutral-fill-quiet)),
            var(--cs-color-mix-active)
          );
        }
      }
    }

    &.cs-filled {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--cs-color-on-normal, var(--cs-color-neutral-on-normal));
        background-color: var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal));
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--cs-color-on-normal, var(--cs-color-neutral-on-normal));
          background-color: color-mix(
            in oklab,
            var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal)),
            var(--cs-color-mix-hover)
          );
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--cs-color-on-normal, var(--cs-color-neutral-on-normal));
          background-color: color-mix(
            in oklab,
            var(--cs-color-fill-normal, var(--cs-color-neutral-fill-normal)),
            var(--cs-color-mix-active)
          );
        }
      }

      &.cs-outlined {
        &:not(input[type='file']),
        &::file-selector-button {
          border-color: var(--cs-color-border-normal, var(--cs-color-neutral-border-normal));
        }
      }
    }

    &.cs-accent {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--cs-color-on-loud, var(--cs-color-neutral-on-loud));
        background-color: var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud));
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          background-color: color-mix(
            in oklab,
            var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud)),
            var(--cs-color-mix-hover)
          );
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          background-color: color-mix(
            in oklab,
            var(--cs-color-fill-loud, var(--cs-color-neutral-fill-loud)),
            var(--cs-color-mix-active)
          );
        }
      }
    }

    &.cs-pill {
      &:not(input[type='file']),
      &::file-selector-button {
        border-start-start-radius: var(--_button-start-start-radius, var(--cs-border-radius-pill));
        border-start-end-radius: var(--_button-start-end-radius, var(--cs-border-radius-pill));
        border-end-start-radius: var(--_button-end-start-radius, var(--cs-border-radius-pill));
        border-end-end-radius: var(--_button-end-end-radius, var(--cs-border-radius-pill));
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: var(--cs-focus-ring);
      outline-offset: var(--cs-focus-ring-offset);
    }

    /* Wrap in :is() so that Safari doesn't stop parsing this block */
    &:is(::-moz-focus-inner) {
      border: 0;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      /* When disabled, prevent mouse events from bubbling up from children */
      * {
        pointer-events: none;
      }
    }

    /* Adds space between icons and adjacent elements
     * Prefer sibling selectors over :first-child/:last-child to avoid extra space when an icon is used alone */
    & > cs-icon:has(+ *) {
      margin-inline-end: 0.75em;
    }

    & > * + cs-icon {
      margin-inline-start: 0.75em;
    }
  }
  /* #endregion */

  /* #region File Inputs ~~~~~~~~~~~~~~~~~~~~~ */
  input[type='file'] {
    display: block;

    max-inline-size: 100%;

    color: var(--cs-form-control-value-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--cs-form-control-value-font-weight);
    line-height: var(--cs-form-control-value-line-height);
    vertical-align: middle;

    border-radius: var(--cs-border-radius-m);

    cursor: pointer;
  }
  /* #endregion */

  /* #region Checkboxes + Radios ~~~~~~~~~~~~~ */
  input[type='checkbox'],
  label:has(input[type='checkbox']),
  input[type='radio'],
  label:has(input[type='radio']) {
    display: inline-flex;

    width: fit-content;

    color: var(--cs-form-control-value-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--cs-form-control-value-font-weight);
    line-height: var(--cs-form-control-value-line-height);

    user-select: none;
    -webkit-user-select: none;

    &,
    + label {
      cursor: pointer;
    }

    &:disabled,
    &:has(:disabled) {
      opacity: 0.5;

      cursor: not-allowed;
    }
  }

  input[type='checkbox'],
  input[type='radio'] {
    appearance: none;

    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: var(--cs-form-control-toggle-size);
    height: var(--cs-form-control-toggle-size);
    margin: 0;
    margin-inline-end: 0.5em;

    background-color: var(--cs-form-control-background-color);
    border-color: var(--cs-form-control-border-color);
    border-style: var(--cs-border-style);
    border-width: var(--cs-form-control-border-width);

    transition:
      background var(--cs-transition-normal),
      border-color var(--cs-transition-fast),
      box-shadow var(--cs-transition-fast),
      color var(--cs-transition-fast);
    transition-timing-function: var(--cs-transition-easing);

    &:focus-visible {
      outline: var(--cs-focus-ring);
      outline-offset: var(--cs-focus-ring-offset);
    }
  }

  /* Checkbox */
  input[type='checkbox'] {
    --checked-icon-color: var(--cs-color-brand-on-loud);
    --checked-icon-scale: 0.8;

    border-radius: min(
      calc(var(--cs-form-control-toggle-size) * 0.375),
      var(--cs-border-radius-s)
    ); /* min prevents entirely circular checkbox */

    &:checked,
    &:indeterminate {
      color: var(--checked-icon-color);

      background-color: var(--cs-form-control-activated-color);
      border-color: var(--cs-form-control-activated-color);
    }

    &:checked::after,
    &:indeterminate::after {
      content: '';

      width: var(--cs-form-control-toggle-size);
      height: var(--cs-form-control-toggle-size);
      scale: var(--checked-icon-scale);

      background-color: currentColor;
    }

    &:checked::after {
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M378-246 154-470l43-43 181 181 384-384 43 43-427 427Z"/></svg>')
        center / 1em 1em no-repeat;
    }

    &:indeterminate::after {
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M160-450v-60h640v60H160Z"/></svg>')
        center no-repeat;
    }
  }

  /* Radio */
  input[type='radio'] {
    --checked-icon-color: var(--cs-form-control-activated-color);
    --checked-icon-scale: 0.7;

    color: transparent;

    border-radius: 50%;

    &:checked {
      color: var(--checked-icon-color);

      border-color: var(--cs-form-control-activated-color);
    }

    &:checked::after {
      content: '';

      aspect-ratio: 1;
      width: 100%;
      scale: var(--checked-icon-scale);

      background-color: currentColor;
      border-radius: 50%;
    }
  }
  /* #endregion */

  /* #region Text Fields + Textareas + Selects */
  input:not(
    /* Exclude inputs that don't accept text */
    [type='button'],
    [type='checkbox'],
    [type='color'],
    [type='file'],
    [type='hidden'],
    [type='image'],
    [type='radio'],
    [type='range'],
    [type='reset'],
    [type='submit']
  ), textarea, select {
    width: 100%;
    height: var(--cs-form-control-height);
    padding: 0 var(--cs-form-control-padding-inline);

    color: var(--cs-form-control-value-color);
    font-size: inherit;
    font-family: inherit;
    font-weight: var(--cs-form-control-value-font-weight);
    line-height: var(--cs-form-control-value-line-height);
    vertical-align: middle;

    background-color: var(--cs-form-control-background-color);
    border-color: var(--cs-form-control-border-color);
    border-style: var(--cs-form-control-border-style);
    border-width: var(--cs-form-control-border-width);
    border-radius: var(--cs-form-control-border-radius);

    transition:
      background-color var(--cs-transition-normal),
      border-color var(--cs-transition-normal),
      outline-color var(--cs-transition-fast);
    transition-timing-function: var(--cs-transition-easing);
    outline: var(--cs-focus-ring-style) var(--cs-focus-ring-width) transparent;
    outline-offset: var(--cs-focus-ring-offset);

    cursor: text;

    &::placeholder {
      color: var(--cs-form-control-placeholder-color);

      user-select: none;
      -webkit-user-select: none;
    }

    &:focus-visible {
      outline-color: var(--cs-color-focus);
    }

    &:disabled {
      opacity: 0.5;

      cursor: not-allowed;
    }

    &.cs-outlined {
      background-color: var(--cs-form-control-background-color);
      border-color: var(--cs-form-control-border-color);
    }

    &.cs-filled {
      background-color: var(--cs-color-neutral-fill-quiet);
      border-color: var(--cs-color-neutral-fill-quiet);

      &.cs-outlined {
        border-color: var(--cs-form-control-border-color);
      }
    }

    &.cs-pill {
      border-radius: var(--cs-border-radius-pill);
    }
  }

  /* Textarea */
  textarea {
    height: auto;
    min-height: var(--cs-form-control-height);
    scroll-padding-block: var(--cs-form-control-padding-block);
    padding: calc(var(--cs-form-control-padding-block) - ((1lh - 1em) / 2)) var(--cs-form-control-padding-inline); /* accounts for the larger line height of textarea content */

    line-height: var(--cs-line-height-normal);

    resize: vertical;
  }

  /* Select */
  select {
    --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="rgb(180 180 200)" d="M480-344 240-584l43-43 197 197 197-197 43 43-240 240Z"/></svg>');

    appearance: none;

    position: relative;

    min-width: 0;
    background-image: var(--icon-caret), var(--icon-caret);
    background-repeat: no-repeat;
    background-position: center right var(--cs-form-control-padding-inline);
    background-blend-mode: hue, difference;
    background-size: 1rem 1rem;
    text-overflow: ellipsis;
    padding-inline-end: calc(var(--cs-form-control-padding-inline) + 1rem + var(--cs-space-xs));
    overflow: hidden;

    cursor: pointer;

    &[multiple] {
      height: auto;
      background-image: none;
      padding-inline: var(--cs-form-control-padding-inline);
    }
  }
  /* #endregion */

  /* #region Color Pickers ~~~~~~~~~~~~~~~~~~~ */
  input[type='color'] {
    display: block;

    block-size: var(--cs-form-control-height);
    inline-size: var(--cs-form-control-height);
    padding: calc(var(--cs-form-control-border-width) * 2);

    font-size: 1em;

    background: transparent;
    border: var(--cs-form-control-border-width) var(--cs-border-style) var(--cs-form-control-border-color);
    border-radius: var(--cs-form-control-border-radius);

    cursor: pointer;
    forced-color-adjust: none;

    &::-webkit-color-swatch-wrapper {
      padding: 0;
      border-radius: inherit;
    }

    &::-webkit-color-swatch {
      border: none;
      border-radius: calc(var(--cs-form-control-border-radius) - var(--cs-form-control-border-width) * 3);
    }

    &::-moz-color-swatch {
      border: none;
      border-radius: calc(var(--cs-form-control-border-radius) - var(--cs-form-control-border-width) * 3);
    }

    &:focus-visible {
      outline: var(--cs-focus-ring);
      outline-offset: var(--cs-focus-ring-offset);
    }
  }
  /* #endregion */

  /* #region Sliders ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  input[type='range'] {
    --thumb-width: 1.4em;
    --thumb-height: 1.4em;
    --track-size: 0.5em;

    -webkit-appearance: none;

    display: flex;
    flex-direction: column;
    position: relative;

    width: 100%;
    height: var(--track-size);
    margin: 0;

    font-size: inherit;
    line-height: var(--cs-form-control-height);
    vertical-align: middle;

    background-color: var(--cs-color-neutral-fill-normal);
    border-radius: calc(var(--track-size) / 2);

    &::-webkit-slider-runnable-track {
      width: 100%;
      height: var(--track-size);

      border: none;
      border-radius: 999px;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;

      width: var(--thumb-width);
      height: var(--thumb-height);
      margin-top: calc(var(--thumb-height) / -2 + var(--track-size) / 2);

      background-color: var(--cs-form-control-activated-color);
      border: solid 0.125em var(--cs-color-surface-default);
      border-radius: 50%;

      transition-property: background-color, border-color, box-shadow, color;
      transition-duration: var(--cs-transition-normal);
      transition-timing-function: var(--cs-transition-easing);
    }

    &:enabled {
      &:focus-visible::-webkit-slider-thumb {
        outline: var(--cs-focus-ring);
        outline-offset: var(--cs-focus-ring-offset);
      }

      &::-webkit-slider-thumb {
        cursor: pointer;
      }

      &::-webkit-slider-thumb:active {
        cursor: grabbing;
      }
    }

    &::-moz-focus-outer {
      border: 0;
    }

    &::-moz-range-progress {
      height: var(--track-size);

      background-color: var(--cs-color-neutral-fill-normal);
      border-radius: 3px;
    }

    &::-moz-range-track {
      width: 100%;
      height: var(--track-size);

      background-color: var(--cs-color-neutral-fill-normal);
      border: none;
      border-radius: 999px;
    }

    &::-moz-range-thumb {
      width: var(--thumb-width);
      height: var(--thumb-height);

      background-color: var(--cs-form-control-activated-color);
      border: solid 0.125em var(--cs-color-surface-default);
      border-radius: 50%;

      transition-property: background-color, border-color, box-shadow, color;
      transition-duration: var(--cs-transition-normal);
      transition-timing-function: var(--cs-transition-easing);
    }

    &:enabled {
      &:focus-visible::-moz-range-thumb {
        outline: var(--cs-focus-ring);
        outline-offset: var(--cs-focus-ring-offset);
      }

      &::-moz-range-thumb {
        cursor: pointer;
      }

      &::-moz-range-thumb:active {
        cursor: grabbing;
      }
    }
  }

  label > input[type='range'] {
    margin-block-start: 1em;
  }

  input[type='range']:focus {
    outline: none;
  }

  input[type='range']:disabled {
    opacity: 0.5;

    cursor: not-allowed;

    &::-webkit-slider-thumb {
      cursor: not-allowed;
    }

    &::-moz-range-thumb {
      cursor: not-allowed;
    }
  }
  /* #endregion */

  /* #region Progress ~~~~~~~~~~~~~~~~~~~~~~~~ */
  progress {
    --indicator-color: var(--cs-color-brand-fill-loud);

    width: 100%;
    height: 1rem;
    overflow: hidden;

    color: var(--cs-color-brand-on-loud);

    background-color: var(--cs-color-neutral-fill-normal);
    border-radius: var(--cs-border-radius-pill);

    &::-webkit-progress-bar {
      background: transparent;
    }

    &[value]::-webkit-progress-value {
      background-color: var(--indicator-color);
    }

    &::-moz-progress-bar {
      background-color: var(--indicator-color);
    }
  }

  /* Indeterminate */
  progress:not([value]) {
    padding-left: var(--inset-inline-start);

    animation: cs-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);

    &::-webkit-progress-bar {
      background-color: var(
        --indicator-color
      ); /* Chrome does not render a ::-webkit-progress-value for indeterminate progress */
    }
  }

  @keyframes cs-fade-in {
    from {
      opacity: 0;
    }
  }

  /* For some reason Chrome fiercely resists animations on this pseudo
	  so we had to do it with padding on <progress> */
  @keyframes cs-progress-indeterminate {
    0% {
      padding-inline-end: 100%;
    }

    25%,
    100% {
      padding-inline-end: 0%;
    }

    75%,
    100% {
      padding-inline-start: 100%;
    }
  }
  /* #endregion */

  /* #region Validation ~~~~~~~~~~~~~~~~~~~~~~ */
  .cs-invalid {
    --cs-form-control-border-color: var(--cs-color-danger-border-loud);
    --cs-form-control-activated-color: var(--cs-color-danger-fill-loud);
    --cs-form-control-value-color: var(--cs-color-danger-on-quiet);

    /* Focus ring */
    --cs-color-focus: var(--cs-color-danger-border-loud);

    /* Help text */
    --cs-color-text-quiet: var(--cs-color-danger-on-quiet);
  }

  .cs-valid {
    --cs-form-control-border-color: var(--cs-color-success-border-loud);
    --cs-form-control-activated-color: var(--cs-color-success-fill-loud);
    --cs-form-control-value-color: var(--cs-color-success-on-quiet);

    /* Focus ring */
    --cs-color-focus: var(--cs-color-success-border-loud);

    /* Help text */
    --cs-color-text-quiet: var(--cs-color-success-on-quiet);
  }
  /* #endregion */
}

/* ── cornerstone: styles/utilities/fouce.css ── */
@layer cs-utilities {
  /*
   * Utility to minimize FOUCE and show custom elements only after they're registered
   */
  .cs-cloak:has(:not(:defined)) {
    animation: 2s step-end cs-fouce-cloak;
  }

  @keyframes cs-fouce-cloak {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ── cornerstone: styles/utilities/visually-hidden.css ── */
@layer cs-utilities {
  .cs-visually-hidden:not(:focus-within),
  .cs-visually-hidden-force,
  .cs-visually-hidden-hint::part(hint),
  .cs-visually-hidden-label::part(label),
  .cs-visually-hidden-label::part(form-control-label) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }
}

/* ── cornerstone: styles/utilities/scroll-lock.css ── */
@layer cs-utilities {
  /* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
  @supports (scrollbar-gutter: stable) {
    .cs-scroll-lock {
      scrollbar-gutter: var(--cs-scroll-lock-gutter) !important;
    }

    .cs-scroll-lock body {
      overflow: hidden !important;
    }
  }

  /** This can go away once Safari has scrollbar-gutter support. */
  @supports not (scrollbar-gutter: stable) {
    .cs-scroll-lock body {
      padding-right: var(--cs-scroll-lock-size) !important;
      overflow: hidden !important;
    }
  }
}

/* ── cornerstone: styles/utilities/placeholder.css ── */
@layer cs-utilities {
  .cs-placeholder {
    align-self: stretch;
    background-color: var(--cs-color-neutral-fill-quiet);
    border: dashed var(--cs-border-width-s) var(--cs-color-neutral-border-normal);
    border-radius: var(--cs-border-radius-l);
    padding: var(--cs-space-3xl);
  }
}

/* ── cornerstone: styles/utilities/align-items.css ── */
@layer cs-utilities {
  /* Apply Flexbox with 0 specificity to ensure an align-items util produces a visible change */
  :where(
    .cs-align-items-start,
    .cs-align-items-end,
    .cs-align-items-center,
    .cs-align-items-stretch,
    .cs-align-items-baseline
  ) {
    display: flex;
  }

  .cs-align-items-start {
    align-items: flex-start;
  }
  .cs-align-items-end {
    align-items: flex-end;
  }
  .cs-align-items-center {
    align-items: center;
  }
  .cs-align-items-stretch {
    align-items: stretch;
  }
  .cs-align-items-baseline {
    align-items: baseline;
  }

  .cs-align-self-start {
    align-self: flex-start;
  }
  .cs-align-self-end {
    align-self: flex-end;
  }
  .cs-align-self-center {
    align-self: center;
  }
  .cs-align-self-stretch {
    align-self: stretch;
  }
  .cs-align-self-baseline {
    align-self: baseline;
  }
}

/* ── cornerstone: styles/utilities/justify-content.css ── */
@layer cs-utilities {
  /* Apply Flexbox with 0 specificity to ensure a justify-content util produces a visible change */
  :where(
    .cs-justify-content-start,
    .cs-justify-content-end,
    .cs-justify-content-center,
    .cs-justify-content-space-around,
    .cs-justify-content-space-between,
    .cs-justify-content-space-evenly
  ) {
    display: flex;
  }

  .cs-justify-content-start {
    justify-content: flex-start;
  }
  .cs-justify-content-end {
    justify-content: flex-end;
  }
  .cs-justify-content-center {
    justify-content: center;
  }
  .cs-justify-content-space-around {
    justify-content: space-around;
  }
  .cs-justify-content-space-between {
    justify-content: space-between;
  }
  .cs-justify-content-space-evenly {
    justify-content: space-evenly;
  }
}

/* ── cornerstone: styles/utilities/flex-wrap.css ── */
@layer cs-utilities {
  /* Apply Flexbox with 0 specificity to ensure a flex wrap util produces a visible change */
  :where(.cs-flex-wrap, .cs-flex-nowrap, .cs-flex-wrap-reverse) {
    display: flex;
  }

  .cs-flex-wrap {
    flex-wrap: wrap;
  }
  .cs-flex-nowrap {
    flex-wrap: nowrap;
  }
  .cs-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

/* ── cornerstone: styles/utilities/border-radius.css ── */
@layer cs-utilities {
  .cs-border-radius-s {
    border-radius: var(--cs-border-radius-s);
  }
  .cs-border-radius-m {
    border-radius: var(--cs-border-radius-m);
  }
  .cs-border-radius-l {
    border-radius: var(--cs-border-radius-l);
  }
  .cs-border-radius-pill {
    border-radius: var(--cs-border-radius-pill);
  }
  .cs-border-radius-circle {
    border-radius: var(--cs-border-radius-circle);
  }
  .cs-border-radius-square {
    border-radius: var(--cs-border-radius-square);
  }
}

/* ── cornerstone: styles/utilities/gap.css ── */
@layer cs-utilities {
  /* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
  :where(
    .cs-gap-0,
    .cs-gap-3xs,
    .cs-gap-2xs,
    .cs-gap-xs,
    .cs-gap-s,
    .cs-gap-m,
    .cs-gap-l,
    .cs-gap-xl,
    .cs-gap-2xl,
    .cs-gap-3xl,
    .cs-gap-4xl,
    .cs-gap-5xl
  ) {
    display: flex;
  }

  .cs-gap-0 {
    gap: 0px;
  }
  .cs-gap-3xs {
    gap: var(--cs-space-3xs);
  }
  .cs-gap-2xs {
    gap: var(--cs-space-2xs);
  }
  .cs-gap-xs {
    gap: var(--cs-space-xs);
  }
  .cs-gap-s {
    gap: var(--cs-space-s);
  }
  .cs-gap-m {
    gap: var(--cs-space-m);
  }
  .cs-gap-l {
    gap: var(--cs-space-l);
  }
  .cs-gap-xl {
    gap: var(--cs-space-xl);
  }
  .cs-gap-2xl {
    gap: var(--cs-space-2xl);
  }
  .cs-gap-3xl {
    gap: var(--cs-space-3xl);
  }
  .cs-gap-4xl {
    gap: var(--cs-space-4xl);
  }
  .cs-gap-5xl {
    gap: var(--cs-space-5xl);
  }
}

/* ── cornerstone: styles/utilities/text.css ── */
@layer cs-utilities {
  /* #region General ~~~~~ */
  [class*='cs-body'] {
    font-family: var(--cs-font-family-body);
    font-weight: var(--cs-font-weight-body);
    line-height: var(--cs-line-height-normal);
  }

  [class*='cs-heading'] {
    font-family: var(--cs-font-family-heading);
    font-weight: var(--cs-font-weight-heading);
    line-height: var(--cs-line-height-condensed);
    text-wrap: balance;
  }

  [class*='cs-caption'] {
    color: var(--cs-color-text-quiet);
    font-family: var(--cs-font-family-body);
    font-weight: var(--cs-font-weight-body);
    line-height: var(--cs-line-height-condensed);
  }

  [class*='cs-longform'] {
    font-family: var(--cs-font-family-longform);
    font-weight: var(--cs-font-weight-longform);
    line-height: var(--cs-line-height-normal);
  }

  .cs-font-size-3xs,
  .cs-body-3xs,
  .cs-heading-3xs,
  .cs-caption-3xs,
  .cs-longform-3xs {
    font-size: var(--cs-font-size-3xs);
  }

  .cs-font-size-2xs,
  .cs-body-2xs,
  .cs-heading-2xs,
  .cs-caption-2xs,
  .cs-longform-2xs {
    font-size: var(--cs-font-size-2xs);
  }

  .cs-font-size-xs,
  .cs-body-xs,
  .cs-heading-xs,
  .cs-caption-xs,
  .cs-longform-xs {
    font-size: var(--cs-font-size-xs);
  }

  .cs-font-size-s,
  .cs-body-s,
  .cs-heading-s,
  .cs-caption-s,
  .cs-longform-s {
    font-size: var(--cs-font-size-s);
  }

  .cs-font-size-m,
  .cs-body-m,
  .cs-heading-m,
  .cs-caption-m,
  .cs-longform-m {
    font-size: var(--cs-font-size-m);
  }

  .cs-font-size-l,
  .cs-body-l,
  .cs-heading-l,
  .cs-caption-l,
  .cs-longform-l {
    font-size: var(--cs-font-size-l);
  }

  .cs-font-size-xl,
  .cs-body-xl,
  .cs-heading-xl,
  .cs-caption-xl,
  .cs-longform-xl {
    font-size: var(--cs-font-size-xl);
  }

  .cs-font-size-2xl,
  .cs-body-2xl,
  .cs-heading-2xl,
  .cs-caption-2xl,
  .cs-longform-2xl {
    font-size: var(--cs-font-size-2xl);
  }

  .cs-font-size-3xl,
  .cs-body-3xl,
  .cs-heading-3xl,
  .cs-caption-3xl,
  .cs-longform-3xl {
    font-size: var(--cs-font-size-3xl);
  }

  .cs-font-size-4xl,
  .cs-body-4xl,
  .cs-heading-4xl,
  .cs-caption-4xl,
  .cs-longform-4xl {
    font-size: var(--cs-font-size-4xl);
  }

  .cs-font-size-5xl,
  .cs-body-5xl,
  .cs-heading-5xl,
  .cs-caption-5xl,
  .cs-longform-5xl {
    font-size: var(--cs-font-size-5xl);
  }

  .cs-font-weight-light {
    font-weight: var(--cs-font-weight-light);
  }

  .cs-font-weight-normal {
    font-weight: var(--cs-font-weight-normal);
  }

  .cs-font-weight-semibold {
    font-weight: var(--cs-font-weight-semibold);
  }

  .cs-font-weight-bold {
    font-weight: var(--cs-font-weight-bold);
  }

  .cs-color-text-normal {
    color: var(--cs-color-text-normal);
  }

  .cs-color-text-quiet {
    color: var(--cs-color-text-quiet);
  }

  .cs-color-text-link {
    color: var(--cs-color-text-link);
  }

  .cs-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cs-text-nowrap,
  .cs-text-wrap-nowrap {
    text-wrap: nowrap;
  }

  .cs-text-balance,
  .cs-text-wrap-balance {
    text-wrap: balance;
  }

  @supports (text-wrap: pretty) {
    .cs-text-pretty,
    .cs-text-wrap-pretty {
      text-wrap: pretty;
    }
  }

  .cs-text-uppercase {
    text-transform: uppercase;
  }

  .cs-text-lowercase {
    text-transform: lowercase;
  }

  .cs-text-capitalize {
    text-transform: capitalize;
  }

  .cs-text-start {
    text-align: start;
  }

  .cs-text-center {
    text-align: center;
  }

  .cs-text-end {
    text-align: end;
  }

  .cs-text-justify {
    text-align: justify;
  }
  /* #endregion */

  /* #region Links ~~~~~~~ */
  .cs-link {
    color: var(--cs-color-text-link);
    text-decoration: var(--cs-link-decoration-default);
    -webkit-text-decoration: var(--cs-link-decoration-default);

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, var(--cs-color-text-link) 100%, var(--cs-color-mix-hover));
        text-decoration: var(--cs-link-decoration-hover);
        -webkit-text-decoration: var(--cs-link-decoration-hover);
      }
    }
  }

  .cs-link-plain {
    color: var(--cs-color-text-normal);
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, currentColor, var(--cs-color-mix-hover));
        text-decoration: none;
      }
    }
  }
  /* #endregion */

  /* #region Lists ~~~~~~~ */
  .cs-list-plain:is(ol, ul) {
    list-style: none;
    padding-inline-start: 0;

    > li {
      margin-inline-start: 0;
    }
  }
  /* #endregion */

  /* #region Form Controls */
  .cs-form-control-label {
    color: var(--cs-form-control-label-color);
    font-weight: var(--cs-form-control-label-font-weight);
    line-height: var(--cs-form-control-label-line-height);
  }

  .cs-form-control-value {
    color: var(--cs-form-control-value-color);
    font-weight: var(--cs-form-control-value-font-weight);
    line-height: var(--cs-form-control-value-line-height);
  }

  .cs-form-control-placeholder {
    color: var(--cs-form-control-placeholder-color);
    font-weight: var(--cs-form-control-value-font-weight);
    line-height: var(--cs-form-control-value-line-height);
  }

  .cs-form-control-hint {
    color: var(--cs-form-control-hint-color);
    font-weight: var(--cs-form-control-hint-font-weight);
    font-size: var(--cs-font-size-smaller);
    line-height: var(--cs-form-control-hint-line-height);
  }
  /* #endregion */
}

/* ── cornerstone: styles/utilities/layout.css ── */
@layer cs-utilities {
  :is(
      [class*='cs-cluster'],
      [class*='cs-flank'],
      [class*='cs-frame'],
      [class*='cs-grid'],
      [class*='cs-stack'],
      [class*='cs-split']
    )
    > * {
    margin-block: 0;
    margin-inline: 0;
  }

  :where(
    [class*='cs-cluster'],
    [class*='cs-flank'],
    [class*='cs-frame'],
    [class*='cs-grid'],
    [class*='cs-stack'],
    [class*='cs-split']
  ) {
    gap: var(--cs-space-m);
  }

  /* #region Cluster */
  [class*='cs-cluster'] {
    display: flex;
  }

  :where([class*='cs-cluster']) {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* #endregion */

  /* #region Flank */
  [class*='cs-flank'] {
    display: flex;

    --content-percentage: initial;
    --flank-size: initial;
  }

  [class*='cs-flank']:not([class*='\:end']) > :first-child,
  [class*='cs-flank'][class*='\:start'] > :first-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='cs-flank']:not([class*='\:end']) > :last-child,
  [class*='cs-flank'][class*='\:start'] > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  [class*='cs-flank'][class*='\:end'] > :last-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='cs-flank'][class*='\:end'] > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  :where([class*='cs-flank']) {
    align-items: center;
    flex-wrap: wrap;
  }
  /* #endregion */

  /* #region Frame */
  [class*='cs-frame'] {
    display: flex;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  [class*='cs-frame'] > img,
  [class*='cs-frame'] > video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  [class*='cs-frame'][class*='\:square'] {
    aspect-ratio: 1 / 1;
  }
  [class*='cs-frame'][class*='\:landscape'] {
    aspect-ratio: 16 / 9;
  }
  [class*='cs-frame'][class*='\:portrait'] {
    aspect-ratio: 9 / 16;
  }

  :where([class*='cs-frame']) {
    align-items: center;
    justify-content: center;
  }
  /* #endregion */

  /* #region Grid */
  [class*='cs-grid'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));

    --min-column-size: initial;
  }

  .cs-span-grid {
    grid-column: 1 / -1;
  }
  /* #endregion */

  /* #region Split */
  [class*='cs-split'] {
    display: flex;
  }

  [class*='cs-split'],
  [class*='cs-split'][class*='\:row'] {
    flex-direction: row;
    block-size: auto;
    inline-size: 100%;
  }

  [class*='cs-split']:not([class*='\:column']) > :first-child {
    flex: 0 1 auto;
  }

  [class*='cs-split'][class*='\:column'] {
    flex-direction: column;
    block-size: auto;
    inline-size: auto;
    align-self: stretch;
  }

  :where([class*='cs-split']) {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* #endregion */

  /* #region Stack */
  [class*='cs-stack'] {
    display: flex;
    flex-direction: column;
  }

  :where([class*='cs-stack']) {
    align-items: stretch;
    justify-content: flex-start;
  }
  /* #endregion */
}

/* ── cornerstone: styles/utilities/prose.css ── */
@layer cs-utilities {
  /* `cs-prose` applies hierarchical, asymmetric typographic rhythm to a block
     of long-form content. Builds on `cs-native`'s base block styles instead of
     duplicating them. Em-based spacing scales when composed with `cs-font-size-*`.
     The class and its element selectors are wrapped in `:where()` so every rule
     sits at 0,0,0 specificity — any utility class or element rule the author
     applies inside the container takes precedence without weight tricks. */

  /* @scope is Newly Available in Baseline 2025. As such, it should be reserved for
     non-essential, progressive enhancement features until @scope is established
     as Widely Available. https://caniuse.com/css-cascade-scope */
  @scope (.cs-prose) to (.cs-not-prose) {
    :where(:scope) {
      /* #region Tokens ~~~~~~~~~~~~ */

      /* Em-based rhythm scale: each token resolves at the use site, so margins
        scale with the element's own font-size. `--cs-prose-rhythm-scale` is a
        single knob to tighten or loosen everything at once. */
      --cs-prose-rhythm-scale: 1;
      --cs-prose-rhythm-2xs: calc(0.25em * var(--cs-space-scale) * var(--cs-prose-rhythm-scale));
      --cs-prose-rhythm-xs: calc(0.5em * var(--cs-space-scale) * var(--cs-prose-rhythm-scale));
      --cs-prose-rhythm-s: calc(0.75em * var(--cs-space-scale) * var(--cs-prose-rhythm-scale));
      --cs-prose-rhythm-m: calc(1em * var(--cs-space-scale) * var(--cs-prose-rhythm-scale));
      --cs-prose-rhythm-l: calc(1.5em * var(--cs-space-scale) * var(--cs-prose-rhythm-scale));
      --cs-prose-rhythm-xl: calc(2em * var(--cs-space-scale) * var(--cs-prose-rhythm-scale));
      --cs-prose-rhythm-2xl: calc(2.5em * var(--cs-space-scale) * var(--cs-prose-rhythm-scale));
      --cs-prose-rhythm-3xl: calc(3em * var(--cs-space-scale) * var(--cs-prose-rhythm-scale));

      --cs-prose-line-length: 65ch;

      max-inline-size: var(--cs-prose-line-length);

      /* Oldstyle proportional figures for running text; tables reassert
        `tabular-nums` below. Fonts without the OpenType feature fall back. */
      font-variant-numeric: oldstyle-nums proportional-nums;

      /* Inherits to descendants. Safari today; progressive enhancement elsewhere. */
      hanging-punctuation: first last allow-end;
      /* #endregion */

      /* #region Headings ~~~~~~~~~~~~ */

      /* Em sizes inherit through the cascade — re-applying `--cs-font-size-scale`
        here would double-scale. Authors overriding should stay em-based. */
      & :where(h1) {
        font-size: 2.5625em;
      }
      & :where(h2) {
        font-size: 2em;
      }
      & :where(h3) {
        font-size: 1.5625em;
      }
      & :where(h4) {
        font-size: 1.25em;
      }
      & :where(h5) {
        font-size: 1em;
      }
      & :where(h6) {
        font-size: 0.75em;
      }

      /* Slight optical tracking; only the larger sizes need it. */
      & :where(h1, h2) {
        letter-spacing: -0.01em;
      }

      /* Headings hug what they introduce: generous above, tight below. */
      & :where(h1):has(+ *) {
        margin-block-end: var(--cs-prose-rhythm-s);
      }

      & * + :where(h2) {
        margin-block-start: var(--cs-prose-rhythm-2xl);
      }
      & :where(h2):has(+ *) {
        margin-block-end: var(--cs-prose-rhythm-s);
      }

      & * + :where(h3) {
        margin-block-start: var(--cs-prose-rhythm-xl);
      }
      & :where(h3):has(+ *) {
        margin-block-end: var(--cs-prose-rhythm-s);
      }

      & :where(h4, h5, h6):has(+ *) {
        margin-block-end: var(--cs-prose-rhythm-xs);
      }

      /* Back-to-back headings tighten so the second reads as subordinate.
        Enumerated explicitly — skipping more than two levels is rare enough
        that the default rhythm reads better. */
      & :where(h1 + h2, h1 + h3, h2 + h3, h2 + h4, h3 + h4, h4 + h5, h5 + h6) {
        margin-block-start: var(--cs-prose-rhythm-m);
      }
      /* #endregion */

      /* #region Body text & lists ~~~~~~~~~~~~ */

      /* Replaces cs-native's rem-based `--cs-content-spacing` with em rhythm. */
      & :where(p, ul, ol, dl):has(+ *) {
        margin-block-end: var(--cs-prose-rhythm-l);
      }

      & :where(ul, ol) > :where(li):has(+ li) {
        margin-block-end: var(--cs-prose-rhythm-2xs);
      }

      & :where(dd):has(+ *) {
        margin-block-end: var(--cs-prose-rhythm-s);
      }
      /* #endregion */

      /* #region Captions ~~~~~~~~~~~~ */

      /* Em-based override keeps caption spacing in step with the prose
        container; cs-native sets the visual style. */
      & :where(figcaption) {
        margin-block-start: var(--cs-prose-rhythm-xs);
      }
      /* #endregion */

      /* #region Inline code & long-word breaks ~~~~~~~~~~~~ */

      /* `anywhere` is the right trade-off in prose: long URLs and identifiers
        break instead of overflowing the column. */
      & :where(code, pre) {
        overflow-wrap: anywhere;
      }
      /* #endregion */

      /* #region Section breaks & major non-text blocks ~~~~~~~~~~~~ */

      /* `<hr>`'s own margin defines the gap; the next heading shouldn't double-stack. */
      & :where(hr) {
        margin-block: var(--cs-prose-rhythm-3xl);
      }
      & :where(hr + :is(h1, h2, h3, h4, h5, h6)) {
        margin-block-start: 0;
      }

      /* Major non-text blocks get more air than running prose, but headings
        still hug — so the top-margin rule excludes the heading-to-block case
        (handled separately below with a smaller gap). */
      & :where(pre, figure, table, blockquote, cs-callout, details):has(+ *) {
        margin-block-end: var(--cs-prose-rhythm-xl);
      }

      & :where(:not(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, cs-callout, details)) {
        margin-block-start: var(--cs-prose-rhythm-xl);
      }

      & :where(:is(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, cs-callout, details)) {
        margin-block-start: var(--cs-prose-rhythm-m);
      }
      /* #endregion */
    }
  }
}

/* ── cornerstone: styles/color/palettes/cru.css ── */
/* Generated by tools/palette.mjs from tools/brands/cru.json — do not edit by hand.
 *
 * Each step's lightness is solved for a WCAG luminance target, so the documented step-difference
 * contract holds by construction: 40 apart gives 3:1, 50 gives 4.5:1, 60 gives 7:1. The brand's own
 * colours are written verbatim at the step whose luminance they already have.
 */


@layer cs-color-palette {
  :where(:root),
  :host {
    /* lemon */
    --cs-color-lemon-95: #fff3c3; /* oklch(96.186% 0.06308 95.65) */
    --cs-color-lemon-90: #ffe378; /* brand value */
    --cs-color-lemon-80: #e2c965; /* oklch(83.704% 0.12341 95.53) */
    --cs-color-lemon-70: #c3ae5b; /* oklch(75.160% 0.10645 95.45) */
    --cs-color-lemon-60: #a69553; /* oklch(67.022% 0.08859 95.31) */
    --cs-color-lemon-50: #817544; /* oklch(56.172% 0.06948 96.01) */
    --cs-color-lemon-40: #625835; /* oklch(46.109% 0.05310 94.00) */
    --cs-color-lemon-30: #4d4529; /* oklch(39.095% 0.04436 94.01) */
    --cs-color-lemon-20: #393219; /* oklch(31.785% 0.04083 94.20) */
    --cs-color-lemon-10: #231d07; /* oklch(23.198% 0.03703 94.27) */
    --cs-color-lemon-05: #171200; /* oklch(18.295% 0.03771 96.89) */
    --cs-color-lemon: var(--cs-color-lemon-90);
    --cs-color-lemon-key: 90;

    /* yellow */
    --cs-color-yellow-95: #fff2cc; /* oklch(96.185% 0.05124 91.37) */
    --cs-color-yellow-90: #ffe48e; /* oklch(92.267% 0.10977 92.58) */
    --cs-color-yellow-80: #ffd000; /* brand value */
    --cs-color-yellow-70: #d2ab00; /* oklch(75.436% 0.15435 92.30) */
    --cs-color-yellow-60: #b39200; /* oklch(67.089% 0.13732 92.68) */
    --cs-color-yellow-50: #8e7300; /* oklch(56.516% 0.11565 92.43) */
    --cs-color-yellow-40: #6c5702; /* oklch(46.463% 0.09426 92.37) */
    --cs-color-yellow-30: #54440c; /* oklch(39.271% 0.07364 91.87) */
    --cs-color-yellow-20: #3e3104; /* oklch(31.873% 0.06179 91.57) */
    --cs-color-yellow-10: #261d00; /* oklch(23.475% 0.04804 92.44) */
    --cs-color-yellow-05: #181200; /* oklch(18.436% 0.03781 94.26) */
    --cs-color-yellow: var(--cs-color-yellow-80);
    --cs-color-yellow-key: 80;

    /* orange */
    --cs-color-orange-95: #ffefe6; /* oklch(96.234% 0.02116 51.53) */
    --cs-color-orange-90: #ffe0cc; /* oklch(92.707% 0.04356 54.89) */
    --cs-color-orange-80: #ffbb8f; /* oklch(84.494% 0.09791 53.88) */
    --cs-color-orange-70: #f59857; /* oklch(76.304% 0.13773 53.98) */
    --cs-color-orange-60: #f08020; /* brand value */
    --cs-color-orange-50: #b85d00; /* oklch(57.680% 0.14382 54.42) */
    --cs-color-orange-40: #8d4600; /* oklch(47.462% 0.11808 54.60) */
    --cs-color-orange-30: #703500; /* oklch(39.987% 0.10094 53.43) */
    --cs-color-orange-20: #532600; /* oklch(32.518% 0.08157 53.93) */
    --cs-color-orange-10: #341600; /* oklch(24.025% 0.05947 55.02) */
    --cs-color-orange-05: #230c00; /* oklch(18.778% 0.04747 53.32) */
    --cs-color-orange: var(--cs-color-orange-60);
    --cs-color-orange-key: 60;

    /* vermilion */
    --cs-color-vermilion-95: #ffefeb; /* oklch(96.367% 0.01822 34.30) */
    --cs-color-vermilion-90: #ffded4; /* oklch(92.526% 0.03921 37.53) */
    --cs-color-vermilion-80: #f9bca8; /* oklch(84.571% 0.07617 38.92) */
    --cs-color-vermilion-70: #f1987c; /* oklch(76.398% 0.11470 38.22) */
    --cs-color-vermilion-60: #e8734c; /* oklch(68.498% 0.15498 38.87) */
    --cs-color-vermilion-50: #d34400; /* brand value */
    --cs-color-vermilion-40: #a23200; /* oklch(48.050% 0.15553 38.52) */
    --cs-color-vermilion-30: #802600; /* oklch(40.514% 0.13068 38.69) */
    --cs-color-vermilion-20: #611a00; /* oklch(33.188% 0.10790 38.32) */
    --cs-color-vermilion-10: #3c0d00; /* oklch(24.043% 0.07768 38.61) */
    --cs-color-vermilion-05: #290600; /* oklch(18.868% 0.06197 37.85) */
    --cs-color-vermilion: var(--cs-color-vermilion-50);
    --cs-color-vermilion-key: 50;

    /* rose */
    --cs-color-rose-95: #ffeef2; /* oklch(96.368% 0.01909 1.38) */
    --cs-color-rose-90: #ffdde5; /* oklch(92.794% 0.03896 1.98) */
    --cs-color-rose-80: #ffb4c8; /* brand value */
    --cs-color-rose-70: #e09bae; /* oklch(76.191% 0.08562 1.30) */
    --cs-color-rose-60: #be8594; /* oklch(67.767% 0.07254 1.93) */
    --cs-color-rose-50: #966975; /* oklch(57.093% 0.05981 1.65) */
    --cs-color-rose-40: #725059; /* oklch(47.077% 0.04736 1.66) */
    --cs-color-rose-30: #583f45; /* oklch(39.736% 0.03603 2.98) */
    --cs-color-rose-20: #422d32; /* oklch(32.369% 0.03190 3.31) */
    --cs-color-rose-10: #29191d; /* oklch(23.579% 0.02645 2.92) */
    --cs-color-rose-05: #1c0e12; /* oklch(18.537% 0.02486 1.25) */
    --cs-color-rose: var(--cs-color-rose-80);
    --cs-color-rose-key: 80;

    /* pink */
    --cs-color-pink-95: #ffeff1; /* oklch(96.531% 0.01749 8.76) */
    --cs-color-pink-90: #ffdee1; /* oklch(92.870% 0.03674 11.60) */
    --cs-color-pink-80: #ffb7c0; /* oklch(84.886% 0.08427 10.73) */
    --cs-color-pink-70: #fe8d9f; /* oklch(76.981% 0.13731 10.66) */
    --cs-color-pink-60: #ea657f; /* brand value */
    --cs-color-pink-50: #c54c65; /* oklch(58.411% 0.15523 10.69) */
    --cs-color-pink-40: #9a364c; /* oklch(48.169% 0.13400 10.37) */
    --cs-color-pink-30: #79293b; /* oklch(40.505% 0.11210 9.98) */
    --cs-color-pink-20: #591e2b; /* oklch(32.951% 0.08749 9.80) */
    --cs-color-pink-10: #390e18; /* oklch(24.080% 0.06841 9.82) */
    --cs-color-pink-05: #28060d; /* oklch(19.009% 0.05759 11.58) */
    --cs-color-pink: var(--cs-color-pink-60);
    --cs-color-pink-key: 60;

    /* cerise */
    --cs-color-cerise-95: #fff0ef; /* oklch(96.667% 0.01632 22.08) */
    --cs-color-cerise-90: #fededd; /* oklch(92.674% 0.03556 19.95) */
    --cs-color-cerise-80: #f7bbba; /* oklch(84.624% 0.06964 19.73) */
    --cs-color-cerise-70: #ec9898; /* oklch(76.422% 0.10140 19.67) */
    --cs-color-cerise-60: #e47377; /* oklch(68.707% 0.14048 19.26) */
    --cs-color-cerise-50: #c23c49; /* brand value */
    --cs-color-cerise-40: #a62938; /* oklch(48.375% 0.16038 19.31) */
    --cs-color-cerise-30: #851d2a; /* oklch(40.938% 0.13825 19.40) */
    --cs-color-cerise-20: #64131d; /* oklch(33.364% 0.11316 19.57) */
    --cs-color-cerise-10: #42050e; /* oklch(24.631% 0.09004 19.42) */
    --cs-color-cerise-05: #2c0307; /* oklch(19.182% 0.06828 19.72) */
    --cs-color-cerise: var(--cs-color-cerise-50);
    --cs-color-cerise-key: 50;

    /* ruby */
    --cs-color-ruby-95: #faf1ef; /* oklch(96.460% 0.01009 32.52) */
    --cs-color-ruby-90: #ede3e2; /* oklch(92.344% 0.01101 24.33) */
    --cs-color-ruby-80: #d7c6c3; /* oklch(83.972% 0.01965 29.56) */
    --cs-color-ruby-70: #c5a8a3; /* oklch(75.567% 0.03485 29.44) */
    --cs-color-ruby-60: #be8880; /* oklch(67.771% 0.06788 28.42) */
    --cs-color-ruby-50: #ac6057; /* oklch(57.413% 0.10044 27.72) */
    --cs-color-ruby-40: #9c362f; /* oklch(47.892% 0.13746 27.39) */
    --cs-color-ruby-30: #991313; /* brand value */
    --cs-color-ruby-20: #6d0004; /* oklch(33.616% 0.13732 27.81) */
    --cs-color-ruby-10: #460001; /* oklch(24.769% 0.10135 28.34) */
    --cs-color-ruby-05: #2e0001; /* oklch(18.940% 0.07725 27.26) */
    --cs-color-ruby: var(--cs-color-ruby-30);
    --cs-color-ruby-key: 30;

    /* sky */
    --cs-color-sky-95: #cdfbff; /* oklch(95.737% 0.04719 202.92) */
    --cs-color-sky-90: #89eff7; /* brand value */
    --cs-color-sky-80: #7ad9e0; /* oklch(82.939% 0.09068 201.76) */
    --cs-color-sky-70: #6cbbc2; /* oklch(74.402% 0.07843 202.98) */
    --cs-color-sky-60: #609fa3; /* oklch(66.162% 0.06515 200.91) */
    --cs-color-sky-50: #4e7d80; /* oklch(55.725% 0.05139 200.95) */
    --cs-color-sky-40: #3d5f61; /* oklch(46.033% 0.03946 200.57) */
    --cs-color-sky-30: #2e4a4c; /* oklch(38.772% 0.03387 201.57) */
    --cs-color-sky-20: #1f3738; /* oklch(31.764% 0.03000 199.14) */
    --cs-color-sky-10: #0b2122; /* oklch(23.043% 0.02791 199.35) */
    --cs-color-sky-05: #021516; /* oklch(17.939% 0.02709 199.37) */
    --cs-color-sky: var(--cs-color-sky-90);
    --cs-color-sky-key: 90;

    /* cyan */
    --cs-color-cyan-95: #d7f8ff; /* oklch(95.765% 0.03548 211.92) */
    --cs-color-cyan-90: #a9f1ff; /* oklch(91.545% 0.07357 211.02) */
    --cs-color-cyan-80: #69d9ed; /* oklch(82.723% 0.10546 210.81) */
    --cs-color-cyan-70: #00c0d8; /* brand value */
    --cs-color-cyan-60: #00a3b8; /* oklch(65.598% 0.11377 210.80) */
    --cs-color-cyan-50: #008192; /* oklch(55.310% 0.09594 210.83) */
    --cs-color-cyan-40: #006270; /* oklch(45.522% 0.07919 211.61) */
    --cs-color-cyan-30: #004d57; /* oklch(38.492% 0.06650 209.66) */
    --cs-color-cyan-20: #033940; /* oklch(31.603% 0.05272 208.62) */
    --cs-color-cyan-10: #002127; /* oklch(22.739% 0.03961 211.94) */
    --cs-color-cyan-05: #001419; /* oklch(17.591% 0.03098 214.37) */
    --cs-color-cyan: var(--cs-color-cyan-70);
    --cs-color-cyan-key: 70;

    /* turquoise */
    --cs-color-turquoise-95: #ebf5f7; /* oklch(96.324% 0.01095 211.04) */
    --cs-color-turquoise-90: #d7e9ee; /* oklch(92.213% 0.02032 216.20) */
    --cs-color-turquoise-80: #aed0da; /* oklch(83.602% 0.03875 217.48) */
    --cs-color-turquoise-70: #84b7c6; /* oklch(74.881% 0.05768 217.97) */
    --cs-color-turquoise-60: #569eb3; /* oklch(66.049% 0.07845 218.99) */
    --cs-color-turquoise-50: #007890; /* brand value */
    --cs-color-turquoise-40: #006175; /* oklch(45.487% 0.08191 218.35) */
    --cs-color-turquoise-30: #004d5d; /* oklch(38.784% 0.06962 217.84) */
    --cs-color-turquoise-20: #003744; /* oklch(31.130% 0.05641 219.30) */
    --cs-color-turquoise-10: #00222a; /* oklch(23.229% 0.04143 216.75) */
    --cs-color-turquoise-05: #00151b; /* oklch(18.055% 0.03231 217.31) */
    --cs-color-turquoise: var(--cs-color-turquoise-50);
    --cs-color-turquoise-key: 50;

    /* navy */
    --cs-color-navy-95: #f2f3f6; /* oklch(96.424% 0.00414 271.37) */
    --cs-color-navy-90: #e5e6e9; /* oklch(92.503% 0.00418 271.37) */
    --cs-color-navy-80: #c9cacd; /* oklch(83.911% 0.00429 271.36) */
    --cs-color-navy-70: #aeafb2; /* oklch(75.411% 0.00440 271.35) */
    --cs-color-navy-60: #94949a; /* oklch(66.844% 0.00875 286.16) */
    --cs-color-navy-50: #73747f; /* oklch(56.183% 0.01689 281.70) */
    --cs-color-navy-40: #56586a; /* oklch(46.537% 0.02918 280.20) */
    --cs-color-navy-30: #41435d; /* oklch(39.211% 0.04400 280.74) */
    --cs-color-navy-20: #2e2f51; /* oklch(32.135% 0.06000 281.18) */
    --cs-color-navy-10: #1f1f47; /* brand value */
    --cs-color-navy-05: #0f0d30; /* oklch(18.765% 0.06740 280.25) */
    --cs-color-navy: var(--cs-color-navy-10);
    --cs-color-navy-key: 10;

    /* mint */
    --cs-color-mint-95: #c9fee2; /* oklch(95.304% 0.06570 161.81) */
    --cs-color-mint-90: #abf5cf; /* oklch(91.128% 0.09020 161.55) */
    --cs-color-mint-80: #88e4b6; /* brand value */
    --cs-color-mint-70: #6bbf96; /* oklch(73.989% 0.10246 161.23) */
    --cs-color-mint-60: #5ba27f; /* oklch(65.549% 0.08975 161.08) */
    --cs-color-mint-50: #498065; /* oklch(55.358% 0.07278 161.40) */
    --cs-color-mint-40: #38624d; /* oklch(45.871% 0.05883 161.10) */
    --cs-color-mint-30: #2d4b3c; /* oklch(38.422% 0.04440 161.59) */
    --cs-color-mint-20: #1f382b; /* oklch(31.580% 0.03916 160.35) */
    --cs-color-mint-10: #0c2117; /* oklch(22.659% 0.03374 161.32) */
    --cs-color-mint-05: #04150d; /* oklch(17.718% 0.02978 162.51) */
    --cs-color-mint: var(--cs-color-mint-80);
    --cs-color-mint-key: 80;

    /* green */
    --cs-color-green-95: #cbfedb; /* oklch(95.249% 0.07002 154.90) */
    --cs-color-green-90: #a8f7c2; /* oklch(91.096% 0.10650 154.43) */
    --cs-color-green-80: #6ee09a; /* oklch(82.178% 0.14482 154.59) */
    --cs-color-green-70: #24c976; /* brand value */
    --cs-color-green-60: #00aa60; /* oklch(64.802% 0.16137 154.63) */
    --cs-color-green-50: #00874b; /* oklch(54.737% 0.13638 154.60) */
    --cs-color-green-40: #006637; /* oklch(44.798% 0.11192 154.47) */
    --cs-color-green-30: #05502b; /* oklch(37.978% 0.09203 154.51) */
    --cs-color-green-20: #063b1f; /* oklch(31.132% 0.07299 154.34) */
    --cs-color-green-10: #00240f; /* oklch(22.837% 0.05797 153.68) */
    --cs-color-green-05: #001708; /* oklch(17.961% 0.04505 154.27) */
    --cs-color-green: var(--cs-color-green-70);
    --cs-color-green-key: 70;

    /* moss */
    --cs-color-moss-95: #f1f3f2; /* oklch(96.235% 0.00250 165.07) */
    --cs-color-moss-90: #e3e6e5; /* oklch(92.235% 0.00349 174.48) */
    --cs-color-moss-80: #c6cbc8; /* oklch(83.734% 0.00685 160.04) */
    --cs-color-moss-70: #a7b2ab; /* oklch(75.284% 0.01576 158.13) */
    --cs-color-moss-60: #89988f; /* oklch(66.497% 0.02161 159.47) */
    --cs-color-moss-50: #657a6e; /* oklch(55.886% 0.03078 160.19) */
    --cs-color-moss-40: #476052; /* brand value */
    --cs-color-moss-30: #344a3e; /* oklch(38.677% 0.03419 160.41) */
    --cs-color-moss-20: #24372c; /* oklch(31.659% 0.03156 158.58) */
    --cs-color-moss-10: #122119; /* oklch(23.117% 0.02589 160.19) */
    --cs-color-moss-05: #0a140f; /* oklch(17.942% 0.01810 162.12) */
    --cs-color-moss: var(--cs-color-moss-40);
    --cs-color-moss-key: 40;

    /* olive-drab */
    --cs-color-olive-drab-95: #f2f3f2; /* oklch(96.311% 0.00169 145.56) */
    --cs-color-olive-drab-90: #e5e5e5; /* oklch(92.191% 0.00000 89.88) */
    --cs-color-olive-drab-80: #c9c9c9; /* oklch(83.591% 0.00000 89.88) */
    --cs-color-olive-drab-70: #adafae; /* oklch(75.210% 0.00266 165.05) */
    --cs-color-olive-drab-60: #939694; /* oklch(67.002% 0.00452 157.13) */
    --cs-color-olive-drab-50: #717673; /* oklch(56.059% 0.00756 159.92) */
    --cs-color-olive-drab-40: #535b56; /* oklch(46.248% 0.01284 158.47) */
    --cs-color-olive-drab-30: #3d4841; /* oklch(38.943% 0.01845 157.52) */
    --cs-color-olive-drab-20: #2e3a33; /* brand value */
    --cs-color-olive-drab-10: #15201a; /* oklch(23.074% 0.01949 160.53) */
    --cs-color-olive-drab-05: #0b140f; /* oklch(18.024% 0.01699 159.77) */
    --cs-color-olive-drab: var(--cs-color-olive-drab-20);
    --cs-color-olive-drab-key: 20;

    /* gray */
    --cs-color-gray-95: #f0efee; /* brand value */
    --cs-color-gray-90: #e5e6e5; /* oklch(92.389% 0.00171 145.56) */
    --cs-color-gray-80: #cacaca; /* oklch(83.901% 0.00000 89.88) */
    --cs-color-gray-70: #aeaeae; /* oklch(75.082% 0.00000 89.88) */
    --cs-color-gray-60: #949595; /* oklch(66.900% 0.00117 197.13) */
    --cs-color-gray-50: #757575; /* oklch(56.241% 0.00000 89.88) */
    --cs-color-gray-40: #565652; /* brand value */
    --cs-color-gray-30: #464545; /* oklch(39.138% 0.00134 17.22) */
    --cs-color-gray-20: #323232; /* oklch(31.714% 0.00000 89.88) */
    --cs-color-gray-10: #1d1d1d; /* oklch(23.075% 0.00000 89.88) */
    --cs-color-gray-05: #121212; /* oklch(18.220% 0.00000 89.88) */
    --cs-color-gray: var(--cs-color-gray-95);
    --cs-color-gray-key: 95;

    /* graphite */
    --cs-color-graphite-95: #f0efee; /* brand value */
    --cs-color-graphite-90: #e5e6e5; /* oklch(92.389% 0.00171 145.56) */
    --cs-color-graphite-80: #cacaca; /* oklch(83.901% 0.00000 89.88) */
    --cs-color-graphite-70: #aeaeae; /* oklch(75.082% 0.00000 89.88) */
    --cs-color-graphite-60: #949595; /* oklch(66.900% 0.00117 197.13) */
    --cs-color-graphite-50: #757575; /* oklch(56.241% 0.00000 89.88) */
    --cs-color-graphite-40: #565652; /* brand value */
    --cs-color-graphite-30: #464545; /* oklch(39.138% 0.00134 17.22) */
    --cs-color-graphite-20: #323232; /* oklch(31.714% 0.00000 89.88) */
    --cs-color-graphite-10: #1d1d1d; /* oklch(23.075% 0.00000 89.88) */
    --cs-color-graphite-05: #121212; /* oklch(18.220% 0.00000 89.88) */
    --cs-color-graphite: var(--cs-color-graphite-40);
    --cs-color-graphite-key: 40;

    /* purple — synthesized from upstream purple */
    --cs-color-purple-95: #f5f1fc; /* oklch(96.439% 0.01517 302.56) */
    --cs-color-purple-90: #eae2f6; /* oklch(92.500% 0.02811 303.91) */
    --cs-color-purple-80: #d3c3e8; /* oklch(84.206% 0.05360 304.85) */
    --cs-color-purple-70: #bca5da; /* oklch(75.997% 0.07854 304.38) */
    --cs-color-purple-60: #a886ce; /* oklch(67.889% 0.10959 305.34) */
    --cs-color-purple-50: #8c63b7; /* brand value */
    --cs-color-purple-40: #6d4793; /* oklch(47.529% 0.12351 305.28) */
    --cs-color-purple-30: #563776; /* oklch(40.328% 0.10633 304.82) */
    --cs-color-purple-20: #402758; /* oklch(32.844% 0.08733 305.70) */
    --cs-color-purple-10: #271539; /* oklch(24.040% 0.06864 304.87) */
    --cs-color-purple-05: #190b26; /* oklch(18.638% 0.05486 305.67) */
    --cs-color-purple: var(--cs-color-purple-50);
    --cs-color-purple-key: 50;

    /* Auto-contrast: dark text on a light key, white on a dark one. */
    --cs-color-lemon-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-lemon-key), 1) * 100%));
    --cs-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-yellow-key), 1) * 100%));
    --cs-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-orange-key), 1) * 100%));
    --cs-color-vermilion-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-vermilion-key), 1) * 100%));
    --cs-color-rose-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-rose-key), 1) * 100%));
    --cs-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-pink-key), 1) * 100%));
    --cs-color-cerise-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-cerise-key), 1) * 100%));
    --cs-color-ruby-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-ruby-key), 1) * 100%));
    --cs-color-sky-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-sky-key), 1) * 100%));
    --cs-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-cyan-key), 1) * 100%));
    --cs-color-turquoise-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-turquoise-key), 1) * 100%));
    --cs-color-navy-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-navy-key), 1) * 100%));
    --cs-color-mint-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-mint-key), 1) * 100%));
    --cs-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-green-key), 1) * 100%));
    --cs-color-moss-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-moss-key), 1) * 100%));
    --cs-color-olive-drab-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-olive-drab-key), 1) * 100%));
    --cs-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-gray-key), 1) * 100%));
    --cs-color-graphite-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-graphite-key), 1) * 100%));
    --cs-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-purple-key), 1) * 100%));

    --cs-color-lemon-on: color-mix(in oklab, var(--cs-color-lemon-10) var(--cs-color-lemon-gte-60), white);
    --cs-color-yellow-on: color-mix(in oklab, var(--cs-color-yellow-10) var(--cs-color-yellow-gte-60), white);
    --cs-color-orange-on: color-mix(in oklab, var(--cs-color-orange-10) var(--cs-color-orange-gte-60), white);
    --cs-color-vermilion-on: color-mix(in oklab, var(--cs-color-vermilion-10) var(--cs-color-vermilion-gte-60), white);
    --cs-color-rose-on: color-mix(in oklab, var(--cs-color-rose-10) var(--cs-color-rose-gte-60), white);
    --cs-color-pink-on: color-mix(in oklab, var(--cs-color-pink-10) var(--cs-color-pink-gte-60), white);
    --cs-color-cerise-on: color-mix(in oklab, var(--cs-color-cerise-10) var(--cs-color-cerise-gte-60), white);
    --cs-color-ruby-on: color-mix(in oklab, var(--cs-color-ruby-10) var(--cs-color-ruby-gte-60), white);
    --cs-color-sky-on: color-mix(in oklab, var(--cs-color-sky-10) var(--cs-color-sky-gte-60), white);
    --cs-color-cyan-on: color-mix(in oklab, var(--cs-color-cyan-10) var(--cs-color-cyan-gte-60), white);
    --cs-color-turquoise-on: color-mix(in oklab, var(--cs-color-turquoise-10) var(--cs-color-turquoise-gte-60), white);
    --cs-color-navy-on: color-mix(in oklab, var(--cs-color-navy-10) var(--cs-color-navy-gte-60), white);
    --cs-color-mint-on: color-mix(in oklab, var(--cs-color-mint-10) var(--cs-color-mint-gte-60), white);
    --cs-color-green-on: color-mix(in oklab, var(--cs-color-green-10) var(--cs-color-green-gte-60), white);
    --cs-color-moss-on: color-mix(in oklab, var(--cs-color-moss-10) var(--cs-color-moss-gte-60), white);
    --cs-color-olive-drab-on: color-mix(
      in oklab,
      var(--cs-color-olive-drab-10) var(--cs-color-olive-drab-gte-60),
      white
    );
    --cs-color-gray-on: color-mix(in oklab, var(--cs-color-gray-10) var(--cs-color-gray-gte-60), white);
    --cs-color-graphite-on: color-mix(in oklab, var(--cs-color-graphite-10) var(--cs-color-graphite-gte-60), white);
    --cs-color-purple-on: color-mix(in oklab, var(--cs-color-purple-10) var(--cs-color-purple-gte-60), white);
  }
}

/* ── cornerstone: styles/color/variants/cru.css ── */
/* Generated by tools/palette.mjs from tools/brands/cru.json — do not edit by hand.
 *
 * Which hue plays each semantic role, and the classes that let an author change one. The
 * `:where(:root)` block is the default; each `.cs-{role}-{hue}` class re-points a single role,
 * which is the capability the color tokens page documents as "Changing Variant Colors".
 */


@layer cs-color-variant {
  /* brand — defaults to yellow */
  :where(:root), /* default */
  .cs-brand-yellow {
    --cs-color-brand-95: var(--cs-color-yellow-95);
    --cs-color-brand-90: var(--cs-color-yellow-90);
    --cs-color-brand-80: var(--cs-color-yellow-80);
    --cs-color-brand-70: var(--cs-color-yellow-70);
    --cs-color-brand-60: var(--cs-color-yellow-60);
    --cs-color-brand-50: var(--cs-color-yellow-50);
    --cs-color-brand-40: var(--cs-color-yellow-40);
    --cs-color-brand-30: var(--cs-color-yellow-30);
    --cs-color-brand-20: var(--cs-color-yellow-20);
    --cs-color-brand-10: var(--cs-color-yellow-10);
    --cs-color-brand-05: var(--cs-color-yellow-05);
    --cs-color-brand: var(--cs-color-yellow-80);
    --cs-color-brand-key: 80;
    --cs-color-brand-on: var(--cs-color-yellow-on);
  }

  .cs-brand-lemon {
    --cs-color-brand-95: var(--cs-color-lemon-95);
    --cs-color-brand-90: var(--cs-color-lemon-90);
    --cs-color-brand-80: var(--cs-color-lemon-80);
    --cs-color-brand-70: var(--cs-color-lemon-70);
    --cs-color-brand-60: var(--cs-color-lemon-60);
    --cs-color-brand-50: var(--cs-color-lemon-50);
    --cs-color-brand-40: var(--cs-color-lemon-40);
    --cs-color-brand-30: var(--cs-color-lemon-30);
    --cs-color-brand-20: var(--cs-color-lemon-20);
    --cs-color-brand-10: var(--cs-color-lemon-10);
    --cs-color-brand-05: var(--cs-color-lemon-05);
    --cs-color-brand: var(--cs-color-lemon-90);
    --cs-color-brand-key: 90;
    --cs-color-brand-on: var(--cs-color-lemon-on);
  }

  .cs-brand-orange {
    --cs-color-brand-95: var(--cs-color-orange-95);
    --cs-color-brand-90: var(--cs-color-orange-90);
    --cs-color-brand-80: var(--cs-color-orange-80);
    --cs-color-brand-70: var(--cs-color-orange-70);
    --cs-color-brand-60: var(--cs-color-orange-60);
    --cs-color-brand-50: var(--cs-color-orange-50);
    --cs-color-brand-40: var(--cs-color-orange-40);
    --cs-color-brand-30: var(--cs-color-orange-30);
    --cs-color-brand-20: var(--cs-color-orange-20);
    --cs-color-brand-10: var(--cs-color-orange-10);
    --cs-color-brand-05: var(--cs-color-orange-05);
    --cs-color-brand: var(--cs-color-orange-60);
    --cs-color-brand-key: 60;
    --cs-color-brand-on: var(--cs-color-orange-on);
  }

  .cs-brand-vermilion {
    --cs-color-brand-95: var(--cs-color-vermilion-95);
    --cs-color-brand-90: var(--cs-color-vermilion-90);
    --cs-color-brand-80: var(--cs-color-vermilion-80);
    --cs-color-brand-70: var(--cs-color-vermilion-70);
    --cs-color-brand-60: var(--cs-color-vermilion-60);
    --cs-color-brand-50: var(--cs-color-vermilion-50);
    --cs-color-brand-40: var(--cs-color-vermilion-40);
    --cs-color-brand-30: var(--cs-color-vermilion-30);
    --cs-color-brand-20: var(--cs-color-vermilion-20);
    --cs-color-brand-10: var(--cs-color-vermilion-10);
    --cs-color-brand-05: var(--cs-color-vermilion-05);
    --cs-color-brand: var(--cs-color-vermilion-50);
    --cs-color-brand-key: 50;
    --cs-color-brand-on: var(--cs-color-vermilion-on);
  }

  .cs-brand-rose {
    --cs-color-brand-95: var(--cs-color-rose-95);
    --cs-color-brand-90: var(--cs-color-rose-90);
    --cs-color-brand-80: var(--cs-color-rose-80);
    --cs-color-brand-70: var(--cs-color-rose-70);
    --cs-color-brand-60: var(--cs-color-rose-60);
    --cs-color-brand-50: var(--cs-color-rose-50);
    --cs-color-brand-40: var(--cs-color-rose-40);
    --cs-color-brand-30: var(--cs-color-rose-30);
    --cs-color-brand-20: var(--cs-color-rose-20);
    --cs-color-brand-10: var(--cs-color-rose-10);
    --cs-color-brand-05: var(--cs-color-rose-05);
    --cs-color-brand: var(--cs-color-rose-80);
    --cs-color-brand-key: 80;
    --cs-color-brand-on: var(--cs-color-rose-on);
  }

  .cs-brand-pink {
    --cs-color-brand-95: var(--cs-color-pink-95);
    --cs-color-brand-90: var(--cs-color-pink-90);
    --cs-color-brand-80: var(--cs-color-pink-80);
    --cs-color-brand-70: var(--cs-color-pink-70);
    --cs-color-brand-60: var(--cs-color-pink-60);
    --cs-color-brand-50: var(--cs-color-pink-50);
    --cs-color-brand-40: var(--cs-color-pink-40);
    --cs-color-brand-30: var(--cs-color-pink-30);
    --cs-color-brand-20: var(--cs-color-pink-20);
    --cs-color-brand-10: var(--cs-color-pink-10);
    --cs-color-brand-05: var(--cs-color-pink-05);
    --cs-color-brand: var(--cs-color-pink-60);
    --cs-color-brand-key: 60;
    --cs-color-brand-on: var(--cs-color-pink-on);
  }

  .cs-brand-cerise {
    --cs-color-brand-95: var(--cs-color-cerise-95);
    --cs-color-brand-90: var(--cs-color-cerise-90);
    --cs-color-brand-80: var(--cs-color-cerise-80);
    --cs-color-brand-70: var(--cs-color-cerise-70);
    --cs-color-brand-60: var(--cs-color-cerise-60);
    --cs-color-brand-50: var(--cs-color-cerise-50);
    --cs-color-brand-40: var(--cs-color-cerise-40);
    --cs-color-brand-30: var(--cs-color-cerise-30);
    --cs-color-brand-20: var(--cs-color-cerise-20);
    --cs-color-brand-10: var(--cs-color-cerise-10);
    --cs-color-brand-05: var(--cs-color-cerise-05);
    --cs-color-brand: var(--cs-color-cerise-50);
    --cs-color-brand-key: 50;
    --cs-color-brand-on: var(--cs-color-cerise-on);
  }

  .cs-brand-ruby {
    --cs-color-brand-95: var(--cs-color-ruby-95);
    --cs-color-brand-90: var(--cs-color-ruby-90);
    --cs-color-brand-80: var(--cs-color-ruby-80);
    --cs-color-brand-70: var(--cs-color-ruby-70);
    --cs-color-brand-60: var(--cs-color-ruby-60);
    --cs-color-brand-50: var(--cs-color-ruby-50);
    --cs-color-brand-40: var(--cs-color-ruby-40);
    --cs-color-brand-30: var(--cs-color-ruby-30);
    --cs-color-brand-20: var(--cs-color-ruby-20);
    --cs-color-brand-10: var(--cs-color-ruby-10);
    --cs-color-brand-05: var(--cs-color-ruby-05);
    --cs-color-brand: var(--cs-color-ruby-30);
    --cs-color-brand-key: 30;
    --cs-color-brand-on: var(--cs-color-ruby-on);
  }

  .cs-brand-sky {
    --cs-color-brand-95: var(--cs-color-sky-95);
    --cs-color-brand-90: var(--cs-color-sky-90);
    --cs-color-brand-80: var(--cs-color-sky-80);
    --cs-color-brand-70: var(--cs-color-sky-70);
    --cs-color-brand-60: var(--cs-color-sky-60);
    --cs-color-brand-50: var(--cs-color-sky-50);
    --cs-color-brand-40: var(--cs-color-sky-40);
    --cs-color-brand-30: var(--cs-color-sky-30);
    --cs-color-brand-20: var(--cs-color-sky-20);
    --cs-color-brand-10: var(--cs-color-sky-10);
    --cs-color-brand-05: var(--cs-color-sky-05);
    --cs-color-brand: var(--cs-color-sky-90);
    --cs-color-brand-key: 90;
    --cs-color-brand-on: var(--cs-color-sky-on);
  }

  .cs-brand-cyan {
    --cs-color-brand-95: var(--cs-color-cyan-95);
    --cs-color-brand-90: var(--cs-color-cyan-90);
    --cs-color-brand-80: var(--cs-color-cyan-80);
    --cs-color-brand-70: var(--cs-color-cyan-70);
    --cs-color-brand-60: var(--cs-color-cyan-60);
    --cs-color-brand-50: var(--cs-color-cyan-50);
    --cs-color-brand-40: var(--cs-color-cyan-40);
    --cs-color-brand-30: var(--cs-color-cyan-30);
    --cs-color-brand-20: var(--cs-color-cyan-20);
    --cs-color-brand-10: var(--cs-color-cyan-10);
    --cs-color-brand-05: var(--cs-color-cyan-05);
    --cs-color-brand: var(--cs-color-cyan-70);
    --cs-color-brand-key: 70;
    --cs-color-brand-on: var(--cs-color-cyan-on);
  }

  .cs-brand-turquoise {
    --cs-color-brand-95: var(--cs-color-turquoise-95);
    --cs-color-brand-90: var(--cs-color-turquoise-90);
    --cs-color-brand-80: var(--cs-color-turquoise-80);
    --cs-color-brand-70: var(--cs-color-turquoise-70);
    --cs-color-brand-60: var(--cs-color-turquoise-60);
    --cs-color-brand-50: var(--cs-color-turquoise-50);
    --cs-color-brand-40: var(--cs-color-turquoise-40);
    --cs-color-brand-30: var(--cs-color-turquoise-30);
    --cs-color-brand-20: var(--cs-color-turquoise-20);
    --cs-color-brand-10: var(--cs-color-turquoise-10);
    --cs-color-brand-05: var(--cs-color-turquoise-05);
    --cs-color-brand: var(--cs-color-turquoise-50);
    --cs-color-brand-key: 50;
    --cs-color-brand-on: var(--cs-color-turquoise-on);
  }

  .cs-brand-navy {
    --cs-color-brand-95: var(--cs-color-navy-95);
    --cs-color-brand-90: var(--cs-color-navy-90);
    --cs-color-brand-80: var(--cs-color-navy-80);
    --cs-color-brand-70: var(--cs-color-navy-70);
    --cs-color-brand-60: var(--cs-color-navy-60);
    --cs-color-brand-50: var(--cs-color-navy-50);
    --cs-color-brand-40: var(--cs-color-navy-40);
    --cs-color-brand-30: var(--cs-color-navy-30);
    --cs-color-brand-20: var(--cs-color-navy-20);
    --cs-color-brand-10: var(--cs-color-navy-10);
    --cs-color-brand-05: var(--cs-color-navy-05);
    --cs-color-brand: var(--cs-color-navy-10);
    --cs-color-brand-key: 10;
    --cs-color-brand-on: var(--cs-color-navy-on);
  }

  .cs-brand-mint {
    --cs-color-brand-95: var(--cs-color-mint-95);
    --cs-color-brand-90: var(--cs-color-mint-90);
    --cs-color-brand-80: var(--cs-color-mint-80);
    --cs-color-brand-70: var(--cs-color-mint-70);
    --cs-color-brand-60: var(--cs-color-mint-60);
    --cs-color-brand-50: var(--cs-color-mint-50);
    --cs-color-brand-40: var(--cs-color-mint-40);
    --cs-color-brand-30: var(--cs-color-mint-30);
    --cs-color-brand-20: var(--cs-color-mint-20);
    --cs-color-brand-10: var(--cs-color-mint-10);
    --cs-color-brand-05: var(--cs-color-mint-05);
    --cs-color-brand: var(--cs-color-mint-80);
    --cs-color-brand-key: 80;
    --cs-color-brand-on: var(--cs-color-mint-on);
  }

  .cs-brand-green {
    --cs-color-brand-95: var(--cs-color-green-95);
    --cs-color-brand-90: var(--cs-color-green-90);
    --cs-color-brand-80: var(--cs-color-green-80);
    --cs-color-brand-70: var(--cs-color-green-70);
    --cs-color-brand-60: var(--cs-color-green-60);
    --cs-color-brand-50: var(--cs-color-green-50);
    --cs-color-brand-40: var(--cs-color-green-40);
    --cs-color-brand-30: var(--cs-color-green-30);
    --cs-color-brand-20: var(--cs-color-green-20);
    --cs-color-brand-10: var(--cs-color-green-10);
    --cs-color-brand-05: var(--cs-color-green-05);
    --cs-color-brand: var(--cs-color-green-70);
    --cs-color-brand-key: 70;
    --cs-color-brand-on: var(--cs-color-green-on);
  }

  .cs-brand-moss {
    --cs-color-brand-95: var(--cs-color-moss-95);
    --cs-color-brand-90: var(--cs-color-moss-90);
    --cs-color-brand-80: var(--cs-color-moss-80);
    --cs-color-brand-70: var(--cs-color-moss-70);
    --cs-color-brand-60: var(--cs-color-moss-60);
    --cs-color-brand-50: var(--cs-color-moss-50);
    --cs-color-brand-40: var(--cs-color-moss-40);
    --cs-color-brand-30: var(--cs-color-moss-30);
    --cs-color-brand-20: var(--cs-color-moss-20);
    --cs-color-brand-10: var(--cs-color-moss-10);
    --cs-color-brand-05: var(--cs-color-moss-05);
    --cs-color-brand: var(--cs-color-moss-40);
    --cs-color-brand-key: 40;
    --cs-color-brand-on: var(--cs-color-moss-on);
  }

  .cs-brand-olive-drab {
    --cs-color-brand-95: var(--cs-color-olive-drab-95);
    --cs-color-brand-90: var(--cs-color-olive-drab-90);
    --cs-color-brand-80: var(--cs-color-olive-drab-80);
    --cs-color-brand-70: var(--cs-color-olive-drab-70);
    --cs-color-brand-60: var(--cs-color-olive-drab-60);
    --cs-color-brand-50: var(--cs-color-olive-drab-50);
    --cs-color-brand-40: var(--cs-color-olive-drab-40);
    --cs-color-brand-30: var(--cs-color-olive-drab-30);
    --cs-color-brand-20: var(--cs-color-olive-drab-20);
    --cs-color-brand-10: var(--cs-color-olive-drab-10);
    --cs-color-brand-05: var(--cs-color-olive-drab-05);
    --cs-color-brand: var(--cs-color-olive-drab-20);
    --cs-color-brand-key: 20;
    --cs-color-brand-on: var(--cs-color-olive-drab-on);
  }

  .cs-brand-gray {
    --cs-color-brand-95: var(--cs-color-gray-95);
    --cs-color-brand-90: var(--cs-color-gray-90);
    --cs-color-brand-80: var(--cs-color-gray-80);
    --cs-color-brand-70: var(--cs-color-gray-70);
    --cs-color-brand-60: var(--cs-color-gray-60);
    --cs-color-brand-50: var(--cs-color-gray-50);
    --cs-color-brand-40: var(--cs-color-gray-40);
    --cs-color-brand-30: var(--cs-color-gray-30);
    --cs-color-brand-20: var(--cs-color-gray-20);
    --cs-color-brand-10: var(--cs-color-gray-10);
    --cs-color-brand-05: var(--cs-color-gray-05);
    --cs-color-brand: var(--cs-color-gray-95);
    --cs-color-brand-key: 95;
    --cs-color-brand-on: var(--cs-color-gray-on);
  }

  .cs-brand-graphite {
    --cs-color-brand-95: var(--cs-color-graphite-95);
    --cs-color-brand-90: var(--cs-color-graphite-90);
    --cs-color-brand-80: var(--cs-color-graphite-80);
    --cs-color-brand-70: var(--cs-color-graphite-70);
    --cs-color-brand-60: var(--cs-color-graphite-60);
    --cs-color-brand-50: var(--cs-color-graphite-50);
    --cs-color-brand-40: var(--cs-color-graphite-40);
    --cs-color-brand-30: var(--cs-color-graphite-30);
    --cs-color-brand-20: var(--cs-color-graphite-20);
    --cs-color-brand-10: var(--cs-color-graphite-10);
    --cs-color-brand-05: var(--cs-color-graphite-05);
    --cs-color-brand: var(--cs-color-graphite-40);
    --cs-color-brand-key: 40;
    --cs-color-brand-on: var(--cs-color-graphite-on);
  }

  .cs-brand-purple {
    --cs-color-brand-95: var(--cs-color-purple-95);
    --cs-color-brand-90: var(--cs-color-purple-90);
    --cs-color-brand-80: var(--cs-color-purple-80);
    --cs-color-brand-70: var(--cs-color-purple-70);
    --cs-color-brand-60: var(--cs-color-purple-60);
    --cs-color-brand-50: var(--cs-color-purple-50);
    --cs-color-brand-40: var(--cs-color-purple-40);
    --cs-color-brand-30: var(--cs-color-purple-30);
    --cs-color-brand-20: var(--cs-color-purple-20);
    --cs-color-brand-10: var(--cs-color-purple-10);
    --cs-color-brand-05: var(--cs-color-purple-05);
    --cs-color-brand: var(--cs-color-purple-50);
    --cs-color-brand-key: 50;
    --cs-color-brand-on: var(--cs-color-purple-on);
  }

  /* neutral — defaults to gray */
  :where(:root), /* default */
  .cs-neutral-gray {
    --cs-color-neutral-95: var(--cs-color-gray-95);
    --cs-color-neutral-90: var(--cs-color-gray-90);
    --cs-color-neutral-80: var(--cs-color-gray-80);
    --cs-color-neutral-70: var(--cs-color-gray-70);
    --cs-color-neutral-60: var(--cs-color-gray-60);
    --cs-color-neutral-50: var(--cs-color-gray-50);
    --cs-color-neutral-40: var(--cs-color-gray-40);
    --cs-color-neutral-30: var(--cs-color-gray-30);
    --cs-color-neutral-20: var(--cs-color-gray-20);
    --cs-color-neutral-10: var(--cs-color-gray-10);
    --cs-color-neutral-05: var(--cs-color-gray-05);
    --cs-color-neutral: var(--cs-color-gray-95);
    --cs-color-neutral-key: 95;
    --cs-color-neutral-on: var(--cs-color-gray-on);
  }

  .cs-neutral-lemon {
    --cs-color-neutral-95: var(--cs-color-lemon-95);
    --cs-color-neutral-90: var(--cs-color-lemon-90);
    --cs-color-neutral-80: var(--cs-color-lemon-80);
    --cs-color-neutral-70: var(--cs-color-lemon-70);
    --cs-color-neutral-60: var(--cs-color-lemon-60);
    --cs-color-neutral-50: var(--cs-color-lemon-50);
    --cs-color-neutral-40: var(--cs-color-lemon-40);
    --cs-color-neutral-30: var(--cs-color-lemon-30);
    --cs-color-neutral-20: var(--cs-color-lemon-20);
    --cs-color-neutral-10: var(--cs-color-lemon-10);
    --cs-color-neutral-05: var(--cs-color-lemon-05);
    --cs-color-neutral: var(--cs-color-lemon-90);
    --cs-color-neutral-key: 90;
    --cs-color-neutral-on: var(--cs-color-lemon-on);
  }

  .cs-neutral-yellow {
    --cs-color-neutral-95: var(--cs-color-yellow-95);
    --cs-color-neutral-90: var(--cs-color-yellow-90);
    --cs-color-neutral-80: var(--cs-color-yellow-80);
    --cs-color-neutral-70: var(--cs-color-yellow-70);
    --cs-color-neutral-60: var(--cs-color-yellow-60);
    --cs-color-neutral-50: var(--cs-color-yellow-50);
    --cs-color-neutral-40: var(--cs-color-yellow-40);
    --cs-color-neutral-30: var(--cs-color-yellow-30);
    --cs-color-neutral-20: var(--cs-color-yellow-20);
    --cs-color-neutral-10: var(--cs-color-yellow-10);
    --cs-color-neutral-05: var(--cs-color-yellow-05);
    --cs-color-neutral: var(--cs-color-yellow-80);
    --cs-color-neutral-key: 80;
    --cs-color-neutral-on: var(--cs-color-yellow-on);
  }

  .cs-neutral-orange {
    --cs-color-neutral-95: var(--cs-color-orange-95);
    --cs-color-neutral-90: var(--cs-color-orange-90);
    --cs-color-neutral-80: var(--cs-color-orange-80);
    --cs-color-neutral-70: var(--cs-color-orange-70);
    --cs-color-neutral-60: var(--cs-color-orange-60);
    --cs-color-neutral-50: var(--cs-color-orange-50);
    --cs-color-neutral-40: var(--cs-color-orange-40);
    --cs-color-neutral-30: var(--cs-color-orange-30);
    --cs-color-neutral-20: var(--cs-color-orange-20);
    --cs-color-neutral-10: var(--cs-color-orange-10);
    --cs-color-neutral-05: var(--cs-color-orange-05);
    --cs-color-neutral: var(--cs-color-orange-60);
    --cs-color-neutral-key: 60;
    --cs-color-neutral-on: var(--cs-color-orange-on);
  }

  .cs-neutral-vermilion {
    --cs-color-neutral-95: var(--cs-color-vermilion-95);
    --cs-color-neutral-90: var(--cs-color-vermilion-90);
    --cs-color-neutral-80: var(--cs-color-vermilion-80);
    --cs-color-neutral-70: var(--cs-color-vermilion-70);
    --cs-color-neutral-60: var(--cs-color-vermilion-60);
    --cs-color-neutral-50: var(--cs-color-vermilion-50);
    --cs-color-neutral-40: var(--cs-color-vermilion-40);
    --cs-color-neutral-30: var(--cs-color-vermilion-30);
    --cs-color-neutral-20: var(--cs-color-vermilion-20);
    --cs-color-neutral-10: var(--cs-color-vermilion-10);
    --cs-color-neutral-05: var(--cs-color-vermilion-05);
    --cs-color-neutral: var(--cs-color-vermilion-50);
    --cs-color-neutral-key: 50;
    --cs-color-neutral-on: var(--cs-color-vermilion-on);
  }

  .cs-neutral-rose {
    --cs-color-neutral-95: var(--cs-color-rose-95);
    --cs-color-neutral-90: var(--cs-color-rose-90);
    --cs-color-neutral-80: var(--cs-color-rose-80);
    --cs-color-neutral-70: var(--cs-color-rose-70);
    --cs-color-neutral-60: var(--cs-color-rose-60);
    --cs-color-neutral-50: var(--cs-color-rose-50);
    --cs-color-neutral-40: var(--cs-color-rose-40);
    --cs-color-neutral-30: var(--cs-color-rose-30);
    --cs-color-neutral-20: var(--cs-color-rose-20);
    --cs-color-neutral-10: var(--cs-color-rose-10);
    --cs-color-neutral-05: var(--cs-color-rose-05);
    --cs-color-neutral: var(--cs-color-rose-80);
    --cs-color-neutral-key: 80;
    --cs-color-neutral-on: var(--cs-color-rose-on);
  }

  .cs-neutral-pink {
    --cs-color-neutral-95: var(--cs-color-pink-95);
    --cs-color-neutral-90: var(--cs-color-pink-90);
    --cs-color-neutral-80: var(--cs-color-pink-80);
    --cs-color-neutral-70: var(--cs-color-pink-70);
    --cs-color-neutral-60: var(--cs-color-pink-60);
    --cs-color-neutral-50: var(--cs-color-pink-50);
    --cs-color-neutral-40: var(--cs-color-pink-40);
    --cs-color-neutral-30: var(--cs-color-pink-30);
    --cs-color-neutral-20: var(--cs-color-pink-20);
    --cs-color-neutral-10: var(--cs-color-pink-10);
    --cs-color-neutral-05: var(--cs-color-pink-05);
    --cs-color-neutral: var(--cs-color-pink-60);
    --cs-color-neutral-key: 60;
    --cs-color-neutral-on: var(--cs-color-pink-on);
  }

  .cs-neutral-cerise {
    --cs-color-neutral-95: var(--cs-color-cerise-95);
    --cs-color-neutral-90: var(--cs-color-cerise-90);
    --cs-color-neutral-80: var(--cs-color-cerise-80);
    --cs-color-neutral-70: var(--cs-color-cerise-70);
    --cs-color-neutral-60: var(--cs-color-cerise-60);
    --cs-color-neutral-50: var(--cs-color-cerise-50);
    --cs-color-neutral-40: var(--cs-color-cerise-40);
    --cs-color-neutral-30: var(--cs-color-cerise-30);
    --cs-color-neutral-20: var(--cs-color-cerise-20);
    --cs-color-neutral-10: var(--cs-color-cerise-10);
    --cs-color-neutral-05: var(--cs-color-cerise-05);
    --cs-color-neutral: var(--cs-color-cerise-50);
    --cs-color-neutral-key: 50;
    --cs-color-neutral-on: var(--cs-color-cerise-on);
  }

  .cs-neutral-ruby {
    --cs-color-neutral-95: var(--cs-color-ruby-95);
    --cs-color-neutral-90: var(--cs-color-ruby-90);
    --cs-color-neutral-80: var(--cs-color-ruby-80);
    --cs-color-neutral-70: var(--cs-color-ruby-70);
    --cs-color-neutral-60: var(--cs-color-ruby-60);
    --cs-color-neutral-50: var(--cs-color-ruby-50);
    --cs-color-neutral-40: var(--cs-color-ruby-40);
    --cs-color-neutral-30: var(--cs-color-ruby-30);
    --cs-color-neutral-20: var(--cs-color-ruby-20);
    --cs-color-neutral-10: var(--cs-color-ruby-10);
    --cs-color-neutral-05: var(--cs-color-ruby-05);
    --cs-color-neutral: var(--cs-color-ruby-30);
    --cs-color-neutral-key: 30;
    --cs-color-neutral-on: var(--cs-color-ruby-on);
  }

  .cs-neutral-sky {
    --cs-color-neutral-95: var(--cs-color-sky-95);
    --cs-color-neutral-90: var(--cs-color-sky-90);
    --cs-color-neutral-80: var(--cs-color-sky-80);
    --cs-color-neutral-70: var(--cs-color-sky-70);
    --cs-color-neutral-60: var(--cs-color-sky-60);
    --cs-color-neutral-50: var(--cs-color-sky-50);
    --cs-color-neutral-40: var(--cs-color-sky-40);
    --cs-color-neutral-30: var(--cs-color-sky-30);
    --cs-color-neutral-20: var(--cs-color-sky-20);
    --cs-color-neutral-10: var(--cs-color-sky-10);
    --cs-color-neutral-05: var(--cs-color-sky-05);
    --cs-color-neutral: var(--cs-color-sky-90);
    --cs-color-neutral-key: 90;
    --cs-color-neutral-on: var(--cs-color-sky-on);
  }

  .cs-neutral-cyan {
    --cs-color-neutral-95: var(--cs-color-cyan-95);
    --cs-color-neutral-90: var(--cs-color-cyan-90);
    --cs-color-neutral-80: var(--cs-color-cyan-80);
    --cs-color-neutral-70: var(--cs-color-cyan-70);
    --cs-color-neutral-60: var(--cs-color-cyan-60);
    --cs-color-neutral-50: var(--cs-color-cyan-50);
    --cs-color-neutral-40: var(--cs-color-cyan-40);
    --cs-color-neutral-30: var(--cs-color-cyan-30);
    --cs-color-neutral-20: var(--cs-color-cyan-20);
    --cs-color-neutral-10: var(--cs-color-cyan-10);
    --cs-color-neutral-05: var(--cs-color-cyan-05);
    --cs-color-neutral: var(--cs-color-cyan-70);
    --cs-color-neutral-key: 70;
    --cs-color-neutral-on: var(--cs-color-cyan-on);
  }

  .cs-neutral-turquoise {
    --cs-color-neutral-95: var(--cs-color-turquoise-95);
    --cs-color-neutral-90: var(--cs-color-turquoise-90);
    --cs-color-neutral-80: var(--cs-color-turquoise-80);
    --cs-color-neutral-70: var(--cs-color-turquoise-70);
    --cs-color-neutral-60: var(--cs-color-turquoise-60);
    --cs-color-neutral-50: var(--cs-color-turquoise-50);
    --cs-color-neutral-40: var(--cs-color-turquoise-40);
    --cs-color-neutral-30: var(--cs-color-turquoise-30);
    --cs-color-neutral-20: var(--cs-color-turquoise-20);
    --cs-color-neutral-10: var(--cs-color-turquoise-10);
    --cs-color-neutral-05: var(--cs-color-turquoise-05);
    --cs-color-neutral: var(--cs-color-turquoise-50);
    --cs-color-neutral-key: 50;
    --cs-color-neutral-on: var(--cs-color-turquoise-on);
  }

  .cs-neutral-navy {
    --cs-color-neutral-95: var(--cs-color-navy-95);
    --cs-color-neutral-90: var(--cs-color-navy-90);
    --cs-color-neutral-80: var(--cs-color-navy-80);
    --cs-color-neutral-70: var(--cs-color-navy-70);
    --cs-color-neutral-60: var(--cs-color-navy-60);
    --cs-color-neutral-50: var(--cs-color-navy-50);
    --cs-color-neutral-40: var(--cs-color-navy-40);
    --cs-color-neutral-30: var(--cs-color-navy-30);
    --cs-color-neutral-20: var(--cs-color-navy-20);
    --cs-color-neutral-10: var(--cs-color-navy-10);
    --cs-color-neutral-05: var(--cs-color-navy-05);
    --cs-color-neutral: var(--cs-color-navy-10);
    --cs-color-neutral-key: 10;
    --cs-color-neutral-on: var(--cs-color-navy-on);
  }

  .cs-neutral-mint {
    --cs-color-neutral-95: var(--cs-color-mint-95);
    --cs-color-neutral-90: var(--cs-color-mint-90);
    --cs-color-neutral-80: var(--cs-color-mint-80);
    --cs-color-neutral-70: var(--cs-color-mint-70);
    --cs-color-neutral-60: var(--cs-color-mint-60);
    --cs-color-neutral-50: var(--cs-color-mint-50);
    --cs-color-neutral-40: var(--cs-color-mint-40);
    --cs-color-neutral-30: var(--cs-color-mint-30);
    --cs-color-neutral-20: var(--cs-color-mint-20);
    --cs-color-neutral-10: var(--cs-color-mint-10);
    --cs-color-neutral-05: var(--cs-color-mint-05);
    --cs-color-neutral: var(--cs-color-mint-80);
    --cs-color-neutral-key: 80;
    --cs-color-neutral-on: var(--cs-color-mint-on);
  }

  .cs-neutral-green {
    --cs-color-neutral-95: var(--cs-color-green-95);
    --cs-color-neutral-90: var(--cs-color-green-90);
    --cs-color-neutral-80: var(--cs-color-green-80);
    --cs-color-neutral-70: var(--cs-color-green-70);
    --cs-color-neutral-60: var(--cs-color-green-60);
    --cs-color-neutral-50: var(--cs-color-green-50);
    --cs-color-neutral-40: var(--cs-color-green-40);
    --cs-color-neutral-30: var(--cs-color-green-30);
    --cs-color-neutral-20: var(--cs-color-green-20);
    --cs-color-neutral-10: var(--cs-color-green-10);
    --cs-color-neutral-05: var(--cs-color-green-05);
    --cs-color-neutral: var(--cs-color-green-70);
    --cs-color-neutral-key: 70;
    --cs-color-neutral-on: var(--cs-color-green-on);
  }

  .cs-neutral-moss {
    --cs-color-neutral-95: var(--cs-color-moss-95);
    --cs-color-neutral-90: var(--cs-color-moss-90);
    --cs-color-neutral-80: var(--cs-color-moss-80);
    --cs-color-neutral-70: var(--cs-color-moss-70);
    --cs-color-neutral-60: var(--cs-color-moss-60);
    --cs-color-neutral-50: var(--cs-color-moss-50);
    --cs-color-neutral-40: var(--cs-color-moss-40);
    --cs-color-neutral-30: var(--cs-color-moss-30);
    --cs-color-neutral-20: var(--cs-color-moss-20);
    --cs-color-neutral-10: var(--cs-color-moss-10);
    --cs-color-neutral-05: var(--cs-color-moss-05);
    --cs-color-neutral: var(--cs-color-moss-40);
    --cs-color-neutral-key: 40;
    --cs-color-neutral-on: var(--cs-color-moss-on);
  }

  .cs-neutral-olive-drab {
    --cs-color-neutral-95: var(--cs-color-olive-drab-95);
    --cs-color-neutral-90: var(--cs-color-olive-drab-90);
    --cs-color-neutral-80: var(--cs-color-olive-drab-80);
    --cs-color-neutral-70: var(--cs-color-olive-drab-70);
    --cs-color-neutral-60: var(--cs-color-olive-drab-60);
    --cs-color-neutral-50: var(--cs-color-olive-drab-50);
    --cs-color-neutral-40: var(--cs-color-olive-drab-40);
    --cs-color-neutral-30: var(--cs-color-olive-drab-30);
    --cs-color-neutral-20: var(--cs-color-olive-drab-20);
    --cs-color-neutral-10: var(--cs-color-olive-drab-10);
    --cs-color-neutral-05: var(--cs-color-olive-drab-05);
    --cs-color-neutral: var(--cs-color-olive-drab-20);
    --cs-color-neutral-key: 20;
    --cs-color-neutral-on: var(--cs-color-olive-drab-on);
  }

  .cs-neutral-graphite {
    --cs-color-neutral-95: var(--cs-color-graphite-95);
    --cs-color-neutral-90: var(--cs-color-graphite-90);
    --cs-color-neutral-80: var(--cs-color-graphite-80);
    --cs-color-neutral-70: var(--cs-color-graphite-70);
    --cs-color-neutral-60: var(--cs-color-graphite-60);
    --cs-color-neutral-50: var(--cs-color-graphite-50);
    --cs-color-neutral-40: var(--cs-color-graphite-40);
    --cs-color-neutral-30: var(--cs-color-graphite-30);
    --cs-color-neutral-20: var(--cs-color-graphite-20);
    --cs-color-neutral-10: var(--cs-color-graphite-10);
    --cs-color-neutral-05: var(--cs-color-graphite-05);
    --cs-color-neutral: var(--cs-color-graphite-40);
    --cs-color-neutral-key: 40;
    --cs-color-neutral-on: var(--cs-color-graphite-on);
  }

  .cs-neutral-purple {
    --cs-color-neutral-95: var(--cs-color-purple-95);
    --cs-color-neutral-90: var(--cs-color-purple-90);
    --cs-color-neutral-80: var(--cs-color-purple-80);
    --cs-color-neutral-70: var(--cs-color-purple-70);
    --cs-color-neutral-60: var(--cs-color-purple-60);
    --cs-color-neutral-50: var(--cs-color-purple-50);
    --cs-color-neutral-40: var(--cs-color-purple-40);
    --cs-color-neutral-30: var(--cs-color-purple-30);
    --cs-color-neutral-20: var(--cs-color-purple-20);
    --cs-color-neutral-10: var(--cs-color-purple-10);
    --cs-color-neutral-05: var(--cs-color-purple-05);
    --cs-color-neutral: var(--cs-color-purple-50);
    --cs-color-neutral-key: 50;
    --cs-color-neutral-on: var(--cs-color-purple-on);
  }

  /* highlight — defaults to purple */
  :where(:root), /* default */
  .cs-highlight-purple {
    --cs-color-highlight-95: var(--cs-color-purple-95);
    --cs-color-highlight-90: var(--cs-color-purple-90);
    --cs-color-highlight-80: var(--cs-color-purple-80);
    --cs-color-highlight-70: var(--cs-color-purple-70);
    --cs-color-highlight-60: var(--cs-color-purple-60);
    --cs-color-highlight-50: var(--cs-color-purple-50);
    --cs-color-highlight-40: var(--cs-color-purple-40);
    --cs-color-highlight-30: var(--cs-color-purple-30);
    --cs-color-highlight-20: var(--cs-color-purple-20);
    --cs-color-highlight-10: var(--cs-color-purple-10);
    --cs-color-highlight-05: var(--cs-color-purple-05);
    --cs-color-highlight: var(--cs-color-purple-50);
    --cs-color-highlight-key: 50;
    --cs-color-highlight-on: var(--cs-color-purple-on);
  }

  .cs-highlight-lemon {
    --cs-color-highlight-95: var(--cs-color-lemon-95);
    --cs-color-highlight-90: var(--cs-color-lemon-90);
    --cs-color-highlight-80: var(--cs-color-lemon-80);
    --cs-color-highlight-70: var(--cs-color-lemon-70);
    --cs-color-highlight-60: var(--cs-color-lemon-60);
    --cs-color-highlight-50: var(--cs-color-lemon-50);
    --cs-color-highlight-40: var(--cs-color-lemon-40);
    --cs-color-highlight-30: var(--cs-color-lemon-30);
    --cs-color-highlight-20: var(--cs-color-lemon-20);
    --cs-color-highlight-10: var(--cs-color-lemon-10);
    --cs-color-highlight-05: var(--cs-color-lemon-05);
    --cs-color-highlight: var(--cs-color-lemon-90);
    --cs-color-highlight-key: 90;
    --cs-color-highlight-on: var(--cs-color-lemon-on);
  }

  .cs-highlight-yellow {
    --cs-color-highlight-95: var(--cs-color-yellow-95);
    --cs-color-highlight-90: var(--cs-color-yellow-90);
    --cs-color-highlight-80: var(--cs-color-yellow-80);
    --cs-color-highlight-70: var(--cs-color-yellow-70);
    --cs-color-highlight-60: var(--cs-color-yellow-60);
    --cs-color-highlight-50: var(--cs-color-yellow-50);
    --cs-color-highlight-40: var(--cs-color-yellow-40);
    --cs-color-highlight-30: var(--cs-color-yellow-30);
    --cs-color-highlight-20: var(--cs-color-yellow-20);
    --cs-color-highlight-10: var(--cs-color-yellow-10);
    --cs-color-highlight-05: var(--cs-color-yellow-05);
    --cs-color-highlight: var(--cs-color-yellow-80);
    --cs-color-highlight-key: 80;
    --cs-color-highlight-on: var(--cs-color-yellow-on);
  }

  .cs-highlight-orange {
    --cs-color-highlight-95: var(--cs-color-orange-95);
    --cs-color-highlight-90: var(--cs-color-orange-90);
    --cs-color-highlight-80: var(--cs-color-orange-80);
    --cs-color-highlight-70: var(--cs-color-orange-70);
    --cs-color-highlight-60: var(--cs-color-orange-60);
    --cs-color-highlight-50: var(--cs-color-orange-50);
    --cs-color-highlight-40: var(--cs-color-orange-40);
    --cs-color-highlight-30: var(--cs-color-orange-30);
    --cs-color-highlight-20: var(--cs-color-orange-20);
    --cs-color-highlight-10: var(--cs-color-orange-10);
    --cs-color-highlight-05: var(--cs-color-orange-05);
    --cs-color-highlight: var(--cs-color-orange-60);
    --cs-color-highlight-key: 60;
    --cs-color-highlight-on: var(--cs-color-orange-on);
  }

  .cs-highlight-vermilion {
    --cs-color-highlight-95: var(--cs-color-vermilion-95);
    --cs-color-highlight-90: var(--cs-color-vermilion-90);
    --cs-color-highlight-80: var(--cs-color-vermilion-80);
    --cs-color-highlight-70: var(--cs-color-vermilion-70);
    --cs-color-highlight-60: var(--cs-color-vermilion-60);
    --cs-color-highlight-50: var(--cs-color-vermilion-50);
    --cs-color-highlight-40: var(--cs-color-vermilion-40);
    --cs-color-highlight-30: var(--cs-color-vermilion-30);
    --cs-color-highlight-20: var(--cs-color-vermilion-20);
    --cs-color-highlight-10: var(--cs-color-vermilion-10);
    --cs-color-highlight-05: var(--cs-color-vermilion-05);
    --cs-color-highlight: var(--cs-color-vermilion-50);
    --cs-color-highlight-key: 50;
    --cs-color-highlight-on: var(--cs-color-vermilion-on);
  }

  .cs-highlight-rose {
    --cs-color-highlight-95: var(--cs-color-rose-95);
    --cs-color-highlight-90: var(--cs-color-rose-90);
    --cs-color-highlight-80: var(--cs-color-rose-80);
    --cs-color-highlight-70: var(--cs-color-rose-70);
    --cs-color-highlight-60: var(--cs-color-rose-60);
    --cs-color-highlight-50: var(--cs-color-rose-50);
    --cs-color-highlight-40: var(--cs-color-rose-40);
    --cs-color-highlight-30: var(--cs-color-rose-30);
    --cs-color-highlight-20: var(--cs-color-rose-20);
    --cs-color-highlight-10: var(--cs-color-rose-10);
    --cs-color-highlight-05: var(--cs-color-rose-05);
    --cs-color-highlight: var(--cs-color-rose-80);
    --cs-color-highlight-key: 80;
    --cs-color-highlight-on: var(--cs-color-rose-on);
  }

  .cs-highlight-pink {
    --cs-color-highlight-95: var(--cs-color-pink-95);
    --cs-color-highlight-90: var(--cs-color-pink-90);
    --cs-color-highlight-80: var(--cs-color-pink-80);
    --cs-color-highlight-70: var(--cs-color-pink-70);
    --cs-color-highlight-60: var(--cs-color-pink-60);
    --cs-color-highlight-50: var(--cs-color-pink-50);
    --cs-color-highlight-40: var(--cs-color-pink-40);
    --cs-color-highlight-30: var(--cs-color-pink-30);
    --cs-color-highlight-20: var(--cs-color-pink-20);
    --cs-color-highlight-10: var(--cs-color-pink-10);
    --cs-color-highlight-05: var(--cs-color-pink-05);
    --cs-color-highlight: var(--cs-color-pink-60);
    --cs-color-highlight-key: 60;
    --cs-color-highlight-on: var(--cs-color-pink-on);
  }

  .cs-highlight-cerise {
    --cs-color-highlight-95: var(--cs-color-cerise-95);
    --cs-color-highlight-90: var(--cs-color-cerise-90);
    --cs-color-highlight-80: var(--cs-color-cerise-80);
    --cs-color-highlight-70: var(--cs-color-cerise-70);
    --cs-color-highlight-60: var(--cs-color-cerise-60);
    --cs-color-highlight-50: var(--cs-color-cerise-50);
    --cs-color-highlight-40: var(--cs-color-cerise-40);
    --cs-color-highlight-30: var(--cs-color-cerise-30);
    --cs-color-highlight-20: var(--cs-color-cerise-20);
    --cs-color-highlight-10: var(--cs-color-cerise-10);
    --cs-color-highlight-05: var(--cs-color-cerise-05);
    --cs-color-highlight: var(--cs-color-cerise-50);
    --cs-color-highlight-key: 50;
    --cs-color-highlight-on: var(--cs-color-cerise-on);
  }

  .cs-highlight-ruby {
    --cs-color-highlight-95: var(--cs-color-ruby-95);
    --cs-color-highlight-90: var(--cs-color-ruby-90);
    --cs-color-highlight-80: var(--cs-color-ruby-80);
    --cs-color-highlight-70: var(--cs-color-ruby-70);
    --cs-color-highlight-60: var(--cs-color-ruby-60);
    --cs-color-highlight-50: var(--cs-color-ruby-50);
    --cs-color-highlight-40: var(--cs-color-ruby-40);
    --cs-color-highlight-30: var(--cs-color-ruby-30);
    --cs-color-highlight-20: var(--cs-color-ruby-20);
    --cs-color-highlight-10: var(--cs-color-ruby-10);
    --cs-color-highlight-05: var(--cs-color-ruby-05);
    --cs-color-highlight: var(--cs-color-ruby-30);
    --cs-color-highlight-key: 30;
    --cs-color-highlight-on: var(--cs-color-ruby-on);
  }

  .cs-highlight-sky {
    --cs-color-highlight-95: var(--cs-color-sky-95);
    --cs-color-highlight-90: var(--cs-color-sky-90);
    --cs-color-highlight-80: var(--cs-color-sky-80);
    --cs-color-highlight-70: var(--cs-color-sky-70);
    --cs-color-highlight-60: var(--cs-color-sky-60);
    --cs-color-highlight-50: var(--cs-color-sky-50);
    --cs-color-highlight-40: var(--cs-color-sky-40);
    --cs-color-highlight-30: var(--cs-color-sky-30);
    --cs-color-highlight-20: var(--cs-color-sky-20);
    --cs-color-highlight-10: var(--cs-color-sky-10);
    --cs-color-highlight-05: var(--cs-color-sky-05);
    --cs-color-highlight: var(--cs-color-sky-90);
    --cs-color-highlight-key: 90;
    --cs-color-highlight-on: var(--cs-color-sky-on);
  }

  .cs-highlight-cyan {
    --cs-color-highlight-95: var(--cs-color-cyan-95);
    --cs-color-highlight-90: var(--cs-color-cyan-90);
    --cs-color-highlight-80: var(--cs-color-cyan-80);
    --cs-color-highlight-70: var(--cs-color-cyan-70);
    --cs-color-highlight-60: var(--cs-color-cyan-60);
    --cs-color-highlight-50: var(--cs-color-cyan-50);
    --cs-color-highlight-40: var(--cs-color-cyan-40);
    --cs-color-highlight-30: var(--cs-color-cyan-30);
    --cs-color-highlight-20: var(--cs-color-cyan-20);
    --cs-color-highlight-10: var(--cs-color-cyan-10);
    --cs-color-highlight-05: var(--cs-color-cyan-05);
    --cs-color-highlight: var(--cs-color-cyan-70);
    --cs-color-highlight-key: 70;
    --cs-color-highlight-on: var(--cs-color-cyan-on);
  }

  .cs-highlight-turquoise {
    --cs-color-highlight-95: var(--cs-color-turquoise-95);
    --cs-color-highlight-90: var(--cs-color-turquoise-90);
    --cs-color-highlight-80: var(--cs-color-turquoise-80);
    --cs-color-highlight-70: var(--cs-color-turquoise-70);
    --cs-color-highlight-60: var(--cs-color-turquoise-60);
    --cs-color-highlight-50: var(--cs-color-turquoise-50);
    --cs-color-highlight-40: var(--cs-color-turquoise-40);
    --cs-color-highlight-30: var(--cs-color-turquoise-30);
    --cs-color-highlight-20: var(--cs-color-turquoise-20);
    --cs-color-highlight-10: var(--cs-color-turquoise-10);
    --cs-color-highlight-05: var(--cs-color-turquoise-05);
    --cs-color-highlight: var(--cs-color-turquoise-50);
    --cs-color-highlight-key: 50;
    --cs-color-highlight-on: var(--cs-color-turquoise-on);
  }

  .cs-highlight-navy {
    --cs-color-highlight-95: var(--cs-color-navy-95);
    --cs-color-highlight-90: var(--cs-color-navy-90);
    --cs-color-highlight-80: var(--cs-color-navy-80);
    --cs-color-highlight-70: var(--cs-color-navy-70);
    --cs-color-highlight-60: var(--cs-color-navy-60);
    --cs-color-highlight-50: var(--cs-color-navy-50);
    --cs-color-highlight-40: var(--cs-color-navy-40);
    --cs-color-highlight-30: var(--cs-color-navy-30);
    --cs-color-highlight-20: var(--cs-color-navy-20);
    --cs-color-highlight-10: var(--cs-color-navy-10);
    --cs-color-highlight-05: var(--cs-color-navy-05);
    --cs-color-highlight: var(--cs-color-navy-10);
    --cs-color-highlight-key: 10;
    --cs-color-highlight-on: var(--cs-color-navy-on);
  }

  .cs-highlight-mint {
    --cs-color-highlight-95: var(--cs-color-mint-95);
    --cs-color-highlight-90: var(--cs-color-mint-90);
    --cs-color-highlight-80: var(--cs-color-mint-80);
    --cs-color-highlight-70: var(--cs-color-mint-70);
    --cs-color-highlight-60: var(--cs-color-mint-60);
    --cs-color-highlight-50: var(--cs-color-mint-50);
    --cs-color-highlight-40: var(--cs-color-mint-40);
    --cs-color-highlight-30: var(--cs-color-mint-30);
    --cs-color-highlight-20: var(--cs-color-mint-20);
    --cs-color-highlight-10: var(--cs-color-mint-10);
    --cs-color-highlight-05: var(--cs-color-mint-05);
    --cs-color-highlight: var(--cs-color-mint-80);
    --cs-color-highlight-key: 80;
    --cs-color-highlight-on: var(--cs-color-mint-on);
  }

  .cs-highlight-green {
    --cs-color-highlight-95: var(--cs-color-green-95);
    --cs-color-highlight-90: var(--cs-color-green-90);
    --cs-color-highlight-80: var(--cs-color-green-80);
    --cs-color-highlight-70: var(--cs-color-green-70);
    --cs-color-highlight-60: var(--cs-color-green-60);
    --cs-color-highlight-50: var(--cs-color-green-50);
    --cs-color-highlight-40: var(--cs-color-green-40);
    --cs-color-highlight-30: var(--cs-color-green-30);
    --cs-color-highlight-20: var(--cs-color-green-20);
    --cs-color-highlight-10: var(--cs-color-green-10);
    --cs-color-highlight-05: var(--cs-color-green-05);
    --cs-color-highlight: var(--cs-color-green-70);
    --cs-color-highlight-key: 70;
    --cs-color-highlight-on: var(--cs-color-green-on);
  }

  .cs-highlight-moss {
    --cs-color-highlight-95: var(--cs-color-moss-95);
    --cs-color-highlight-90: var(--cs-color-moss-90);
    --cs-color-highlight-80: var(--cs-color-moss-80);
    --cs-color-highlight-70: var(--cs-color-moss-70);
    --cs-color-highlight-60: var(--cs-color-moss-60);
    --cs-color-highlight-50: var(--cs-color-moss-50);
    --cs-color-highlight-40: var(--cs-color-moss-40);
    --cs-color-highlight-30: var(--cs-color-moss-30);
    --cs-color-highlight-20: var(--cs-color-moss-20);
    --cs-color-highlight-10: var(--cs-color-moss-10);
    --cs-color-highlight-05: var(--cs-color-moss-05);
    --cs-color-highlight: var(--cs-color-moss-40);
    --cs-color-highlight-key: 40;
    --cs-color-highlight-on: var(--cs-color-moss-on);
  }

  .cs-highlight-olive-drab {
    --cs-color-highlight-95: var(--cs-color-olive-drab-95);
    --cs-color-highlight-90: var(--cs-color-olive-drab-90);
    --cs-color-highlight-80: var(--cs-color-olive-drab-80);
    --cs-color-highlight-70: var(--cs-color-olive-drab-70);
    --cs-color-highlight-60: var(--cs-color-olive-drab-60);
    --cs-color-highlight-50: var(--cs-color-olive-drab-50);
    --cs-color-highlight-40: var(--cs-color-olive-drab-40);
    --cs-color-highlight-30: var(--cs-color-olive-drab-30);
    --cs-color-highlight-20: var(--cs-color-olive-drab-20);
    --cs-color-highlight-10: var(--cs-color-olive-drab-10);
    --cs-color-highlight-05: var(--cs-color-olive-drab-05);
    --cs-color-highlight: var(--cs-color-olive-drab-20);
    --cs-color-highlight-key: 20;
    --cs-color-highlight-on: var(--cs-color-olive-drab-on);
  }

  .cs-highlight-gray {
    --cs-color-highlight-95: var(--cs-color-gray-95);
    --cs-color-highlight-90: var(--cs-color-gray-90);
    --cs-color-highlight-80: var(--cs-color-gray-80);
    --cs-color-highlight-70: var(--cs-color-gray-70);
    --cs-color-highlight-60: var(--cs-color-gray-60);
    --cs-color-highlight-50: var(--cs-color-gray-50);
    --cs-color-highlight-40: var(--cs-color-gray-40);
    --cs-color-highlight-30: var(--cs-color-gray-30);
    --cs-color-highlight-20: var(--cs-color-gray-20);
    --cs-color-highlight-10: var(--cs-color-gray-10);
    --cs-color-highlight-05: var(--cs-color-gray-05);
    --cs-color-highlight: var(--cs-color-gray-95);
    --cs-color-highlight-key: 95;
    --cs-color-highlight-on: var(--cs-color-gray-on);
  }

  .cs-highlight-graphite {
    --cs-color-highlight-95: var(--cs-color-graphite-95);
    --cs-color-highlight-90: var(--cs-color-graphite-90);
    --cs-color-highlight-80: var(--cs-color-graphite-80);
    --cs-color-highlight-70: var(--cs-color-graphite-70);
    --cs-color-highlight-60: var(--cs-color-graphite-60);
    --cs-color-highlight-50: var(--cs-color-graphite-50);
    --cs-color-highlight-40: var(--cs-color-graphite-40);
    --cs-color-highlight-30: var(--cs-color-graphite-30);
    --cs-color-highlight-20: var(--cs-color-graphite-20);
    --cs-color-highlight-10: var(--cs-color-graphite-10);
    --cs-color-highlight-05: var(--cs-color-graphite-05);
    --cs-color-highlight: var(--cs-color-graphite-40);
    --cs-color-highlight-key: 40;
    --cs-color-highlight-on: var(--cs-color-graphite-on);
  }

  /* information — defaults to turquoise */
  :where(:root), /* default */
  .cs-information-turquoise {
    --cs-color-information-95: var(--cs-color-turquoise-95);
    --cs-color-information-90: var(--cs-color-turquoise-90);
    --cs-color-information-80: var(--cs-color-turquoise-80);
    --cs-color-information-70: var(--cs-color-turquoise-70);
    --cs-color-information-60: var(--cs-color-turquoise-60);
    --cs-color-information-50: var(--cs-color-turquoise-50);
    --cs-color-information-40: var(--cs-color-turquoise-40);
    --cs-color-information-30: var(--cs-color-turquoise-30);
    --cs-color-information-20: var(--cs-color-turquoise-20);
    --cs-color-information-10: var(--cs-color-turquoise-10);
    --cs-color-information-05: var(--cs-color-turquoise-05);
    --cs-color-information: var(--cs-color-turquoise-50);
    --cs-color-information-key: 50;
    --cs-color-information-on: var(--cs-color-turquoise-on);
  }

  .cs-information-lemon {
    --cs-color-information-95: var(--cs-color-lemon-95);
    --cs-color-information-90: var(--cs-color-lemon-90);
    --cs-color-information-80: var(--cs-color-lemon-80);
    --cs-color-information-70: var(--cs-color-lemon-70);
    --cs-color-information-60: var(--cs-color-lemon-60);
    --cs-color-information-50: var(--cs-color-lemon-50);
    --cs-color-information-40: var(--cs-color-lemon-40);
    --cs-color-information-30: var(--cs-color-lemon-30);
    --cs-color-information-20: var(--cs-color-lemon-20);
    --cs-color-information-10: var(--cs-color-lemon-10);
    --cs-color-information-05: var(--cs-color-lemon-05);
    --cs-color-information: var(--cs-color-lemon-90);
    --cs-color-information-key: 90;
    --cs-color-information-on: var(--cs-color-lemon-on);
  }

  .cs-information-yellow {
    --cs-color-information-95: var(--cs-color-yellow-95);
    --cs-color-information-90: var(--cs-color-yellow-90);
    --cs-color-information-80: var(--cs-color-yellow-80);
    --cs-color-information-70: var(--cs-color-yellow-70);
    --cs-color-information-60: var(--cs-color-yellow-60);
    --cs-color-information-50: var(--cs-color-yellow-50);
    --cs-color-information-40: var(--cs-color-yellow-40);
    --cs-color-information-30: var(--cs-color-yellow-30);
    --cs-color-information-20: var(--cs-color-yellow-20);
    --cs-color-information-10: var(--cs-color-yellow-10);
    --cs-color-information-05: var(--cs-color-yellow-05);
    --cs-color-information: var(--cs-color-yellow-80);
    --cs-color-information-key: 80;
    --cs-color-information-on: var(--cs-color-yellow-on);
  }

  .cs-information-orange {
    --cs-color-information-95: var(--cs-color-orange-95);
    --cs-color-information-90: var(--cs-color-orange-90);
    --cs-color-information-80: var(--cs-color-orange-80);
    --cs-color-information-70: var(--cs-color-orange-70);
    --cs-color-information-60: var(--cs-color-orange-60);
    --cs-color-information-50: var(--cs-color-orange-50);
    --cs-color-information-40: var(--cs-color-orange-40);
    --cs-color-information-30: var(--cs-color-orange-30);
    --cs-color-information-20: var(--cs-color-orange-20);
    --cs-color-information-10: var(--cs-color-orange-10);
    --cs-color-information-05: var(--cs-color-orange-05);
    --cs-color-information: var(--cs-color-orange-60);
    --cs-color-information-key: 60;
    --cs-color-information-on: var(--cs-color-orange-on);
  }

  .cs-information-vermilion {
    --cs-color-information-95: var(--cs-color-vermilion-95);
    --cs-color-information-90: var(--cs-color-vermilion-90);
    --cs-color-information-80: var(--cs-color-vermilion-80);
    --cs-color-information-70: var(--cs-color-vermilion-70);
    --cs-color-information-60: var(--cs-color-vermilion-60);
    --cs-color-information-50: var(--cs-color-vermilion-50);
    --cs-color-information-40: var(--cs-color-vermilion-40);
    --cs-color-information-30: var(--cs-color-vermilion-30);
    --cs-color-information-20: var(--cs-color-vermilion-20);
    --cs-color-information-10: var(--cs-color-vermilion-10);
    --cs-color-information-05: var(--cs-color-vermilion-05);
    --cs-color-information: var(--cs-color-vermilion-50);
    --cs-color-information-key: 50;
    --cs-color-information-on: var(--cs-color-vermilion-on);
  }

  .cs-information-rose {
    --cs-color-information-95: var(--cs-color-rose-95);
    --cs-color-information-90: var(--cs-color-rose-90);
    --cs-color-information-80: var(--cs-color-rose-80);
    --cs-color-information-70: var(--cs-color-rose-70);
    --cs-color-information-60: var(--cs-color-rose-60);
    --cs-color-information-50: var(--cs-color-rose-50);
    --cs-color-information-40: var(--cs-color-rose-40);
    --cs-color-information-30: var(--cs-color-rose-30);
    --cs-color-information-20: var(--cs-color-rose-20);
    --cs-color-information-10: var(--cs-color-rose-10);
    --cs-color-information-05: var(--cs-color-rose-05);
    --cs-color-information: var(--cs-color-rose-80);
    --cs-color-information-key: 80;
    --cs-color-information-on: var(--cs-color-rose-on);
  }

  .cs-information-pink {
    --cs-color-information-95: var(--cs-color-pink-95);
    --cs-color-information-90: var(--cs-color-pink-90);
    --cs-color-information-80: var(--cs-color-pink-80);
    --cs-color-information-70: var(--cs-color-pink-70);
    --cs-color-information-60: var(--cs-color-pink-60);
    --cs-color-information-50: var(--cs-color-pink-50);
    --cs-color-information-40: var(--cs-color-pink-40);
    --cs-color-information-30: var(--cs-color-pink-30);
    --cs-color-information-20: var(--cs-color-pink-20);
    --cs-color-information-10: var(--cs-color-pink-10);
    --cs-color-information-05: var(--cs-color-pink-05);
    --cs-color-information: var(--cs-color-pink-60);
    --cs-color-information-key: 60;
    --cs-color-information-on: var(--cs-color-pink-on);
  }

  .cs-information-cerise {
    --cs-color-information-95: var(--cs-color-cerise-95);
    --cs-color-information-90: var(--cs-color-cerise-90);
    --cs-color-information-80: var(--cs-color-cerise-80);
    --cs-color-information-70: var(--cs-color-cerise-70);
    --cs-color-information-60: var(--cs-color-cerise-60);
    --cs-color-information-50: var(--cs-color-cerise-50);
    --cs-color-information-40: var(--cs-color-cerise-40);
    --cs-color-information-30: var(--cs-color-cerise-30);
    --cs-color-information-20: var(--cs-color-cerise-20);
    --cs-color-information-10: var(--cs-color-cerise-10);
    --cs-color-information-05: var(--cs-color-cerise-05);
    --cs-color-information: var(--cs-color-cerise-50);
    --cs-color-information-key: 50;
    --cs-color-information-on: var(--cs-color-cerise-on);
  }

  .cs-information-ruby {
    --cs-color-information-95: var(--cs-color-ruby-95);
    --cs-color-information-90: var(--cs-color-ruby-90);
    --cs-color-information-80: var(--cs-color-ruby-80);
    --cs-color-information-70: var(--cs-color-ruby-70);
    --cs-color-information-60: var(--cs-color-ruby-60);
    --cs-color-information-50: var(--cs-color-ruby-50);
    --cs-color-information-40: var(--cs-color-ruby-40);
    --cs-color-information-30: var(--cs-color-ruby-30);
    --cs-color-information-20: var(--cs-color-ruby-20);
    --cs-color-information-10: var(--cs-color-ruby-10);
    --cs-color-information-05: var(--cs-color-ruby-05);
    --cs-color-information: var(--cs-color-ruby-30);
    --cs-color-information-key: 30;
    --cs-color-information-on: var(--cs-color-ruby-on);
  }

  .cs-information-sky {
    --cs-color-information-95: var(--cs-color-sky-95);
    --cs-color-information-90: var(--cs-color-sky-90);
    --cs-color-information-80: var(--cs-color-sky-80);
    --cs-color-information-70: var(--cs-color-sky-70);
    --cs-color-information-60: var(--cs-color-sky-60);
    --cs-color-information-50: var(--cs-color-sky-50);
    --cs-color-information-40: var(--cs-color-sky-40);
    --cs-color-information-30: var(--cs-color-sky-30);
    --cs-color-information-20: var(--cs-color-sky-20);
    --cs-color-information-10: var(--cs-color-sky-10);
    --cs-color-information-05: var(--cs-color-sky-05);
    --cs-color-information: var(--cs-color-sky-90);
    --cs-color-information-key: 90;
    --cs-color-information-on: var(--cs-color-sky-on);
  }

  .cs-information-cyan {
    --cs-color-information-95: var(--cs-color-cyan-95);
    --cs-color-information-90: var(--cs-color-cyan-90);
    --cs-color-information-80: var(--cs-color-cyan-80);
    --cs-color-information-70: var(--cs-color-cyan-70);
    --cs-color-information-60: var(--cs-color-cyan-60);
    --cs-color-information-50: var(--cs-color-cyan-50);
    --cs-color-information-40: var(--cs-color-cyan-40);
    --cs-color-information-30: var(--cs-color-cyan-30);
    --cs-color-information-20: var(--cs-color-cyan-20);
    --cs-color-information-10: var(--cs-color-cyan-10);
    --cs-color-information-05: var(--cs-color-cyan-05);
    --cs-color-information: var(--cs-color-cyan-70);
    --cs-color-information-key: 70;
    --cs-color-information-on: var(--cs-color-cyan-on);
  }

  .cs-information-navy {
    --cs-color-information-95: var(--cs-color-navy-95);
    --cs-color-information-90: var(--cs-color-navy-90);
    --cs-color-information-80: var(--cs-color-navy-80);
    --cs-color-information-70: var(--cs-color-navy-70);
    --cs-color-information-60: var(--cs-color-navy-60);
    --cs-color-information-50: var(--cs-color-navy-50);
    --cs-color-information-40: var(--cs-color-navy-40);
    --cs-color-information-30: var(--cs-color-navy-30);
    --cs-color-information-20: var(--cs-color-navy-20);
    --cs-color-information-10: var(--cs-color-navy-10);
    --cs-color-information-05: var(--cs-color-navy-05);
    --cs-color-information: var(--cs-color-navy-10);
    --cs-color-information-key: 10;
    --cs-color-information-on: var(--cs-color-navy-on);
  }

  .cs-information-mint {
    --cs-color-information-95: var(--cs-color-mint-95);
    --cs-color-information-90: var(--cs-color-mint-90);
    --cs-color-information-80: var(--cs-color-mint-80);
    --cs-color-information-70: var(--cs-color-mint-70);
    --cs-color-information-60: var(--cs-color-mint-60);
    --cs-color-information-50: var(--cs-color-mint-50);
    --cs-color-information-40: var(--cs-color-mint-40);
    --cs-color-information-30: var(--cs-color-mint-30);
    --cs-color-information-20: var(--cs-color-mint-20);
    --cs-color-information-10: var(--cs-color-mint-10);
    --cs-color-information-05: var(--cs-color-mint-05);
    --cs-color-information: var(--cs-color-mint-80);
    --cs-color-information-key: 80;
    --cs-color-information-on: var(--cs-color-mint-on);
  }

  .cs-information-green {
    --cs-color-information-95: var(--cs-color-green-95);
    --cs-color-information-90: var(--cs-color-green-90);
    --cs-color-information-80: var(--cs-color-green-80);
    --cs-color-information-70: var(--cs-color-green-70);
    --cs-color-information-60: var(--cs-color-green-60);
    --cs-color-information-50: var(--cs-color-green-50);
    --cs-color-information-40: var(--cs-color-green-40);
    --cs-color-information-30: var(--cs-color-green-30);
    --cs-color-information-20: var(--cs-color-green-20);
    --cs-color-information-10: var(--cs-color-green-10);
    --cs-color-information-05: var(--cs-color-green-05);
    --cs-color-information: var(--cs-color-green-70);
    --cs-color-information-key: 70;
    --cs-color-information-on: var(--cs-color-green-on);
  }

  .cs-information-moss {
    --cs-color-information-95: var(--cs-color-moss-95);
    --cs-color-information-90: var(--cs-color-moss-90);
    --cs-color-information-80: var(--cs-color-moss-80);
    --cs-color-information-70: var(--cs-color-moss-70);
    --cs-color-information-60: var(--cs-color-moss-60);
    --cs-color-information-50: var(--cs-color-moss-50);
    --cs-color-information-40: var(--cs-color-moss-40);
    --cs-color-information-30: var(--cs-color-moss-30);
    --cs-color-information-20: var(--cs-color-moss-20);
    --cs-color-information-10: var(--cs-color-moss-10);
    --cs-color-information-05: var(--cs-color-moss-05);
    --cs-color-information: var(--cs-color-moss-40);
    --cs-color-information-key: 40;
    --cs-color-information-on: var(--cs-color-moss-on);
  }

  .cs-information-olive-drab {
    --cs-color-information-95: var(--cs-color-olive-drab-95);
    --cs-color-information-90: var(--cs-color-olive-drab-90);
    --cs-color-information-80: var(--cs-color-olive-drab-80);
    --cs-color-information-70: var(--cs-color-olive-drab-70);
    --cs-color-information-60: var(--cs-color-olive-drab-60);
    --cs-color-information-50: var(--cs-color-olive-drab-50);
    --cs-color-information-40: var(--cs-color-olive-drab-40);
    --cs-color-information-30: var(--cs-color-olive-drab-30);
    --cs-color-information-20: var(--cs-color-olive-drab-20);
    --cs-color-information-10: var(--cs-color-olive-drab-10);
    --cs-color-information-05: var(--cs-color-olive-drab-05);
    --cs-color-information: var(--cs-color-olive-drab-20);
    --cs-color-information-key: 20;
    --cs-color-information-on: var(--cs-color-olive-drab-on);
  }

  .cs-information-gray {
    --cs-color-information-95: var(--cs-color-gray-95);
    --cs-color-information-90: var(--cs-color-gray-90);
    --cs-color-information-80: var(--cs-color-gray-80);
    --cs-color-information-70: var(--cs-color-gray-70);
    --cs-color-information-60: var(--cs-color-gray-60);
    --cs-color-information-50: var(--cs-color-gray-50);
    --cs-color-information-40: var(--cs-color-gray-40);
    --cs-color-information-30: var(--cs-color-gray-30);
    --cs-color-information-20: var(--cs-color-gray-20);
    --cs-color-information-10: var(--cs-color-gray-10);
    --cs-color-information-05: var(--cs-color-gray-05);
    --cs-color-information: var(--cs-color-gray-95);
    --cs-color-information-key: 95;
    --cs-color-information-on: var(--cs-color-gray-on);
  }

  .cs-information-graphite {
    --cs-color-information-95: var(--cs-color-graphite-95);
    --cs-color-information-90: var(--cs-color-graphite-90);
    --cs-color-information-80: var(--cs-color-graphite-80);
    --cs-color-information-70: var(--cs-color-graphite-70);
    --cs-color-information-60: var(--cs-color-graphite-60);
    --cs-color-information-50: var(--cs-color-graphite-50);
    --cs-color-information-40: var(--cs-color-graphite-40);
    --cs-color-information-30: var(--cs-color-graphite-30);
    --cs-color-information-20: var(--cs-color-graphite-20);
    --cs-color-information-10: var(--cs-color-graphite-10);
    --cs-color-information-05: var(--cs-color-graphite-05);
    --cs-color-information: var(--cs-color-graphite-40);
    --cs-color-information-key: 40;
    --cs-color-information-on: var(--cs-color-graphite-on);
  }

  .cs-information-purple {
    --cs-color-information-95: var(--cs-color-purple-95);
    --cs-color-information-90: var(--cs-color-purple-90);
    --cs-color-information-80: var(--cs-color-purple-80);
    --cs-color-information-70: var(--cs-color-purple-70);
    --cs-color-information-60: var(--cs-color-purple-60);
    --cs-color-information-50: var(--cs-color-purple-50);
    --cs-color-information-40: var(--cs-color-purple-40);
    --cs-color-information-30: var(--cs-color-purple-30);
    --cs-color-information-20: var(--cs-color-purple-20);
    --cs-color-information-10: var(--cs-color-purple-10);
    --cs-color-information-05: var(--cs-color-purple-05);
    --cs-color-information: var(--cs-color-purple-50);
    --cs-color-information-key: 50;
    --cs-color-information-on: var(--cs-color-purple-on);
  }

  /* success — defaults to green */
  :where(:root), /* default */
  .cs-success-green {
    --cs-color-success-95: var(--cs-color-green-95);
    --cs-color-success-90: var(--cs-color-green-90);
    --cs-color-success-80: var(--cs-color-green-80);
    --cs-color-success-70: var(--cs-color-green-70);
    --cs-color-success-60: var(--cs-color-green-60);
    --cs-color-success-50: var(--cs-color-green-50);
    --cs-color-success-40: var(--cs-color-green-40);
    --cs-color-success-30: var(--cs-color-green-30);
    --cs-color-success-20: var(--cs-color-green-20);
    --cs-color-success-10: var(--cs-color-green-10);
    --cs-color-success-05: var(--cs-color-green-05);
    --cs-color-success: var(--cs-color-green-70);
    --cs-color-success-key: 70;
    --cs-color-success-on: var(--cs-color-green-on);
  }

  .cs-success-lemon {
    --cs-color-success-95: var(--cs-color-lemon-95);
    --cs-color-success-90: var(--cs-color-lemon-90);
    --cs-color-success-80: var(--cs-color-lemon-80);
    --cs-color-success-70: var(--cs-color-lemon-70);
    --cs-color-success-60: var(--cs-color-lemon-60);
    --cs-color-success-50: var(--cs-color-lemon-50);
    --cs-color-success-40: var(--cs-color-lemon-40);
    --cs-color-success-30: var(--cs-color-lemon-30);
    --cs-color-success-20: var(--cs-color-lemon-20);
    --cs-color-success-10: var(--cs-color-lemon-10);
    --cs-color-success-05: var(--cs-color-lemon-05);
    --cs-color-success: var(--cs-color-lemon-90);
    --cs-color-success-key: 90;
    --cs-color-success-on: var(--cs-color-lemon-on);
  }

  .cs-success-yellow {
    --cs-color-success-95: var(--cs-color-yellow-95);
    --cs-color-success-90: var(--cs-color-yellow-90);
    --cs-color-success-80: var(--cs-color-yellow-80);
    --cs-color-success-70: var(--cs-color-yellow-70);
    --cs-color-success-60: var(--cs-color-yellow-60);
    --cs-color-success-50: var(--cs-color-yellow-50);
    --cs-color-success-40: var(--cs-color-yellow-40);
    --cs-color-success-30: var(--cs-color-yellow-30);
    --cs-color-success-20: var(--cs-color-yellow-20);
    --cs-color-success-10: var(--cs-color-yellow-10);
    --cs-color-success-05: var(--cs-color-yellow-05);
    --cs-color-success: var(--cs-color-yellow-80);
    --cs-color-success-key: 80;
    --cs-color-success-on: var(--cs-color-yellow-on);
  }

  .cs-success-orange {
    --cs-color-success-95: var(--cs-color-orange-95);
    --cs-color-success-90: var(--cs-color-orange-90);
    --cs-color-success-80: var(--cs-color-orange-80);
    --cs-color-success-70: var(--cs-color-orange-70);
    --cs-color-success-60: var(--cs-color-orange-60);
    --cs-color-success-50: var(--cs-color-orange-50);
    --cs-color-success-40: var(--cs-color-orange-40);
    --cs-color-success-30: var(--cs-color-orange-30);
    --cs-color-success-20: var(--cs-color-orange-20);
    --cs-color-success-10: var(--cs-color-orange-10);
    --cs-color-success-05: var(--cs-color-orange-05);
    --cs-color-success: var(--cs-color-orange-60);
    --cs-color-success-key: 60;
    --cs-color-success-on: var(--cs-color-orange-on);
  }

  .cs-success-vermilion {
    --cs-color-success-95: var(--cs-color-vermilion-95);
    --cs-color-success-90: var(--cs-color-vermilion-90);
    --cs-color-success-80: var(--cs-color-vermilion-80);
    --cs-color-success-70: var(--cs-color-vermilion-70);
    --cs-color-success-60: var(--cs-color-vermilion-60);
    --cs-color-success-50: var(--cs-color-vermilion-50);
    --cs-color-success-40: var(--cs-color-vermilion-40);
    --cs-color-success-30: var(--cs-color-vermilion-30);
    --cs-color-success-20: var(--cs-color-vermilion-20);
    --cs-color-success-10: var(--cs-color-vermilion-10);
    --cs-color-success-05: var(--cs-color-vermilion-05);
    --cs-color-success: var(--cs-color-vermilion-50);
    --cs-color-success-key: 50;
    --cs-color-success-on: var(--cs-color-vermilion-on);
  }

  .cs-success-rose {
    --cs-color-success-95: var(--cs-color-rose-95);
    --cs-color-success-90: var(--cs-color-rose-90);
    --cs-color-success-80: var(--cs-color-rose-80);
    --cs-color-success-70: var(--cs-color-rose-70);
    --cs-color-success-60: var(--cs-color-rose-60);
    --cs-color-success-50: var(--cs-color-rose-50);
    --cs-color-success-40: var(--cs-color-rose-40);
    --cs-color-success-30: var(--cs-color-rose-30);
    --cs-color-success-20: var(--cs-color-rose-20);
    --cs-color-success-10: var(--cs-color-rose-10);
    --cs-color-success-05: var(--cs-color-rose-05);
    --cs-color-success: var(--cs-color-rose-80);
    --cs-color-success-key: 80;
    --cs-color-success-on: var(--cs-color-rose-on);
  }

  .cs-success-pink {
    --cs-color-success-95: var(--cs-color-pink-95);
    --cs-color-success-90: var(--cs-color-pink-90);
    --cs-color-success-80: var(--cs-color-pink-80);
    --cs-color-success-70: var(--cs-color-pink-70);
    --cs-color-success-60: var(--cs-color-pink-60);
    --cs-color-success-50: var(--cs-color-pink-50);
    --cs-color-success-40: var(--cs-color-pink-40);
    --cs-color-success-30: var(--cs-color-pink-30);
    --cs-color-success-20: var(--cs-color-pink-20);
    --cs-color-success-10: var(--cs-color-pink-10);
    --cs-color-success-05: var(--cs-color-pink-05);
    --cs-color-success: var(--cs-color-pink-60);
    --cs-color-success-key: 60;
    --cs-color-success-on: var(--cs-color-pink-on);
  }

  .cs-success-cerise {
    --cs-color-success-95: var(--cs-color-cerise-95);
    --cs-color-success-90: var(--cs-color-cerise-90);
    --cs-color-success-80: var(--cs-color-cerise-80);
    --cs-color-success-70: var(--cs-color-cerise-70);
    --cs-color-success-60: var(--cs-color-cerise-60);
    --cs-color-success-50: var(--cs-color-cerise-50);
    --cs-color-success-40: var(--cs-color-cerise-40);
    --cs-color-success-30: var(--cs-color-cerise-30);
    --cs-color-success-20: var(--cs-color-cerise-20);
    --cs-color-success-10: var(--cs-color-cerise-10);
    --cs-color-success-05: var(--cs-color-cerise-05);
    --cs-color-success: var(--cs-color-cerise-50);
    --cs-color-success-key: 50;
    --cs-color-success-on: var(--cs-color-cerise-on);
  }

  .cs-success-ruby {
    --cs-color-success-95: var(--cs-color-ruby-95);
    --cs-color-success-90: var(--cs-color-ruby-90);
    --cs-color-success-80: var(--cs-color-ruby-80);
    --cs-color-success-70: var(--cs-color-ruby-70);
    --cs-color-success-60: var(--cs-color-ruby-60);
    --cs-color-success-50: var(--cs-color-ruby-50);
    --cs-color-success-40: var(--cs-color-ruby-40);
    --cs-color-success-30: var(--cs-color-ruby-30);
    --cs-color-success-20: var(--cs-color-ruby-20);
    --cs-color-success-10: var(--cs-color-ruby-10);
    --cs-color-success-05: var(--cs-color-ruby-05);
    --cs-color-success: var(--cs-color-ruby-30);
    --cs-color-success-key: 30;
    --cs-color-success-on: var(--cs-color-ruby-on);
  }

  .cs-success-sky {
    --cs-color-success-95: var(--cs-color-sky-95);
    --cs-color-success-90: var(--cs-color-sky-90);
    --cs-color-success-80: var(--cs-color-sky-80);
    --cs-color-success-70: var(--cs-color-sky-70);
    --cs-color-success-60: var(--cs-color-sky-60);
    --cs-color-success-50: var(--cs-color-sky-50);
    --cs-color-success-40: var(--cs-color-sky-40);
    --cs-color-success-30: var(--cs-color-sky-30);
    --cs-color-success-20: var(--cs-color-sky-20);
    --cs-color-success-10: var(--cs-color-sky-10);
    --cs-color-success-05: var(--cs-color-sky-05);
    --cs-color-success: var(--cs-color-sky-90);
    --cs-color-success-key: 90;
    --cs-color-success-on: var(--cs-color-sky-on);
  }

  .cs-success-cyan {
    --cs-color-success-95: var(--cs-color-cyan-95);
    --cs-color-success-90: var(--cs-color-cyan-90);
    --cs-color-success-80: var(--cs-color-cyan-80);
    --cs-color-success-70: var(--cs-color-cyan-70);
    --cs-color-success-60: var(--cs-color-cyan-60);
    --cs-color-success-50: var(--cs-color-cyan-50);
    --cs-color-success-40: var(--cs-color-cyan-40);
    --cs-color-success-30: var(--cs-color-cyan-30);
    --cs-color-success-20: var(--cs-color-cyan-20);
    --cs-color-success-10: var(--cs-color-cyan-10);
    --cs-color-success-05: var(--cs-color-cyan-05);
    --cs-color-success: var(--cs-color-cyan-70);
    --cs-color-success-key: 70;
    --cs-color-success-on: var(--cs-color-cyan-on);
  }

  .cs-success-turquoise {
    --cs-color-success-95: var(--cs-color-turquoise-95);
    --cs-color-success-90: var(--cs-color-turquoise-90);
    --cs-color-success-80: var(--cs-color-turquoise-80);
    --cs-color-success-70: var(--cs-color-turquoise-70);
    --cs-color-success-60: var(--cs-color-turquoise-60);
    --cs-color-success-50: var(--cs-color-turquoise-50);
    --cs-color-success-40: var(--cs-color-turquoise-40);
    --cs-color-success-30: var(--cs-color-turquoise-30);
    --cs-color-success-20: var(--cs-color-turquoise-20);
    --cs-color-success-10: var(--cs-color-turquoise-10);
    --cs-color-success-05: var(--cs-color-turquoise-05);
    --cs-color-success: var(--cs-color-turquoise-50);
    --cs-color-success-key: 50;
    --cs-color-success-on: var(--cs-color-turquoise-on);
  }

  .cs-success-navy {
    --cs-color-success-95: var(--cs-color-navy-95);
    --cs-color-success-90: var(--cs-color-navy-90);
    --cs-color-success-80: var(--cs-color-navy-80);
    --cs-color-success-70: var(--cs-color-navy-70);
    --cs-color-success-60: var(--cs-color-navy-60);
    --cs-color-success-50: var(--cs-color-navy-50);
    --cs-color-success-40: var(--cs-color-navy-40);
    --cs-color-success-30: var(--cs-color-navy-30);
    --cs-color-success-20: var(--cs-color-navy-20);
    --cs-color-success-10: var(--cs-color-navy-10);
    --cs-color-success-05: var(--cs-color-navy-05);
    --cs-color-success: var(--cs-color-navy-10);
    --cs-color-success-key: 10;
    --cs-color-success-on: var(--cs-color-navy-on);
  }

  .cs-success-mint {
    --cs-color-success-95: var(--cs-color-mint-95);
    --cs-color-success-90: var(--cs-color-mint-90);
    --cs-color-success-80: var(--cs-color-mint-80);
    --cs-color-success-70: var(--cs-color-mint-70);
    --cs-color-success-60: var(--cs-color-mint-60);
    --cs-color-success-50: var(--cs-color-mint-50);
    --cs-color-success-40: var(--cs-color-mint-40);
    --cs-color-success-30: var(--cs-color-mint-30);
    --cs-color-success-20: var(--cs-color-mint-20);
    --cs-color-success-10: var(--cs-color-mint-10);
    --cs-color-success-05: var(--cs-color-mint-05);
    --cs-color-success: var(--cs-color-mint-80);
    --cs-color-success-key: 80;
    --cs-color-success-on: var(--cs-color-mint-on);
  }

  .cs-success-moss {
    --cs-color-success-95: var(--cs-color-moss-95);
    --cs-color-success-90: var(--cs-color-moss-90);
    --cs-color-success-80: var(--cs-color-moss-80);
    --cs-color-success-70: var(--cs-color-moss-70);
    --cs-color-success-60: var(--cs-color-moss-60);
    --cs-color-success-50: var(--cs-color-moss-50);
    --cs-color-success-40: var(--cs-color-moss-40);
    --cs-color-success-30: var(--cs-color-moss-30);
    --cs-color-success-20: var(--cs-color-moss-20);
    --cs-color-success-10: var(--cs-color-moss-10);
    --cs-color-success-05: var(--cs-color-moss-05);
    --cs-color-success: var(--cs-color-moss-40);
    --cs-color-success-key: 40;
    --cs-color-success-on: var(--cs-color-moss-on);
  }

  .cs-success-olive-drab {
    --cs-color-success-95: var(--cs-color-olive-drab-95);
    --cs-color-success-90: var(--cs-color-olive-drab-90);
    --cs-color-success-80: var(--cs-color-olive-drab-80);
    --cs-color-success-70: var(--cs-color-olive-drab-70);
    --cs-color-success-60: var(--cs-color-olive-drab-60);
    --cs-color-success-50: var(--cs-color-olive-drab-50);
    --cs-color-success-40: var(--cs-color-olive-drab-40);
    --cs-color-success-30: var(--cs-color-olive-drab-30);
    --cs-color-success-20: var(--cs-color-olive-drab-20);
    --cs-color-success-10: var(--cs-color-olive-drab-10);
    --cs-color-success-05: var(--cs-color-olive-drab-05);
    --cs-color-success: var(--cs-color-olive-drab-20);
    --cs-color-success-key: 20;
    --cs-color-success-on: var(--cs-color-olive-drab-on);
  }

  .cs-success-gray {
    --cs-color-success-95: var(--cs-color-gray-95);
    --cs-color-success-90: var(--cs-color-gray-90);
    --cs-color-success-80: var(--cs-color-gray-80);
    --cs-color-success-70: var(--cs-color-gray-70);
    --cs-color-success-60: var(--cs-color-gray-60);
    --cs-color-success-50: var(--cs-color-gray-50);
    --cs-color-success-40: var(--cs-color-gray-40);
    --cs-color-success-30: var(--cs-color-gray-30);
    --cs-color-success-20: var(--cs-color-gray-20);
    --cs-color-success-10: var(--cs-color-gray-10);
    --cs-color-success-05: var(--cs-color-gray-05);
    --cs-color-success: var(--cs-color-gray-95);
    --cs-color-success-key: 95;
    --cs-color-success-on: var(--cs-color-gray-on);
  }

  .cs-success-graphite {
    --cs-color-success-95: var(--cs-color-graphite-95);
    --cs-color-success-90: var(--cs-color-graphite-90);
    --cs-color-success-80: var(--cs-color-graphite-80);
    --cs-color-success-70: var(--cs-color-graphite-70);
    --cs-color-success-60: var(--cs-color-graphite-60);
    --cs-color-success-50: var(--cs-color-graphite-50);
    --cs-color-success-40: var(--cs-color-graphite-40);
    --cs-color-success-30: var(--cs-color-graphite-30);
    --cs-color-success-20: var(--cs-color-graphite-20);
    --cs-color-success-10: var(--cs-color-graphite-10);
    --cs-color-success-05: var(--cs-color-graphite-05);
    --cs-color-success: var(--cs-color-graphite-40);
    --cs-color-success-key: 40;
    --cs-color-success-on: var(--cs-color-graphite-on);
  }

  .cs-success-purple {
    --cs-color-success-95: var(--cs-color-purple-95);
    --cs-color-success-90: var(--cs-color-purple-90);
    --cs-color-success-80: var(--cs-color-purple-80);
    --cs-color-success-70: var(--cs-color-purple-70);
    --cs-color-success-60: var(--cs-color-purple-60);
    --cs-color-success-50: var(--cs-color-purple-50);
    --cs-color-success-40: var(--cs-color-purple-40);
    --cs-color-success-30: var(--cs-color-purple-30);
    --cs-color-success-20: var(--cs-color-purple-20);
    --cs-color-success-10: var(--cs-color-purple-10);
    --cs-color-success-05: var(--cs-color-purple-05);
    --cs-color-success: var(--cs-color-purple-50);
    --cs-color-success-key: 50;
    --cs-color-success-on: var(--cs-color-purple-on);
  }

  /* warning — defaults to orange */
  :where(:root), /* default */
  .cs-warning-orange {
    --cs-color-warning-95: var(--cs-color-orange-95);
    --cs-color-warning-90: var(--cs-color-orange-90);
    --cs-color-warning-80: var(--cs-color-orange-80);
    --cs-color-warning-70: var(--cs-color-orange-70);
    --cs-color-warning-60: var(--cs-color-orange-60);
    --cs-color-warning-50: var(--cs-color-orange-50);
    --cs-color-warning-40: var(--cs-color-orange-40);
    --cs-color-warning-30: var(--cs-color-orange-30);
    --cs-color-warning-20: var(--cs-color-orange-20);
    --cs-color-warning-10: var(--cs-color-orange-10);
    --cs-color-warning-05: var(--cs-color-orange-05);
    --cs-color-warning: var(--cs-color-orange-60);
    --cs-color-warning-key: 60;
    --cs-color-warning-on: var(--cs-color-orange-on);
  }

  .cs-warning-lemon {
    --cs-color-warning-95: var(--cs-color-lemon-95);
    --cs-color-warning-90: var(--cs-color-lemon-90);
    --cs-color-warning-80: var(--cs-color-lemon-80);
    --cs-color-warning-70: var(--cs-color-lemon-70);
    --cs-color-warning-60: var(--cs-color-lemon-60);
    --cs-color-warning-50: var(--cs-color-lemon-50);
    --cs-color-warning-40: var(--cs-color-lemon-40);
    --cs-color-warning-30: var(--cs-color-lemon-30);
    --cs-color-warning-20: var(--cs-color-lemon-20);
    --cs-color-warning-10: var(--cs-color-lemon-10);
    --cs-color-warning-05: var(--cs-color-lemon-05);
    --cs-color-warning: var(--cs-color-lemon-90);
    --cs-color-warning-key: 90;
    --cs-color-warning-on: var(--cs-color-lemon-on);
  }

  .cs-warning-yellow {
    --cs-color-warning-95: var(--cs-color-yellow-95);
    --cs-color-warning-90: var(--cs-color-yellow-90);
    --cs-color-warning-80: var(--cs-color-yellow-80);
    --cs-color-warning-70: var(--cs-color-yellow-70);
    --cs-color-warning-60: var(--cs-color-yellow-60);
    --cs-color-warning-50: var(--cs-color-yellow-50);
    --cs-color-warning-40: var(--cs-color-yellow-40);
    --cs-color-warning-30: var(--cs-color-yellow-30);
    --cs-color-warning-20: var(--cs-color-yellow-20);
    --cs-color-warning-10: var(--cs-color-yellow-10);
    --cs-color-warning-05: var(--cs-color-yellow-05);
    --cs-color-warning: var(--cs-color-yellow-80);
    --cs-color-warning-key: 80;
    --cs-color-warning-on: var(--cs-color-yellow-on);
  }

  .cs-warning-vermilion {
    --cs-color-warning-95: var(--cs-color-vermilion-95);
    --cs-color-warning-90: var(--cs-color-vermilion-90);
    --cs-color-warning-80: var(--cs-color-vermilion-80);
    --cs-color-warning-70: var(--cs-color-vermilion-70);
    --cs-color-warning-60: var(--cs-color-vermilion-60);
    --cs-color-warning-50: var(--cs-color-vermilion-50);
    --cs-color-warning-40: var(--cs-color-vermilion-40);
    --cs-color-warning-30: var(--cs-color-vermilion-30);
    --cs-color-warning-20: var(--cs-color-vermilion-20);
    --cs-color-warning-10: var(--cs-color-vermilion-10);
    --cs-color-warning-05: var(--cs-color-vermilion-05);
    --cs-color-warning: var(--cs-color-vermilion-50);
    --cs-color-warning-key: 50;
    --cs-color-warning-on: var(--cs-color-vermilion-on);
  }

  .cs-warning-rose {
    --cs-color-warning-95: var(--cs-color-rose-95);
    --cs-color-warning-90: var(--cs-color-rose-90);
    --cs-color-warning-80: var(--cs-color-rose-80);
    --cs-color-warning-70: var(--cs-color-rose-70);
    --cs-color-warning-60: var(--cs-color-rose-60);
    --cs-color-warning-50: var(--cs-color-rose-50);
    --cs-color-warning-40: var(--cs-color-rose-40);
    --cs-color-warning-30: var(--cs-color-rose-30);
    --cs-color-warning-20: var(--cs-color-rose-20);
    --cs-color-warning-10: var(--cs-color-rose-10);
    --cs-color-warning-05: var(--cs-color-rose-05);
    --cs-color-warning: var(--cs-color-rose-80);
    --cs-color-warning-key: 80;
    --cs-color-warning-on: var(--cs-color-rose-on);
  }

  .cs-warning-pink {
    --cs-color-warning-95: var(--cs-color-pink-95);
    --cs-color-warning-90: var(--cs-color-pink-90);
    --cs-color-warning-80: var(--cs-color-pink-80);
    --cs-color-warning-70: var(--cs-color-pink-70);
    --cs-color-warning-60: var(--cs-color-pink-60);
    --cs-color-warning-50: var(--cs-color-pink-50);
    --cs-color-warning-40: var(--cs-color-pink-40);
    --cs-color-warning-30: var(--cs-color-pink-30);
    --cs-color-warning-20: var(--cs-color-pink-20);
    --cs-color-warning-10: var(--cs-color-pink-10);
    --cs-color-warning-05: var(--cs-color-pink-05);
    --cs-color-warning: var(--cs-color-pink-60);
    --cs-color-warning-key: 60;
    --cs-color-warning-on: var(--cs-color-pink-on);
  }

  .cs-warning-cerise {
    --cs-color-warning-95: var(--cs-color-cerise-95);
    --cs-color-warning-90: var(--cs-color-cerise-90);
    --cs-color-warning-80: var(--cs-color-cerise-80);
    --cs-color-warning-70: var(--cs-color-cerise-70);
    --cs-color-warning-60: var(--cs-color-cerise-60);
    --cs-color-warning-50: var(--cs-color-cerise-50);
    --cs-color-warning-40: var(--cs-color-cerise-40);
    --cs-color-warning-30: var(--cs-color-cerise-30);
    --cs-color-warning-20: var(--cs-color-cerise-20);
    --cs-color-warning-10: var(--cs-color-cerise-10);
    --cs-color-warning-05: var(--cs-color-cerise-05);
    --cs-color-warning: var(--cs-color-cerise-50);
    --cs-color-warning-key: 50;
    --cs-color-warning-on: var(--cs-color-cerise-on);
  }

  .cs-warning-ruby {
    --cs-color-warning-95: var(--cs-color-ruby-95);
    --cs-color-warning-90: var(--cs-color-ruby-90);
    --cs-color-warning-80: var(--cs-color-ruby-80);
    --cs-color-warning-70: var(--cs-color-ruby-70);
    --cs-color-warning-60: var(--cs-color-ruby-60);
    --cs-color-warning-50: var(--cs-color-ruby-50);
    --cs-color-warning-40: var(--cs-color-ruby-40);
    --cs-color-warning-30: var(--cs-color-ruby-30);
    --cs-color-warning-20: var(--cs-color-ruby-20);
    --cs-color-warning-10: var(--cs-color-ruby-10);
    --cs-color-warning-05: var(--cs-color-ruby-05);
    --cs-color-warning: var(--cs-color-ruby-30);
    --cs-color-warning-key: 30;
    --cs-color-warning-on: var(--cs-color-ruby-on);
  }

  .cs-warning-sky {
    --cs-color-warning-95: var(--cs-color-sky-95);
    --cs-color-warning-90: var(--cs-color-sky-90);
    --cs-color-warning-80: var(--cs-color-sky-80);
    --cs-color-warning-70: var(--cs-color-sky-70);
    --cs-color-warning-60: var(--cs-color-sky-60);
    --cs-color-warning-50: var(--cs-color-sky-50);
    --cs-color-warning-40: var(--cs-color-sky-40);
    --cs-color-warning-30: var(--cs-color-sky-30);
    --cs-color-warning-20: var(--cs-color-sky-20);
    --cs-color-warning-10: var(--cs-color-sky-10);
    --cs-color-warning-05: var(--cs-color-sky-05);
    --cs-color-warning: var(--cs-color-sky-90);
    --cs-color-warning-key: 90;
    --cs-color-warning-on: var(--cs-color-sky-on);
  }

  .cs-warning-cyan {
    --cs-color-warning-95: var(--cs-color-cyan-95);
    --cs-color-warning-90: var(--cs-color-cyan-90);
    --cs-color-warning-80: var(--cs-color-cyan-80);
    --cs-color-warning-70: var(--cs-color-cyan-70);
    --cs-color-warning-60: var(--cs-color-cyan-60);
    --cs-color-warning-50: var(--cs-color-cyan-50);
    --cs-color-warning-40: var(--cs-color-cyan-40);
    --cs-color-warning-30: var(--cs-color-cyan-30);
    --cs-color-warning-20: var(--cs-color-cyan-20);
    --cs-color-warning-10: var(--cs-color-cyan-10);
    --cs-color-warning-05: var(--cs-color-cyan-05);
    --cs-color-warning: var(--cs-color-cyan-70);
    --cs-color-warning-key: 70;
    --cs-color-warning-on: var(--cs-color-cyan-on);
  }

  .cs-warning-turquoise {
    --cs-color-warning-95: var(--cs-color-turquoise-95);
    --cs-color-warning-90: var(--cs-color-turquoise-90);
    --cs-color-warning-80: var(--cs-color-turquoise-80);
    --cs-color-warning-70: var(--cs-color-turquoise-70);
    --cs-color-warning-60: var(--cs-color-turquoise-60);
    --cs-color-warning-50: var(--cs-color-turquoise-50);
    --cs-color-warning-40: var(--cs-color-turquoise-40);
    --cs-color-warning-30: var(--cs-color-turquoise-30);
    --cs-color-warning-20: var(--cs-color-turquoise-20);
    --cs-color-warning-10: var(--cs-color-turquoise-10);
    --cs-color-warning-05: var(--cs-color-turquoise-05);
    --cs-color-warning: var(--cs-color-turquoise-50);
    --cs-color-warning-key: 50;
    --cs-color-warning-on: var(--cs-color-turquoise-on);
  }

  .cs-warning-navy {
    --cs-color-warning-95: var(--cs-color-navy-95);
    --cs-color-warning-90: var(--cs-color-navy-90);
    --cs-color-warning-80: var(--cs-color-navy-80);
    --cs-color-warning-70: var(--cs-color-navy-70);
    --cs-color-warning-60: var(--cs-color-navy-60);
    --cs-color-warning-50: var(--cs-color-navy-50);
    --cs-color-warning-40: var(--cs-color-navy-40);
    --cs-color-warning-30: var(--cs-color-navy-30);
    --cs-color-warning-20: var(--cs-color-navy-20);
    --cs-color-warning-10: var(--cs-color-navy-10);
    --cs-color-warning-05: var(--cs-color-navy-05);
    --cs-color-warning: var(--cs-color-navy-10);
    --cs-color-warning-key: 10;
    --cs-color-warning-on: var(--cs-color-navy-on);
  }

  .cs-warning-mint {
    --cs-color-warning-95: var(--cs-color-mint-95);
    --cs-color-warning-90: var(--cs-color-mint-90);
    --cs-color-warning-80: var(--cs-color-mint-80);
    --cs-color-warning-70: var(--cs-color-mint-70);
    --cs-color-warning-60: var(--cs-color-mint-60);
    --cs-color-warning-50: var(--cs-color-mint-50);
    --cs-color-warning-40: var(--cs-color-mint-40);
    --cs-color-warning-30: var(--cs-color-mint-30);
    --cs-color-warning-20: var(--cs-color-mint-20);
    --cs-color-warning-10: var(--cs-color-mint-10);
    --cs-color-warning-05: var(--cs-color-mint-05);
    --cs-color-warning: var(--cs-color-mint-80);
    --cs-color-warning-key: 80;
    --cs-color-warning-on: var(--cs-color-mint-on);
  }

  .cs-warning-green {
    --cs-color-warning-95: var(--cs-color-green-95);
    --cs-color-warning-90: var(--cs-color-green-90);
    --cs-color-warning-80: var(--cs-color-green-80);
    --cs-color-warning-70: var(--cs-color-green-70);
    --cs-color-warning-60: var(--cs-color-green-60);
    --cs-color-warning-50: var(--cs-color-green-50);
    --cs-color-warning-40: var(--cs-color-green-40);
    --cs-color-warning-30: var(--cs-color-green-30);
    --cs-color-warning-20: var(--cs-color-green-20);
    --cs-color-warning-10: var(--cs-color-green-10);
    --cs-color-warning-05: var(--cs-color-green-05);
    --cs-color-warning: var(--cs-color-green-70);
    --cs-color-warning-key: 70;
    --cs-color-warning-on: var(--cs-color-green-on);
  }

  .cs-warning-moss {
    --cs-color-warning-95: var(--cs-color-moss-95);
    --cs-color-warning-90: var(--cs-color-moss-90);
    --cs-color-warning-80: var(--cs-color-moss-80);
    --cs-color-warning-70: var(--cs-color-moss-70);
    --cs-color-warning-60: var(--cs-color-moss-60);
    --cs-color-warning-50: var(--cs-color-moss-50);
    --cs-color-warning-40: var(--cs-color-moss-40);
    --cs-color-warning-30: var(--cs-color-moss-30);
    --cs-color-warning-20: var(--cs-color-moss-20);
    --cs-color-warning-10: var(--cs-color-moss-10);
    --cs-color-warning-05: var(--cs-color-moss-05);
    --cs-color-warning: var(--cs-color-moss-40);
    --cs-color-warning-key: 40;
    --cs-color-warning-on: var(--cs-color-moss-on);
  }

  .cs-warning-olive-drab {
    --cs-color-warning-95: var(--cs-color-olive-drab-95);
    --cs-color-warning-90: var(--cs-color-olive-drab-90);
    --cs-color-warning-80: var(--cs-color-olive-drab-80);
    --cs-color-warning-70: var(--cs-color-olive-drab-70);
    --cs-color-warning-60: var(--cs-color-olive-drab-60);
    --cs-color-warning-50: var(--cs-color-olive-drab-50);
    --cs-color-warning-40: var(--cs-color-olive-drab-40);
    --cs-color-warning-30: var(--cs-color-olive-drab-30);
    --cs-color-warning-20: var(--cs-color-olive-drab-20);
    --cs-color-warning-10: var(--cs-color-olive-drab-10);
    --cs-color-warning-05: var(--cs-color-olive-drab-05);
    --cs-color-warning: var(--cs-color-olive-drab-20);
    --cs-color-warning-key: 20;
    --cs-color-warning-on: var(--cs-color-olive-drab-on);
  }

  .cs-warning-gray {
    --cs-color-warning-95: var(--cs-color-gray-95);
    --cs-color-warning-90: var(--cs-color-gray-90);
    --cs-color-warning-80: var(--cs-color-gray-80);
    --cs-color-warning-70: var(--cs-color-gray-70);
    --cs-color-warning-60: var(--cs-color-gray-60);
    --cs-color-warning-50: var(--cs-color-gray-50);
    --cs-color-warning-40: var(--cs-color-gray-40);
    --cs-color-warning-30: var(--cs-color-gray-30);
    --cs-color-warning-20: var(--cs-color-gray-20);
    --cs-color-warning-10: var(--cs-color-gray-10);
    --cs-color-warning-05: var(--cs-color-gray-05);
    --cs-color-warning: var(--cs-color-gray-95);
    --cs-color-warning-key: 95;
    --cs-color-warning-on: var(--cs-color-gray-on);
  }

  .cs-warning-graphite {
    --cs-color-warning-95: var(--cs-color-graphite-95);
    --cs-color-warning-90: var(--cs-color-graphite-90);
    --cs-color-warning-80: var(--cs-color-graphite-80);
    --cs-color-warning-70: var(--cs-color-graphite-70);
    --cs-color-warning-60: var(--cs-color-graphite-60);
    --cs-color-warning-50: var(--cs-color-graphite-50);
    --cs-color-warning-40: var(--cs-color-graphite-40);
    --cs-color-warning-30: var(--cs-color-graphite-30);
    --cs-color-warning-20: var(--cs-color-graphite-20);
    --cs-color-warning-10: var(--cs-color-graphite-10);
    --cs-color-warning-05: var(--cs-color-graphite-05);
    --cs-color-warning: var(--cs-color-graphite-40);
    --cs-color-warning-key: 40;
    --cs-color-warning-on: var(--cs-color-graphite-on);
  }

  .cs-warning-purple {
    --cs-color-warning-95: var(--cs-color-purple-95);
    --cs-color-warning-90: var(--cs-color-purple-90);
    --cs-color-warning-80: var(--cs-color-purple-80);
    --cs-color-warning-70: var(--cs-color-purple-70);
    --cs-color-warning-60: var(--cs-color-purple-60);
    --cs-color-warning-50: var(--cs-color-purple-50);
    --cs-color-warning-40: var(--cs-color-purple-40);
    --cs-color-warning-30: var(--cs-color-purple-30);
    --cs-color-warning-20: var(--cs-color-purple-20);
    --cs-color-warning-10: var(--cs-color-purple-10);
    --cs-color-warning-05: var(--cs-color-purple-05);
    --cs-color-warning: var(--cs-color-purple-50);
    --cs-color-warning-key: 50;
    --cs-color-warning-on: var(--cs-color-purple-on);
  }

  /* danger — defaults to cerise */
  :where(:root), /* default */
  .cs-danger-cerise {
    --cs-color-danger-95: var(--cs-color-cerise-95);
    --cs-color-danger-90: var(--cs-color-cerise-90);
    --cs-color-danger-80: var(--cs-color-cerise-80);
    --cs-color-danger-70: var(--cs-color-cerise-70);
    --cs-color-danger-60: var(--cs-color-cerise-60);
    --cs-color-danger-50: var(--cs-color-cerise-50);
    --cs-color-danger-40: var(--cs-color-cerise-40);
    --cs-color-danger-30: var(--cs-color-cerise-30);
    --cs-color-danger-20: var(--cs-color-cerise-20);
    --cs-color-danger-10: var(--cs-color-cerise-10);
    --cs-color-danger-05: var(--cs-color-cerise-05);
    --cs-color-danger: var(--cs-color-cerise-50);
    --cs-color-danger-key: 50;
    --cs-color-danger-on: var(--cs-color-cerise-on);
  }

  .cs-danger-lemon {
    --cs-color-danger-95: var(--cs-color-lemon-95);
    --cs-color-danger-90: var(--cs-color-lemon-90);
    --cs-color-danger-80: var(--cs-color-lemon-80);
    --cs-color-danger-70: var(--cs-color-lemon-70);
    --cs-color-danger-60: var(--cs-color-lemon-60);
    --cs-color-danger-50: var(--cs-color-lemon-50);
    --cs-color-danger-40: var(--cs-color-lemon-40);
    --cs-color-danger-30: var(--cs-color-lemon-30);
    --cs-color-danger-20: var(--cs-color-lemon-20);
    --cs-color-danger-10: var(--cs-color-lemon-10);
    --cs-color-danger-05: var(--cs-color-lemon-05);
    --cs-color-danger: var(--cs-color-lemon-90);
    --cs-color-danger-key: 90;
    --cs-color-danger-on: var(--cs-color-lemon-on);
  }

  .cs-danger-yellow {
    --cs-color-danger-95: var(--cs-color-yellow-95);
    --cs-color-danger-90: var(--cs-color-yellow-90);
    --cs-color-danger-80: var(--cs-color-yellow-80);
    --cs-color-danger-70: var(--cs-color-yellow-70);
    --cs-color-danger-60: var(--cs-color-yellow-60);
    --cs-color-danger-50: var(--cs-color-yellow-50);
    --cs-color-danger-40: var(--cs-color-yellow-40);
    --cs-color-danger-30: var(--cs-color-yellow-30);
    --cs-color-danger-20: var(--cs-color-yellow-20);
    --cs-color-danger-10: var(--cs-color-yellow-10);
    --cs-color-danger-05: var(--cs-color-yellow-05);
    --cs-color-danger: var(--cs-color-yellow-80);
    --cs-color-danger-key: 80;
    --cs-color-danger-on: var(--cs-color-yellow-on);
  }

  .cs-danger-orange {
    --cs-color-danger-95: var(--cs-color-orange-95);
    --cs-color-danger-90: var(--cs-color-orange-90);
    --cs-color-danger-80: var(--cs-color-orange-80);
    --cs-color-danger-70: var(--cs-color-orange-70);
    --cs-color-danger-60: var(--cs-color-orange-60);
    --cs-color-danger-50: var(--cs-color-orange-50);
    --cs-color-danger-40: var(--cs-color-orange-40);
    --cs-color-danger-30: var(--cs-color-orange-30);
    --cs-color-danger-20: var(--cs-color-orange-20);
    --cs-color-danger-10: var(--cs-color-orange-10);
    --cs-color-danger-05: var(--cs-color-orange-05);
    --cs-color-danger: var(--cs-color-orange-60);
    --cs-color-danger-key: 60;
    --cs-color-danger-on: var(--cs-color-orange-on);
  }

  .cs-danger-vermilion {
    --cs-color-danger-95: var(--cs-color-vermilion-95);
    --cs-color-danger-90: var(--cs-color-vermilion-90);
    --cs-color-danger-80: var(--cs-color-vermilion-80);
    --cs-color-danger-70: var(--cs-color-vermilion-70);
    --cs-color-danger-60: var(--cs-color-vermilion-60);
    --cs-color-danger-50: var(--cs-color-vermilion-50);
    --cs-color-danger-40: var(--cs-color-vermilion-40);
    --cs-color-danger-30: var(--cs-color-vermilion-30);
    --cs-color-danger-20: var(--cs-color-vermilion-20);
    --cs-color-danger-10: var(--cs-color-vermilion-10);
    --cs-color-danger-05: var(--cs-color-vermilion-05);
    --cs-color-danger: var(--cs-color-vermilion-50);
    --cs-color-danger-key: 50;
    --cs-color-danger-on: var(--cs-color-vermilion-on);
  }

  .cs-danger-rose {
    --cs-color-danger-95: var(--cs-color-rose-95);
    --cs-color-danger-90: var(--cs-color-rose-90);
    --cs-color-danger-80: var(--cs-color-rose-80);
    --cs-color-danger-70: var(--cs-color-rose-70);
    --cs-color-danger-60: var(--cs-color-rose-60);
    --cs-color-danger-50: var(--cs-color-rose-50);
    --cs-color-danger-40: var(--cs-color-rose-40);
    --cs-color-danger-30: var(--cs-color-rose-30);
    --cs-color-danger-20: var(--cs-color-rose-20);
    --cs-color-danger-10: var(--cs-color-rose-10);
    --cs-color-danger-05: var(--cs-color-rose-05);
    --cs-color-danger: var(--cs-color-rose-80);
    --cs-color-danger-key: 80;
    --cs-color-danger-on: var(--cs-color-rose-on);
  }

  .cs-danger-pink {
    --cs-color-danger-95: var(--cs-color-pink-95);
    --cs-color-danger-90: var(--cs-color-pink-90);
    --cs-color-danger-80: var(--cs-color-pink-80);
    --cs-color-danger-70: var(--cs-color-pink-70);
    --cs-color-danger-60: var(--cs-color-pink-60);
    --cs-color-danger-50: var(--cs-color-pink-50);
    --cs-color-danger-40: var(--cs-color-pink-40);
    --cs-color-danger-30: var(--cs-color-pink-30);
    --cs-color-danger-20: var(--cs-color-pink-20);
    --cs-color-danger-10: var(--cs-color-pink-10);
    --cs-color-danger-05: var(--cs-color-pink-05);
    --cs-color-danger: var(--cs-color-pink-60);
    --cs-color-danger-key: 60;
    --cs-color-danger-on: var(--cs-color-pink-on);
  }

  .cs-danger-ruby {
    --cs-color-danger-95: var(--cs-color-ruby-95);
    --cs-color-danger-90: var(--cs-color-ruby-90);
    --cs-color-danger-80: var(--cs-color-ruby-80);
    --cs-color-danger-70: var(--cs-color-ruby-70);
    --cs-color-danger-60: var(--cs-color-ruby-60);
    --cs-color-danger-50: var(--cs-color-ruby-50);
    --cs-color-danger-40: var(--cs-color-ruby-40);
    --cs-color-danger-30: var(--cs-color-ruby-30);
    --cs-color-danger-20: var(--cs-color-ruby-20);
    --cs-color-danger-10: var(--cs-color-ruby-10);
    --cs-color-danger-05: var(--cs-color-ruby-05);
    --cs-color-danger: var(--cs-color-ruby-30);
    --cs-color-danger-key: 30;
    --cs-color-danger-on: var(--cs-color-ruby-on);
  }

  .cs-danger-sky {
    --cs-color-danger-95: var(--cs-color-sky-95);
    --cs-color-danger-90: var(--cs-color-sky-90);
    --cs-color-danger-80: var(--cs-color-sky-80);
    --cs-color-danger-70: var(--cs-color-sky-70);
    --cs-color-danger-60: var(--cs-color-sky-60);
    --cs-color-danger-50: var(--cs-color-sky-50);
    --cs-color-danger-40: var(--cs-color-sky-40);
    --cs-color-danger-30: var(--cs-color-sky-30);
    --cs-color-danger-20: var(--cs-color-sky-20);
    --cs-color-danger-10: var(--cs-color-sky-10);
    --cs-color-danger-05: var(--cs-color-sky-05);
    --cs-color-danger: var(--cs-color-sky-90);
    --cs-color-danger-key: 90;
    --cs-color-danger-on: var(--cs-color-sky-on);
  }

  .cs-danger-cyan {
    --cs-color-danger-95: var(--cs-color-cyan-95);
    --cs-color-danger-90: var(--cs-color-cyan-90);
    --cs-color-danger-80: var(--cs-color-cyan-80);
    --cs-color-danger-70: var(--cs-color-cyan-70);
    --cs-color-danger-60: var(--cs-color-cyan-60);
    --cs-color-danger-50: var(--cs-color-cyan-50);
    --cs-color-danger-40: var(--cs-color-cyan-40);
    --cs-color-danger-30: var(--cs-color-cyan-30);
    --cs-color-danger-20: var(--cs-color-cyan-20);
    --cs-color-danger-10: var(--cs-color-cyan-10);
    --cs-color-danger-05: var(--cs-color-cyan-05);
    --cs-color-danger: var(--cs-color-cyan-70);
    --cs-color-danger-key: 70;
    --cs-color-danger-on: var(--cs-color-cyan-on);
  }

  .cs-danger-turquoise {
    --cs-color-danger-95: var(--cs-color-turquoise-95);
    --cs-color-danger-90: var(--cs-color-turquoise-90);
    --cs-color-danger-80: var(--cs-color-turquoise-80);
    --cs-color-danger-70: var(--cs-color-turquoise-70);
    --cs-color-danger-60: var(--cs-color-turquoise-60);
    --cs-color-danger-50: var(--cs-color-turquoise-50);
    --cs-color-danger-40: var(--cs-color-turquoise-40);
    --cs-color-danger-30: var(--cs-color-turquoise-30);
    --cs-color-danger-20: var(--cs-color-turquoise-20);
    --cs-color-danger-10: var(--cs-color-turquoise-10);
    --cs-color-danger-05: var(--cs-color-turquoise-05);
    --cs-color-danger: var(--cs-color-turquoise-50);
    --cs-color-danger-key: 50;
    --cs-color-danger-on: var(--cs-color-turquoise-on);
  }

  .cs-danger-navy {
    --cs-color-danger-95: var(--cs-color-navy-95);
    --cs-color-danger-90: var(--cs-color-navy-90);
    --cs-color-danger-80: var(--cs-color-navy-80);
    --cs-color-danger-70: var(--cs-color-navy-70);
    --cs-color-danger-60: var(--cs-color-navy-60);
    --cs-color-danger-50: var(--cs-color-navy-50);
    --cs-color-danger-40: var(--cs-color-navy-40);
    --cs-color-danger-30: var(--cs-color-navy-30);
    --cs-color-danger-20: var(--cs-color-navy-20);
    --cs-color-danger-10: var(--cs-color-navy-10);
    --cs-color-danger-05: var(--cs-color-navy-05);
    --cs-color-danger: var(--cs-color-navy-10);
    --cs-color-danger-key: 10;
    --cs-color-danger-on: var(--cs-color-navy-on);
  }

  .cs-danger-mint {
    --cs-color-danger-95: var(--cs-color-mint-95);
    --cs-color-danger-90: var(--cs-color-mint-90);
    --cs-color-danger-80: var(--cs-color-mint-80);
    --cs-color-danger-70: var(--cs-color-mint-70);
    --cs-color-danger-60: var(--cs-color-mint-60);
    --cs-color-danger-50: var(--cs-color-mint-50);
    --cs-color-danger-40: var(--cs-color-mint-40);
    --cs-color-danger-30: var(--cs-color-mint-30);
    --cs-color-danger-20: var(--cs-color-mint-20);
    --cs-color-danger-10: var(--cs-color-mint-10);
    --cs-color-danger-05: var(--cs-color-mint-05);
    --cs-color-danger: var(--cs-color-mint-80);
    --cs-color-danger-key: 80;
    --cs-color-danger-on: var(--cs-color-mint-on);
  }

  .cs-danger-green {
    --cs-color-danger-95: var(--cs-color-green-95);
    --cs-color-danger-90: var(--cs-color-green-90);
    --cs-color-danger-80: var(--cs-color-green-80);
    --cs-color-danger-70: var(--cs-color-green-70);
    --cs-color-danger-60: var(--cs-color-green-60);
    --cs-color-danger-50: var(--cs-color-green-50);
    --cs-color-danger-40: var(--cs-color-green-40);
    --cs-color-danger-30: var(--cs-color-green-30);
    --cs-color-danger-20: var(--cs-color-green-20);
    --cs-color-danger-10: var(--cs-color-green-10);
    --cs-color-danger-05: var(--cs-color-green-05);
    --cs-color-danger: var(--cs-color-green-70);
    --cs-color-danger-key: 70;
    --cs-color-danger-on: var(--cs-color-green-on);
  }

  .cs-danger-moss {
    --cs-color-danger-95: var(--cs-color-moss-95);
    --cs-color-danger-90: var(--cs-color-moss-90);
    --cs-color-danger-80: var(--cs-color-moss-80);
    --cs-color-danger-70: var(--cs-color-moss-70);
    --cs-color-danger-60: var(--cs-color-moss-60);
    --cs-color-danger-50: var(--cs-color-moss-50);
    --cs-color-danger-40: var(--cs-color-moss-40);
    --cs-color-danger-30: var(--cs-color-moss-30);
    --cs-color-danger-20: var(--cs-color-moss-20);
    --cs-color-danger-10: var(--cs-color-moss-10);
    --cs-color-danger-05: var(--cs-color-moss-05);
    --cs-color-danger: var(--cs-color-moss-40);
    --cs-color-danger-key: 40;
    --cs-color-danger-on: var(--cs-color-moss-on);
  }

  .cs-danger-olive-drab {
    --cs-color-danger-95: var(--cs-color-olive-drab-95);
    --cs-color-danger-90: var(--cs-color-olive-drab-90);
    --cs-color-danger-80: var(--cs-color-olive-drab-80);
    --cs-color-danger-70: var(--cs-color-olive-drab-70);
    --cs-color-danger-60: var(--cs-color-olive-drab-60);
    --cs-color-danger-50: var(--cs-color-olive-drab-50);
    --cs-color-danger-40: var(--cs-color-olive-drab-40);
    --cs-color-danger-30: var(--cs-color-olive-drab-30);
    --cs-color-danger-20: var(--cs-color-olive-drab-20);
    --cs-color-danger-10: var(--cs-color-olive-drab-10);
    --cs-color-danger-05: var(--cs-color-olive-drab-05);
    --cs-color-danger: var(--cs-color-olive-drab-20);
    --cs-color-danger-key: 20;
    --cs-color-danger-on: var(--cs-color-olive-drab-on);
  }

  .cs-danger-gray {
    --cs-color-danger-95: var(--cs-color-gray-95);
    --cs-color-danger-90: var(--cs-color-gray-90);
    --cs-color-danger-80: var(--cs-color-gray-80);
    --cs-color-danger-70: var(--cs-color-gray-70);
    --cs-color-danger-60: var(--cs-color-gray-60);
    --cs-color-danger-50: var(--cs-color-gray-50);
    --cs-color-danger-40: var(--cs-color-gray-40);
    --cs-color-danger-30: var(--cs-color-gray-30);
    --cs-color-danger-20: var(--cs-color-gray-20);
    --cs-color-danger-10: var(--cs-color-gray-10);
    --cs-color-danger-05: var(--cs-color-gray-05);
    --cs-color-danger: var(--cs-color-gray-95);
    --cs-color-danger-key: 95;
    --cs-color-danger-on: var(--cs-color-gray-on);
  }

  .cs-danger-graphite {
    --cs-color-danger-95: var(--cs-color-graphite-95);
    --cs-color-danger-90: var(--cs-color-graphite-90);
    --cs-color-danger-80: var(--cs-color-graphite-80);
    --cs-color-danger-70: var(--cs-color-graphite-70);
    --cs-color-danger-60: var(--cs-color-graphite-60);
    --cs-color-danger-50: var(--cs-color-graphite-50);
    --cs-color-danger-40: var(--cs-color-graphite-40);
    --cs-color-danger-30: var(--cs-color-graphite-30);
    --cs-color-danger-20: var(--cs-color-graphite-20);
    --cs-color-danger-10: var(--cs-color-graphite-10);
    --cs-color-danger-05: var(--cs-color-graphite-05);
    --cs-color-danger: var(--cs-color-graphite-40);
    --cs-color-danger-key: 40;
    --cs-color-danger-on: var(--cs-color-graphite-on);
  }

  .cs-danger-purple {
    --cs-color-danger-95: var(--cs-color-purple-95);
    --cs-color-danger-90: var(--cs-color-purple-90);
    --cs-color-danger-80: var(--cs-color-purple-80);
    --cs-color-danger-70: var(--cs-color-purple-70);
    --cs-color-danger-60: var(--cs-color-purple-60);
    --cs-color-danger-50: var(--cs-color-purple-50);
    --cs-color-danger-40: var(--cs-color-purple-40);
    --cs-color-danger-30: var(--cs-color-purple-30);
    --cs-color-danger-20: var(--cs-color-purple-20);
    --cs-color-danger-10: var(--cs-color-purple-10);
    --cs-color-danger-05: var(--cs-color-purple-05);
    --cs-color-danger: var(--cs-color-purple-50);
    --cs-color-danger-key: 50;
    --cs-color-danger-on: var(--cs-color-purple-on);
  }

  /* link — defaults to cyan */
  :where(:root), /* default */
  .cs-link-cyan {
    --cs-color-link-95: var(--cs-color-cyan-95);
    --cs-color-link-90: var(--cs-color-cyan-90);
    --cs-color-link-80: var(--cs-color-cyan-80);
    --cs-color-link-70: var(--cs-color-cyan-70);
    --cs-color-link-60: var(--cs-color-cyan-60);
    --cs-color-link-50: var(--cs-color-cyan-50);
    --cs-color-link-40: var(--cs-color-cyan-40);
    --cs-color-link-30: var(--cs-color-cyan-30);
    --cs-color-link-20: var(--cs-color-cyan-20);
    --cs-color-link-10: var(--cs-color-cyan-10);
    --cs-color-link-05: var(--cs-color-cyan-05);
    --cs-color-link: var(--cs-color-cyan-70);
    --cs-color-link-key: 70;
    --cs-color-link-on: var(--cs-color-cyan-on);
  }

  .cs-link-lemon {
    --cs-color-link-95: var(--cs-color-lemon-95);
    --cs-color-link-90: var(--cs-color-lemon-90);
    --cs-color-link-80: var(--cs-color-lemon-80);
    --cs-color-link-70: var(--cs-color-lemon-70);
    --cs-color-link-60: var(--cs-color-lemon-60);
    --cs-color-link-50: var(--cs-color-lemon-50);
    --cs-color-link-40: var(--cs-color-lemon-40);
    --cs-color-link-30: var(--cs-color-lemon-30);
    --cs-color-link-20: var(--cs-color-lemon-20);
    --cs-color-link-10: var(--cs-color-lemon-10);
    --cs-color-link-05: var(--cs-color-lemon-05);
    --cs-color-link: var(--cs-color-lemon-90);
    --cs-color-link-key: 90;
    --cs-color-link-on: var(--cs-color-lemon-on);
  }

  .cs-link-yellow {
    --cs-color-link-95: var(--cs-color-yellow-95);
    --cs-color-link-90: var(--cs-color-yellow-90);
    --cs-color-link-80: var(--cs-color-yellow-80);
    --cs-color-link-70: var(--cs-color-yellow-70);
    --cs-color-link-60: var(--cs-color-yellow-60);
    --cs-color-link-50: var(--cs-color-yellow-50);
    --cs-color-link-40: var(--cs-color-yellow-40);
    --cs-color-link-30: var(--cs-color-yellow-30);
    --cs-color-link-20: var(--cs-color-yellow-20);
    --cs-color-link-10: var(--cs-color-yellow-10);
    --cs-color-link-05: var(--cs-color-yellow-05);
    --cs-color-link: var(--cs-color-yellow-80);
    --cs-color-link-key: 80;
    --cs-color-link-on: var(--cs-color-yellow-on);
  }

  .cs-link-orange {
    --cs-color-link-95: var(--cs-color-orange-95);
    --cs-color-link-90: var(--cs-color-orange-90);
    --cs-color-link-80: var(--cs-color-orange-80);
    --cs-color-link-70: var(--cs-color-orange-70);
    --cs-color-link-60: var(--cs-color-orange-60);
    --cs-color-link-50: var(--cs-color-orange-50);
    --cs-color-link-40: var(--cs-color-orange-40);
    --cs-color-link-30: var(--cs-color-orange-30);
    --cs-color-link-20: var(--cs-color-orange-20);
    --cs-color-link-10: var(--cs-color-orange-10);
    --cs-color-link-05: var(--cs-color-orange-05);
    --cs-color-link: var(--cs-color-orange-60);
    --cs-color-link-key: 60;
    --cs-color-link-on: var(--cs-color-orange-on);
  }

  .cs-link-vermilion {
    --cs-color-link-95: var(--cs-color-vermilion-95);
    --cs-color-link-90: var(--cs-color-vermilion-90);
    --cs-color-link-80: var(--cs-color-vermilion-80);
    --cs-color-link-70: var(--cs-color-vermilion-70);
    --cs-color-link-60: var(--cs-color-vermilion-60);
    --cs-color-link-50: var(--cs-color-vermilion-50);
    --cs-color-link-40: var(--cs-color-vermilion-40);
    --cs-color-link-30: var(--cs-color-vermilion-30);
    --cs-color-link-20: var(--cs-color-vermilion-20);
    --cs-color-link-10: var(--cs-color-vermilion-10);
    --cs-color-link-05: var(--cs-color-vermilion-05);
    --cs-color-link: var(--cs-color-vermilion-50);
    --cs-color-link-key: 50;
    --cs-color-link-on: var(--cs-color-vermilion-on);
  }

  .cs-link-rose {
    --cs-color-link-95: var(--cs-color-rose-95);
    --cs-color-link-90: var(--cs-color-rose-90);
    --cs-color-link-80: var(--cs-color-rose-80);
    --cs-color-link-70: var(--cs-color-rose-70);
    --cs-color-link-60: var(--cs-color-rose-60);
    --cs-color-link-50: var(--cs-color-rose-50);
    --cs-color-link-40: var(--cs-color-rose-40);
    --cs-color-link-30: var(--cs-color-rose-30);
    --cs-color-link-20: var(--cs-color-rose-20);
    --cs-color-link-10: var(--cs-color-rose-10);
    --cs-color-link-05: var(--cs-color-rose-05);
    --cs-color-link: var(--cs-color-rose-80);
    --cs-color-link-key: 80;
    --cs-color-link-on: var(--cs-color-rose-on);
  }

  .cs-link-pink {
    --cs-color-link-95: var(--cs-color-pink-95);
    --cs-color-link-90: var(--cs-color-pink-90);
    --cs-color-link-80: var(--cs-color-pink-80);
    --cs-color-link-70: var(--cs-color-pink-70);
    --cs-color-link-60: var(--cs-color-pink-60);
    --cs-color-link-50: var(--cs-color-pink-50);
    --cs-color-link-40: var(--cs-color-pink-40);
    --cs-color-link-30: var(--cs-color-pink-30);
    --cs-color-link-20: var(--cs-color-pink-20);
    --cs-color-link-10: var(--cs-color-pink-10);
    --cs-color-link-05: var(--cs-color-pink-05);
    --cs-color-link: var(--cs-color-pink-60);
    --cs-color-link-key: 60;
    --cs-color-link-on: var(--cs-color-pink-on);
  }

  .cs-link-cerise {
    --cs-color-link-95: var(--cs-color-cerise-95);
    --cs-color-link-90: var(--cs-color-cerise-90);
    --cs-color-link-80: var(--cs-color-cerise-80);
    --cs-color-link-70: var(--cs-color-cerise-70);
    --cs-color-link-60: var(--cs-color-cerise-60);
    --cs-color-link-50: var(--cs-color-cerise-50);
    --cs-color-link-40: var(--cs-color-cerise-40);
    --cs-color-link-30: var(--cs-color-cerise-30);
    --cs-color-link-20: var(--cs-color-cerise-20);
    --cs-color-link-10: var(--cs-color-cerise-10);
    --cs-color-link-05: var(--cs-color-cerise-05);
    --cs-color-link: var(--cs-color-cerise-50);
    --cs-color-link-key: 50;
    --cs-color-link-on: var(--cs-color-cerise-on);
  }

  .cs-link-ruby {
    --cs-color-link-95: var(--cs-color-ruby-95);
    --cs-color-link-90: var(--cs-color-ruby-90);
    --cs-color-link-80: var(--cs-color-ruby-80);
    --cs-color-link-70: var(--cs-color-ruby-70);
    --cs-color-link-60: var(--cs-color-ruby-60);
    --cs-color-link-50: var(--cs-color-ruby-50);
    --cs-color-link-40: var(--cs-color-ruby-40);
    --cs-color-link-30: var(--cs-color-ruby-30);
    --cs-color-link-20: var(--cs-color-ruby-20);
    --cs-color-link-10: var(--cs-color-ruby-10);
    --cs-color-link-05: var(--cs-color-ruby-05);
    --cs-color-link: var(--cs-color-ruby-30);
    --cs-color-link-key: 30;
    --cs-color-link-on: var(--cs-color-ruby-on);
  }

  .cs-link-sky {
    --cs-color-link-95: var(--cs-color-sky-95);
    --cs-color-link-90: var(--cs-color-sky-90);
    --cs-color-link-80: var(--cs-color-sky-80);
    --cs-color-link-70: var(--cs-color-sky-70);
    --cs-color-link-60: var(--cs-color-sky-60);
    --cs-color-link-50: var(--cs-color-sky-50);
    --cs-color-link-40: var(--cs-color-sky-40);
    --cs-color-link-30: var(--cs-color-sky-30);
    --cs-color-link-20: var(--cs-color-sky-20);
    --cs-color-link-10: var(--cs-color-sky-10);
    --cs-color-link-05: var(--cs-color-sky-05);
    --cs-color-link: var(--cs-color-sky-90);
    --cs-color-link-key: 90;
    --cs-color-link-on: var(--cs-color-sky-on);
  }

  .cs-link-turquoise {
    --cs-color-link-95: var(--cs-color-turquoise-95);
    --cs-color-link-90: var(--cs-color-turquoise-90);
    --cs-color-link-80: var(--cs-color-turquoise-80);
    --cs-color-link-70: var(--cs-color-turquoise-70);
    --cs-color-link-60: var(--cs-color-turquoise-60);
    --cs-color-link-50: var(--cs-color-turquoise-50);
    --cs-color-link-40: var(--cs-color-turquoise-40);
    --cs-color-link-30: var(--cs-color-turquoise-30);
    --cs-color-link-20: var(--cs-color-turquoise-20);
    --cs-color-link-10: var(--cs-color-turquoise-10);
    --cs-color-link-05: var(--cs-color-turquoise-05);
    --cs-color-link: var(--cs-color-turquoise-50);
    --cs-color-link-key: 50;
    --cs-color-link-on: var(--cs-color-turquoise-on);
  }

  .cs-link-navy {
    --cs-color-link-95: var(--cs-color-navy-95);
    --cs-color-link-90: var(--cs-color-navy-90);
    --cs-color-link-80: var(--cs-color-navy-80);
    --cs-color-link-70: var(--cs-color-navy-70);
    --cs-color-link-60: var(--cs-color-navy-60);
    --cs-color-link-50: var(--cs-color-navy-50);
    --cs-color-link-40: var(--cs-color-navy-40);
    --cs-color-link-30: var(--cs-color-navy-30);
    --cs-color-link-20: var(--cs-color-navy-20);
    --cs-color-link-10: var(--cs-color-navy-10);
    --cs-color-link-05: var(--cs-color-navy-05);
    --cs-color-link: var(--cs-color-navy-10);
    --cs-color-link-key: 10;
    --cs-color-link-on: var(--cs-color-navy-on);
  }

  .cs-link-mint {
    --cs-color-link-95: var(--cs-color-mint-95);
    --cs-color-link-90: var(--cs-color-mint-90);
    --cs-color-link-80: var(--cs-color-mint-80);
    --cs-color-link-70: var(--cs-color-mint-70);
    --cs-color-link-60: var(--cs-color-mint-60);
    --cs-color-link-50: var(--cs-color-mint-50);
    --cs-color-link-40: var(--cs-color-mint-40);
    --cs-color-link-30: var(--cs-color-mint-30);
    --cs-color-link-20: var(--cs-color-mint-20);
    --cs-color-link-10: var(--cs-color-mint-10);
    --cs-color-link-05: var(--cs-color-mint-05);
    --cs-color-link: var(--cs-color-mint-80);
    --cs-color-link-key: 80;
    --cs-color-link-on: var(--cs-color-mint-on);
  }

  .cs-link-green {
    --cs-color-link-95: var(--cs-color-green-95);
    --cs-color-link-90: var(--cs-color-green-90);
    --cs-color-link-80: var(--cs-color-green-80);
    --cs-color-link-70: var(--cs-color-green-70);
    --cs-color-link-60: var(--cs-color-green-60);
    --cs-color-link-50: var(--cs-color-green-50);
    --cs-color-link-40: var(--cs-color-green-40);
    --cs-color-link-30: var(--cs-color-green-30);
    --cs-color-link-20: var(--cs-color-green-20);
    --cs-color-link-10: var(--cs-color-green-10);
    --cs-color-link-05: var(--cs-color-green-05);
    --cs-color-link: var(--cs-color-green-70);
    --cs-color-link-key: 70;
    --cs-color-link-on: var(--cs-color-green-on);
  }

  .cs-link-moss {
    --cs-color-link-95: var(--cs-color-moss-95);
    --cs-color-link-90: var(--cs-color-moss-90);
    --cs-color-link-80: var(--cs-color-moss-80);
    --cs-color-link-70: var(--cs-color-moss-70);
    --cs-color-link-60: var(--cs-color-moss-60);
    --cs-color-link-50: var(--cs-color-moss-50);
    --cs-color-link-40: var(--cs-color-moss-40);
    --cs-color-link-30: var(--cs-color-moss-30);
    --cs-color-link-20: var(--cs-color-moss-20);
    --cs-color-link-10: var(--cs-color-moss-10);
    --cs-color-link-05: var(--cs-color-moss-05);
    --cs-color-link: var(--cs-color-moss-40);
    --cs-color-link-key: 40;
    --cs-color-link-on: var(--cs-color-moss-on);
  }

  .cs-link-olive-drab {
    --cs-color-link-95: var(--cs-color-olive-drab-95);
    --cs-color-link-90: var(--cs-color-olive-drab-90);
    --cs-color-link-80: var(--cs-color-olive-drab-80);
    --cs-color-link-70: var(--cs-color-olive-drab-70);
    --cs-color-link-60: var(--cs-color-olive-drab-60);
    --cs-color-link-50: var(--cs-color-olive-drab-50);
    --cs-color-link-40: var(--cs-color-olive-drab-40);
    --cs-color-link-30: var(--cs-color-olive-drab-30);
    --cs-color-link-20: var(--cs-color-olive-drab-20);
    --cs-color-link-10: var(--cs-color-olive-drab-10);
    --cs-color-link-05: var(--cs-color-olive-drab-05);
    --cs-color-link: var(--cs-color-olive-drab-20);
    --cs-color-link-key: 20;
    --cs-color-link-on: var(--cs-color-olive-drab-on);
  }

  .cs-link-gray {
    --cs-color-link-95: var(--cs-color-gray-95);
    --cs-color-link-90: var(--cs-color-gray-90);
    --cs-color-link-80: var(--cs-color-gray-80);
    --cs-color-link-70: var(--cs-color-gray-70);
    --cs-color-link-60: var(--cs-color-gray-60);
    --cs-color-link-50: var(--cs-color-gray-50);
    --cs-color-link-40: var(--cs-color-gray-40);
    --cs-color-link-30: var(--cs-color-gray-30);
    --cs-color-link-20: var(--cs-color-gray-20);
    --cs-color-link-10: var(--cs-color-gray-10);
    --cs-color-link-05: var(--cs-color-gray-05);
    --cs-color-link: var(--cs-color-gray-95);
    --cs-color-link-key: 95;
    --cs-color-link-on: var(--cs-color-gray-on);
  }

  .cs-link-graphite {
    --cs-color-link-95: var(--cs-color-graphite-95);
    --cs-color-link-90: var(--cs-color-graphite-90);
    --cs-color-link-80: var(--cs-color-graphite-80);
    --cs-color-link-70: var(--cs-color-graphite-70);
    --cs-color-link-60: var(--cs-color-graphite-60);
    --cs-color-link-50: var(--cs-color-graphite-50);
    --cs-color-link-40: var(--cs-color-graphite-40);
    --cs-color-link-30: var(--cs-color-graphite-30);
    --cs-color-link-20: var(--cs-color-graphite-20);
    --cs-color-link-10: var(--cs-color-graphite-10);
    --cs-color-link-05: var(--cs-color-graphite-05);
    --cs-color-link: var(--cs-color-graphite-40);
    --cs-color-link-key: 40;
    --cs-color-link-on: var(--cs-color-graphite-on);
  }

  .cs-link-purple {
    --cs-color-link-95: var(--cs-color-purple-95);
    --cs-color-link-90: var(--cs-color-purple-90);
    --cs-color-link-80: var(--cs-color-purple-80);
    --cs-color-link-70: var(--cs-color-purple-70);
    --cs-color-link-60: var(--cs-color-purple-60);
    --cs-color-link-50: var(--cs-color-purple-50);
    --cs-color-link-40: var(--cs-color-purple-40);
    --cs-color-link-30: var(--cs-color-purple-30);
    --cs-color-link-20: var(--cs-color-purple-20);
    --cs-color-link-10: var(--cs-color-purple-10);
    --cs-color-link-05: var(--cs-color-purple-05);
    --cs-color-link: var(--cs-color-purple-50);
    --cs-color-link-key: 50;
    --cs-color-link-on: var(--cs-color-purple-on);
  }
}

/* ── cornerstone: styles/themes/cru.css ── */
/* Generated by tools/palette.mjs from tools/brands/cru.json — do not edit by hand.
 *
 * Colour is generated from the palette; everything below the colour blocks is carried from the
 * reference theme, because scales, spacing ratios, shadow geometry and control metrics are
 * structure rather than brand. Font families are the exception — those are this brand's own.
 *
 * Roles: brand → yellow, neutral → gray, highlight → purple, information → turquoise, success → green, warning → orange, danger → cerise, link → cyan.
 */




@layer cs-theme {
  :where(:root),
  .cs-theme-cru,
  .cs-light,
  .cs-dark .cs-invert,
  .cs-light .cs-theme-cru,
  .cs-dark .cs-theme-cru.cs-invert,
  .cs-dark .cs-theme-cru .cs-invert {
    color-scheme: light;
    color: var(--cs-color-text-normal);

    --cs-color-surface-raised: white;
    --cs-color-surface-default: white;
    --cs-color-surface-lowered: var(--cs-color-neutral-95);
    --cs-color-surface-border: var(--cs-color-neutral-90);
    --cs-color-text-normal: var(--cs-color-neutral-10);
    --cs-color-text-quiet: var(--cs-color-neutral-40);
    --cs-color-text-link: var(--cs-color-link-50);
    --cs-color-overlay-modal: color-mix(in oklab, var(--cs-color-neutral-05) 50%, transparent);
    --cs-color-overlay-inline: color-mix(in oklab, var(--cs-color-neutral-80) 25%, transparent);
    --cs-color-focus: var(--cs-color-brand-80);
    --cs-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 10%;
    --cs-color-mix-active: var(--cs-color-surface-default) 10%;

    /* brand */
    --cs-color-brand-fill-quiet: var(--cs-color-brand-95);
    --cs-color-brand-fill-normal: var(--cs-color-brand-90);
    --cs-color-brand-fill-loud: var(--cs-color-brand-80);
    --cs-color-brand-border-quiet: var(--cs-color-brand-90);
    --cs-color-brand-border-normal: var(--cs-color-brand-80);
    --cs-color-brand-border-loud: var(--cs-color-brand-80);
    --cs-color-brand-on-quiet: var(--cs-color-brand-40);
    --cs-color-brand-on-normal: var(--cs-color-brand-30);
    --cs-color-brand-on-loud: var(--cs-color-brand-10);

    /* neutral */
    --cs-color-neutral-fill-quiet: var(--cs-color-neutral-95);
    --cs-color-neutral-fill-normal: var(--cs-color-neutral-90);
    --cs-color-neutral-fill-loud: var(--cs-color-neutral-20);
    --cs-color-neutral-border-quiet: var(--cs-color-neutral-90);
    --cs-color-neutral-border-normal: var(--cs-color-neutral-80);
    --cs-color-neutral-border-loud: var(--cs-color-neutral-50);
    --cs-color-neutral-on-quiet: var(--cs-color-neutral-40);
    --cs-color-neutral-on-normal: var(--cs-color-neutral-30);
    --cs-color-neutral-on-loud: white;

    /* highlight */
    --cs-color-highlight-fill-quiet: var(--cs-color-highlight-95);
    --cs-color-highlight-fill-normal: var(--cs-color-highlight-90);
    --cs-color-highlight-fill-loud: var(--cs-color-highlight-50);
    --cs-color-highlight-border-quiet: var(--cs-color-highlight-90);
    --cs-color-highlight-border-normal: var(--cs-color-highlight-80);
    --cs-color-highlight-border-loud: var(--cs-color-highlight-50);
    --cs-color-highlight-on-quiet: var(--cs-color-highlight-40);
    --cs-color-highlight-on-normal: var(--cs-color-highlight-30);
    --cs-color-highlight-on-loud: white;

    /* information */
    --cs-color-information-fill-quiet: var(--cs-color-information-95);
    --cs-color-information-fill-normal: var(--cs-color-information-90);
    --cs-color-information-fill-loud: var(--cs-color-information-50);
    --cs-color-information-border-quiet: var(--cs-color-information-90);
    --cs-color-information-border-normal: var(--cs-color-information-80);
    --cs-color-information-border-loud: var(--cs-color-information-50);
    --cs-color-information-on-quiet: var(--cs-color-information-40);
    --cs-color-information-on-normal: var(--cs-color-information-30);
    --cs-color-information-on-loud: white;

    /* success */
    --cs-color-success-fill-quiet: var(--cs-color-success-95);
    --cs-color-success-fill-normal: var(--cs-color-success-90);
    --cs-color-success-fill-loud: var(--cs-color-success-70);
    --cs-color-success-border-quiet: var(--cs-color-success-90);
    --cs-color-success-border-normal: var(--cs-color-success-80);
    --cs-color-success-border-loud: var(--cs-color-success-50);
    --cs-color-success-on-quiet: var(--cs-color-success-40);
    --cs-color-success-on-normal: var(--cs-color-success-30);
    --cs-color-success-on-loud: var(--cs-color-success-10);

    /* warning */
    --cs-color-warning-fill-quiet: var(--cs-color-warning-95);
    --cs-color-warning-fill-normal: var(--cs-color-warning-90);
    --cs-color-warning-fill-loud: var(--cs-color-warning-60);
    --cs-color-warning-border-quiet: var(--cs-color-warning-90);
    --cs-color-warning-border-normal: var(--cs-color-warning-80);
    --cs-color-warning-border-loud: var(--cs-color-warning-50);
    --cs-color-warning-on-quiet: var(--cs-color-warning-40);
    --cs-color-warning-on-normal: var(--cs-color-warning-30);
    --cs-color-warning-on-loud: var(--cs-color-warning-10);

    /* danger */
    --cs-color-danger-fill-quiet: var(--cs-color-danger-95);
    --cs-color-danger-fill-normal: var(--cs-color-danger-90);
    --cs-color-danger-fill-loud: var(--cs-color-danger-50);
    --cs-color-danger-border-quiet: var(--cs-color-danger-90);
    --cs-color-danger-border-normal: var(--cs-color-danger-80);
    --cs-color-danger-border-loud: var(--cs-color-danger-50);
    --cs-color-danger-on-quiet: var(--cs-color-danger-40);
    --cs-color-danger-on-normal: var(--cs-color-danger-30);
    --cs-color-danger-on-loud: white;
  }

  .cs-dark,
  .cs-light .cs-invert,
  .cs-dark .cs-theme-cru,
  .cs-light .cs-theme-cru.cs-invert,
  .cs-light .cs-theme-cru .cs-invert {
    color-scheme: dark;
    color: var(--cs-color-text-normal);

    --cs-color-surface-raised: var(--cs-color-neutral-10);
    --cs-color-surface-default: var(--cs-color-neutral-05);
    --cs-color-surface-lowered: color-mix(in oklab, var(--cs-color-surface-default), black 20%);
    --cs-color-surface-border: var(--cs-color-neutral-20);
    --cs-color-text-normal: var(--cs-color-neutral-95);
    --cs-color-text-quiet: var(--cs-color-neutral-60);
    --cs-color-text-link: var(--cs-color-link-60);
    --cs-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
    --cs-color-overlay-inline: color-mix(in oklab, var(--cs-color-neutral-50) 10%, transparent);
    --cs-color-focus: var(--cs-color-brand-80);
    --cs-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 20%;
    --cs-color-mix-active: var(--cs-color-surface-default) 20%;

    /* brand */
    --cs-color-brand-fill-quiet: var(--cs-color-brand-10);
    --cs-color-brand-fill-normal: var(--cs-color-brand-20);
    --cs-color-brand-fill-loud: var(--cs-color-brand-80);
    --cs-color-brand-border-quiet: var(--cs-color-brand-20);
    --cs-color-brand-border-normal: var(--cs-color-brand-30);
    --cs-color-brand-border-loud: var(--cs-color-brand-80);
    --cs-color-brand-on-quiet: var(--cs-color-brand-60);
    --cs-color-brand-on-normal: var(--cs-color-brand-70);
    --cs-color-brand-on-loud: var(--cs-color-brand-10);

    /* neutral */
    --cs-color-neutral-fill-quiet: var(--cs-color-neutral-10);
    --cs-color-neutral-fill-normal: var(--cs-color-neutral-20);
    --cs-color-neutral-fill-loud: var(--cs-color-neutral-90);
    --cs-color-neutral-border-quiet: var(--cs-color-neutral-20);
    --cs-color-neutral-border-normal: var(--cs-color-neutral-30);
    --cs-color-neutral-border-loud: var(--cs-color-neutral-50);
    --cs-color-neutral-on-quiet: var(--cs-color-neutral-60);
    --cs-color-neutral-on-normal: var(--cs-color-neutral-70);
    --cs-color-neutral-on-loud: var(--cs-color-neutral-05);

    /* highlight */
    --cs-color-highlight-fill-quiet: var(--cs-color-highlight-10);
    --cs-color-highlight-fill-normal: var(--cs-color-highlight-20);
    --cs-color-highlight-fill-loud: var(--cs-color-highlight-50);
    --cs-color-highlight-border-quiet: var(--cs-color-highlight-20);
    --cs-color-highlight-border-normal: var(--cs-color-highlight-30);
    --cs-color-highlight-border-loud: var(--cs-color-highlight-50);
    --cs-color-highlight-on-quiet: var(--cs-color-highlight-60);
    --cs-color-highlight-on-normal: var(--cs-color-highlight-70);
    --cs-color-highlight-on-loud: white;

    /* information */
    --cs-color-information-fill-quiet: var(--cs-color-information-10);
    --cs-color-information-fill-normal: var(--cs-color-information-20);
    --cs-color-information-fill-loud: var(--cs-color-information-50);
    --cs-color-information-border-quiet: var(--cs-color-information-20);
    --cs-color-information-border-normal: var(--cs-color-information-30);
    --cs-color-information-border-loud: var(--cs-color-information-50);
    --cs-color-information-on-quiet: var(--cs-color-information-60);
    --cs-color-information-on-normal: var(--cs-color-information-70);
    --cs-color-information-on-loud: white;

    /* success */
    --cs-color-success-fill-quiet: var(--cs-color-success-10);
    --cs-color-success-fill-normal: var(--cs-color-success-20);
    --cs-color-success-fill-loud: var(--cs-color-success-70);
    --cs-color-success-border-quiet: var(--cs-color-success-20);
    --cs-color-success-border-normal: var(--cs-color-success-30);
    --cs-color-success-border-loud: var(--cs-color-success-50);
    --cs-color-success-on-quiet: var(--cs-color-success-60);
    --cs-color-success-on-normal: var(--cs-color-success-70);
    --cs-color-success-on-loud: var(--cs-color-success-10);

    /* warning */
    --cs-color-warning-fill-quiet: var(--cs-color-warning-10);
    --cs-color-warning-fill-normal: var(--cs-color-warning-20);
    --cs-color-warning-fill-loud: var(--cs-color-warning-60);
    --cs-color-warning-border-quiet: var(--cs-color-warning-20);
    --cs-color-warning-border-normal: var(--cs-color-warning-30);
    --cs-color-warning-border-loud: var(--cs-color-warning-50);
    --cs-color-warning-on-quiet: var(--cs-color-warning-60);
    --cs-color-warning-on-normal: var(--cs-color-warning-70);
    --cs-color-warning-on-loud: var(--cs-color-warning-10);

    /* danger */
    --cs-color-danger-fill-quiet: var(--cs-color-danger-10);
    --cs-color-danger-fill-normal: var(--cs-color-danger-20);
    --cs-color-danger-fill-loud: var(--cs-color-danger-50);
    --cs-color-danger-border-quiet: var(--cs-color-danger-20);
    --cs-color-danger-border-normal: var(--cs-color-danger-30);
    --cs-color-danger-border-loud: var(--cs-color-danger-50);
    --cs-color-danger-on-quiet: var(--cs-color-danger-60);
    --cs-color-danger-on-normal: var(--cs-color-danger-70);
    --cs-color-danger-on-loud: white;
  }

  :where(:root),
  .cs-theme-cru,
  .cs-light,
  .cs-dark,
  .cs-invert {
    font-family: var(--cs-font-family-body);

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --cs-font-family-body: Inter, ui-sans-serif, system-ui, sans-serif;
    --cs-font-family-heading: Sora, ui-sans-serif, system-ui, sans-serif;
    --cs-font-family-code: ui-monospace, monospace;
    --cs-font-family-longform: ui-serif, serif;

    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
     * For larger font sizes, each size is twice 1.125x larger to maximize impact.
     * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
    --cs-font-size-scale: 1;
    --cs-font-size-3xs: round(calc(var(--cs-font-size-2xs) / 1.125), 1px); /* 10px */
    --cs-font-size-2xs: round(calc(var(--cs-font-size-xs) / 1.125), 1px); /* 11px */
    --cs-font-size-xs: round(calc(var(--cs-font-size-s) / 1.125), 1px); /* 12px */
    --cs-font-size-s: round(calc(var(--cs-font-size-m) / 1.125), 1px); /* 14px */
    --cs-font-size-m: calc(1rem * var(--cs-font-size-scale)); /* 16px */
    --cs-font-size-l: round(calc(var(--cs-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
    --cs-font-size-xl: round(calc(var(--cs-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
    --cs-font-size-2xl: round(calc(var(--cs-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
    --cs-font-size-3xl: round(calc(var(--cs-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
    --cs-font-size-4xl: round(calc(var(--cs-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
    --cs-font-size-5xl: round(calc(var(--cs-font-size-4xl) * 1.125 * 1.125), 1px); /* 66px */

    --cs-font-size-smaller: round(calc(1em / 1.125), 1px);
    --cs-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

    --cs-font-weight-light: 300;
    --cs-font-weight-normal: 400;
    --cs-font-weight-semibold: 500;
    --cs-font-weight-bold: 600;

    --cs-font-weight-body: var(--cs-font-weight-normal);
    --cs-font-weight-heading: var(--cs-font-weight-bold);
    --cs-font-weight-code: var(--cs-font-weight-normal);
    --cs-font-weight-longform: var(--cs-font-weight-normal);
    --cs-font-weight-action: var(--cs-font-weight-semibold);

    --cs-line-height-condensed: 1.2;
    --cs-line-height-normal: 1.6;
    --cs-line-height-expanded: 2;

    --cs-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
    --cs-link-decoration-hover: underline;
    /* #endregion */

    /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --cs-space-scale: 1;
    --cs-space-3xs: calc(var(--cs-space-scale) * 0.125rem); /* 2px */
    --cs-space-2xs: calc(var(--cs-space-scale) * 0.25rem); /* 4px */
    --cs-space-xs: calc(var(--cs-space-scale) * 0.5rem); /* 8px */
    --cs-space-s: calc(var(--cs-space-scale) * 0.75rem); /* 12px */
    --cs-space-m: calc(var(--cs-space-scale) * 1rem); /* 16px */
    --cs-space-l: calc(var(--cs-space-scale) * 1.5rem); /* 24px */
    --cs-space-xl: calc(var(--cs-space-scale) * 2rem); /* 32px */
    --cs-space-2xl: calc(var(--cs-space-scale) * 2.5rem); /* 40px */
    --cs-space-3xl: calc(var(--cs-space-scale) * 3rem); /* 48px */
    --cs-space-4xl: calc(var(--cs-space-scale) * 4rem); /* 64px */
    --cs-space-5xl: calc(var(--cs-space-scale) * 5rem); /* 80px */

    --cs-content-spacing: var(--cs-space-l);
    /* #endregion */

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --cs-border-style: solid;

    --cs-border-width-scale: 1;
    --cs-border-width-s: calc(var(--cs-border-width-scale) * 0.0625rem);
    --cs-border-width-m: calc(var(--cs-border-width-scale) * 0.125rem);
    --cs-border-width-l: calc(var(--cs-border-width-scale) * 0.1875rem);
    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --cs-border-radius-scale: 1;
    --cs-border-radius-s: calc(var(--cs-border-radius-scale) * 0.1875rem);
    --cs-border-radius-m: calc(var(--cs-border-radius-scale) * 0.375rem);
    --cs-border-radius-l: calc(var(--cs-border-radius-scale) * 0.75rem);

    --cs-border-radius-pill: 9999px;
    --cs-border-radius-circle: 50%;
    --cs-border-radius-square: 0px;
    /* #endregion */

    /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --cs-focus-ring-style: solid;
    --cs-focus-ring-width: 0.1875rem; /* 3px */
    --cs-focus-ring: var(--cs-focus-ring-style) var(--cs-focus-ring-width) var(--cs-color-focus);
    --cs-focus-ring-offset: 0.0625rem; /* 1px */
    /* #endregion */

    /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --cs-shadow-offset-x-scale: 0;
    --cs-shadow-offset-x-s: calc(var(--cs-shadow-offset-x-scale) * 0.125rem);
    --cs-shadow-offset-x-m: calc(var(--cs-shadow-offset-x-scale) * 0.25rem);
    --cs-shadow-offset-x-l: calc(var(--cs-shadow-offset-x-scale) * 0.5rem);

    --cs-shadow-offset-y-scale: 1;
    --cs-shadow-offset-y-s: calc(var(--cs-shadow-offset-y-scale) * 0.125rem);
    --cs-shadow-offset-y-m: calc(var(--cs-shadow-offset-y-scale) * 0.25rem);
    --cs-shadow-offset-y-l: calc(var(--cs-shadow-offset-y-scale) * 0.5rem);

    --cs-shadow-blur-scale: 1;
    --cs-shadow-blur-s: calc(var(--cs-shadow-blur-scale) * 0.125rem);
    --cs-shadow-blur-m: calc(var(--cs-shadow-blur-scale) * 0.25rem);
    --cs-shadow-blur-l: calc(var(--cs-shadow-blur-scale) * 0.5rem);

    --cs-shadow-spread-scale: -0.5;
    --cs-shadow-spread-s: calc(var(--cs-shadow-spread-scale) * 0.125rem);
    --cs-shadow-spread-m: calc(var(--cs-shadow-spread-scale) * 0.25rem);
    --cs-shadow-spread-l: calc(var(--cs-shadow-spread-scale) * 0.5rem);

    --cs-shadow-s: var(--cs-shadow-offset-x-s) var(--cs-shadow-offset-y-s) var(--cs-shadow-blur-s)
      var(--cs-shadow-spread-s) var(--cs-color-shadow);
    --cs-shadow-m: var(--cs-shadow-offset-x-m) var(--cs-shadow-offset-y-m) var(--cs-shadow-blur-m)
      var(--cs-shadow-spread-m) var(--cs-color-shadow);
    --cs-shadow-l: var(--cs-shadow-offset-x-l) var(--cs-shadow-offset-y-l) var(--cs-shadow-blur-l)
      var(--cs-shadow-spread-l) var(--cs-color-shadow);
    /* #endregion */

    /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
    --cs-transition-easing: ease;
    --cs-transition-slow: 300ms;
    --cs-transition-normal: 150ms;
    --cs-transition-fast: 75ms;
    /* #endregion */

    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Form Controls */
    --cs-form-control-background-color: var(--cs-color-surface-default);

    --cs-form-control-border-color: var(--cs-color-neutral-border-loud);
    --cs-form-control-border-style: var(--cs-border-style);
    --cs-form-control-border-width: var(--cs-border-width-s);
    --cs-form-control-border-radius: var(--cs-border-radius-m);

    --cs-form-control-activated-color: var(--cs-color-brand-fill-loud);

    --cs-form-control-label-color: var(--cs-color-text-normal);
    --cs-form-control-label-font-weight: var(--cs-font-weight-semibold);
    --cs-form-control-label-line-height: var(--cs-line-height-condensed);

    --cs-form-control-value-color: var(--cs-color-text-normal);
    --cs-form-control-value-font-weight: var(--cs-font-weight-body);
    --cs-form-control-value-line-height: var(--cs-line-height-condensed);

    --cs-form-control-hint-color: var(--cs-color-text-quiet);
    --cs-form-control-hint-font-weight: var(--cs-font-weight-body);
    --cs-form-control-hint-line-height: var(--cs-line-height-normal);

    --cs-form-control-placeholder-color: var(--cs-color-neutral-50);

    --cs-form-control-required-content: '*';
    --cs-form-control-required-content-color: inherit;
    --cs-form-control-required-content-offset: 0.1em;

    --cs-form-control-padding-block: 0.75em;
    --cs-form-control-padding-inline: 1em;
    --cs-form-control-height: round(
      calc(2 * var(--cs-form-control-padding-block) + 1em * var(--cs-form-control-value-line-height)),
      1px
    );
    --cs-form-control-toggle-size: round(1.25em, 1px);

    /* Buttons */
    --cs-button-transform-hover: none;
    --cs-button-transform-active: scale(0.9875);

    /* Panels */
    --cs-panel-border-style: var(--cs-border-style);
    --cs-panel-border-width: var(--cs-border-width-s);
    --cs-panel-border-radius: var(--cs-border-radius-l);

    /* Tooltips */
    --cs-tooltip-arrow-size: 0.375rem;

    --cs-tooltip-background-color: var(--cs-color-text-normal);

    --cs-tooltip-border-color: var(--cs-tooltip-background-color);
    --cs-tooltip-border-style: var(--cs-border-style);
    --cs-tooltip-border-width: var(--cs-border-width-s);
    --cs-tooltip-border-radius: var(--cs-border-radius-s);

    --cs-tooltip-content-color: var(--cs-color-surface-default);
    --cs-tooltip-font-size: var(--cs-font-size-s);
    --cs-tooltip-line-height: var(--cs-line-height-normal);
    /* #endregion */
  }
}

/* ── cornerstone: styles/cornerstone.css ── */
/* Cascade layers */


/* Native styles */


/* CSS utilities */


/* Theme
 *
 * Cru's, which is Cornerstone's default — the theme decision ratified upstream's architecture and
 * changed whose values it carries. `themes/cru.css` is generated by `tools/palette.mjs` from
 * `tools/brands/cru.json` and is self-contained: it imports its own palette and its own role
 * variants rather than `color/palettes/base.css`, whose `-gte-60`/`-on` machinery is written for
 * the reference palette's ten hue names and cannot cover Cru's nineteen.
 *
 * The reference theme still ships and is now opt-in: import `themes/default.css` for an unbranded
 * starting point, or generate your own brand with the tool. */

/* ══════════════════════════════════════════════════════════════════════════
   Control geometry — restored to the library's own relative expressions
   ══════════════════════════════════════════════════════════════════════════
   These four are the only tokens in this system whose real value is an EXPRESSION,
   not a number: each contains a bare `em`, so it resolves against the font-size of the
   element using it. That is the entire mechanism behind `size="xs"` … `size="xl"` —
   the size attribute raises the font-size and the control grows with it.

   `tokens.css` is compiled from `tokens.json`, which records resolved values. Resolving
   an `em` collapses the expression to one number (43px, the value at the default size),
   and `tokens.css` re-declares it UNLAYERED at `:root`, which outranks the library's own
   declaration inside `@layer cs-theme` whatever the file order. Every sized control then
   renders at one height: input 41px and button 43px at xs through xl, measured.

   This block restores the expressions. It is unlayered and last in this file, and the
   preview frame loads `tokens.css` before `bundle.css`, so source order carries it.
   Keep it below the library's flattened stylesheet and do not move it into a layer.

   Do not "simplify" these to pixels. A number here is the bug. */
:root {
  --cs-form-control-padding-block: 0.75em;
  --cs-form-control-padding-inline: 1em;
  --cs-form-control-height: round(
    calc(2 * var(--cs-form-control-padding-block) + 1em * var(--cs-form-control-value-line-height)),
    1px
  );
  --cs-form-control-toggle-size: round(1.25em, 1px);
}