/* ==================================================
   theme.css — глобальні токени / теми
   PROD 27-04-2025
   ================================================== */

/* ---------- дизайн-система / tokens -------------- */
:root{
  /* базові фони */
  --bg-dark:#0b0b0f;          --bg-light:#ffffff;

  /* текст */
  --txt-dark:#ffffff;         --txt-light:#111111;
  --txt-main-dark:#cfcfcf;    --txt-main-light:#555555;

  /* картки / поверхні */
  --card-bg-dark:rgba(255,255,255,.06);
  --card-bd-dark:rgba(255,255,255,.08);
  --card-bg-light:rgba(255,255,255,.92);
  --card-bd-light:rgba(0,0,0,.08);

  /* бренд-градієнт */
  --primary:#3b82f6;          --primary-dark:#2563eb;

  /* шадоу */
  --shadow-dark:rgba(0,0,0,.2);
  --shadow-light:rgba(0,0,0,.1);
}

/* ---------- auto-detect системної теми ----------- */
@media (prefers-color-scheme:light){
  :root{ --auto-bg:var(--bg-light); --auto-txt:var(--txt-light); }
}
@media (prefers-color-scheme:dark){
  :root{ --auto-bg:var(--bg-dark);  --auto-txt:var(--txt-dark);  }
}

/* ---------- базовий body ------------------------- */
body{
  background:var(--auto-bg, var(--bg-dark));
  color:var(--auto-txt,  var(--txt-dark));
  transition:color .3s; /* Убираем переход для фона */
}
body.light-theme{
  background:var(--bg-light);
  color:var(--txt-light);
}

/* ---------- HEADER (light) ----------------------- */
body.light-theme .site-header{
  background:var(--bg-light);
  border-bottom:1px solid rgba(0,0,0,.08);
}
body.light-theme .nav a{color:#333;}
body.light-theme .nav a:hover,
body.light-theme .nav a.active{color:#000;}

/* ---------- HERO (light) ------------------------- */
body.light-theme .hero{
  background:radial-gradient(circle at top left, var(--bg-light), var(--bg-light));
}

/* ---------- INTEGRATIONS (light) ----------------- */
body.light-theme .integrations{
  background:var(--bg-light);
}

/* ---------- LOGO shadow -------------------------- */
.logo-wrapper{
  background:rgba(255,255,255,.04);
  box-shadow:0 0 12px var(--primary);
}
body.light-theme .logo-wrapper{
  background:var(--card-bg-light);
  box-shadow:0 0 12px var(--shadow-light);
}

/* ---------- CTA buttons -------------------------- */
.btn-main,
.contact-btn{
  background:var(--primary);color:#fff;transition:background .3s ease;
}
.btn-main:hover,
.contact-btn:hover{ background:var(--primary-dark); }

/* ---------- section titles ----------------------- */
.section-title{color:var(--txt-dark);}
body.light-theme .section-title{color:var(--txt-light);}

/* ---------- generic “card” helper ---------------- */
.card{
  background:var(--card-bg-dark);
  border:1px solid var(--card-bd-dark);
  backdrop-filter:blur(8px);
}
body.light-theme .card{
  background:var(--card-bg-light);
  border-color:var(--card-bd-light);
}

/* ---------- placeholder текст -------------------- */
::placeholder{color:var(--txt-main-dark);}
body.light-theme ::placeholder{color:var(--txt-main-light);}

/* ---------- утиліти-тіні ------------------------- */
.shadow{box-shadow:0 4px 14px var(--shadow-dark);}
body.light-theme .shadow{box-shadow:0 4px 14px var(--shadow-light);}