/* * Theme tokens for MagicHat.io. * * Two token sets selected by [data-theme] on : * data-theme="light" — default, used when localStorage has no value * data-theme="dark" — first-class, opt-in via the header toggle * * Every color in the codebase references one of these tokens. No * hex literals or rgb() calls in component CSS — the token set is * the only place raw colors appear (REBUILD_PHILOSOPHY.md §6.1). * * Brand palette (sourced from the Python monolith's brand.css): * Purple #6100FF primary brand * Cyan #00C7FF secondary brand * Amber #FFBF40 accent / highlight * Green #2FCC71 success / positive * Cyan-light #E6F7FF subtle tint surface * * Brand gradient: purple → cyan, 135deg. * * The single-color "accent" flips between modes so the eyebrow dot, * headline accent, and link colors remain visible against the active * background: * light: accent = purple (pops against white) * dark: accent = cyan (pops against the deep purple backdrop) * * The brand gradient stays the same in both modes — purple → cyan * looks correct on either background. */ :root, [data-theme="light"] { /* Surfaces */ --color-bg: #ffffff; --color-bg-elevated: #fafbfc; --color-surface: #ffffff; --color-surface-alt: #f5f7fa; --color-surface-tint: #E6F7FF; /* Text */ --color-text-primary: #1a1f25; --color-text-secondary: #4a5560; --color-text-muted: #6b7480; /* Brand — single-color accent + the four-color palette + gradient */ --color-accent: #6100FF; /* purple, primary */ --color-accent-hover: #4d00cc; /* darker purple, AA-safe on white */ --color-accent-fg: #ffffff; /* on accent backgrounds + on the gradient */ --color-brand-purple: #6100FF; --color-brand-cyan: #00C7FF; --color-brand-amber: #FFBF40; --color-brand-green: #2FCC71; --gradient-primary: linear-gradient(135deg, #6100FF 0%, #00C7FF 100%); /* Category accents — training course catalog. Each course card / * shelf header keys to its category via a data-category attribute * that sets --cat-accent from one of these. Three reuse the brand * palette; three are new hues chosen to stay distinct from the brand * and from each other. The new hues get a brighter value in the dark * block so they survive on the deep-purple backdrop. */ --cat-condition: var(--color-brand-purple); --cat-professional: var(--color-brand-cyan); --cat-infection: var(--color-brand-green); --cat-personal: #e0567a; /* rose */ --cat-compliance: #4c63d2; /* indigo */ --cat-firstaid: #e0593b; /* red-orange */ --cat-default: var(--color-text-muted); /* Borders + dividers */ --color-border: #e1e6ed; --color-border-strong: #c8d0d9; /* Semantic — anchored to brand where it makes sense */ --color-success: #2FCC71; --color-warning: #FFBF40; --color-danger: #b3261e; --color-info: #00C7FF; /* Neutral elevation shadows */ --shadow-sm: 0 1px 2px rgba(20, 28, 38, 0.06); --shadow-md: 0 2px 8px rgba(20, 28, 38, 0.08), 0 1px 2px rgba(20, 28, 38, 0.04); --shadow-lg: 0 8px 24px rgba(20, 28, 38, 0.10), 0 2px 6px rgba(20, 28, 38, 0.06); /* Brand-tinted shadows for accent-colored surfaces (primary * buttons, focus rings on accent elements). Keep these * consistent across modes — purple-tinted on both. */ --shadow-accent-sm: 0 4px 14px rgba(97, 0, 255, 0.30); --shadow-accent-md: 0 8px 24px rgba(97, 0, 255, 0.40); /* Warning-tinted surfaces (the dev quick-login box, future * caution badges). Brand-amber tinted; foreground is the * darker amber that meets AA on light backdrops. */ --color-warning-bg: rgba(255, 191, 64, 0.10); --color-warning-border: rgba(255, 191, 64, 0.50); --color-warning-fg: #a06a00; /* Focus ring used on form inputs. Matches the accent. */ --ring-accent: 0 0 0 3px rgba(97, 0, 255, 0.20); /* Logo theme tokens. Components reference the var, never the * path. */ --logo-primary-url: url("/static/img/logo-light.svg"); --logo-mark-url: url("/static/img/mark-light.svg"); /* Hero backdrop tokens — calm in light mode. Subtle three-stop * gradient with brand-purple + brand-cyan blobs at very low * opacity. Particles use brand purple at moderate opacity: * visible enough to register as motion, low enough not to crowd * the headline. */ --hero-bg-1: #fbfaf6; --hero-bg-2: #f4f7fc; --hero-bg-3: #fbf6ee; --hero-blob-1: rgba(97, 0, 255, 0.10); --hero-blob-2: rgba(0, 199, 255, 0.10); --hero-particle: rgba(97, 0, 255, 0.65); /* Drop-shadow filter for the brand logo on landing surfaces. * Subtle purple glow that lifts the mark off pale backgrounds. */ --filter-logo-glow: drop-shadow(0 2px 8px rgba(97, 0, 255, 0.30)); } [data-theme="dark"] { --color-bg: #0a0014; --color-bg-elevated: #14002b; --color-surface: #140025; --color-surface-alt: #1e0a35; --color-surface-tint: #1a0033; --color-text-primary: #e6ebf0; --color-text-secondary: #b0b8c2; /* Floor at #777 per philosophy §6.1 — muted text on dark stays * at or above this lightness. */ --color-text-muted: #8b9099; /* Accent flips to cyan in dark — pops against the purple/navy * backdrop in a way pure purple doesn't. The brand palette and * gradient remain identical. */ --color-accent: #00C7FF; --color-accent-hover: #33d4ff; --color-accent-fg: #ffffff; --color-brand-purple: #6100FF; --color-brand-cyan: #00C7FF; --color-brand-amber: #FFBF40; --color-brand-green: #2FCC71; --gradient-primary: linear-gradient(135deg, #6100FF 0%, #00C7FF 100%); /* Category accents — see the light block for rationale. The three * new hues brighten here so they read against the dark purple/navy * backdrop (mirrors the --color-danger light/dark split). */ --cat-condition: var(--color-brand-purple); --cat-professional: var(--color-brand-cyan); --cat-infection: var(--color-brand-green); --cat-personal: #f2789a; /* rose, brightened */ --cat-compliance: #7e92f0; /* indigo, brightened */ --cat-firstaid: #ff7a5c; /* red-orange, brightened */ --cat-default: var(--color-text-muted); --color-border: #2a1a45; --color-border-strong: #3d2960; --color-success: #2FCC71; --color-warning: #FFBF40; --color-danger: #e57373; --color-info: #00C7FF; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-accent-sm: 0 4px 14px rgba(97, 0, 255, 0.45); --shadow-accent-md: 0 8px 24px rgba(97, 0, 255, 0.55); --color-warning-bg: rgba(255, 191, 64, 0.12); --color-warning-border: rgba(255, 191, 64, 0.55); --color-warning-fg: #FFBF40; --ring-accent: 0 0 0 3px rgba(0, 199, 255, 0.30); --logo-primary-url: url("/static/img/logo-dark.svg"); --logo-mark-url: url("/static/img/mark-dark.svg"); /* Hero backdrop tokens — deep purple/navy gradient with vivid * brand-purple + brand-cyan blobs and amber rising particles. * Carries over the Python landing's immersive aesthetic. */ --hero-bg-1: #0a0014; --hero-bg-2: #1a0033; --hero-bg-3: #0d0020; --hero-blob-1: rgba(97, 0, 255, 0.20); --hero-blob-2: rgba(0, 199, 255, 0.16); --hero-particle: rgba(255, 191, 64, 0.55); /* Brand-cyan glow on the white logo against the dark purple * backdrop. */ --filter-logo-glow: drop-shadow(0 2px 12px rgba(0, 199, 255, 0.35)); } /* Non-color tokens — theme-independent. */ :root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-10: 4rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Brand typography stack: * body — Lato (400, 700) — copy, paragraphs, body text * heading — Raleway (400-700, variable) — h1-h6, buttons, eyebrows, anything heading-shaped * mono — system mono — code spans * * Both Lato and Raleway are self-hosted as .woff2 in * /static/fonts/ and declared via @font-face at the top of * base.css. The system fallbacks below cover the FOUT / failed- * load case. */ --font-body: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.5rem; --max-content-width: 64rem; }