/* =============================================================
   DevKits — Theme System
   改这一个文件即可切换整站主题色。
   所有颜色通过 CSS 变量统一管理。
   ============================================================= */

:root {
  /* Backgrounds */
  --bg:          #f8fafc;   /* page background */
  --bg-card:     #ffffff;   /* card / panel */
  --bg-muted:    #f1f5f9;   /* subtle surface */
  --bg-surface:  #e2e8f0;   /* border-level surface */

  /* Text */
  --text:        #0f172a;   /* primary */
  --text-muted:  #64748b;   /* secondary */
  --text-subtle: #94a3b8;   /* placeholder / hint */

  /* Borders */
  --border:      #e2e8f0;
  --border-dark: #cbd5e1;

  /* Nav */
  --nav-bg:      #ffffff;
  --nav-shadow:  0 1px 3px rgba(0, 0, 0, 0.08);

  /* Accent (keep brand green) */
  --accent:      #10b981;
  --accent-dark: #059669;
  --accent-bg:   #f0fdf4;
}

/* ── Override Tailwind dark gray utility classes ───────────── */

html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Backgrounds */
.bg-gray-950 { background-color: var(--bg) !important; }
.bg-gray-900 { background-color: var(--bg-muted) !important; }
.bg-gray-900\/50 { background-color: rgba(241, 245, 249, 0.5) !important; }
.bg-gray-800 { background-color: var(--bg-surface) !important; }
.bg-gray-700 { background-color: var(--border-dark) !important; }
.bg-gray-600 { background-color: #94a3b8 !important; }

/* Text */
.text-gray-100 { color: var(--text) !important; }
.text-gray-200 { color: var(--text) !important; }
.text-gray-300 { color: var(--text-muted) !important; }
.text-gray-400 { color: var(--text-subtle) !important; }
.text-gray-500 { color: var(--text-subtle) !important; }
.text-gray-600 { color: var(--text-muted) !important; }

/* Borders */
.border-gray-900 { border-color: var(--border) !important; }
.border-gray-800 { border-color: var(--border) !important; }
.border-gray-700 { border-color: var(--border-dark) !important; }
.border-gray-600 { border-color: #94a3b8 !important; }

/* Hover states */
.hover\:bg-gray-800:hover { background-color: var(--bg-muted) !important; }
.hover\:bg-gray-700:hover { background-color: var(--bg-surface) !important; }
.hover\:bg-gray-600:hover { background-color: var(--border-dark) !important; }
.hover\:text-white:hover   { color: var(--text) !important; }
.hover\:text-gray-100:hover { color: var(--text) !important; }

/* Textarea / input / pre (code areas → white) */
textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
pre.bg-gray-900 {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border-dark) !important;
}

/* Nav bar (generated by shared.js, already updated — this is fallback) */
header.bg-gray-900,
header.bg-gray-950,
nav.bg-gray-900,
nav.bg-gray-950 {
  background-color: var(--nav-bg) !important;
  box-shadow: var(--nav-shadow) !important;
  border-bottom-color: var(--border) !important;
}

/* Sidebar */
aside { background-color: transparent; }
aside a:not(.active) { color: var(--text-muted) !important; }
aside a:not(.active):hover { background-color: var(--bg-muted) !important; color: var(--text) !important; }

/* Footer */
footer.bg-gray-900 {
  background-color: var(--bg-muted) !important;
  border-top-color: var(--border) !important;
}

/* Tool / related cards */
a.bg-gray-900.rounded-lg,
div.bg-gray-900.rounded-lg {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Blog hero — use light gradient */
.blog-hero {
  background: linear-gradient(135deg, #eef2ff 0%, var(--accent-bg) 100%) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
}
.blog-hero p,
.blog-hero .blog-stat-label { color: var(--text-muted) !important; }
.blog-hero .blog-stat-number { color: var(--accent-dark) !important; }