/*! Generated from packages/alto-ui/src/css/alto.css. Do not edit directly. */
@layer alto.tokens,
  alto.base,
  alto.layout,
  alto.components,
  alto.utilities,
  alto.state;


/* Tokens */
/**
 * @section Explicit color palettes
 *
 * The default palettes are committed HEX values. Palette design may use an
 * offline color tool, but Alto does not calculate colors at runtime.
 */

@layer alto.tokens {
  :where(:root) {
    /* Primary: lightest 50 through darkest 950. */
    --color-primary-50: #eef4ff;
    --color-primary-100: #dbe8ff;
    --color-primary-200: #b9d1ff;
    --color-primary-300: #8fb2ff;
    --color-primary-400: #628dff;
    --color-primary-500: #3f6fe5;
    --color-primary-600: #3158bd;
    --color-primary-700: #28479a;
    --color-primary-800: #203976;
    --color-primary-900: #182b57;
    --color-primary-950: #101c3a;

    /* Neutral: lightest 50 through darkest 950. */
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f4f4f5;
    --color-neutral-200: #e4e4e7;
    --color-neutral-300: #d4d4d8;
    --color-neutral-400: #a1a1aa;
    --color-neutral-500: #71717a;
    --color-neutral-600: #52525b;
    --color-neutral-700: #3f3f46;
    --color-neutral-800: #27272a;
    --color-neutral-900: #18181b;
    --color-neutral-950: #09090b;
  }
}

/**
 * @section Semantic colors
 */

@layer alto.tokens {
  :where(:root) {
    --color-accent: var(--color-primary-700);
    --color-accent-hover: var(--color-primary-800);
    --color-accent-active: var(--color-primary-900);
    --color-on-accent: var(--color-neutral-50);
    --color-success: #166534;
    --color-warning: #854d0e;
    --color-danger: #b91c1c;

    /* Existing non-color presentation settings remain feature inputs. */
    --decoration-link: none;
    --decoration-link-hover: underline;
    --decoration-link-offset: .2em;
  }
}

/**
 * @section Fonts
 */

@layer alto.tokens {
  :where(:root) {
    --font-family-primary: ui-sans-serif, system-ui, sans-serif;
    --font-family-secondary: charter, "Bitstream Charter", "Sitka Text", cambria,
      serif;
    --font-family-monospace: ui-monospace, "Cascadia Code", "Source Code Pro",
      menlo, consolas, "DejaVu Sans Mono", monospace;

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
  }
}

/**
 * @section Sizes
 */

@layer alto.tokens {
  :where(:root) {
    /* Line Height */
    --line-height-root: 1.7;
    --line-height-heading: 1.5;

		/* Navbar */
		--navbar-height: 3rlh;

    /**
     * Font size
     *
     * @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
     */
    --font-size-xs: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
    --font-size-sm: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
    --font-size-md: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --font-size-lg: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
    --font-size-xl: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
    --font-size-2xl: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
    --font-size-3xl: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
    --font-size-4xl: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
  }
}

/**
 * @section Spaces
 */

@layer alto.tokens {
  :where(:root) {
    /* Space after paragraphs and other elements */
    --space-2xs: 0.25rlh;
    --space-xs: 0.5rlh;
    --space-sm: 0.75rlh;
    --space-md: 1rlh;
    --space-lg: 1.5rlh;
    --space-xl: 2rlh;
    --space-2xl: 3rlh;
  }
}

/**
 * @section Structural tokens
 */

@layer alto.tokens {
  :where(:root) {
    /* Radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;

    /* Borders */
    --border-width: 1px;

    /* Content widths */
    --width-narrow: 45rem;
    --width-content: 90rem;
    --width-wide: 110rem;

    /* Page-level inline gutter. */
    --gutter: clamp(0.25rem, -2rem + 10vw, 1rem); /* @link https://utopia.fyi/clamp/calculator?a=360,480,4—16 */

    /* Focus geometry */
    --focus-ring-width: 2px;
    --focus-ring-style: solid;
    --focus-ring-offset: 2px;

    /* Minimum target for controls styled by Alto. */
    --control-target-size: 2.75rem;
  }
}

/**
 * @section Contextual surfaces
 */

