.tk-system,
.tk-system * {
  box-sizing: border-box;
}

.tk-system {
  margin: 0;
  background: var(--tk-color-canvas);
  color: var(--tk-color-text);
  font-family: var(--tk-font-ui);
  font-size: var(--tk-type-body-size);
  line-height: var(--tk-leading-body);
  overflow-wrap: anywhere;
}

.tk-system :where(button, input, select, textarea) {
  color: inherit;
  font: inherit;
}

.tk-system :where(img, svg) {
  display: block;
  max-width: 100%;
}

.tk-system :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--tk-focus-width) solid var(--tk-color-focus);
  outline-offset: var(--tk-focus-offset);
}

.tk-system :where([hidden]) {
  display: none !important;
}

.tk-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tk-skip-link {
  position: fixed;
  z-index: var(--tk-layer-skip);
  inset-block-start: var(--tk-space-3);
  inset-inline-start: var(--tk-space-3);
  padding: var(--tk-space-3) var(--tk-space-4);
  transform: translateY(calc(-100% - var(--tk-space-8)));
  border: var(--tk-border-strong) solid var(--tk-color-border);
  border-radius: var(--tk-radius-control);
  background: var(--tk-color-surface);
  color: var(--tk-color-text);
}

.tk-skip-link:focus {
  transform: translateY(0);
}

/* P01 — Text / Heading / MetadataText */
.tk-text {
  max-width: var(--tk-layout-prose);
  margin: 0;
}

.tk-text--muted,
.tk-metadata {
  color: var(--tk-color-text-muted);
}

.tk-metadata {
  font-size: var(--tk-type-meta-size);
  line-height: var(--tk-leading-meta);
}

.tk-heading {
  max-width: var(--tk-layout-prose);
  margin: 0;
  font-family: var(--tk-font-display);
  font-weight: var(--tk-weight-bold);
  line-height: var(--tk-leading-tight);
  text-wrap: balance;
}

.tk-heading--item { font-size: var(--tk-type-item-size); }
.tk-heading--section { font-size: var(--tk-type-section-size); }
.tk-heading--page { font-size: var(--tk-type-page-size); }
.tk-heading--hero { font-size: var(--tk-type-hero-size); }

/* P01a — Auxiliary semantic text colors */
.text-info { color: var(--tk-color-info); }
.text-method { color: var(--tk-color-method); }
.text-highlight { color: var(--tk-color-highlight); }

/* P02 — Action / Link / IconButton */
.tk-action,
.tk-icon-button {
  display: inline-flex;
  min-width: var(--tk-control-min-size);
  min-height: var(--tk-control-min-size);
  align-items: center;
  justify-content: center;
  gap: var(--tk-space-2);
  padding: var(--tk-space-2) var(--tk-space-4);
  border: var(--tk-border-strong) solid var(--tk-color-action);
  border-radius: var(--tk-radius-control);
  background: var(--tk-control-active-background);
  color: var(--tk-control-active-text);
  cursor: pointer;
  font-weight: var(--tk-weight-medium);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
}

.tk-action:hover,
.tk-icon-button:hover {
  border-color: var(--tk-color-action-hover);
  background: var(--tk-color-action-hover);
}

.tk-action:active,
.tk-icon-button:active {
  border-color: var(--tk-color-action-pressed);
  background: var(--tk-color-action-pressed);
}

.tk-action:focus-visible,
.tk-icon-button:focus-visible {
  box-shadow: 0 0 0 var(--tk-focus-gap) var(--tk-color-focus-gap);
}

.tk-action--secondary,
.tk-icon-button--secondary {
  border-color: var(--tk-control-border);
  background: var(--tk-control-background);
  color: var(--tk-color-text);
}

.tk-action--secondary:hover,
.tk-icon-button--secondary:hover {
  border-color: var(--tk-color-action-hover);
  background: var(--tk-color-selected-surface);
  color: var(--tk-color-text);
}

