/* [主题迁移] 通用控件主题层，仅覆盖视觉属性。 */
/* Universal visual theme layer. Page styles continue to own layout and behavior. */
html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

:where(
  body,
  header,
  nav,
  main,
  section,
  article,
  aside,
  footer,
  a,
  button,
  input,
  select,
  textarea,
  table,
  th,
  td,
  dialog,
  [role="button"],
  [role="dialog"],
  [role="menu"],
  .card,
  .panel,
  .popover,
  .menu,
  .toast,
  .confirm,
  .tag,
  .badge,
  .chip,
  svg,
  svg *
) {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke;
  transition-duration: 180ms;
  transition-timing-function: ease;
}

body,
.document-canvas,
.page-canvas,
.reading-canvas {
  background-color: var(--theme-canvas);
  color: var(--theme-text-1);
}

.document-surface,
.paper,
.reading-paper,
.article-surface {
  background-color: var(--theme-surface);
  border-color: var(--theme-line);
  color: var(--theme-text-1);
}

[data-theme-texture],
.theme-texture {
  opacity: var(--theme-texture-opacity);
}

/* [主题补全] 浅色导航沿用新版原始视觉，仅在深色模式启用通用导航覆盖。 */
html[data-theme="dark"] header,
html[data-theme="dark"] nav:not(.sidebar-menu),
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar {
  background-color: var(--theme-surface);
  border-color: var(--theme-line);
  color: var(--theme-text-1);
}

html[data-theme="dark"] nav:not(.sidebar-menu) a,
html[data-theme="dark"] .navbar a,
html[data-theme="dark"] .sidebar a {
  color: var(--theme-text-2);
}

html[data-theme="dark"] nav:not(.sidebar-menu) a:hover,
html[data-theme="dark"] .navbar a:hover,
html[data-theme="dark"] .sidebar a:hover,
html[data-theme="dark"] nav:not(.sidebar-menu) a[aria-current="page"],
html[data-theme="dark"] .navbar a[aria-current="page"],
html[data-theme="dark"] .sidebar a[aria-current="page"] {
  background-color: var(--theme-surface-soft);
  color: var(--theme-text-1);
}

.card,
.panel,
.surface,
.sheet,
.widget {
  background-color: var(--theme-surface);
  border-color: var(--theme-line);
  box-shadow: var(--theme-shadow);
  color: var(--theme-text-1);
}

.card:hover,
.panel:hover {
  background-color: var(--theme-surface-raised);
  border-color: var(--theme-line-strong);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  background-color: var(--theme-surface-raised);
  border-color: var(--theme-line-strong);
  caret-color: var(--theme-gold);
  color: var(--theme-text-1);
}

input::placeholder,
textarea::placeholder {
  color: var(--theme-text-2);
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--theme-gold);
}

button,
.button,
[role="button"] {
  background-color: var(--theme-surface-raised);
  border-color: var(--theme-line-strong);
  color: var(--theme-text-1);
}

button:hover:not(:disabled):not([aria-disabled="true"]),
.button:hover:not([aria-disabled="true"]),
[role="button"]:hover:not([aria-disabled="true"]) {
  background-color: var(--theme-surface-soft);
  border-color: var(--theme-gold);
  color: var(--theme-text-1);
}

.button-primary,
.btn-primary,
button[data-variant="primary"] {
  background-color: var(--theme-gold-soft);
  border-color: var(--theme-gold);
  color: var(--theme-text-1);
}

.button-danger,
.btn-danger,
button[data-variant="danger"] {
  border-color: var(--theme-danger);
  color: var(--theme-danger);
}

:disabled,
[aria-disabled="true"] {
  color: var(--theme-text-disabled);
  cursor: not-allowed;
  opacity: .58;
}

.tag,
.badge,
.chip {
  background-color: var(--theme-gold-soft);
  border-color: var(--theme-line);
  color: var(--theme-text-2);
}

.tag[data-tone="success"],
.badge[data-tone="success"],
.chip[data-tone="success"] {
  background-color: var(--theme-pine-soft);
  color: var(--theme-pine);
}

.list,
[role="list"],
.list-item,
[role="listitem"] {
  border-color: var(--theme-line);
  color: var(--theme-text-1);
}

.list-item:hover {
  background-color: var(--theme-surface-soft);
}

table {
  background-color: var(--theme-surface);
  border-color: var(--theme-line);
  color: var(--theme-text-1);
}

thead,
th {
  background-color: var(--theme-surface-soft);
  border-color: var(--theme-line-strong);
  color: var(--theme-text-2);
}

tbody,
tr,
td {
  border-color: var(--theme-line);
}

tbody tr:hover {
  background-color: var(--theme-surface-soft);
}

dialog,
[role="dialog"],
.dialog,
.modal,
.popover,
[role="menu"],
.menu,
.dropdown-menu {
  background-color: var(--theme-surface-raised);
  border-color: var(--theme-line-strong);
  box-shadow: var(--theme-shadow);
  color: var(--theme-text-1);
}

.toast,
[role="status"],
.confirm,
.confirmation,
[role="alertdialog"] {
  background-color: var(--theme-surface-raised);
  border-color: var(--theme-line-strong);
  box-shadow: var(--theme-shadow);
  color: var(--theme-text-1);
}

.toast[data-tone="danger"],
.confirm[data-tone="danger"] {
  border-color: var(--theme-danger);
  color: var(--theme-danger);
}

dialog::backdrop,
.modal-backdrop,
.overlay,
.scrim {
  background-color: rgba(23,26,24,.58);
}

* {
  scrollbar-color: var(--theme-line-strong) var(--theme-canvas-alt);
}

*::-webkit-scrollbar-track {
  background-color: var(--theme-canvas-alt);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--theme-line-strong);
  border-color: var(--theme-canvas-alt);
}

:focus-visible {
  outline: 2px solid var(--theme-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--theme-gold-soft);
}

svg.icon,
svg[fill="currentColor"],
svg [fill="currentColor"] {
  fill: currentColor;
}

svg[stroke="currentColor"],
svg [stroke="currentColor"] {
  stroke: currentColor;
}

*::selection {
  background-color: var(--theme-gold-soft);
  color: var(--theme-text-1);
}

@media (prefers-reduced-motion: reduce) {
  :where(
    body,
    header,
    nav,
    main,
    section,
    article,
    aside,
    footer,
    a,
    button,
    input,
    select,
    textarea,
    table,
    th,
    td,
    dialog,
    [role="button"],
    [role="dialog"],
    [role="menu"],
    .card,
    .panel,
    .popover,
    .menu,
    .toast,
    .confirm,
    .tag,
    .badge,
    .chip,
    svg,
    svg *
  ) {
    transition-duration: 0.01ms;
  }
}