@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-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: var(--gray-950);
    --text-on-emphasis-color: white;
    --link-color: var(--turquoise-900);
    --page-background: var(--turquoise-50);
    --page-control-hover-background: var(--turquoise-100);
    --background-color: var(--page-background);
    --surface-color: white;
    --border-color: var(--gray-300);
    --muted-color: var(--gray-600);
    --control-border-color: var(--gray-400);
    --control-hover-background: var(--gray-200);

    /* 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-50);
    --error-border-color: var(--red-300);
    --error-field-border-color: var(--red-500);
    --error-focus-color: var(--red-700);

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

    --border-shadow: 0 0 0 1px var(--border-color);
    --line: 1px;
    --radius-default: 2px;
  }

  @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);
  }

  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);
  }

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

    display: inline-flex;
    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));

    &:hover {
      --hover-color: color-mix(in oklch, var(--link-color) 10%, white);
    }

    &:focus-visible {
      z-index: 10;
      border-radius: var(--radius-default);
      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;
      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;
    }
  }

  button:not(button.link),
  input[type="submit"],
  input::file-selector-button {
    --border-color: var(--gray-700);
    --background-color: var(--surface-color);

    display: inline-flex;
    align-items: center;
    font-size: var(--font-size);
    height: calc(var(--font-size) + var(--baseline) * 2);
    padding-inline: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-default);
    color: var(--text-color);
    background-color: var(--background-color);

    &:hover {
      --background-color: var(--control-hover-background);
    }
  }

  input[type="date"] {
    font-family: inherit;
  }

  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);
      }

      & > lexxy-editor {
        width: 100%;
      }
    }

    & > .inline {
      align-items: center;
      flex-direction: row;
    }

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

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