.tk-action--secondary:active,
.tk-icon-button--secondary:active {
  border-color: var(--tk-color-action-pressed);
  background: var(--tk-color-surface-muted);
}

.tk-action[aria-pressed="true"],
.tk-action[aria-current="page"] {
  border-color: var(--tk-item-selected-border);
  background: var(--tk-item-selected-background);
  color: var(--tk-color-text);
}

.tk-action:disabled,
.tk-icon-button:disabled,
.tk-action[aria-disabled="true"],
.tk-icon-button[aria-disabled="true"] {
  border-color: var(--tk-color-border-subtle);
  background: var(--tk-color-surface-muted);
  color: var(--tk-color-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

.tk-icon-button {
  width: var(--tk-control-min-size);
  padding: 0;
  border-radius: var(--tk-radius-pill);
}

.tk-link {
  display: inline-flex;
  min-height: var(--tk-control-min-size);
  align-items: center;
  color: var(--tk-color-action);
  font-weight: var(--tk-weight-medium);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

.tk-link:hover { color: var(--tk-color-action-hover); }
.tk-link:active { color: var(--tk-color-action-pressed); }

/* P03 — Field / NativeSelect */
.tk-field-group {
  display: grid;
  gap: var(--tk-space-2);
}

.tk-label {
  font-weight: var(--tk-weight-medium);
}

.tk-field,
.tk-select {
  width: 100%;
  min-height: var(--tk-field-min-size);
  padding: var(--tk-space-3) var(--tk-space-4);
  border: var(--tk-border-strong) solid var(--tk-control-border);
  border-radius: var(--tk-radius-control);
  background: var(--tk-control-background);
}

.tk-field:hover,
.tk-select:hover { border-color: var(--tk-color-action-hover); }

.tk-field[aria-invalid="true"],
.tk-select[aria-invalid="true"] { border-color: var(--tk-color-error); }

.tk-field:disabled,
.tk-select:disabled {
  border-color: var(--tk-color-border-subtle);
  background: var(--tk-color-surface-muted);
  color: var(--tk-color-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

.tk-field-help,
.tk-field-error {
  margin: 0;
  font-size: var(--tk-type-meta-size);
}

.tk-field-help { color: var(--tk-color-text-muted); }
.tk-field-error { color: var(--tk-color-error); }

/* P04 — Badge / StatusLabel */
.tk-badge,
.tk-status-label {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  gap: var(--tk-space-1);
  padding: var(--tk-space-1) var(--tk-space-3);
  border: var(--tk-border-thin) solid var(--tk-color-border);
  border-radius: var(--tk-radius-pill);
  background: var(--tk-color-surface);
  color: var(--tk-color-text);
  font-size: var(--tk-type-meta-size);
  font-weight: var(--tk-weight-medium);
  line-height: var(--tk-leading-meta);
}

.tk-status-label--success { border-color: var(--tk-color-success); color: var(--tk-color-success); }
.tk-status-label--warning { border-color: var(--tk-color-warning); color: var(--tk-color-warning); }
.tk-status-label--error { border-color: var(--tk-color-error); color: var(--tk-color-error); }
.tk-status-label--selected { border-color: var(--tk-color-selected-border); background: var(--tk-color-selected-surface); }

/* P05 — Surface / Stack / Grid / Divider */
.tk-surface {
  padding: var(--tk-space-5);
  border: var(--tk-border-thin) solid var(--tk-panel-border);
  border-radius: var(--tk-radius-panel);
  background: var(--tk-panel-background);
}

.tk-surface--raised { box-shadow: var(--tk-shadow-raised); }
.tk-surface--muted { background: var(--tk-color-surface-muted); }

.tk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tk-stack-space, var(--tk-space-4));
}

.tk-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tk-cluster-space, var(--tk-space-3));
}

.tk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tk-grid-min, 15rem)), 1fr));
  gap: var(--tk-grid-space, var(--tk-space-5));
}

