/* ============================================================
   Dark theme for the SavTech HRMS landing page.
   Applied only under <html data-theme="dark"> (toggle in the nav);
   light mode falls back to landing.css's default tokens.
   The HERO stays dark in BOTH themes — those rules (bottom) are
   intentionally unscoped.

   NOTE: this token block uses `html[data-theme="dark"]` (not a bare
   attribute selector) so it out-specifies the `:root` accent defaults in
   landing-redesign.css, which load afterwards.
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Semantic surfaces */
  --bg:             #08080c;
  --bg-elevated:    #0b0b12;
  --surface:        #14141f;
  --surface-2:      #1a1a27;
  --surface-sunken: #0f0f18;
  --overlay:        rgba(0, 0, 0, 0.62);

  /* Borders as translucent whites so they read on any dark surface */
  --border:         rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-faint:   rgba(255, 255, 255, 0.06);

  /* Text */
  --text:           #f5f5fa;
  --text-muted:     #a8aabb;
  --text-subtle:    #6d6f82;

  /* Links + redesign accents brighter on dark */
  --link:           var(--magenta-300);
  --link-hover:     var(--magenta-200);
  --rx-accent:      var(--magenta-300);
  --rx-accent-2:    var(--violet-300);

  /* Deeper shadows for dark */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.62), 0 6px 16px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .nav__links a:hover { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .icon-btn:hover { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .browser__bar { background: #0e0e17; border-bottom-color: var(--border); }
[data-theme="dark"] .browser__url { color: var(--text-muted); }
[data-theme="dark"] .sec-head .eyebrow { color: var(--magenta-300); }
[data-theme="dark"] .showcase__tag {
  color: var(--magenta-300);
  background: color-mix(in srgb, var(--magenta-500) 14%, transparent);
}
[data-theme="dark"] .input:disabled,
[data-theme="dark"] .textarea:disabled { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .footer { background: #060609; border-top: 1px solid var(--border-faint); }

/* ============================================================
   HERO — dark in BOTH themes (unscoped). The wolf-particle canvas
   replaces the static art image; the scrim keeps white text legible
   and fades into the body below.
   ============================================================ */
.hero__art {
  z-index: -3;
  background-image: none !important;
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(124, 31, 110, 0.30), transparent 55%),
    radial-gradient(90% 80% at 82% 26%, rgba(37, 99, 235, 0.18), transparent 60%),
    #08080c;
}
.hero__scrim { z-index: -2; }
.hero__particles {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}