@layer alto.tokens {
  :where(:root) {
    /* Default page context: neutral 50 background. */
    --color-background: var(--color-neutral-50);
    --color-foreground: var(--color-neutral-900);
    --color-foreground-muted: var(--color-neutral-600);
    --color-link: var(--color-primary-700);
    --color-link-hover: var(--color-primary-800);
    --color-border: var(--color-neutral-500);
    --color-focus: var(--color-primary-600);
    --color-control-icon: var(--color-foreground);
  }
}


/* Base */
/**
 * @section Base Styles
 */

@layer alto.base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    background: var(--color-background);
    color: var(--color-foreground);
    font-size: 100%;
    line-height: var(--line-height-root);
    text-size-adjust: 100%;
  }

  body {
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-md);
    margin: 0;
		min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  :where(
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol,
      dl,
      dd,
      blockquote,
      figure,
      pre,
      table,
      address,
      details
    ) {
    margin: 0;
  }
}

@layer alto.state {
  :is(
      button,
      [href],
      input,
      select,
      textarea,
      summary,
      [tabindex]
    ):focus-visible {
    outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
    outline-offset: var(--focus-ring-offset);
  }

  ::selection {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }

  /**
   * Ensure hidden content remains hidden even when another rule sets display.
   */
  [hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    ::after,
    ::before {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/**
 * @section Links
 */

@layer alto.base {
  a:not(.button) {
    /* These locals are deliberately reset at every link boundary. */
    --color: var(--color-link);
    --color-hover: var(--color-link-hover);
    --decoration: var(--decoration-link);
    --decoration-hover: var(--decoration-link-hover);
		--decoration-offset: var(--decoration-link-offset);

    color: var(--color);
    overflow-wrap: break-word;
    text-decoration-line: var(--decoration);
		text-decoration-thickness: 0.1em;
		text-underline-offset: var(--decoration-offset);
  }
}

@layer alto.state {
  a:not(.button):hover {
    color: var(--color-hover);
    text-decoration-line: var(--decoration-hover);
  }

	:where(.prose a:not(.button)):hover {
    background-color: var(--color-primary-100);
	}
}


/**
 * @section Buttons
 */

@layer alto.base {
  :where(
      button,
      .button,
      input:is([type="button"], [type="reset"], [type="submit"])
    ) {
    --background-color: var(--color-background);
    --background-color-hover: var(--color-foreground-muted);
    --background-color-active: var(--color-foreground);
    --color: var(--color-foreground);
    --color-hover: var(--color-background);
    --color-active: var(--color-background);
    --border-color: var(--color-border);
    --border-color-hover: var(--color-foreground-muted);
    --border-color-active: var(--color-foreground);
    --decoration: none;
    --decoration-hover: none;
    --radius: var(--radius-sm);
    --padding-block: var(--space-xs);
    --padding-inline: var(--space-sm);

    align-items: center;
    align-self: center;
    appearance: none;
    background-color: var(--background-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius);
    color: var(--color);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    line-height: calc(1rlh - 2px);
    min-block-size: var(--control-target-size);
    min-inline-size: var(--control-target-size);
    padding-block: var(--padding-block);
    padding-inline: var(--padding-inline);
    text-align: center;
    text-decoration: var(--decoration);
  }

  /* Color variants. An unqualified control remains compatible with neutral. */
  :where(button.primary, .button.primary) {
    --background-color: var(--color-accent);
    --background-color-hover: var(--color-accent-hover);
    --background-color-active: var(--color-accent-active);
    --color: white;
    --color-hover: white;
    --color-active: white;
    --border-color: var(--color-accent);
    --border-color-hover: var(--color-accent-hover);
    --border-color-active: var(--color-accent-active);
  }

  :where(button.secondary, .button.secondary) {
    --background-color: var(--color-foreground);
    --background-color-hover: var(--color-foreground-muted);
    --background-color-active: var(--color-foreground);
    --color: var(--color-background);
    --color-hover: var(--color-background);
    --color-active: var(--color-background);
    --border-color: var(--color-foreground);
    --border-color-hover: var(--color-foreground-muted);
    --border-color-active: var(--color-foreground);
  }

  :where(button.neutral, .button.neutral) {
    --background-color: var(--color-background);
    --background-color-hover: var(--color-foreground-muted);
    --background-color-active: var(--color-foreground);
    --color: var(--color-foreground);
    --color-hover: var(--color-background);
    --color-active: var(--color-background);
    --border-color: var(--color-border);
    --border-color-hover: var(--color-foreground-muted);
    --border-color-active: var(--color-foreground);
  }

  :where(button.outline, .button.outline) {
    --background-color: transparent;
    --background-color-hover: var(--color);
    --background-color-active: var(--color);
    --border-color: var(--color);
    --border-color-hover: var(--color-hover);
    --border-color-active: var(--color-active);
  }

  :where(button.plain, .button.plain) {
    --background-color: transparent;
    --background-color-hover: transparent;
    --background-color-active: transparent;
    --border-color: transparent;
    --border-color-hover: transparent;
    --border-color-active: transparent;
    --padding-inline: 0;
  }
}

@layer alto.components {
  /* Light controls preserve contrast inside the dark primary surface. */
  .surface-primary :where(button.primary, .button.primary) {
    --background-color: var(--color-primary-50);
    --background-color-hover: var(--color-primary-100);
    --background-color-active: var(--color-primary-200);
    --color: var(--color-primary-900);
    --color-hover: var(--color-primary-950);
    --color-active: var(--color-primary-950);
    --border-color: var(--color-primary-50);
    --border-color-hover: var(--color-primary-100);
    --border-color-active: var(--color-primary-200);
  }

  .surface-primary :where(button.secondary, .button.secondary) {
    --background-color: var(--color-neutral-50);
    --background-color-hover: var(--color-neutral-100);
    --background-color-active: var(--color-neutral-200);
    --color: var(--color-neutral-900);
    --color-hover: var(--color-neutral-950);
    --color-active: var(--color-neutral-950);
    --border-color: var(--color-neutral-50);
    --border-color-hover: var(--color-neutral-100);
    --border-color-active: var(--color-neutral-200);
  }

  .surface-primary :where(button.neutral, .button.neutral) {
    --background-color: transparent;
    --background-color-hover: var(--color-primary-800);
    --background-color-active: var(--color-primary-900);
    --color: var(--color-neutral-50);
    --color-hover: var(--color-neutral-50);
    --color-active: var(--color-neutral-50);
    --border-color: var(--color-primary-100);
    --border-color-hover: var(--color-primary-50);
    --border-color-active: var(--color-primary-200);
  }

  .surface-primary :where(button.primary.outline, .button.primary.outline) {
    --background-color: transparent;
    --background-color-hover: var(--color-primary-50);
    --background-color-active: var(--color-primary-100);
    --color: var(--color-primary-50);
    --color-hover: var(--color-primary-900);
    --color-active: var(--color-primary-950);
    --border-color: var(--color-primary-50);
    --border-color-hover: var(--color-primary-50);
    --border-color-active: var(--color-primary-100);
  }

  .surface-primary :where(button.primary.plain, .button.primary.plain) {
    --background-color: transparent;
    --background-color-hover: transparent;
    --background-color-active: transparent;
    --color: var(--color-primary-50);
    --color-hover: var(--color-primary-100);
    --color-active: var(--color-primary-200);
    --border-color: transparent;
    --border-color-hover: transparent;
    --border-color-active: transparent;
  }
}

@layer alto.state {
  :where(
      button,
      .button,
      input:is([type="button"], [type="reset"], [type="submit"])
    ):hover {
    --background-color: var(--background-color-hover);
    --border-color: var(--border-color-hover);
    --color: var(--color-hover);
  }

  :where(
      button,
      .button,
      input:is([type="button"], [type="reset"], [type="submit"])
    ):active {
    --background-color: var(--background-color-active);
    --border-color: var(--border-color-active);
    --color: var(--color-active);
  }

  :where(
      button,
      .button,
      input:is([type="button"], [type="reset"], [type="submit"])
    ):disabled {
    --background-color: var(--color-background);
    --border-color: var(--color-foreground-muted);
    --color: var(--color-foreground-muted);

    box-shadow: none;
    cursor: not-allowed;
  }

  :where(button.outline, .button.outline):hover,
  :where(button.outline, .button.outline):active,
  :where(button.plain, .button.plain):hover,
  :where(button.plain, .button.plain):active {
    background-color: var(--background-color);
    border-color: var(--border-color);
  }
}

/**
 * @section Dialog
 */

@layer alto.base {
  /**
   * Default dialog styles
   */
  dialog {
    --background-color: var(--color-background);
    --border-color: var(--color-border);
    --color: var(--color-foreground);
    --width: 32em;

    background-color: var(--background-color);
    border: none;
    border-radius: 0.25rlh;
    color: var(--color);
    margin: auto;
    max-height: calc(100% - 1lh);
    max-width: calc(100% - 1lh);
    padding: 0;
    width: var(--width);
  }
}

@layer alto.state {
  /**
   * Prevent background scrolling only when a modal dialog is open.
   */
  html:has(dialog:modal) {
    overflow: hidden;
  }

  dialog::backdrop {
    background-color: rgb(0 0 0 / 0.6);
  }
}

/**
 * @section Forms
 */

@layer alto.base {
  fieldset {
    border: 0;
    padding: 0;
  }

  legend,
  label {
    margin: 0;
    padding: 0;
  }

  legend {
    display: block;
  }

  label {
    align-items: center;
    display: flex;
    width: 100%;
  }

  .field {
    display: grid;
    gap: var(--space-xs);
  }

  .field-help {
    color: var(--color-foreground-muted);
    font-size: var(--font-size-sm);
  }

  .field-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
  }

  /**
   * Implicit labels keep text controls below their label while choice controls
   * retain their inline relationship.
   */
  label:has(
      :is(input, select, textarea):not([type="radio"], [type="checkbox"])
    ) {
    display: block;
  }

  label:has(input, select, textarea)
    :is(input, select, textarea):not([type="radio"], [type="checkbox"]) {
    margin-block-start: var(--space-xs);
  }

  input,
  optgroup,
  select,
  textarea {
    padding-block: 0.25lh;
    padding-inline: 0.5lh;
  }

  input,
  textarea,
  select {
    --border-size: 1px;
    --border-color: var(--color-border);
    --border-style: solid;
    --border-radius: var(--radius-md);
    --line-height-control: var(--line-height-root);

    background-color: var(--color-background);
    border: var(--border-size) var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
    color: var(--color-foreground);
    line-height: var(--line-height-control);
  }

  /**
   * Text-entry, selection, file, and range controls fill their available space.
   */
  :where(
      input:not(
          [type="button"],
          [type="reset"],
          [type="submit"],
          [type="image"],
          [type="checkbox"],
          [type="radio"]
        ),
      select,
      textarea
    ) {
    display: block;
    inline-size: 100%;
  }

  textarea {
    --min-height: 8lh;

    min-block-size: var(--min-height);
    overflow: auto;
    resize: vertical;
  }

  :where(input, select, textarea):not(
      [type="button"],
      [type="reset"],
      [type="submit"],
      [type="image"],
      [type="checkbox"],
      [type="radio"]
    ) {
    min-block-size: var(--control-target-size);
  }

  :where([type="checkbox"], [type="radio"]) {
    accent-color: var(--color-accent);
    cursor: pointer;
    inline-size: auto;
    min-block-size: 1lh;
    min-inline-size: 1lh;
    padding: 0;
  }

  [type="color"] {
    block-size: 2lh;
    inline-size: 100%;
  }
}

@layer alto.state {
  :where(input, select, textarea):is(:user-invalid, [aria-invalid="true"]) {
    --border-color: var(--color-danger);
  }

  :where(input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/**
 * @section Headings
 */

@layer alto.base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-family-secondary);
    line-height: var(--line-height-heading);
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

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

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

  h3 {
    font-size: var(--font-size-lg);
  }
}

/**
 * @section Lists
 */

@layer alto.base {
  ul,
  ol {
    padding-inline: 0.5lh 0;
  }

  dt {
    font-weight: bold;
  }

  /**
   * Removes list styling.
   * For semantic reasons, should only be used on unordered lists.
   * @link https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics
   */
  .list-unstyled,
  .list-inline {
    list-style-type: "";
    padding-inline: 0;
  }

  .list-inline {
    --gap: 0.5lh;

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap) * 0.5) var(--gap);
  }
}

