@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    color: var(--color-text);
    background: var(--color-bg);
  }

  h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
  h1 { font-size: var(--text-x-large); }
  h2 { font-size: var(--text-large); }
  h3 { font-size: var(--text-medium); font-weight: 600; }
  h4 { font-size: var(--text-normal); font-weight: 600; }

  a {
    color: var(--color-link);
    text-underline-offset: 0.2em;

    &:hover { color: var(--color-link-hover); }
  }

  strong, b { font-weight: 700; }
  small { font-size: var(--text-small); color: var(--color-subtle); }

  hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--block-space);
  }

  ul, ol { padding-inline-start: var(--inline-space-double); }

  /* Figma, Data table: a table is a card. Separate borders, so the corners can round. */
  table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-small);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
  }

  th, td {
    padding: 0.75rem var(--inline-space-double);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: middle;
  }

  th { font-size: var(--text-x-small); font-weight: 600; }
  tbody tr:last-child > * { border-block-end: 0; }

  /* On a phone a wide table scrolls sideways inside its card instead of being cut off. */
  @media (max-width: 40rem) {
    table { display: block; overflow-x: auto; }
    th, td { white-space: nowrap; }
  }

  label, legend { font-size: var(--text-small); font-weight: 600; }

  fieldset {
    border: 0;
    padding: 0;
  }

  input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), select, textarea {
    inline-size: 100%;
    min-block-size: var(--touch-target);
    padding: var(--block-space-half) var(--inline-space);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);

    &:hover { border-color: var(--color-subtle); }
    /* Figma, Text field focus: a violet edge. The global ring still shows for the keyboard. */
    &:focus { border-color: var(--color-link); box-shadow: 0 0 0 1px var(--color-link); }
    &:focus-visible { outline: none; } /* the 2px violet edge is the visible focus (5.5:1) */
    &[aria-invalid=true] { border-color: var(--color-negative); box-shadow: 0 0 0 1px var(--color-negative); }
    &:disabled, &[readonly] {
      color: var(--color-subtle);
      background: color-mix(in srgb, var(--color-border) 40%, var(--color-bg-raised)); /* Figma, Readonly: a grey fill */
    }
  }

  ::placeholder { color: var(--color-subtle); opacity: 1; }

  input[type=checkbox], input[type=radio] {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    accent-color: var(--color-link);
  }

  /* Figma, Switch (Frame 8): a native checkbox with role=switch, drawn as a pill. */
  input[type=checkbox][role=switch] {
    appearance: none;
    inline-size: 2.75rem;
    block-size: 1.5rem;
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition);

    &::before {
      content: "";
      display: block;
      inline-size: 1.125rem;
      aspect-ratio: 1;
      margin: 0.1875rem;
      background: var(--color-bg-raised);
      border-radius: 50%;
      transition: translate var(--transition);
    }

    &:checked { background: var(--color-link); }
    &:checked::before { translate: 1.25rem 0; }
  }

  button, input[type=submit], input[type=button] {
    cursor: pointer;

    &:disabled { cursor: not-allowed; }
  }

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

  ::selection { background: var(--color-link-tint); color: var(--color-text); }
}