@layer base {
  html {
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: var(--leading);
    color: var(--color-text);
    background: var(--color-bg);
  }

  body { font-size: var(--text-md); }

  h1, h2, h3 { line-height: var(--leading-tight); font-weight: 600; text-wrap: balance; }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

  p { max-width: var(--measure); }

  a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.125rem; }
  a:hover { color: var(--color-primary-hover); }

  :focus-visible { outline: 0.125rem solid var(--color-focus); outline-offset: 0.125rem; }

  code, pre, kbd { font-family: var(--font-mono); font-size: var(--text-sm); }
  pre { overflow-x: auto; padding: var(--space-3) var(--space-4); background: var(--color-surface-muted); border: 1px solid var(--color-border); }

  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="number"], input[type="url"], input[type="tel"], textarea, select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    line-height: var(--leading);
  }
  input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
  input:disabled, textarea:disabled, select:disabled { background: var(--color-surface-muted); color: var(--color-text-muted); cursor: not-allowed; }
  input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; accent-color: var(--color-primary); }
  /* A file input shrinks with its grid cell; its intrinsic width grows with the font (a shop font in admin-brand.css). */
  input[type="file"] { min-width: 0; max-width: 100%; }

  table { width: 100%; font-size: var(--text-sm); }
  th { text-align: left; font-weight: 600; }
  th, td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }

  hr { border: 0; border-top: 1px solid var(--color-border); }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .text-muted { color: var(--color-text-muted); }
  .text-sm { font-size: var(--text-sm); }

  /* A number in a table cell or an input: right-aligned, with tabular figures so a column reads down, and it does not wrap. */
  .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
}