:root {
  color-scheme: dark;
}

:root[data-tiviq-theme="light"] {
  color-scheme: light;
  --tq-light-page: #faf8ff;
  --tq-light-surface: #fff;
  --tq-light-panel: #f2edfb;
  --tq-light-border: #c8bddb;
  --tq-light-ink: #211733;
  --tq-light-text: #382b4e;
  --tq-light-muted: #5f5271;
  --tq-light-accent: #6327b9;
  --tq-light-green: #176940;
  --tq-light-gold: #805106;
  --tq-light-wash: rgba(73, 35, 131, .06);
  --tq-light-veil: rgba(250, 248, 255, .96);
}

.tq-theme-switch {
  appearance: none;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  vertical-align: middle;
  flex: none;
  padding: 3px;
  gap: 2px;
  min-height: 44px;
  background: var(--tq-light-panel, #171022);
  border: 1px solid var(--tq-light-border, #473957);
  border-radius: 99px;
  color: var(--tq-light-muted, #ded2f0);
  cursor: pointer;
}
.tq-theme-switch span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 99px;
}
.tq-theme-switch svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tq-theme-switch[aria-checked="true"] span:first-child,
.tq-theme-switch[aria-checked="false"] span:last-child {
  color: #fff;
  background: #7139c7;
}
.tq-theme-switch:focus-visible {
  outline: 2px solid var(--tq-light-accent, #c4b5fd);
  outline-offset: 3px;
}
[data-theme-switch]:empty { display: none; }
.tq-theme-alone { position: absolute; inset: 16px 20px auto auto; z-index: 5; }

@media (max-width: 390px) {
  .tq-theme-switch span { width: 30px; }
}

:root[data-tiviq-theme="light"] .tq-hero-photo {
  box-shadow: 0 24px 48px rgba(58, 32, 89, .22), 0 0 0 1px rgba(89, 59, 128, .15);
}
:root[data-tiviq-theme="light"] .tq-hero h1 span {
  background-image: linear-gradient(100deg, #6327c3, #703ab6 50%, #51208e 100%);
}
:root[data-tiviq-theme="light"] :is(.tq-btn--ghost, .knop.stil) {
  color: var(--tq-light-accent) !important;
}
:root[data-tiviq-theme="light"] .tq-btn--ghost:hover {
  background: var(--tq-light-panel);
}
