@layer base {
  :root {
    --baseline: 0.5rem;
    --baseline-offset: 0;
    --baseline-color: #0055ff;

    --font-size: calc(var(--baseline) * 2);
    --font-size-sm: calc(var(--baseline) * 1.75);
    --line-height: calc(var(--font-size) + var(--baseline));

    --spacing-xs: calc(var(--baseline) / 2);
    --spacing-sm: var(--baseline);
    --spacing-md: calc(var(--baseline) * 2);
    --spacing-lg: calc(var(--baseline) * 3);
    --spacing-xl: calc(var(--baseline) * 4);
    --spacing-2xl: calc(var(--baseline) * 6);
    --spacing-3xl: calc(var(--baseline) * 8);

    --text-color: black;
    --text-on-emphasis-color: white;
    --link-color: var(--theme-900);
    --page-background: var(--theme-50);
    --page-control-hover-background: var(--theme-100);
    --background-color: var(--page-background);
    /* Soft tints derived from --link-color (0 = lighter, 1 = stronger). */
    --background-tint-0: color-mix(in oklch, var(--link-color) 5%, transparent);
    --background-tint-1: color-mix(in oklch, var(--link-color) 10%, transparent);
    --border-tint-1: color-mix(in oklch, var(--link-color) 25%, white);
    --border-hover-color: var(--theme-400);
    --surface-color: white;
    --border-color: var(--gray-300);
    --muted-color: var(--gray-600);
    --control-border-color: var(--gray-400);
    --accent-color: var(--theme-600);
    --accent-hover-color: var(--theme-700);

    /* Semantic danger / error — retarget these for dark mode, not the red scale. */
    --danger-color: var(--red-700);
    --danger-hover-background: color-mix(in oklch, var(--red-200) 60%, white);
    --error-color: var(--red-900);
    --error-background: var(--red-100);
    --error-border-color: var(--red-300);
    --error-field-border-color: var(--red-500);
    --error-focus-color: var(--red-700);
    --notice-color: var(--theme-900);
    --notice-background: var(--theme-100);
    --notice-border-color: var(--theme-300);

    --container-multiplier: 96;
    --content-padding: var(--spacing-xl);

    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --dialog-transition-duration: 150ms;
    --dialog-enter-duration: 75ms;
    --dialog-leave-duration: 100ms;

    --border-shadow: 0 0 0 1px var(--border-color);
    --line: 1px;
    --radius-default: 2px;
    /* Gap between .tinted and inset content; also drives .tinted radius. */
    --tint-inset: var(--spacing-md);
  }

  @supports (font-variation-settings: normal) {
    :root {
      font-family: "InterVariable", sans-serif;
      font-optical-sizing: auto;
    }
  }

  body {
    margin: var(--spacing-md);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--text-color);
    background-color: var(--background-color);
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    font-size: var(--font-size);
    line-height: calc(var(--font-size) + var(--baseline));
    color: var(--text-color);
    font-weight: 400;
  }

  h1 {
    --font-size: calc(var(--baseline) * 6);
  }
  h2 {
    --font-size: calc(var(--baseline) * 5);
  }
  h3 {
    --font-size: calc(var(--baseline) * 4);
  }
  h4 {
    --font-size: calc(var(--baseline) * 3);
  }
  h5 {
    --font-size: calc(var(--baseline) * 2.5);
  }
  h6 {
    --font-size: calc(var(--baseline) * 2);
  }

  /* Default page title rhythm — drop empty spacer divs after headings. */
  h1 {
    margin-block-end: var(--spacing-lg);
  }

  svg {
    height: 16px;
    width: 16px;
  }

  a,
  .link {
    --hover-color: transparent;

    display: inline-flex;
    gap: var(--spacing-sm);
    align-items: center;
    position: relative;
    z-index: 0;
    text-decoration: none;
    color: var(--link-color);
    font-size: var(--font-size);
    line-height: calc(var(--font-size) + var(--baseline));
    min-height: calc(var(--font-size) + var(--baseline));
    border-radius: var(--radius-default);
    -webkit-tap-highlight-color: transparent;

    &:hover,
    &:active {
      --hover-color: var(--background-tint-1);
    }

    &:focus-visible {
      z-index: 10;
      outline: 2px solid var(--text-color);
      outline-offset: 1px;
    }

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset-block: 0;
      inset-inline: calc(var(--baseline) * -1);
      pointer-events: none;
      border-radius: inherit;
      background-color: var(--hover-color);
    }
  }

  input:not(input[type="submit"]) {
    --border-color: var(--control-border-color);

    height: calc(var(--font-size) + var(--baseline) * 2);
    width: calc(var(--baseline) * 32);
    margin: 0;
    padding-inline: var(--baseline);
    color: var(--text-color);
    font-size: var(--font-size);
    vertical-align: top;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-default);

    &[type="file"] {
      border: 0;
      padding: 0;
      height: unset;
    }

    &[type="checkbox"] {
      width: unset;
      height: var(--font-size);
      aspect-ratio: 1;
    }
  }

  /* Buttons and .button links share one look: 1px rest border, 2px hover. */
  button:not(button.link),
  input[type="submit"],
  input::file-selector-button,
  .button {
    --border-color: var(--border-tint-1);
    --background-color: var(--surface-color);

    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size);
    height: calc(var(--font-size) + var(--baseline) * 2);
    padding-inline: var(--spacing-sm);
    border: 0;
    box-shadow: 0 0 0 1px var(--border-color);
    border-radius: var(--radius-default);
    color: var(--link-color);
    background-color: var(--background-color);

    &:hover,
    &:active {
      box-shadow: 0 0 0 2px var(--border-hover-color);
    }

    /* Links styled as buttons: drop the global link hover overlay. */
    &::before {
      content: none;
    }

    & > span:first-child:has(svg) {
      line-height: 0;
      color: var(--accent-color);

      & svg {
        stroke-width: 2px;
      }
    }
  }

  /* Dollar prefix for currency inputs. Same type as the input, muted. */
  .money-field {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    font-size: var(--font-size);
    font-family: inherit;
    font-weight: inherit;

    & > .money-field-prefix {
      position: absolute;
      inset-block: 0;
      inset-inline-start: var(--baseline);
      z-index: 50;
      display: flex;
      align-items: center;
      color: var(--muted-color);
      font-family: inherit;
      font-size: inherit;
      font-weight: 400;
      letter-spacing: inherit;
      line-height: inherit;
      pointer-events: none;
    }

    /* Beat `input:not([type=submit]) { padding-inline }` in this layer. */
    & input:not(input[type="submit"]) {
      width: 100%;
      min-width: 0;
      padding-inline-start: calc(var(--baseline) + 1ch + var(--baseline) / 4);
    }
  }

  input::file-selector-button {
    margin-inline-end: var(--baseline);
  }

  label {
    display: inline-block;
  }

  form {
    margin: 0;
    padding: 0;

    /* Unclassed field groups — keep markup free of form-row classes. */
    & > div:not([class]) {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: var(--spacing-sm);
      margin-block-end: var(--spacing-md);

      & > label {
        font-size: var(--font-size);
      }
    }

    & > .inline {
      display: flex;
      align-items: center;
      flex-direction: row;
      gap: var(--spacing-md);
      max-width: calc(var(--baseline) * 66);
      flex-wrap: wrap;
      margin-block-end: var(--spacing-md);

      & > div {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: var(--spacing-sm);

        & > label {
          font-size: var(--font-size);
        }
      }

      & input {
        min-width: calc(var(--baseline) * 20);
        max-width: calc(var(--baseline) * 32);
        width: 100%;
      }

    }

    & > .inline.reverse {
      width: fit-content;
      flex-direction: row-reverse;
    }

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