/* ========================================================================== Logical Worship — unified tokens for the Cal.DIY reskin -------------------------------------------------------------------------- This is the file to edit. Three layers, kept separate on purpose: Layer 1 (no prefix) THE SHARED UI. These are the FileUploader's design tokens, verbatim in value — the same UI as fileupload.logicalworship.com. If a value changes here, it should change there too. Source: JoPittmen/FileUploader web/src/styles/tokens.css + docs/DESIGN.md (adopted 2026-10-13, measured from apple.com). Layer 1b --lw-* Aliases onto layer 1, kept so anything written against the original lw-tokens.css (see ../original/) still resolves. New work should use layer 1 names. Layer 2 --cal-* The cal.diy mapping, scoped to `.dark`. Translates layer 1 into the custom properties cal.diy's compiled stylesheet declares. This is the layer that gets appended to cal.diy's globals.css when the reskin is applied to the real fork. The booking-page recreation in this project is styled with these same --cal-* vars, so what you preview here is what cal.diy gets. WHAT CHANGED vs the original lw-tokens.css (in ../original/): the original layer 1 was lifted from logicalworship.com and used NEUTRAL greys (#1d1d1f panel, #2a2a2d raised). Per Jo (2026-11-11) the reskin now uses the FileUploader UI instead: violet-cast surfaces (#1c1626 panel, #281f36 raised), the panel gradient, and the hero wash. The two systems already shared the text values and the accent (#7d4bd4 / #8d5ce0), so the visible change is the surfaces. One value differs on purpose: --accent-text is #c7abf6 here (the FileUploader's), not #b89bf0 (the original token file's). The database recommendation in the README (darkBrandColor) still uses #b89bf0, because that choice is about cal.diy's lightening math, not about which lavender reads better as text — see ../original/lw-tokens.css notes before changing either. ========================================================================== */ :root { /* ---- Layer 1: the shared UI (FileUploader tokens) ------------------ */ /* Surfaces: three tiers, violet cast, no borders needed. */ --bg: #020104; /* page ground, barely lifted off true black */ --panel: #1c1626; /* cards, panels */ --panel-top: #1e1729; /* top stop of the panel gradient */ --panel-bottom: #181322; --raised: #281f36; /* hover, selected, nested surfaces */ --line: #332a45; /* hairlines where a divider is genuinely needed */ /* One light source behind the top of the page. */ --hero-wash: radial-gradient(950px 490px at 50% -9%, rgba(125, 75, 212, 0.2), transparent 67%); /* Text. */ --text: #f5f5f7; --muted: #86868b; --link: #e8e8ed; /* Accent: Logical Worship purple, lifted for contrast on black. --accent is SURFACES AND FILLS ONLY (3.83:1 on bg — fails 4.5:1 body text). Anything small or textual uses --accent-text. */ --accent: #7d4bd4; --accent-hover: #8d5ce0; --accent-text: #c7abf6; --on-accent: #ffffff; /* 5.48:1 on --accent PASS */ /* Status: Apple's system colours. Semantic colours are NOT remapped to brand purple — red means error and green means success everywhere. */ --online: #30d158; --offline: #ff453a; --danger: #ff453a; /* Type: system stack only, never a webfont. */ --font-heading: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: var(--font-heading); --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --radius: 18px; /* panels */ --radius-sm: 12px; /* inputs */ --radius-pill: 980px; /* buttons — apple.com's literal value */ --space-page: 96px; color-scheme: dark; /* ---- Layer 1b: --lw-* aliases (back-compat with the original file) - */ --lw-bg: var(--bg); --lw-panel: var(--panel); --lw-raised: var(--raised); --lw-rule: var(--line); --lw-text: var(--text); --lw-muted: var(--muted); --lw-link: var(--link); --lw-accent: var(--accent); --lw-accent-hover: var(--accent-hover); --lw-accent-text: var(--accent-text); --lw-on-accent: var(--on-accent); /* Control boundaries reuse --muted: it is the smallest brand value that clears WCAG 1.4.11's 3:1 on both grounds (5.80:1 on bg, 4.65:1 on panel). --line at ~1.5:1 is for separators only. Full reasoning in ../original/lw-tokens.css. */ --lw-border: var(--muted); --lw-border-subtle: var(--line); } /* ========================================================================== Layer 2: the cal.diy mapping -------------------------------------------------------------------------- Scoped to `.dark` only, deliberately. cal.diy's light theme is left exactly as upstream ships it; force dark per user instead (users.theme = 'dark'). See the README for the database settings that CSS cannot reach (brandColor / darkBrandColor / hideBranding). ========================================================================== */ .dark { /* Grounds. cal.diy ships four grounds; this system has three tiers plus the gradient, so -subtle doubles onto -raised (the mapping the original file chose after testing: duration pills keep a surface, and the cost is an understated hover on already-raised surfaces). */ --cal-bg: var(--bg); /* was #0f0f0f */ --cal-bg-muted: var(--panel); /* was #171717 */ --cal-bg-subtle: var(--raised); /* was #262626 */ --cal-bg-emphasis: var(--raised); /* was #404040 */ --cal-bg-inverted: var(--text); /* was #fafafa */ /* Text. */ --cal-text: var(--text); /* was #d4d4d4 */ --cal-text-emphasis: var(--text); /* was #fafafa */ --cal-text-inverted: var(--bg); /* was #000 */ /* Muted is the tight one: 4.65:1 on panel clears 4.5 with 0.15 to spare; on raised it is 3.95:1 and does NOT clear it, which is why -subtle is lifted to --link. Do not flatten these two together. */ --cal-text-muted: var(--muted); --cal-text-subtle: var(--link); /* Borders. */ --cal-border: var(--lw-border); /* control boundaries 5.80:1 */ --cal-border-emphasis: var(--muted); /* 5.80:1 */ --cal-border-subtle: var(--lw-border-subtle); /* separators only */ --cal-border-muted: var(--panel); /* separators only */ /* Brand. ⚠ These five do nothing on the booking pages themselves: cal.diy writes them as an inline style on at runtime from users.brandColor / users.darkBrandColor, and inline beats any stylesheet. They apply on non-Booker pages and keep the two definitions from drifting. The booking-page accent is a DATABASE setting — see the README. */ --cal-brand: var(--accent); --cal-brand-emphasis: var(--accent-hover); --cal-brand-subtle: var(--accent-text); --cal-brand-text: var(--on-accent); --cal-brand-accent: var(--on-accent); }