/**
 * @Section Media
 */

@layer alto.base {
  /**
   * Prevent elements from overflowing on smaller screens.
   */
  img,
  picture,
  video,
  svg,
  iframe,
  object,
  embed {
    max-width: 100%;
  }

  img,
  picture,
  video {
    height: auto;
  }

  img,
  svg {
    display: block;
  }

  /**
   * Make media elements fill available width
   */
  audio,
  video,
  iframe {
    width: 100%;
  }

  figcaption {
    font-style: italic;
    text-align: center;
  }
}


/* Layout */
/**
 * @section Containers
 */

@layer alto.layout {
  .container {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: var(--width-content);
  }

  .container.wide {
    max-inline-size: var(--width-wide);
  }

  .container.narrow {
    max-inline-size: var(--width-narrow);
  }

  .full {
    inline-size: 100%;
  }
}

/**
 * @section Optional page alignment grid
 */

@layer alto.layout {
  :where(.site-grid, .header, .footer) {
    --full-track: minmax(var(--gutter), 1fr);
    --wide-track: minmax(
      0,
      calc((var(--width-wide) - var(--width-content)) / 2)
    );
    --normal-track: minmax(
      0,
      calc((var(--width-content) - var(--width-narrow)) / 2)
    );
    --narrow-track: min(
      var(--width-narrow),
      calc(100% - var(--gutter) - var(--gutter))
    );

    display: grid;
    grid-template-columns:
      [full-start] var(--full-track)
      [wide-start] var(--wide-track)
      [normal-start] var(--normal-track)
      [narrow-start] var(--narrow-track) [narrow-end]
      var(--normal-track) [normal-end]
      var(--wide-track) [wide-end]
      var(--full-track) [full-end];
		grid-template-rows: min-content;
  }

  :where(.site-grid, .header, .footer) > :not(.full) {
    grid-column: normal;
  }

  :where(.site-grid, .header, .footer) > .full {
    display: grid;
    grid-column: full;
    grid-template-columns: subgrid;
  }

  :where(.site-grid, .header, .footer) > .full > * {
    grid-column: normal;
  }

  :where(.site-grid, .header, .footer) > .container.wide,
  :where(.site-grid, .header, .footer) > .full > .container.wide {
    grid-column: wide;
  }

  :where(.site-grid, .header, .footer) > .container.narrow,
  :where(.site-grid, .header, .footer) > .full > .container.narrow {
    grid-column: narrow;
  }
}

