:root:not([data-theme="dark"]) {
  color-scheme: light;
  --ink: #f5f8fb;
  --ink-2: #ffffff;
  --ink-3: #eaf1f6;
  --line: #d4dee7;
  --line-2: #aabac8;
  --fg: #172536;
  --fg-2: #354b60;
  --fg-dim: #607487;
  --fg-faint: #8292a2;
  --accent: #0077b6;
  --accent-2: #005f91;
  --accent-soft: #e1f2fa;
  --accent-tint: rgba(0, 119, 182, 0.1);
  --accent-glow: rgba(0, 119, 182, 0.2);
  --glow: rgba(0, 119, 182, 0.2);
  --danger: #c3364b;
}

html,
body,
.nav,
.topbar,
.theme-toggle {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.theme-toggle {
  position: relative;
  z-index: 72;
  display: inline-flex;
  width: 62px;
  height: 34px;
  min-width: 62px;
  min-height: 34px;
  flex: 0 0 62px;
  align-items: center;
  justify-content: space-between;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--ink-3);
  color: var(--fg-dim);
  box-shadow: 0 6px 18px rgba(25, 48, 69, 0.12);
  cursor: pointer;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink-2);
  box-shadow: 0 2px 8px rgba(16, 35, 52, 0.22);
  transition: transform 180ms ease;
}

.theme-toggle[aria-checked="true"]::before {
  transform: translateX(28px);
}

.theme-toggle-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 18px;
  height: 24px;
  place-items: center;
  font-size: 15px;
  line-height: 1;
}

.theme-toggle-sun {
  color: #b46a00;
}

.theme-toggle-moon {
  color: #78c8f4;
}

.theme-toggle:focus-visible {
  outline: 3px solid rgba(0, 119, 182, 0.28);
  outline-offset: 3px;
}

.nav-inner > .theme-toggle {
  margin-left: auto;
}

.topbar-actions .theme-toggle {
  margin-right: 4px;
}

.theme-toggle--floating {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 90;
}

:root:not([data-theme="dark"]) body {
  background-color: var(--ink);
}

:root:not([data-theme="dark"]) .nav,
:root:not([data-theme="dark"]) .topbar,
:root:not([data-theme="dark"]) .case-nav {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px -26px rgba(25, 48, 69, 0.55);
}

:root:not([data-theme="dark"]) .case-quote {
  --accent-ink: #ffffff;
}

:root:not([data-theme="dark"]) .case-brand-logo {
  filter: brightness(0) saturate(100%);
}

.case-nav > .theme-toggle {
  margin-left: auto;
}

:root:not([data-theme="dark"]) .nav-toggle {
  background: var(--ink-2);
}

:root:not([data-theme="dark"]) .nav-links a:hover {
  background: rgba(0, 119, 182, 0.08);
}

:root:not([data-theme="dark"]) .nav-links .lang-switch,
:root:not([data-theme="dark"]) .lang-switch,
:root:not([data-theme="dark"]) .topbar-button {
  background: rgba(0, 119, 182, 0.08);
}

:root:not([data-theme="dark"]) .brand .mk,
:root:not([data-theme="dark"]) .brand > span:not(.flag),
:root:not([data-theme="dark"]) .brand-logo {
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  filter: brightness(0) saturate(100%);
}

:root:not([data-theme="dark"]) .brand-logo {
  padding: 0;
}

:root:not([data-theme="dark"]) .page-bg {
  background-color: var(--ink);
}

:root:not([data-theme="dark"]) .hero-contact a,
:root:not([data-theme="dark"]) .status-strip,
:root:not([data-theme="dark"]) .quote-panel,
:root:not([data-theme="dark"]) .price-box,
:root:not([data-theme="dark"]) .material-item,
:root:not([data-theme="dark"]) .admin-dialog,
:root:not([data-theme="dark"]) .gallery-admin-card,
:root:not([data-theme="dark"]) .gallery-category-option,
:root:not([data-theme="dark"]) .admin-tabs {
  background: rgba(255, 255, 255, 0.94);
}

:root:not([data-theme="dark"]) .svc {
  border-color: #c9d6df;
  background: #ffffff;
  box-shadow: 0 24px 60px -48px rgba(24, 53, 76, 0.42);
}

:root:not([data-theme="dark"]) .svc::before {
  background: linear-gradient(90deg, rgba(0, 119, 182, 0.035), transparent 34%);
  opacity: 1;
}

:root:not([data-theme="dark"]) .svc:hover {
  border-color: #8db9cf;
  background: #ffffff;
  box-shadow: 0 28px 68px -46px rgba(24, 74, 106, 0.46);
}

:root:not([data-theme="dark"]) .svc-media {
  width: min(100%, 430px);
  border-color: #b7c9d5;
  background: #e9eff3;
  box-shadow: 0 22px 46px -34px rgba(24, 53, 76, 0.5);
}

