/* Brand design tokens. Every component reads colors from these custom
properties (never a literal hex) so the light/dark toggle (a `.dark`
class on , see the inline script in base.html and
static/js/theme.js) repaints everything with zero markup changes.
Brand accents (mint/sage/magenta/orange/purple/lavender/teal) are
declared ONCE below and never redefined inside `.dark` — per design
requirement they must read identically in both modes. Only structural
tokens (surface/background/text/border) flip.
Naming note: --color-dark/--color-darker are used throughout every
template as "card surface" / "page background" respectively — those are
functional roles, not literal color promises. In light mode they resolve
to white/near-white; the names stayed as-is rather than touching 100+
template call sites for a cosmetic rename. */
/* A handful of pages use a small negative margin (Tailwind's -me-8, etc.)
as an optical-centering trick next to a back-arrow link — a few pixels
of real, unintended horizontal overflow this creates is invisible in
normal document flow, but throws off the coordinate origin for any
`position: fixed` element added later (its `inset-0` ends up measured
against a scroll-shifted viewport, not the true one). html is the actual
scrolling element in standards mode, not body — both are set here to be
safe regardless of which one a given browser treats as such. */
html, body {
overflow-x: hidden;
}
:root {
--color-mint: #4EC3A1;
--color-sage: #36997B;
--color-magenta: #B52086;
--color-orange: #F37936;
--color-purple: #581865;
--color-lavender: #6B6CAE;
--color-teal: #009AAC;
/* Light mode (default) */
--color-dark: #FFFFFF; /* card/surface background */
--color-darker: #F9FAFB; /* page background (gray-50) */
--color-surface: #FFFFFF;
--color-text: #111827; /* gray-900 */
--color-text-muted: #6B7280; /* gray-500 */
--color-border: rgba(17, 24, 39, 0.12);
--color-header-bg: rgba(255, 255, 255, 0.85); /* translucent header/bottom-nav */
--color-track: rgba(17, 24, 39, 0.08); /* progress-bar empty track */
}
:root.dark {
--color-dark: #1A1A2E;
--color-darker: #121222;
--color-surface: #1A1A2E;
--color-text: #F1F5F9;
--color-text-muted: #94A3B8;
--color-border: rgba(148, 163, 184, 0.2);
--color-header-bg: rgba(26, 26, 46, 0.9);
--color-track: rgba(255, 255, 255, 0.08);
}
body {
background-color: var(--color-darker);
color: var(--color-text);
}
/* Generic form-field styling so plain Django-rendered widgets (no manual
Tailwind classes per field) still match the dark RTL theme. This is the
single source of styling for every /