/* =========================================================================== GatherApp brand tokens — the single place the palette is defined. =========================================================================== Loaded before both stylesheets, so the app shell (res/style.css) and the standalone auth/support pages (res/login.css) paint from the same values. Taken from the landing page at gatherapp.today so the three surfaces read as one product; the landing's dotted overlay is deliberately not carried over. The ramp is Tailwind's indigo-600 -> purple-600 -> pink-500 in light, and indigo-400 -> purple-400 -> pink-400 in dark — the landing lightens the ramp in dark mode because the saturated 600s vibrate against a near-black page. DARK MODE: every token has a dark twin below. Nothing else knows the palette, so switching themes is one class on — set before first paint by sys/themeboot, toggled at runtime by setTheme() in res/gatherapp.js — not a sweep through the stylesheets. Deliberately no Tailwind: plain custom properties. */ :root{ /* Brand ramp */ --brand-1: #4f46e5; /* indigo-600 */ --brand-2: #9333ea; /* purple-600 */ --brand-3: #ec4899; /* pink-500 */ /* Solid picks off the same ramp, for icons and single-colour accents */ --brand-indigo: #6366f1; /* indigo-500 */ --brand-purple: #a855f7; /* purple-500 */ --brand-pink: #ec4899; /* pink-500 */ /* Headline / CTA gradient. 90deg matches the landing hero; components that want the diagonal use --gradient-brand-diag. */ --gradient-brand: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3)); --gradient-brand-diag: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3)); /* Filled controls (active pills, FABs, primary buttons) carry white text and icons, so they keep a saturated ramp in both themes — the lightened 400s that read well as TEXT on near-black would leave white-on-pastel here. */ --cta-1: #4f46e5; --cta-2: #9333ea; --cta-3: #ec4899; --gradient-cta: linear-gradient(135deg, var(--cta-1), var(--cta-2)); --gradient-cta-full: linear-gradient(90deg, var(--cta-1), var(--cta-2), var(--cta-3)); /* Page background: the landing's vertical wash, plus a brand bloom. The wash on its own spans #f1f5f9 -> #ffffff — 14/255 in a single channel, which reads as flat white once it fills an app window. The landing gets away with it because content covers most of the page; the app shell is the surface you actually look at. So the same two hues the landing blooms with in dark mode are laid over it here: indigo from the top-left, pink into the bottom-right, following the diagonal the old shell had. */ --page-wash: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 40%, #ffffff 100%); --gradient-page: radial-gradient(120% 105% at 0% 0%, rgba(79,70,229,0.30) 0%, rgba(79,70,229,0) 72%), radial-gradient(115% 105% at 100% 100%, rgba(236,72,153,0.30) 0%, rgba(236,72,153,0) 72%), var(--page-wash); /* Opaque floor under the gradient. The dark wash starts on a translucent stop (rgba(...,0.15)), and with nothing solid beneath it the browser's white canvas shows through as a pale band across the top. Anything painting --gradient-page must set background-color: var(--page-base) with it. */ --page-base: #ffffff; /* Surfaces */ --surface: #ffffff; --surface-muted: #f8fafc; --border-line: #e2e8f0; --text-strong: #0f172a; /* slate-900, the landing's body colour */ --text-muted: #64748b; /* slate-500 */ } /* Dark values, kept next to their light twins. html.darkmode is where the theme now lives; body.darkmode is the app's older hook, kept so nothing that still sets it breaks; html.dark is the landing's, so a component shared with gatherapp.today keys off the same stylesheet. */ html.darkmode, body.darkmode, html.dark{ --brand-1: #818cf8; /* indigo-400 */ --brand-2: #c084fc; /* purple-400 */ --brand-3: #f472b6; /* pink-400 */ --brand-indigo: #818cf8; --brand-purple: #c084fc; --brand-pink: #f472b6; /* Re-declared, not inherited. A custom property that references another one is resolved where it is DECLARED — the :root copies above would keep the light ramp forever, however dark --brand-1 gets. Declaring them again here makes them resolve against the dark values on this element. Any composite built from these tokens has to be repeated the same way. */ --gradient-brand: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3)); --gradient-brand-diag: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3)); /* Indigo/purple-500: saturated enough for white-on-gradient, calm enough on near-black. Re-declared so it resolves against the dark values above. */ --cta-1: #6366f1; --cta-2: #a855f7; --cta-3: #ec4899; --gradient-cta: linear-gradient(135deg, var(--cta-1), var(--cta-2)); --gradient-cta-full: linear-gradient(90deg, var(--cta-1), var(--cta-2), var(--cta-3)); /* The landing's dark page, with the pink counterpart to keep the same diagonal the light theme has. */ --page-wash: radial-gradient(ellipse at top, rgba(49,46,129,0.26) 0%, #05050A 40%, #05050A 100%); --gradient-page: radial-gradient(110% 90% at 0% 0%, rgba(99,102,241,0.22) 0%, rgba(99,102,241,0) 66%), radial-gradient(115% 105% at 100% 100%, rgba(236,72,153,0.22) 0%, rgba(236,72,153,0) 72%), var(--page-wash); --page-base: #05050A; --surface: #0a0f1a; --surface-muted: #05050a; --border-line: rgba(255,255,255,0.10); --text-strong: #e2e8f0; --text-muted: #94a3b8; }