/* ============================================================
   e DotNet Systems — Dark Theme (preview / proof-of-concept)
   Activated by html[data-theme="dark"]. Remaps the surface +
   text tokens only; gradients, brand colors and accents are kept.
   White-on-color text is re-asserted so buttons/badges stay legible.
   ============================================================ */

html[data-theme="dark"]{
  /* surfaces (were --white / light grays) */
  --white:#0f1729;          /* primary surface */
  --g50:#0b1220;            /* page background */
  --g100:#131c30;           /* subtle surface */
  --g200:#24304a;           /* borders */
  --g300:#33415e;
  /* text scale (flip toward light) */
  --g400:#7f8da6;
  --g500:#9aa7be;           /* muted text */
  --g600:#b4c0d4;
  --g700:#d3dbe8;           /* body text */
  --g800:#e6ebf3;
  --g900:#f2f5fa;           /* strong text */
  --dark:#f2f5fa;           /* used for some headings — flip to light */
  /* glass + shadows tuned for dark */
  --glass:rgba(17,24,42,.65);
  --glass-border:rgba(255,255,255,.08);
  --primary-light:#15233f;
  --primary-50:#101a30;
  --violet-light:#1c1730;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.4);
  --shadow-lg:0 10px 25px -5px rgba(0,0,0,.55),0 4px 10px -4px rgba(0,0,0,.4);
  --shadow-xl:0 20px 40px -8px rgba(0,0,0,.6),0 8px 16px -6px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* Page + body */
html[data-theme="dark"] body{background:#0b1220;color:var(--g700)}

/* Header glass goes dark */
html[data-theme="dark"] .header{background:rgba(11,18,32,.72);border-bottom:1px solid var(--glass-border)}
html[data-theme="dark"] .header.scrolled{background:rgba(11,18,32,.9)}

/* Re-assert WHITE text on colored / gradient surfaces (the --white-as-text cases) */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-white,
html[data-theme="dark"] .mega-promo-card,
html[data-theme="dark"] .mega-promo-card *,
html[data-theme="dark"] .cta-box,
html[data-theme="dark"] .cta-box *,
html[data-theme="dark"] [class*="ribbon"],
html[data-theme="dark"] .hero-badge,
html[data-theme="dark"] .pc-badge-float{color:#fff}

/* btn-white: invert so it reads as a light button on dark */
html[data-theme="dark"] .btn-white{background:#fff;color:#0b1220}

/* Cards / panels that hardcode soft shadows look better with a hairline */
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .focus-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .office-card,
html[data-theme="dark"] .ci-card,
html[data-theme="dark"] .feat-card,
html[data-theme="dark"] .testimonial-card{border-color:var(--g200)}

/* Headings that used --dark now resolve light via token; ensure hero title pops */
html[data-theme="dark"] .hero-title{color:var(--g900)}

/* Inputs */
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea,
html[data-theme="dark"] .contact-form select{background:var(--g100);border-color:var(--g200);color:var(--g800)}
html[data-theme="dark"] ::placeholder{color:var(--g500)}

/* Footer is usually already dark — keep, just soften borders */
html[data-theme="dark"] .footer{border-top:1px solid var(--glass-border)}

/* ---- Theme toggle button (loaded on every page, works in both modes) ---- */
.theme-toggle{margin-left:auto;width:40px;height:40px;flex-shrink:0;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--g200);border-radius:50%;
  background:var(--white);color:var(--g700);cursor:pointer;padding:0;
  transition:color var(--fast),border-color var(--fast),background var(--fast),transform var(--fast)}
.theme-toggle:hover{border-color:var(--primary);color:var(--primary)}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle svg{width:20px;height:20px;display:block}
html[data-theme="dark"] .theme-toggle{background:var(--g100);border-color:var(--g200);color:var(--g700)}
html[data-theme="dark"] .theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:768px){.theme-toggle{margin-right:.6rem;width:38px;height:38px}}