html[data-theme="light"] .vgt {
  --vgt-border: var(--color-border-subtle);
  --vgt-bg: var(--color-surface-base);
  --vgt-head-bg: var(--color-bg-subtle);
  --vgt-hover: var(--color-surface-hover);
  --vgt-muted: var(--color-text-secondary);

  background: var(--color-surface-base);
  color: var(--color-text-primary);
}

html[data-theme="light"] .vgt__top {
  border-bottom-color: var(--vgt-border);
}

html[data-theme="light"] .vgt__toolbar {
  border-bottom-color: var(--vgt-border);
  background: var(--color-bg-subtle);
}

html[data-theme="light"] .vgt__btn {
  color: var(--color-text-secondary);
}

html[data-theme="light"] .vgt__head {
  background: var(--vgt-head-bg);
}

html[data-theme="light"] .vgt__headBumper {
  border-right-color: var(--vgt-border);
  border-bottom-color: var(--vgt-border);
  background: color-mix(in srgb, var(--color-bg-subtle) 82%, var(--color-surface-base));
}

html[data-theme="light"] .vgt__headBumper:hover {
  background: color-mix(in srgb, var(--color-accent-primary-soft) 42%, var(--color-bg-subtle));
}

html[data-theme="light"] .vgt__headBumper[data-active="1"] {
  background: color-mix(in srgb, var(--color-accent-primary-soft) 70%, var(--color-surface-base));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-primary) 34%, var(--color-border-subtle));
}

html[data-theme="light"] .vgt__hcell {
  border-right-color: color-mix(in srgb, var(--color-border-subtle) 72%, transparent);
  color: var(--color-text-secondary);
}

html[data-theme="light"] .vgt__hcell:hover {
  background: color-mix(in srgb, var(--color-accent-primary-soft) 60%, transparent);
}

html[data-theme="light"] .vgt__hcell.vgt__hcell--selected {
  background: color-mix(in srgb, var(--color-accent-primary-soft) 82%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-primary) 28%, var(--color-border-subtle));
  color: var(--color-text-primary);
}

html[data-theme="light"] .vgt__sort {
  color: var(--color-text-tertiary);
}

html[data-theme="light"] .vgt__filterBtn {
  border-color: var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-bg-subtle) 84%, var(--color-surface-base));
  color: var(--color-text-secondary);
}

html[data-theme="light"] .vgt__filterBtn[data-active="1"] {
  background: color-mix(in srgb, var(--color-accent-primary-soft) 78%, var(--color-surface-base));
  border-color: color-mix(in srgb, var(--color-accent-primary) 24%, var(--color-border-subtle));
  color: var(--color-text-primary);
}

html[data-theme="light"] .vgt__filterBtn:hover {
  background: color-mix(in srgb, var(--color-accent-primary-soft) 52%, var(--color-surface-hover));
}

html[data-theme="light"] .vgt__rowBumpers {
  border-right-color: var(--vgt-border);
  background: color-mix(in srgb, var(--color-bg-subtle) 78%, var(--color-surface-base));
}

html[data-theme="light"] .vgt__rowBumper {
  border-bottom-color: var(--vgt-border);
}

html[data-theme="light"] .vgt__rowBumper:hover {
  background: color-mix(in srgb, var(--color-accent-primary-soft) 48%, transparent);
}

html[data-theme="light"] .vgt__rowBumper[data-selected="1"] {
  background: color-mix(in srgb, var(--color-accent-primary-soft) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-primary) 24%, var(--color-border-subtle));
}

html[data-theme="light"] .vgt__row {
  border-bottom-color: var(--vgt-border);
}

html[data-theme="light"] .vgt__row:nth-child(even) {
  background: transparent;
}

html[data-theme="light"] .vgt__row[data-loading="1"] .vgt__cell {
  color: var(--color-text-tertiary);
}

html[data-theme="light"] .vgt__cell {
  border-right-color: color-mix(in srgb, var(--color-border-subtle) 68%, transparent);
  color: var(--color-text-primary);
}

html[data-theme="light"] .vgt__cell.vgt__cell--selected {
  background: color-mix(in srgb, var(--color-accent-primary-soft) 64%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-primary) 24%, var(--color-border-subtle));
}

