/* Global theme tokens.
   The app uses hard-coded colors in many places; we route key accents + core surfaces
   through CSS variables so a per-user theme can be applied via body[data-theme]. */

:root {
  --app-bg: #f5f7fb;
  --text: #1f2937;
  --muted: #64748b;
  --card-bg: #ffffff;
  --surface: #f8fafc;
  --border: #e5e7eb;
  --border-strong: #cbd5e1;

  --accent-600: #2563eb;
  --accent-700: #1d4ed8;
  --accent-100: #dbeafe;
  --accent-200: #bfdbfe;
  --accent-contrast: #ffffff;

  --focus-ring: rgba(147, 197, 253, 0.9);

  --sidebar-bg: #111827;
  --sidebar-surface: #1f2937;
  --sidebar-text: #f9fafb;
  --sidebar-link: #e5e7eb;
  --sidebar-active-bg: var(--accent-600);
  --sidebar-hover-bg: var(--sidebar-surface);

  /* Dark floating popovers (lock hints, list info, tile preview field help) */
  --popover-bg: color-mix(in srgb, var(--accent-700) 36%, #0f172a);
  --popover-text: #f8fafc;
  --popover-radius: 9px;
  --popover-padding: 8px 10px;
  --popover-font-size: 0.78rem;
  --popover-line-height: 1.35;
  --popover-font-weight: 500;
  --popover-min-width: 190px;
  --popover-max-width: min(78vw, 300px);
  --popover-shadow: 0 12px 22px -14px color-mix(in srgb, var(--accent-700) 55%, rgba(15, 23, 42, 0.92));
}

body[data-theme="default"] { }

body[data-theme="ocean"] {
  --accent-600: #0284c7;
  --accent-700: #0369a1;
  --accent-100: #e0f2fe;
  --accent-200: #bae6fd;
  --focus-ring: rgba(56, 189, 248, 0.85);
  --app-bg: #f3f8fd;
  --sidebar-active-bg: #0284c7;
  --sidebar-bg: color-mix(in srgb, #111827 86%, var(--accent-600));
  --sidebar-surface: color-mix(in srgb, #1f2937 86%, var(--accent-600));
  --sidebar-hover-bg: color-mix(in srgb, var(--sidebar-surface) 88%, #000);
}

body[data-theme="teal"] {
  --accent-600: #0f766e;
  --accent-700: #115e59;
  --accent-100: #ccfbf1;
  --accent-200: #99f6e4;
  --focus-ring: rgba(45, 212, 191, 0.85);
  --app-bg: #f2fbfb;
  --sidebar-active-bg: #0f766e;
  --sidebar-bg: color-mix(in srgb, #111827 86%, var(--accent-600));
  --sidebar-surface: color-mix(in srgb, #1f2937 86%, var(--accent-600));
  --sidebar-hover-bg: color-mix(in srgb, var(--sidebar-surface) 88%, #000);
}

body[data-theme="forest"] {
  --accent-600: #16a34a;
  --accent-700: #15803d;
  --accent-100: #dcfce7;
  --accent-200: #bbf7d0;
  --focus-ring: rgba(34, 197, 94, 0.85);
  --app-bg: #f4fbf6;
  --sidebar-active-bg: #16a34a;
  --sidebar-bg: color-mix(in srgb, #111827 86%, var(--accent-600));
  --sidebar-surface: color-mix(in srgb, #1f2937 86%, var(--accent-600));
  --sidebar-hover-bg: color-mix(in srgb, var(--sidebar-surface) 88%, #000);
}

body[data-theme="lime"] {
  --accent-600: #65a30d;
  --accent-700: #4d7c0f;
  --accent-100: #ecfccb;
  --accent-200: #d9f99d;
  --focus-ring: rgba(163, 230, 53, 0.8);
  --app-bg: #f7fbf1;
  --sidebar-active-bg: #65a30d;
  --sidebar-bg: color-mix(in srgb, #111827 86%, var(--accent-600));
  --sidebar-surface: color-mix(in srgb, #1f2937 86%, var(--accent-600));
  --sidebar-hover-bg: color-mix(in srgb, var(--sidebar-surface) 88%, #000);
}

body[data-theme="amber"] {
  --accent-600: #d97706;
  --accent-700: #b45309;
  --accent-100: #ffedd5;
  --accent-200: #fed7aa;
  --focus-ring: rgba(251, 191, 36, 0.82);
  --app-bg: #fff8f0;
  --sidebar-active-bg: #d97706;
  --sidebar-bg: color-mix(in srgb, #111827 86%, var(--accent-600));
  --sidebar-surface: color-mix(in srgb, #1f2937 86%, var(--accent-600));
  --sidebar-hover-bg: color-mix(in srgb, var(--sidebar-surface) 88%, #000);
}

body[data-theme="rose"] {
  --accent-600: #e11d48;
  --accent-700: #be123c;
  --accent-100: #ffe4e6;
  --accent-200: #fecdd3;
  --focus-ring: rgba(251, 113, 133, 0.85);
  --app-bg: #fff5f7;
  --sidebar-active-bg: #e11d48;
  --sidebar-bg: color-mix(in srgb, #111827 86%, var(--accent-600));
  --sidebar-surface: color-mix(in srgb, #1f2937 86%, var(--accent-600));
  --sidebar-hover-bg: color-mix(in srgb, var(--sidebar-surface) 88%, #000);
}

body[data-theme="purple"] {
  --accent-600: #7c3aed;
  --accent-700: #6d28d9;
  --accent-100: #ede9fe;
  --accent-200: #ddd6fe;
  --focus-ring: rgba(167, 139, 250, 0.85);
  --app-bg: #faf7ff;
  --sidebar-active-bg: #7c3aed;
  --sidebar-bg: color-mix(in srgb, #111827 86%, var(--accent-600));
  --sidebar-surface: color-mix(in srgb, #1f2937 86%, var(--accent-600));
  --sidebar-hover-bg: color-mix(in srgb, var(--sidebar-surface) 88%, #000);
}

body[data-theme="indigo"] {
  --accent-600: #4f46e5;
  --accent-700: #4338ca;
  --accent-100: #e0e7ff;
  --accent-200: #c7d2fe;
  --focus-ring: rgba(129, 140, 248, 0.85);
  --app-bg: #f6f7ff;
  --sidebar-active-bg: #4f46e5;
  --sidebar-bg: color-mix(in srgb, #111827 86%, var(--accent-600));
  --sidebar-surface: color-mix(in srgb, #1f2937 86%, var(--accent-600));
  --sidebar-hover-bg: color-mix(in srgb, var(--sidebar-surface) 88%, #000);
}

body[data-theme="slate"] {
  --accent-600: #475569;
  --accent-700: #334155;
  --accent-100: #e2e8f0;
  --accent-200: #cbd5e1;
  --focus-ring: rgba(148, 163, 184, 0.9);
  --app-bg: #f6f7f9;
  --sidebar-active-bg: #475569;
  --sidebar-bg: color-mix(in srgb, #111827 90%, var(--accent-600));
  --sidebar-surface: color-mix(in srgb, #1f2937 90%, var(--accent-600));
  --sidebar-hover-bg: color-mix(in srgb, var(--sidebar-surface) 88%, #000);
}

mark.search-hit {
  background: color-mix(in srgb, var(--accent-600) 26%, #fef3c7);
  color: color-mix(in srgb, var(--accent-700) 74%, #0f172a);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: inherit;
}