/* BookStark Design Tokens — single source of truth */
:root {
  /* Primary */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #eff6ff;
  --color-primary-lighter: #dbeafe;
  --color-primary-border: #bfdbfe;
  --color-primary-text: #93c5fd;
  --color-primary-ring: rgba(37, 99, 235, 0.25);

  /* Focus */
  --color-focus: #2563eb;
  --color-focus-ring: rgba(37, 99, 235, 0.25);

  /* Gray scale - Slate */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* Semantic */
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-light: #fef2f2;
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-success-light: #ecfdf5;
  --color-warning: #d97706;
  --color-warning-light: #fffbeb;
  --color-info: #3b82f6;
  --color-info-light: #eff6ff;
  --color-indigo: #6366f1;

  /* Heat (calendar) */
  --color-heat-0: #f8fafc;
  --color-heat-1: #bfdbfe;
  --color-heat-2: #60a5fa;
  --color-heat-3: #2563eb;
  --color-heat-4: #1e40af;

  /* Border */
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-border-hover: #2563eb;

  /* Background */
  --color-bg: #f9fafb;
  --color-bg-card: #ffffff;
  --color-bg-hover: #f8fafc;
  --color-white: #ffffff;

  /* Text */
  --color-text: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;
  --color-text-placeholder: #94a3b8;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px;
}

/* Screen-reader only utility (not in tailwind.min.css) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Base text and background from variables */
body { color: var(--color-text); background: var(--color-bg); }

/* ========== Dark Theme ========== */
[data-theme="dark"] {
  /* Primary — 保持蓝但 hover 调亮 */
  --color-primary: #3b82f6;
  --color-primary-hover: #60a5fa;
  --color-primary-light: #172554;
  --color-primary-lighter: #1e3a5f;
  --color-primary-border: #1e40af;
  --color-primary-text: #93c5fd;
  --color-primary-ring: rgba(59, 130, 246, 0.35);

  /* Focus */
  --color-focus: #3b82f6;
  --color-focus-ring: rgba(59, 130, 246, 0.35);

  /* Gray scale — 反转 */
  --color-gray-50: #0f172a;
  --color-gray-100: #1e293b;
  --color-gray-200: #334155;
  --color-gray-300: #475569;
  --color-gray-400: #64748b;
  --color-gray-500: #94a3b8;
  --color-gray-600: #cbd5e1;
  --color-gray-700: #e2e8f0;
  --color-gray-800: #f1f5f9;
  --color-gray-900: #f8fafc;

  /* Semantic — 保持色相，light 背景加深 */
  --color-danger: #f87171;
  --color-danger-hover: #ef4444;
  --color-danger-light: #450a0a;
  --color-success: #4ade80;
  --color-success-hover: #22c55e;
  --color-success-light: #052e16;
  --color-warning: #fbbf24;
  --color-warning-light: #451a03;
  --color-info: #60a5fa;
  --color-info-light: #172554;
  --color-indigo: #818cf8;

  /* Heat (calendar) — 深色版 */
  --color-heat-0: #1e293b;
  --color-heat-1: #1e3a5f;
  --color-heat-2: #2563eb;
  --color-heat-3: #3b82f6;
  --color-heat-4: #60a5fa;

  /* Border */
  --color-border: #334155;
  --color-border-light: #1e293b;
  --color-border-hover: #3b82f6;

  /* Background */
  --color-bg: #0f172a;
  --color-bg-card: #1e293b;
  --color-bg-hover: #334155;
  --color-white: #1e293b;

  /* Text */
  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-placeholder: #64748b;
}

/* ========== Dark Theme — Tailwind Utility Overrides ========== */
[data-theme="dark"] .bg-white { background-color: var(--color-bg-card) !important; }
[data-theme="dark"] .bg-slate-50 { background-color: var(--color-bg) !important; }
[data-theme="dark"] .bg-slate-100 { background-color: var(--color-gray-100) !important; }
[data-theme="dark"] .bg-slate-200 { background-color: var(--color-gray-200) !important; }

[data-theme="dark"] .border-slate-100 { border-color: var(--color-border-light) !important; }
[data-theme="dark"] .border-slate-200 { border-color: var(--color-border) !important; }
[data-theme="dark"] .border-slate-300 { border-color: var(--color-gray-300) !important; }

[data-theme="dark"] .text-slate-300 { color: var(--color-gray-600) !important; }
[data-theme="dark"] .text-slate-400 { color: var(--color-gray-500) !important; }
[data-theme="dark"] .text-slate-500 { color: var(--color-gray-500) !important; }
[data-theme="dark"] .text-slate-600 { color: var(--color-gray-600) !important; }
[data-theme="dark"] .text-slate-700 { color: var(--color-gray-700) !important; }
[data-theme="dark"] .text-slate-800 { color: var(--color-gray-800) !important; }

[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: var(--color-bg-hover) !important; }
[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--color-bg-hover) !important; }
[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--color-bg-card) !important; }
[data-theme="dark"] .hover\:text-slate-700:hover { color: var(--color-gray-700) !important; }

/* Dark theme — form inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
  color: var(--color-text);
}

/* Dark theme — checkbox */
[data-theme="dark"] input[type="checkbox"] {
  accent-color: var(--color-primary);
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: 3px;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"] {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
  color: var(--color-text);
  color-scheme: dark;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-placeholder);
}

/* Scrollbar — thin style, always visible */
* { scrollbar-width: thin; scrollbar-color: var(--color-gray-300) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); }

/* Dark theme — scrollbar */
[data-theme="dark"] * { scrollbar-color: var(--color-gray-500) transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-gray-500); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); }

/* Dark theme — selection */
[data-theme="dark"] ::selection { background: rgba(59, 130, 246, 0.35); color: #f1f5f9; }

/* Dark theme — semantic color overrides (Tailwind classes) */
[data-theme="dark"] .bg-red-50 { background-color: #450a0a !important; }
[data-theme="dark"] .text-red-600 { color: #f87171 !important; }
[data-theme="dark"] .bg-green-50 { background-color: #052e16 !important; }
[data-theme="dark"] .text-green-600 { color: #4ade80 !important; }
[data-theme="dark"] .bg-amber-50 { background-color: #451a03 !important; }
[data-theme="dark"] .text-amber-600 { color: #fbbf24 !important; }
[data-theme="dark"] .bg-blue-50 { background-color: var(--color-primary-light) !important; }
[data-theme="dark"] .bg-blue-600 { background-color: var(--color-primary) !important; }
[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: var(--color-primary-light) !important; }
[data-theme="dark"] .hover\:bg-blue-700:hover { background-color: var(--color-primary-hover) !important; }
[data-theme="dark"] .text-blue-600 { color: var(--color-primary) !important; }
[data-theme="dark"] .text-blue-500 { color: var(--color-primary) !important; }
[data-theme="dark"] .hover\:text-red-500:hover { color: var(--color-danger) !important; }
[data-theme="dark"] .hover\:underline:hover { text-decoration: underline !important; }

/* Dark theme — shadow overrides */
[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; }
[data-theme="dark"] .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2) !important; }

/* Dark theme — text-white stays white */
[data-theme="dark"] .text-white { color: #ffffff !important; }

/* ========== Logo 渐变+投影 ========== */
:root {
  --logo-grad-start: #3b82f6;
  --logo-grad-end: #1d4ed8;
  --logo-shadow-color: rgba(37, 99, 235, 0.3);
}
[data-theme="dark"] {
  --logo-grad-start: #60a5fa;
  --logo-grad-end: #3b82f6;
  --logo-shadow-color: rgba(96, 165, 250, 0.4);
}