:root:not([data-theme="dark"]) .svc-media:not(.svc-collage) img,
:root:not([data-theme="dark"]) .photo:not(:has(.photo-collage)) img {
  border: 1px solid #d1dce3;
  background-color: #dfe7ec;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

:root:not([data-theme="dark"]) .svc-media figcaption {
  border-color: rgba(255, 255, 255, 0.34);
  border-radius: 4px;
  background: rgba(17, 34, 49, 0.9);
  color: #ffffff;
  box-shadow: 0 5px 16px rgba(17, 34, 49, 0.22);
}

:root:not([data-theme="dark"]) .svc-collage,
:root:not([data-theme="dark"]) .photo-collage {
  gap: 7px;
  padding: 8px;
  border-color: #b7c9d5;
  background: #e8eef2;
}

:root:not([data-theme="dark"]) .svc-collage::before {
  display: none;
}

:root:not([data-theme="dark"]) .svc-collage .collage-item,
:root:not([data-theme="dark"]) .photo-collage .collage-item {
  border-color: #bdcbd4;
  border-radius: 5px;
  background: #d9e2e8;
  box-shadow: none;
}

:root:not([data-theme="dark"]) .svc-collage .collage-item.main img,
:root:not([data-theme="dark"]) .svc-collage .collage-item:nth-child(2) img,
:root:not([data-theme="dark"]) .photo-collage .collage-item.main img,
:root:not([data-theme="dark"]) .photo-collage .collage-item:nth-child(2) img {
  object-fit: cover;
}

:root:not([data-theme="dark"]) .svc-collage .collage-item:nth-child(n + 3) img,
:root:not([data-theme="dark"]) .photo-collage .collage-item:nth-child(n + 3) img {
  padding: 8px;
  object-fit: contain;
}

:root:not([data-theme="dark"]) .photo {
  border-color: #b7c9d5;
  background: #ffffff;
  box-shadow: 0 24px 54px -42px rgba(24, 53, 76, 0.58);
}

:root:not([data-theme="dark"]) .photo .meta {
  background: #ffffff;
}

:root:not([data-theme="dark"]) .svc .ic {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  align-self: center;
  overflow: visible;
  border: 1px solid #acd0e1;
  border-radius: 14px;
  background: #f7fbfd;
  color: #006da5;
  box-shadow: 0 8px 20px -14px rgba(0, 95, 145, 0.58);
  animation: none;
}

:root:not([data-theme="dark"]) .svc .ic::before {
  inset: -5px;
  border: 1px solid rgba(0, 119, 182, 0.42);
  border-radius: 17px;
  background: none;
  filter: none;
  transform: scale(0.94);
  animation: light-icon-ring 3.8s ease-out infinite;
}

:root:not([data-theme="dark"]) .svc .ic::after {
  inset: 7px;
  border-radius: 9px;
  background: rgba(0, 119, 182, 0.08);
  filter: none;
  opacity: 1;
  animation: light-icon-breathe 3.8s ease-in-out infinite;
}

:root:not([data-theme="dark"]) .svc .ic svg {
  width: 24px;
  height: 24px;
  color: #006da5;
  filter: none;
  opacity: 1;
  animation: none;
}

@keyframes light-icon-ring {
  0%, 35% { opacity: 0.7; transform: scale(0.94); }
  72%, 100% { opacity: 0; transform: scale(1.13); }
}

@keyframes light-icon-breathe {
  0%, 100% { opacity: 0.52; }
  50% { opacity: 1; }
}

:root:not([data-theme="dark"]) .soft-cta,
:root:not([data-theme="dark"]) .contact-offer,
:root:not([data-theme="dark"]) .portfolio-cta {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.08), #ffffff);
}

:root:not([data-theme="dark"]) .portfolio-card {
  background: var(--ink-2);
}

:root:not([data-theme="dark"]) .review {
  border-color: #ced9e1;
  background: #ffffff;
  box-shadow: 0 20px 46px -40px rgba(24, 53, 76, 0.48);
}

:root:not([data-theme="dark"]) .review-source {
  border-color: #ccd9e2;
  background: #f2f6f9;
  color: #2c4052;
}

:root:not([data-theme="dark"]) .portfolio-meta {
  --fg: #f7fbff;
  --fg-2: #d7e3ec;
}

:root:not([data-theme="dark"]) .portfolio-tag,
:root:not([data-theme="dark"]) .portfolio-zoom,
:root:not([data-theme="dark"]) .svc-media figcaption,
:root:not([data-theme="dark"]) .collage-label,
:root:not([data-theme="dark"]) .hero-proof figcaption,
:root:not([data-theme="dark"]) .about-avatar .stamp {
  background: rgba(6, 15, 25, 0.76);
  color: #f4f9fd;
}

:root:not([data-theme="dark"]) .portfolio-tag,
:root:not([data-theme="dark"]) .svc-media figcaption,
:root:not([data-theme="dark"]) .about-avatar .stamp {
  color: #70ccff;
}

