/* 可复用组件。颜色、排印、留白、圆角、阴影、控件尺寸只消费 Token。 */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-family); font-size: var(--font-size-body); line-height: var(--line-height-body); }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled, input:disabled, textarea:disabled { cursor: not-allowed; }
button, input, textarea, select { min-width: 0; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--font-size-title); font-weight: var(--font-weight-strong); line-height: var(--line-height-tight); }
h2 { font-size: var(--font-size-heading); font-weight: var(--font-weight-strong); line-height: var(--line-height-tight); }
h3 { font-size: var(--font-size-body); font-weight: var(--font-weight-strong); }
a { color: var(--color-primary); text-underline-offset: var(--space-xs); }
code, .mono { font-family: var(--font-family-mono); font-size: var(--font-size-caption); overflow-wrap: anywhere; }
small, .caption { font-size: var(--font-size-caption); }
.muted { color: var(--color-text-muted); }
.strong { font-weight: var(--font-weight-strong); }
.stack { display: flex; flex-direction: column; gap: var(--density-gap); }
.row { display: flex; gap: var(--space-s); align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.icon { width: var(--icon-size-m); height: var(--icon-size-m); stroke: currentColor; fill: none; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon.small { width: var(--icon-size-s); height: var(--icon-size-s); }
:where(button, a, input, textarea, select, [tabindex]):focus-visible,
.focus-specimen { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-s);
  min-height: var(--control-height); padding: var(--space-xs) var(--control-padding);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-s);
  background: var(--color-surface); color: var(--color-text); font-weight: var(--font-weight-medium);
  text-decoration: none; line-height: var(--line-height-tight);
}
.button:hover, .button[data-state="hover"] { background: var(--color-hover); }
.button:active, .button[data-state="pressed"] { background: var(--color-pressed); }
.button.primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.button.primary:hover, .button.primary[data-state="hover"] { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.button.primary:active, .button.primary[data-state="pressed"] { background: var(--color-primary-pressed); border-color: var(--color-primary-pressed); }
.button.danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-text-inverse); }
.button.danger:hover, .button.danger[data-state="hover"] { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
.button.danger:active, .button.danger[data-state="pressed"] { background: var(--color-danger-pressed); border-color: var(--color-danger-pressed); }
.button.quiet { border-color: transparent; background: transparent; }
.button.quiet:hover { background: var(--color-hover); }
.button.quiet:active { background: var(--color-pressed); }
.button[aria-pressed="true"] { background: var(--color-selected); border-color: var(--color-primary); color: var(--color-primary); }
.button:disabled, .button:disabled:hover, .button:disabled:active {
  background: var(--color-disabled-background); color: var(--color-disabled-text); border-color: var(--color-border);
}
.field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.field > label { font-weight: var(--font-weight-medium); }
.textbox {
  width: 100%; min-height: var(--control-height); padding: var(--space-xs) var(--control-padding);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-s);
  background: var(--color-surface); color: var(--color-text);
}
.textbox::placeholder { color: var(--color-text-muted); }
.textbox:hover:not(:disabled) { border-color: var(--color-text-muted); }
.textbox[aria-invalid="true"] { border-color: var(--color-error); }
.textbox:disabled { background: var(--color-disabled-background); color: var(--color-disabled-text); border-color: var(--color-border); }
textarea.textbox { resize: vertical; }
.field-message { color: var(--color-error); font-size: var(--font-size-caption); }
.toggle { display: inline-flex; align-items: center; gap: var(--space-s); min-height: var(--control-height); cursor: pointer; }
.toggle input {
  appearance: none; position: relative; margin: 0; flex-shrink: 0; cursor: pointer;
  width: calc(var(--icon-size-m) * 2); height: calc(var(--icon-size-m) + var(--space-xs));
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-l); background: var(--color-surface);
}
.toggle input::after {
  content: ""; display: block; position: absolute;
  width: var(--icon-size-s); height: var(--icon-size-s); top: 50%; left: var(--space-xs);
  transform: translateY(-50%); border-radius: var(--radius-l); background: var(--color-text-muted);
}
.toggle input:checked { background: var(--color-primary); border-color: var(--color-primary); }
.toggle input:checked::after { left: auto; right: var(--space-xs); background: var(--color-text-inverse); }
.toggle input:hover:not(:disabled) { background: var(--color-hover); }
.toggle input:checked:hover:not(:disabled) { background: var(--color-primary-hover); }
.toggle input:active:not(:disabled) { background: var(--color-pressed); }
.toggle input:checked:active:not(:disabled) { background: var(--color-primary-pressed); }
.toggle input:disabled { cursor: not-allowed; border-color: var(--color-border); background: var(--color-disabled-background); }
.toggle input:disabled::after { background: var(--color-disabled-text); }
.toggle:has(input:disabled) { color: var(--color-disabled-text); cursor: not-allowed; }
.card { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-m); padding: var(--density-padding); box-shadow: var(--shadow-none); min-width: 0; }
.navigation { display: flex; flex-direction: column; gap: var(--space-xs); }
.nav-item { display: flex; align-items: center; gap: var(--space-s); min-height: var(--control-height); padding: var(--space-s) var(--control-padding); color: var(--color-text-muted); background: transparent; border: var(--border-width) solid transparent; border-radius: var(--radius-s); text-align: left; text-decoration: none; font-weight: var(--font-weight-medium); }
.nav-item:hover { background: var(--color-hover); color: var(--color-text); }
.nav-item:active { background: var(--color-pressed); }
.nav-item[aria-current="page"], .nav-item[aria-pressed="true"] { background: var(--color-selected); color: var(--color-primary); }
.list { list-style: none; padding: 0; margin: 0; }
.list > li + li { border-top: var(--border-width) solid var(--color-border); }
.list-item { display: flex; align-items: center; gap: var(--density-gap); width: 100%; min-height: var(--row-height); padding: var(--space-s) var(--density-padding); background: var(--color-surface); color: var(--color-text); border: var(--border-width) solid transparent; text-align: left; }
.list-item:hover { background: var(--color-hover); }
.list-item:active { background: var(--color-pressed); }
.list-item[aria-pressed="true"] { background: var(--color-selected); }
.list-item:focus-visible { position: relative; outline-offset: calc(-1 * var(--focus-width)); }
.list-item:disabled { background: var(--color-disabled-background); color: var(--color-disabled-text); }
.item-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.status { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-caption); white-space: nowrap; font-weight: var(--font-weight-medium); }
.status.success { color: var(--color-success); }
.status.warning { color: var(--color-warning); }
.status.error { color: var(--color-error); }
.divider { border: 0; border-top: var(--border-width) solid var(--color-border); margin: var(--space-s) 0; }
.dialog { width: min(32rem, calc(100% - var(--space-xl))); padding: var(--space-xl); color: var(--color-text); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-l); box-shadow: var(--shadow-high); }
.dialog::backdrop { background: var(--color-backdrop); }
.empty { padding: var(--space-xl); text-align: center; color: var(--color-text-muted); }
@media (forced-colors: active) {
  .button.primary, .toggle input:checked { background: Highlight; color: HighlightText; }
  .toggle input::after { background: ButtonText; }
  .toggle input:checked::after { background: HighlightText; }
  .list-item[aria-pressed="true"], .nav-item[aria-current="page"] { border-color: Highlight; }
}