/* ========================================================================== Phantom — design tokens ========================================================================== The palette, type and shape language are lifted from r5systems.co.za so the two properties read as one family. Values below were measured off the live site rather than eyeballed, which is why they look arbitrary — they aren't. ONE THEME, NO TOGGLE. The R5 site is light, and a product that follows a brand can't offer to invert it: half the users would then be looking at something that doesn't match the marketing site they arrived from. PURPLE IN PLACE OF VOLT. R5's accent is #CCFF00, a fluorescent yellow-green carrying DARK text. Purple can't do that — no purple is both vivid and light enough to take dark text — so the accent keeps the neon energy and flips to white text on top. That is the one deliberate divergence from the source, and --accent-ink exists so it stays consistent everywhere. ========================================================================== */ :root { color-scheme: light; /* ── R5 raw palette ────────────────────────────────────────────────── Kept under their original names as the single source of truth; the semantic tokens below all resolve back to these. */ --obsidian: #0E1012; --charcoal: #1A1D20; --coal-2: #22262B; --coal-3: #2A2F35; --slate: #8A95A5; --off-white: #F5F6F8; --paper: #FFFFFF; --ink: #14171A; --ink-soft: #525E6C; /* ── Accent ────────────────────────────────────────────────────────── Neon purple, standing in for R5's volt. Hover and press go DARKER, which is the correct direction on a light ground — lightening an accent on white makes it recede exactly when it should respond. */ --purple: #9B30FF; --purple-dim: #7A1FD0; --accent: var(--purple); --accent-hover: #8A22EE; --accent-press: var(--purple-dim); --accent-ink: #FFFFFF; /* text ON accent */ --accent-soft: rgb(155 48 255 / 0.10); --accent-line: rgb(155 48 255 / 0.30); --accent-glow: rgb(122 31 208 / 0.55); /* the coloured lift under a pill */ /* ── Surfaces ──────────────────────────────────────────────────────── Canvas is off-white and cards are pure white — the inverse of the usual app convention, and the reason the R5 layout feels airy. Steps below white descend toward the page rather than away from it. */ --canvas: var(--off-white); --surface-1: var(--paper); --surface-2: #EFF1F4; --surface-3: #E6E9ED; --surface-4: #DCE0E6; /* Dark slabs. The R5 site breaks up its light page with near-black panels — its cookie dialog is one. Toasts use these; --r-slab is here for any full-bleed dark section that wants the site's 44px corner. */ --slab: var(--obsidian); --slab-2: var(--charcoal); --slab-ink: var(--off-white); --slab-soft: #A8B2BF; /* ── Text ──────────────────────────────────────────────────────────── */ --text-1: var(--ink); /* headings, primary copy */ --text-2: var(--ink-soft); /* secondary copy */ --text-3: #6F7C8B; /* meta, captions */ --text-4: var(--slate); /* the quietest legible tier */ /* ── Lines ─────────────────────────────────────────────────────────── On light, borders are DARKER than the surface — the opposite of the dark-theme rule, and the thing most ports of a dark UI get wrong. */ --line: rgb(20 23 26 / 0.08); --line-strong: rgb(20 23 26 / 0.14); /* ── Status ────────────────────────────────────────────────────────── Darkened for a light ground: a hue that reads "muted" on charcoal fails contrast on paper. Danger is R5's own red. */ --success: #0F7B4F; --warning: #9A6400; --danger: #D42020; --info: #1F5FBF; --neutral: #5C6875; --success-soft: rgb(15 123 79 / 0.10); --warning-soft: rgb(154 100 0 / 0.12); --danger-soft: rgb(212 32 32 / 0.09); --info-soft: rgb(31 95 191 / 0.09); --neutral-soft: rgb(92 104 117 / 0.09); /* ── Radius ────────────────────────────────────────────────────────── R5's exact ladder. These are much larger than a typical app UI, and that generosity is most of what the "soft" reads as. Controls are full pills — the site's single loudest shape signal. */ --r-xs: 8px; --r-sm: 10px; /* inputs, small tiles */ --r-md: 16px; /* popovers, banners */ --r-lg: 24px; /* cards, panels */ --r-xl: 36px; /* modals, sheets */ --r-slab: 44px; /* full-bleed dark sections */ --r-full: 999px; /* every button, badge, avatar */ /* ── Spacing · 4px base ─────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ── Type ──────────────────────────────────────────────────────────── Inter for copy, Manrope for display — R5 self-hosts both as variable fonts; we pull the same two families from Google Fonts. The "Variable" names are listed first so a machine that already has the site's fonts uses the identical files. */ --font-sans: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Manrope Variable", Manrope, var(--font-sans); --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Nudged up one step from the old dark theme. R5 sets 17px body copy; a dense task list can't carry that, but 14px looked mean next to it. */ --t-2xs: 11px; --t-xs: 12px; --t-sm: 13.5px; --t-base: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 25px; --t-2xl: 32px; --t-3xl: 42px; /* ── Elevation ─────────────────────────────────────────────────────── R5's two shadows verbatim. Both are two-part: a tight contact shadow plus a wide, heavily-negative-spread ambient one. That second layer is what separates these from the default `box-shadow` look. */ --shadow-soft: 0 1px 2px rgb(20 23 26 / 0.04), 0 12px 32px -8px rgb(20 23 26 / 0.10); --shadow-lift: 0 2px 6px rgb(20 23 26 / 0.05), 0 24px 48px -12px rgb(20 23 26 / 0.16); --shadow-dark: 0 40px 80px -24px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(245 246 248 / 0.06); --ring: 0 0 0 1px var(--line); --elev-1: var(--ring); --elev-2: var(--ring), var(--shadow-soft); --elev-3: var(--shadow-soft); --elev-4: var(--shadow-lift); /* The lift under a primary pill: a hard 2px contact edge plus a wide glow tinted with the accent itself, never neutral black. */ --lift-accent: 0 2px 0 rgb(20 23 26 / 0.06), 0 10px 28px -10px var(--accent-glow); /* ── Motion ────────────────────────────────────────────────────────── */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 260ms; --dur-exit: 140ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* ── Layout ────────────────────────────────────────────────────────── 1200px container and a 76px header, both taken from the site. */ --container: 1200px; --sidebar-w: 232px; --topbar-h: 60px; /* Focus ring. Deliberately a darker purple than the accent, because the accent itself sits under the ring on a primary button and two tones of the same value would be invisible against each other. */ --focus: #5B12A8; }