/* product-canvas.css — 1:1 «Конструктор проектов.html» (canvas + calm haze) */

html[data-theme="light"],
html:not([data-theme="dark"]) {
  --background: #faf9f7;
  --secondary: #f1f0ee;
  --muted: #f1f0ee;
  --product-haze-1: #d9d4cc;
  --product-haze-2: #cfd0d6;
  --product-haze-3: #cdd6d2;
  /* aliases used in ops-light-shell */
  --ops-canvas: #faf9f7;
  --ops-haze-1: var(--product-haze-1);
  --ops-haze-2: var(--product-haze-2);
  --ops-haze-3: var(--product-haze-3);
  --lk-haze-1: var(--product-haze-1);
  --lk-haze-2: var(--product-haze-2);
  --lk-haze-3: var(--product-haze-3);
  --ctor-haze-1: var(--product-haze-1);
  --ctor-haze-2: var(--product-haze-2);
  --ctor-haze-3: var(--product-haze-3);
}

html[data-theme="light"] body,
html:not([data-theme="dark"]) body {
  background-color: #faf9f7;
}

/* fixed canvas layer — ctor-bg · ops-bg · bgfield share one recipe */
.ctor-bg,
.ops-bg,
.bgfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #faf9f7;
}

html[data-theme="dark"] .ctor-bg,
html[data-theme="dark"] .ops-bg,
html[data-theme="dark"] .bgfield {
  display: none;
}

.ctor-bg span,
.ops-bg span,
.bgfield .blob,
.bgfield span {
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
}

html[data-theme="light"] .ctor-bg .b1,
html:not([data-theme="dark"]) .ctor-bg .b1,
html[data-theme="light"] .ops-bg .b1,
html:not([data-theme="dark"]) .ops-bg .b1,
html[data-theme="light"] .bgfield .bl-amber,
html:not([data-theme="dark"]) .bgfield .bl-amber {
  width: 660px;
  height: 540px;
  background: var(--product-haze-1);
  opacity: 0.22;
  top: -190px;
  left: -130px;
}

html[data-theme="light"] .ctor-bg .b2,
html:not([data-theme="dark"]) .ctor-bg .b2,
html[data-theme="light"] .ops-bg .b2,
html:not([data-theme="dark"]) .ops-bg .b2,
html[data-theme="light"] .bgfield .bl-violet,
html:not([data-theme="dark"]) .bgfield .bl-violet {
  width: 580px;
  height: 540px;
  background: var(--product-haze-2);
  opacity: 0.18;
  top: -150px;
  right: 6%;
}

html[data-theme="light"] .ctor-bg .b3,
html:not([data-theme="dark"]) .ctor-bg .b3,
html[data-theme="light"] .ops-bg .b3,
html:not([data-theme="dark"]) .ops-bg .b3,
html[data-theme="light"] .bgfield .bl-mint,
html:not([data-theme="dark"]) .bgfield .bl-mint {
  width: 640px;
  height: 540px;
  background: var(--product-haze-3);
  opacity: 0.16;
  bottom: -240px;
  left: 30%;
}

html[data-theme="light"] .bgfield .bl-blue,
html:not([data-theme="dark"]) .bgfield .bl-blue {
  display: none;
}

/* shell above canvas must stay transparent in light */
html[data-theme="light"] .app-shell.hub,
html:not([data-theme="dark"]) .app-shell.hub,
html[data-theme="light"] .hub,
html:not([data-theme="dark"]) .hub,
html[data-theme="light"] .main-canvas,
html:not([data-theme="dark"]) .main-canvas,
html[data-theme="light"] .app-shell.hub .main,
html:not([data-theme="dark"]) .app-shell.hub .main,
html[data-theme="light"] .main,
html:not([data-theme="dark"]) .main,
html[data-theme="light"] .content,
html:not([data-theme="dark"]) .content,
html[data-theme="light"] .content-inner,
html:not([data-theme="dark"]) .content-inner,
html[data-theme="light"] .zone-hero-wrap,
html:not([data-theme="dark"]) .zone-hero-wrap {
  background: transparent !important;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb,
html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb {
  background: #d8cfc2;
  border-radius: 980px;
  border: 3px solid #faf9f7;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover {
  background: #c2b8a9;
}