html[data-theme="light"] .vgt__scroll,
html[data-theme="light"] .vgt__hscroll,
html[data-theme="light"] .vgt__corner {
  background: color-mix(in srgb, var(--color-bg-subtle) 88%, var(--color-surface-base));
}

html[data-theme="light"] .vgt__scroll {
  border-left-color: var(--vgt-border);
}

html[data-theme="light"] .vgt__hscroll,
html[data-theme="light"] .vgt__corner {
  border-top-color: var(--vgt-border);
}

html[data-theme="light"] .vgt__corner {
  border-left-color: var(--vgt-border);
}

html[data-theme="light"] .vgt__htrack,
html[data-theme="light"] .vgt__track {
  background: color-mix(in srgb, var(--color-border-default) 40%, transparent);
}

html[data-theme="light"] .vgt__hthumb,
html[data-theme="light"] .vgt__thumb {
  background: color-mix(in srgb, var(--color-accent-primary) 46%, var(--color-text-secondary));
}

html[data-theme="light"] .vgt__hthumb:hover,
html[data-theme="light"] .vgt__thumb:hover {
  background: color-mix(in srgb, var(--color-accent-primary-hover) 64%, var(--color-text-secondary));
}

html[data-theme="light"] .vgt__sbtn {
  color: var(--color-text-secondary);
}

html[data-theme="light"] .vgt__overlay {
  background: color-mix(in srgb, var(--color-bg-canvas) 82%, var(--color-surface-base));
  color: var(--color-text-secondary);
}

html[data-theme="light"] .vgt__overlay[data-state="loading"]::before {
  border-color: color-mix(in srgb, var(--color-border-default) 72%, transparent);
  border-top-color: var(--color-accent-primary);
  border-right-color: var(--color-accent-primary);
}

html[data-theme="light"] .vgt__copyFab {
  border-color: color-mix(in srgb, var(--color-accent-primary) 38%, var(--color-border-subtle));
  background: var(--color-accent-primary);
  color: var(--theme-accent-contrast);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .vgt__copyFab--headers {
  background: color-mix(in srgb, var(--color-text-secondary) 84%, white);
  border-color: color-mix(in srgb, var(--color-text-secondary) 28%, var(--color-border-subtle));
}

html[data-theme="light"] .vgt__copyFab[data-copied="1"] {
  background: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 34%, var(--color-border-subtle));
}

html[data-theme="light"] .vgt__ctxMenu,
html[data-theme="light"] .vgt__filterMenu {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-base);
  box-shadow: var(--shadow-md);
}

html[data-theme="light"] .vgt__ctxMenuItem,
html[data-theme="light"] .vgt__filterTitle {
  color: var(--color-text-primary);
}

html[data-theme="light"] .vgt__ctxMenuItem:hover {
  border-color: color-mix(in srgb, var(--color-accent-primary) 20%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-accent-primary-soft) 52%, var(--color-surface-hover));
}

html[data-theme="light"] .vgt__filterSection {
  color: var(--color-text-secondary);
}

html[data-theme="light"] .vgt__filterDivider {
  border-top-color: var(--vgt-border);
}

html[data-theme="light"] .vgt__filterOp,
html[data-theme="light"] .vgt__filterInput,
html[data-theme="light"] .vgt__searchSelect,
html[data-theme="light"] .vgt__searchInput {
  border-color: var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-bg-subtle) 72%, var(--color-surface-base));
  color: var(--color-text-primary);
}

html[data-theme="light"] .vgt__footer {
  background: color-mix(in srgb, var(--color-bg-subtle) 82%, var(--color-surface-base));
}

html[data-theme="light"] .vgt__pill {
  border-color: var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-bg-subtle) 70%, var(--color-surface-base));
  color: var(--color-text-secondary);
}

html[data-theme="light"] .vgt__searchInput::placeholder {
  color: var(--color-text-tertiary);
}

html[data-theme="light"] .vgt__ctxMenuItem:focus,
html[data-theme="light"] .vgt__filterBtn:focus,
html[data-theme="light"] .vgt__searchSelect:focus,
html[data-theme="light"] .vgt__searchInput:focus {
  border-color: var(--theme-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-focus) 20%, transparent);
}

@media (pointer: coarse) {
  html[data-theme="light"] .vgt__copyFab[data-copied="1"]::after {
    color: #f4fff8;
  }
}