/* ============================================================================
   FastestDL — shared design system
   Loaded AFTER each page's inline <style>, so these rules win the cascade and
   recolor the whole site from one place. Change a token here = change the site.
   ============================================================================ */

:root {
  /* surfaces — navy-charcoal instead of dead black */
  --bg:          #0e1118;
  --bg-deep:     #090c12;
  --surface:     #161b24;
  --surface-2:   #1c222e;
  --border:      #252c3a;
  --border-hi:   #3a4458;

  /* text */
  --text:        #e7eaf0;
  --muted:       #98a2b3;
  --muted-dim:   #6b7585;

  /* accent — indigo → violet */
  --accent:      #6366f1;
  --accent-2:    #8b5cf6;
  --accent-soft: rgba(99, 102, 241, 0.14);
  --teal:        #2dd4bf;
  --grad:        linear-gradient(135deg, #6366f1, #8b5cf6);

  /* effects */
  --shadow:      0 10px 30px rgba(0, 0, 0, 0.35);
  --glow:        0 0 0 1px rgba(99, 102, 241, 0.30), 0 14px 40px rgba(99, 102, 241, 0.14);
  --radius:      12px;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg) !important;
  /* soft indigo aurora near the top — gives the page a focal point */
  background-image:
    radial-gradient(900px 500px at 50% -180px, rgba(99,102,241,0.16), transparent 70%),
    radial-gradient(700px 400px at 100% 0, rgba(139,92,246,0.10), transparent 60%) !important;
  background-attachment: fixed;
  color: var(--text);
}

::selection { background: var(--accent); color: #fff; }

a { color: var(--accent); }
a:hover { color: var(--accent-2); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── top nav ──────────────────────────────────────────────────────────────── */
#top-nav {
  background: rgba(13, 16, 23, 0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border) !important;
}
.brand {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-2);              /* fallback */
}

/* ── cards / surfaces ─────────────────────────────────────────────────────── */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* tool cards + blog post cards on the home page */
.home-tool-btn,
.post-card {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.home-tool-btn:hover:not(:disabled),
.post-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hi) !important;
  box-shadow: var(--glow);
  background: var(--surface-2) !important;
}
.htb-name  { color: var(--text) !important; }
.htb-desc, .post-meta, .post-excerpt { color: var(--muted) !important; }
.post-title { color: var(--text) !important; }

/* ── primary buttons → indigo gradient ───────────────────────────────────── */
button {
  background: var(--grad) !important;
  color: #fff !important;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease !important;
}
button:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled {
  background: var(--surface-2) !important;
  color: var(--muted-dim) !important;
}

/* the small CTA / nav buttons on blog + static pages */
.cta-btn, .nav-cta {
  background: var(--grad) !important;
  color: #fff !important;
}
.cta-btn:hover, .nav-cta:hover { filter: brightness(1.1); }

/* ── form controls (unify the inline-styled selects/inputs) ───────────────── */
select, textarea,
input[type="text"], input[type="range"] {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
input[type="range"] { accent-color: var(--accent) !important; }

/* ── tabs ─────────────────────────────────────────────────────────────────── */
.tab-btn.active {
  color: var(--text) !important;
  border-bottom-color: var(--accent) !important;
}
.tab-btn:hover:not(:disabled) { color: var(--accent-2) !important; }

/* ── drop zones ───────────────────────────────────────────────────────────── */
.drop-zone {
  border-color: var(--border-hi) !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: var(--text) !important;
}

/* progress bar → gradient */
.progress-bar { background: var(--grad) !important; }

/* ── blog article elements ────────────────────────────────────────────────── */
.intro-box   { border-left-color: var(--accent) !important; background: var(--surface) !important; }
.callout     { border-left-color: var(--accent) !important; background: var(--surface) !important; }
.callout strong { color: var(--accent-2) !important; }
.cta-box     { background: var(--surface) !important; border-color: var(--border) !important; }
.decision-card { background: var(--surface-2) !important; border-color: var(--border) !important; }
.fmt-table tr:hover td { background: var(--surface-2) !important; }
.fmt-table th { border-bottom-color: var(--border) !important; }
.yes { color: var(--teal) !important; }

/* ── static pages (about / privacy / terms) ──────────────────────────────── */
.tool-list a, .contact-block {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
.tool-list a:hover { border-color: var(--accent) !important; }
.nav-links a:hover { color: var(--accent-2) !important; }

/* ── scroll-reveal (driven by a tiny IntersectionObserver on the home page) ─ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ── accessibility: kill all motion for users who ask for it ──────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}