/**
 * @section Stack
 */

@layer alto.layout {
  .stack {
    --gap: var(--space-md);

    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }
}

@layer alto.layout {
  .stack > * {
    margin: 0;
  }
}

/**
 * @section Prose
 */

@layer alto.layout {
  .prose {
    > :where(
        p,
        ul,
        ol,
        dl,
        blockquote,
        figure,
        pre,
        table,
        details,
        audio,
        video,
        iframe
      ) {
      margin-block: 0 var(--space-md);
      max-inline-size: 65ch;
    }

    > :where(h1, h2, h3, h4, h5, h6) {
      margin-block: var(--space-lg) var(--space-xs);
      max-inline-size: 30ch;
    }

    > :where(h1, h2, h3, h4, h5, h6):first-child,
    > :first-child {
      margin-block-start: 0;
    }

    > :last-child {
      margin-block-end: 0;
    }
  }
}

/**
 * @section Cluster
 */

@layer alto.layout {
  .cluster {
    --gap: var(--space-md);

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: flex-start;
  }
}

/**
 * @section Columns
 */

@layer alto.layout {
  .cols {
    --column-min: 18rem;

    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, var(--column-min)), 1fr)
      );
  }
}


/* Components */
/**
 * @section Navbar
 */

@layer alto.components {
  .navbar {
    --justify: space-between;
    --gap: var(--space-md);

    align-items: center;
    display: flex;
    gap: var(--gap);
    justify-content: var(--justify);
    position: relative;
		min-height: var(--navbar-height);
		padding-block: .5rlh;
  }

  .logo {
    --color: var(--color-link);
    --color-hover: var(--color-link-hover);
    --decoration: none;
    --decoration-hover: none;

    font-weight: var(--font-weight-bold);
  }

  .menu {
    --gap: var(--space-md);

    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap) * 0.5) var(--gap);
  }

  :is(.navbar, .menu) > ul {
    --gap: var(--space-md);

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap) * 0.5) var(--gap);
    justify-content: var(--justify);
    list-style-type: "";
    margin: 0;
    padding: 0;
  }

  .navbar a {
    --decoration: none;
    --decoration-hover: none;
  }
}

