@import url("./theme.css");

/* Light theme overrides for it-support.zuerich */
:root{
  /* Backgrounds & text (invert the dark scheme) */
  --bg:#ffffff;
  --bg-2:#f6f8fb;
  --card:#ffffff;
  --text:#0b0f14;
  --muted:#566274;     /* medium gray-blue for body copy */
  --line:#d7e0ea;

  /* Keep brand accents for continuity */
  --cyan:#10d2ff;
  --mag:#ff2d9b;
  --ylw:#ffdf00;

  color-scheme:light;
}

/* Header translucency on light backgrounds */
.site-header{
  background:
    linear-gradient(180deg,
      rgb(255 255 255 /.94),
      rgb(255 255 255 /.78),
      rgb(255 255 255 / 0));
  border-bottom:1px solid color-mix(in oklab, var(--line), var(--text) 15%);
  box-shadow:0 10px 30px rgba(14, 23, 40, .06);
}
.site-header.nav--elevated{
  background:
    linear-gradient(180deg,
      rgb(255 255 255 /.98),
      rgb(255 255 255 /.88),
      rgb(255 255 255 /.40));
  border-color:color-mix(in oklab, var(--line), var(--text) 25%);
  box-shadow:0 14px 44px rgba(14, 23, 40, .10);
}

/* Buttons: add a dark-outline variant for light backgrounds */
.btn--dark-outline{color:#0b0f14; border-color:#0b0f14; background:transparent}
.btn--dark-outline:hover{background:rgba(11,15,20,.06)}

/* Hero & card surfaces should be soft-neutral, not dark */
.hero{
  background:
    radial-gradient(1400px 520px at 15% -80px, rgba(16,210,255,.10), transparent 60%),
    radial-gradient(1100px 420px at 85% -100px, rgba(255,45,155,.08), transparent 60%),
    radial-gradient(900px 300px at 50% -40px,  rgba(255,223,0,.08),  transparent 55%);
}

/* Price numbers should appear dark on light */
.price{color:#0b0f14}

/* Footer on light */
footer{background:var(--bg-2); color:var(--muted); border-top:1px solid var(--line)}
.site-meta{background:var(--bg); color:var(--muted)}

.service-area{display:flex; flex-direction:column; gap:0; max-width:760px}
/* Keep spacing consistent with global defaults */
.service-area .cta-row{margin-top:16px}