@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    background: var(--color-canvas);
    color: var(--color-ink);
    font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  /* Plain links read as text with a quiet underline; components restyle them in later layers. */
  a {
    color: var(--color-ink);
    text-decoration-color: color-mix(in oklch, var(--color-ink) 35%, transparent);
    text-underline-offset: 2px;

    &:hover {
      color: var(--color-primary);
      text-decoration-color: currentColor;
    }
  }

  input[type="checkbox"],
  input[type="range"] {
    accent-color: var(--color-primary);
  }

  /* A keyboard key, wherever one is named (hints, the changelog, the toolbar, buttons): a small key cap
     drawn from the text's own colour, so it reads on muted copy and on a pressed button alike. Inline,
     so its border never makes a line taller. */
  kbd {
    padding: 0 0.35em;
    font: 600 0.85em/1 ui-monospace, monospace;
    /* in a flex row (a tool, a toggle) it's a box: kept short */
    color: inherit;
    white-space: nowrap;
    background: color-mix(in oklch, currentColor 10%, transparent);
    border: 1px solid color-mix(in oklch, currentColor 30%, transparent);
    border-bottom-width: 2px;
    border-radius: 4px;
  }

  :is(button, a)>kbd {
    margin-left: 4px;
  }
}