/* Shared theme tokens and utilities */
:root {
  --bg-color: #ffffff; --text-color: #000000; --border-color: #000000; --shadow-color: rgba(0,0,0,1);
  --gray-text: #374151; --subtle-gray-text: #6b7280;
  --button-bg: #000000; --button-text: #ffffff; --button-hover-bg: #1f2937;
  --toggle-hover-bg: #f3f4f6; --accent-color: #4f46e5;
  --report-btn-color: #ef4444; --report-btn-hover-color: #dc2626;
  --surface-bg: #ffffff; --surface-text: #000000; --overlay-bg: rgba(255,255,255,0.95);
}
html.dark {
  --bg-color: #000000; --text-color: #ffffff; --border-color: #ffffff; --shadow-color: rgba(255,255,255,1);
  --gray-text: #d1d5db; --subtle-gray-text: #9ca3af;
  --button-bg: #ffffff; --button-text: #000000; --button-hover-bg: #e5e7eb;
  --toggle-hover-bg: #374151; --accent-color: #818cf8;
  --report-btn-color: #f87171; --report-btn-hover-color: #ef4444;
  --surface-bg: #0b0b0c; --surface-text: #ffffff; --overlay-bg: rgba(0,0,0,0.95);
}

.surface { background-color: var(--surface-bg); color: var(--surface-text); }
.overlay-surface { background-color: var(--overlay-bg); color: var(--surface-text); }

/* Skeleton loader */
.skeleton { position: relative; overflow: hidden; background-color: rgba(107,114,128,0.25); border-radius: 0.5rem; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0)); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Base page colors and font */
body { font-family: 'Inter', sans-serif; background-color: var(--bg-color); color: var(--text-color); }

/* Map utility text colors to theme tokens for static pages using Tailwind classes */
.text-gray-200 { color: var(--gray-text) !important; }
.text-gray-300 { color: var(--subtle-gray-text) !important; }