/* Shared by every page: one font family, set through a variable. */
:root { --font-main: 'Plus Jakarta Sans', sans-serif; }
* { font-family: var(--font-main); box-sizing: border-box; }

/* One soft near-black for all dark text (also what Tailwind's text-ink uses),
   instead of the browser's pure black on anything without a color class.
   Light off-white in dark mode, never pure white, to spare the eyes. */
:root { --text-ink: #1e293b; --text-ink-dark: #e2e8f0; }
body { color: var(--text-ink); }
html.dark body { color: var(--text-ink-dark); }
/* text-ink with no dark-mode text color of its own would stay dark on a dark background. */
html.dark .text-ink:not([class*="dark:text-"]) { color: var(--text-ink-dark); }

/* Placeholder text must still be readable (WCAG 1.4.3: 4.5:1). */
input::placeholder, textarea::placeholder { color: #64748b; opacity: 1; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #94a3b8; }

/* Status and grey text that has no dark-mode color of its own gets a light tone on dark backgrounds. */
html.dark .text-red-700:not([class*="dark:text-"]) { color: #f87171; }
html.dark .text-amber-700:not([class*="dark:text-"]) { color: #fbbf24; }
html.dark .text-emerald-700:not([class*="dark:text-"]) { color: #34d399; }
html.dark .text-orange-700:not([class*="dark:text-"]) { color: #fb923c; }
html.dark .text-slate-500:not([class*="dark:text-"]) { color: #94a3b8; }
html.dark .text-slate-600:not([class*="dark:text-"]) { color: #cbd5e1; }