/* Raseekh: soft (default) ↔ night — one icon toggle, no text labels. */
:root,
html[data-theme="soft"]{
  --ink:#10233A;
  --navy:#16324F;
  --harbor:#2A6F7A;
  --copper:#C45C26;
  --sand:#E8A05A;
  --bg:#E8EDF2;
  --panel:#F7F9FC;
  --mist:#D5DEE8;
  --line:#B8C4D1;
  --muted:#5A6B7C;
  --danger:#B42318;
  --ok:#1F7A58;
  --radius:6px;
  --shadow:0 18px 40px -28px rgba(16,35,58,.45);
  --header-bg:rgba(232,237,242,.9);
  --surface-tint:#F0F4F8;
  --ghost-bg:rgba(247,249,252,.88);
  --elevated:#FFFFFF;
  --chip:#E8EDF2;
  --table-head:#EEF3F7;
  --forest:var(--navy);
  --leaf:var(--harbor);
  --brass:var(--copper);
  --on-dark:#F4F7FA;
  --hairline:rgba(16,35,58,.1);
  color-scheme:light;
}

html[data-theme="night"]{
  --ink:#E8EEF6;
  --navy:#C5D4E4;
  --harbor:#5BB8C4;
  --copper:#E8894F;
  --sand:#E8A05A;
  --bg:#0B1219;
  --panel:#141C26;
  --mist:#1A2430;
  --line:#2C3948;
  --muted:#9AABC0;
  --danger:#F97066;
  --ok:#3DDC97;
  --shadow:0 20px 44px -22px rgba(0,0,0,.7);
  --header-bg:rgba(11,18,25,.94);
  --surface-tint:#0F1620;
  --ghost-bg:rgba(26,36,48,.85);
  --elevated:#1A2430;
  --chip:#1F2B38;
  --table-head:#182230;
  --forest:var(--navy);
  --leaf:var(--harbor);
  --brass:var(--copper);
  --on-dark:#F4F7FA;
  --hairline:rgba(255,255,255,.08);
  color-scheme:dark;
}

html[data-theme="soft"] body::before,
:root body::before{
  background:
    radial-gradient(ellipse 80% 50% at 100% -10%, rgba(196,92,38,.14), transparent 55%),
    radial-gradient(ellipse 70% 45% at -10% 20%, rgba(42,111,122,.14), transparent 50%),
    linear-gradient(165deg,#DCE4EC 0%, var(--bg) 42%, var(--surface-tint) 100%) !important;
}
html[data-theme="soft"] body::after,
:root body::after{opacity:.18 !important}

html[data-theme="night"] body::before{
  background:
    radial-gradient(ellipse 75% 48% at 100% 0%, rgba(232,137,79,.14), transparent 55%),
    radial-gradient(ellipse 65% 42% at 0% 12%, rgba(91,184,196,.12), transparent 50%),
    linear-gradient(180deg,#070C12 0%, var(--bg) 42%, var(--surface-tint) 100%) !important;
}
html[data-theme="night"] body::after{
  opacity:.14 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important;
}

.nav-prefs{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

/* Single icon control — no text */
.theme-icon-btn{
  width:40px;
  height:40px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--ghost-bg);
  color:var(--ink);
  cursor:pointer;
}
.theme-icon-btn:hover{
  border-color:rgba(196,92,38,.45);
  color:var(--copper);
}
.theme-icon-btn[aria-pressed="true"]{
  border-color:rgba(91,184,196,.5);
  color:var(--harbor);
}
.theme-ico{
  width:18px;
  height:18px;
  display:block;
}

/* Night surface remaps for common hardcoded lights */
html[data-theme="night"] input,
html[data-theme="night"] textarea,
html[data-theme="night"] select{
  background:var(--mist) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}
html[data-theme="night"] .btn-ghost,
html[data-theme="night"] .lang-btn,
html[data-theme="night"] .theme-icon-btn{
  background:var(--ghost-bg) !important;
  border-color:var(--line) !important;
  color:var(--ink) !important;
}
html[data-theme="night"] .panel,
html[data-theme="night"] .card,
html[data-theme="night"] .login-card,
html[data-theme="night"] .stat,
html[data-theme="night"] .faq-item,
html[data-theme="night"] .service-block{
  background:var(--panel) !important;
  border-color:var(--line) !important;
}
html[data-theme="night"] header,
html[data-theme="night"] .site-header{
  background:var(--header-bg) !important;
  border-bottom-color:var(--hairline) !important;
}
html[data-theme="night"] .logo,
html[data-theme="night"] h1,
html[data-theme="night"] h2,
html[data-theme="night"] h3{color:var(--ink)}

/* Mid-page CTA stays high-contrast on dark band in both themes */
.mid-cta,
.mid-cta h3,
.mid-cta p{color:#FFFFFF}
html[data-theme="night"] .mid-cta h3,
html[data-theme="soft"] .mid-cta h3,
:root .mid-cta h3{color:#FFFFFF !important}
html[data-theme="night"] .mid-cta p,
html[data-theme="soft"] .mid-cta p,
:root .mid-cta p{color:rgba(255,255,255,.92) !important}
.mid-cta .btn-ghost{color:#FFFFFF !important;border-color:rgba(255,255,255,.55) !important}

html,body,header,.panel,.card,.login-card,.btn-ghost,.lang-btn,.theme-icon-btn,input,textarea,select{
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
@media (prefers-reduced-motion: reduce){
  html,body,header,.panel,.card,.login-card,.btn-ghost,.lang-btn,.theme-icon-btn,input,textarea,select{transition:none}
}