/* OPERAVA Website V2 — utilities only.
   The existing photographic .hero cover and page layout belong to toolkit.css / premium.css.
   This file must not override .hero backgrounds, typography, cards or page layout.
   Generated transparent WebPs replace only the former inline SVG hero elements.
   Match the website's exact active light/dark palette from src/site/theme.css. */
:root {
  --op-canvas:#1b1b21;
  --op-panel:#24242b;
  --op-panel2:#2b2b33;
  --op-border:#3b3b46;
  --op-text:#ffffff;
  --op-muted:#a3a3b0;
  --op-violet:#9f67ff;
  --op-violet-solid:#7c3aed;
  --op-header:rgba(29,29,36,.95);
  --op-footer:#1b1b21;
  color-scheme:dark;
}
html[data-theme="light"] {
  --op-canvas:#f7f5fb;
  --op-panel:#ffffff;
  --op-panel2:#f1ecf8;
  --op-border:#dad4e6;
  --op-text:#19132b;
  --op-muted:#554d65;
  --op-violet:#6c27bc;
  --op-violet-solid:#6220ac;
  --op-header:rgba(250,248,255,.94);
  --op-footer:#f7f5fb;
  color-scheme:light;
}
/* The utility static shell mirrors the same header and footer surfaces as V2. */
.op-site-header {
  background:var(--op-header)!important;
  border-color:var(--op-border)!important;
}
html[data-theme="light"] .op-site-header {border-color:#d9d2e4!important}
.op-site-footer {
  background:var(--op-footer)!important;
  border-color:var(--op-border)!important;
}
/* Match original SVG artwork placement; keep photograph behind the element. */
.op-hero-visual {
  display:block;
  width:100%;
  max-width:300px;
  margin:0;
  padding:0;
  justify-self:center;
  background:none;
  border:0;
}
.op-hero-webp {
  display:block;
  width:100%;
  max-width:300px;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  background:transparent;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.22));
}
html[data-theme="light"] .op-hero-webp {
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.18));
}
@media(max-width:760px) {
  .op-hero-visual,.op-hero-webp {max-width:175px}
}
@media print {
  .op-hero-visual {display:none!important}
}