.tk-divider {
  width: 100%;
  margin: 0;
  border: 0;
  border-block-start: var(--tk-border-thin) solid var(--tk-color-border-subtle);
}

/* P06 — Preview / BookPreview */
.tk-preview {
  display: grid;
  min-height: 8rem;
  place-items: center;
  overflow: hidden;
  border: var(--tk-border-thin) solid var(--tk-color-border-subtle);
  border-radius: var(--tk-radius-control);
  background: var(--tk-color-surface-muted);
  color: var(--tk-color-text-muted);
}

.tk-book-preview {
  aspect-ratio: 3 / 4;
  width: min(100%, 10rem);
  box-shadow: var(--tk-shadow-raised);
}

.tk-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* P07 — Disclosure */
.tk-disclosure {
  border-block-end: var(--tk-border-thin) solid var(--tk-color-border-subtle);
}

.tk-disclosure > summary {
  display: flex;
  min-height: var(--tk-control-min-size);
  align-items: center;
  justify-content: space-between;
  gap: var(--tk-space-3);
  cursor: pointer;
  font-weight: var(--tk-weight-medium);
  list-style: none;
  touch-action: manipulation;
}

.tk-disclosure > summary::-webkit-details-marker { display: none; }
.tk-disclosure > summary::after { content: "+"; }
.tk-disclosure[open] > summary::after { content: "−"; }
.tk-disclosure__content { padding-block-end: var(--tk-space-4); }

@media (forced-colors: active) {
  .tk-system :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: var(--tk-color-focus);
  }

  .tk-action,
  .tk-icon-button,
  .tk-field,
  .tk-select,
  .tk-badge,
  .tk-status-label,
  .tk-preview {
    border-color: var(--tk-color-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-system *,
  .tk-system *::before,
  .tk-system *::after {
    scroll-behavior: auto !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .tk-action,
  .tk-icon-button,
  .tk-field,
  .tk-select {
    transition:
      background-color var(--tk-motion-duration-feedback) var(--tk-motion-ease),
      border-color var(--tk-motion-duration-feedback) var(--tk-motion-ease);
  }
  .tk-badge--info,
  .tk-badge--method,
  .tk-badge--highlight,
  .tk-status-label--info,
  .tk-status-label--method,
  .tk-status-label--highlight {
    transition:
      background-color var(--tk-motion-duration-feedback) var(--tk-motion-ease),
      border-color var(--tk-motion-duration-feedback) var(--tk-motion-ease),
      color var(--tk-motion-duration-feedback) var(--tk-motion-ease);
  }
}

@media (hover: none) {
  .tk-action:not(:disabled):not([aria-disabled="true"]):hover,
  .tk-icon-button:not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--tk-color-action);
    background: var(--tk-control-active-background);
  }

  .tk-action--secondary:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):not([aria-current="page"]):hover,
  .tk-icon-button--secondary:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):hover {
    border-color: var(--tk-control-border);
    background: var(--tk-control-background);
  }

  .tk-action--info:not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--tk-color-info);
    background: var(--tk-color-info);
  }

  .tk-action--method:not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--tk-color-method);
    background: var(--tk-color-method);
  }

  .tk-action--highlight:not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--tk-color-highlight);
    background: var(--tk-color-highlight);
  }

  .tk-badge--info:hover,
  .tk-status-label--info:hover {
    background: var(--tk-color-surface);
    color: var(--tk-color-info);
  }

  .tk-badge--method:hover,
  .tk-status-label--method:hover {
    background: var(--tk-color-surface);
    color: var(--tk-color-method);
  }

  .tk-badge--highlight:hover,
  .tk-status-label--highlight:hover {
    background: var(--tk-color-surface);
    color: var(--tk-color-highlight);
  }

  .tk-link:hover { color: var(--tk-color-action); }
  .tk-field:not(:disabled):hover,
  .tk-select:not(:disabled):hover { border-color: var(--tk-control-border); }
}