@media (width < 45em) {
  @layer alto.components {
    /* .navbar > * { */
    /*   flex-basis: 100%; */
    /* } */

    :is(.navbar > ul, .menu > ul) {
      display: none;
    }

    .navbar-menu {
      display: block;
    }

    .navbar .navbar-menu {
      justify-content: var(--justify);
    }
  }
}

/**
 * @section Surface contexts
 */

@layer alto.components {
  .surface-neutral,
  .surface-primary,
  .surface-inverse {
    background: var(--color-background);
    color: var(--color-foreground);
  }

  .surface-neutral {
    --color-background: var(--color-neutral-100);
    --color-foreground: var(--color-neutral-900);
    --color-foreground-muted: var(--color-neutral-700);
    --color-link: var(--color-primary-700);
    --color-link-hover: var(--color-primary-800);
    --color-border: var(--color-neutral-500);
    --color-focus: var(--color-primary-600);
    --color-control-icon: var(--color-foreground);
    --color-accent: var(--color-primary-700);
    --color-accent-hover: var(--color-primary-800);
    --color-accent-active: var(--color-primary-900);
    --color-on-accent: var(--color-neutral-50);
  }

  .surface-primary {
    --color-background: var(--color-primary-700);
    --color-foreground: var(--color-neutral-50);
    --color-foreground-muted: var(--color-primary-50);
    --color-link: var(--color-neutral-50);
    --color-link-hover: var(--color-primary-100);
    --color-border: var(--color-primary-100);
    --color-focus: var(--color-neutral-50);
    --color-control-icon: var(--color-foreground);
    --color-accent: var(--color-neutral-50);
    --color-accent-hover: var(--color-primary-100);
    --color-accent-active: var(--color-primary-200);
    --color-on-accent: var(--color-primary-900);
  }

  .surface-inverse {
    --color-background: var(--color-neutral-900);
    --color-foreground: var(--color-neutral-50);
    --color-foreground-muted: var(--color-neutral-300);
    --color-link: var(--color-primary-200);
    --color-link-hover: var(--color-primary-100);
    --color-border: var(--color-neutral-400);
    --color-focus: var(--color-primary-200);
    --color-control-icon: var(--color-foreground);
    --color-accent: var(--color-primary-200);
    --color-accent-hover: var(--color-primary-100);
    --color-accent-active: var(--color-neutral-50);
    --color-on-accent: var(--color-neutral-900);
  }
}


/* Utilities */
/**
 * @section Accessibility
 */

@layer alto.utilities {
  /*
	 * Hide only visually, but have it available for screen readers:
	 */
  [class*="visually-hidden"] {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  /*
	 * Extends the .visually-hidden class to allow the element to be focusable when navigated to via the keyboard
	 */
  .visually-hidden-focusable:is(:active, :focus) {
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;

		&.skip-link {
			--color: white;
			--color-hover: white;
			--decoration: none;
			--decoration-hover: none;
			position: absolute;
			margin: var(--space-xs);
			padding: var(--space-2xs) var(--space-xs);
			background-color: var(--color-brand-primary);
			z-index: 999;
		}
	}
}

/**
 * @section Hide on
 */

@layer alto.utilities {
  .hide-on-mobile {
    @media (width < 45em) {
      display: none;
    }
  }

  .hide-on-desktop {
    @media (width >= 45em) {
      display: none;
    }
  }
}

/**
 * @section Stretched link
 */

@layer alto.utilities {
	.stretched-link::after {
		content: "";
		inset: 0;
		position: absolute;
	}
}