:root:not([data-theme="dark"]) .lb,
:root:not([data-theme="dark"]) .lightbox {
  --ink: #060912;
  --ink-2: #0b1120;
  --ink-3: #131a2c;
  --line: #2a3454;
  --line-2: #3a486c;
  --fg: #eef2fb;
  --fg-2: #c3cad8;
  --fg-dim: #9aa5b8;
  --accent: #20a9ff;
  --accent-2: #4ec0ff;
  --accent-glow: rgba(32, 169, 255, 0.32);
}

:root:not([data-theme="dark"]) .upload-label {
  background:
    linear-gradient(rgba(0, 119, 182, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 119, 182, 0.08) 1px, transparent 1px),
    #f7fbfd;
  background-size: 26px 26px;
}

:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea,
:root:not([data-theme="dark"]) .input-with-unit,
:root:not([data-theme="dark"]) .metrics div,
:root:not([data-theme="dark"]) .gallery-card-summary > img,
:root:not([data-theme="dark"]) .gallery-order-actions button,
:root:not([data-theme="dark"]) .gallery-category-option {
  background-color: #ffffff;
  color: var(--fg);
}

:root:not([data-theme="dark"]) .preview-stage {
  background: #e8eef2;
  box-shadow:
    inset 0 0 0 1px #b8c8d3,
    0 22px 50px -38px rgba(24, 74, 106, 0.42);
}

:root:not([data-theme="dark"]) .preview-stage canvas {
  background: #e8eef2;
}

:root:not([data-theme="dark"]) .preview-empty {
  background: rgba(232, 238, 242, 0.76);
  color: #354b60;
}

:root:not([data-theme="dark"]) .preview-empty span {
  border-color: #82bad4;
  background: rgba(255, 255, 255, 0.9);
  color: #006da5;
}

:root:not([data-theme="dark"]) .modal-backdrop {
  background: rgba(31, 50, 67, 0.44);
}

:root:not([data-theme="dark"]) .admin-table th,
:root:not([data-theme="dark"]) .admin-table th:last-child {
  background: #e7f1f6;
}

:root:not([data-theme="dark"]) .admin-table td:last-child {
  background: #ffffff;
}

:root:not([data-theme="dark"]) .gallery-admin-status.is-dirty,
:root:not([data-theme="dark"]) .backend-status.is-dirty {
  color: #8a5a00;
}

:root:not([data-theme="dark"]) .toast {
  color: #ffffff;
}

@media (max-width: 900px) {
  :root:not([data-theme="dark"]) .nav-links {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 50px -24px rgba(25, 48, 69, 0.42);
  }

  .nav-inner > .theme-toggle {
    margin-left: auto;
  }

  :root:not([data-theme="dark"]) .svc-copy {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
      "num num"
      "icon title"
      ". desc"
      ". list"
      ". tags"
      ". link";
    column-gap: 14px;
  }

  :root:not([data-theme="dark"]) .svc .ic {
    width: 48px;
    height: 48px;
    margin: 0;
  }
}

@media (min-width: 901px) {
  :root:not([data-theme="dark"]) .svc-copy {
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-areas:
      "num num"
      "icon title"
      "icon desc"
      "icon list"
      "icon tags"
      ". link";
    column-gap: 24px;
    align-items: center;
  }

  :root:not([data-theme="dark"]) .svc .ic {
    width: 118px;
    height: 118px;
    flex-basis: 118px;
    margin: 0;
    border-radius: 26px;
  }

  :root:not([data-theme="dark"]) .svc .ic::before {
    inset: -8px;
    border-radius: 31px;
  }

  :root:not([data-theme="dark"]) .svc .ic::after {
    inset: 15px;
    border-radius: 17px;
  }

  :root:not([data-theme="dark"]) .svc .ic svg {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  :root:not([data-theme="dark"]) .portfolio-meta {
    background: rgba(7, 16, 27, 0.96);
  }

  :root:not([data-theme="dark"]) #realizacje .portfolio-cta {
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.1), #ffffff);
  }
}

@media (max-width: 560px) {
  .case-nav > .theme-toggle {
    width: 48px;
    min-width: 48px;
    flex-basis: 48px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .case-nav > .theme-toggle[aria-checked="true"]::before {
    transform: translateX(14px);
  }
}

@media (max-width: 360px) {
  :root:not([data-theme="dark"]) .review {
    padding: 22px;
  }

  .review-source span {
    display: none;
  }

  .review-source::after {
    content: "↗";
  }
}

@media (max-width: 700px) {
  .cookie-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .nav,
  .topbar,
  .theme-toggle,
  .theme-toggle::before,
  :root:not([data-theme="dark"]) .svc .ic::before,
  :root:not([data-theme="dark"]) .svc .ic::after {
    transition: none;
    animation: none;
  }
}
