/* ============================================================================ 801 S Chester — design tokens Layer 1 of 3. Load order: tokens.css → core.css → theme-*.css :root = PRIMITIVES. Raw values. No meaning. Never used by a component. html = SEMANTIC DEFAULTS, and they are also the "building" skin used by the apex the801lr.com. Specificity 0,0,1 — deliberately lower than [data-theme="…"] (0,1,0) so a theme file wins regardless of the order the two are linked in. Every contrast number in a comment was computed against the WCAG 2.x relative-luminance formula, not estimated. Pairs marked BAN measurably fail. ============================================================================ */ :root { /* --- colour primitives ------------------------------------------------- One warm-neutral ramp (hue ~30°, low chroma) shared by both skins — this is what makes the two sites read as siblings. n900/n100/n50 are the values recovered from the 2023 membersat801.com stylesheet; the rest of the ramp is interpolated around them. */ --c-n1000: #100e0c; --c-n900: #211e1b; /* recovered "ink" */ --c-n800: #2c2824; /* recovered "ink-soft" */ --c-n700: #3d3832; --c-n600: #575049; --c-n500: #6f675e; --c-n400: #8c8378; /* the control-border value — see note below */ --c-n300: #b5ada2; /* recovered "muted" */ --c-n200: #ddd6cb; --c-n100: #f2ede6; /* recovered "cream" */ --c-n50: #fbf8f3; /* recovered "paper" */ --c-white: #ffffff; /* n400 #8c8378 is the one border value that clears WCAG 1.4.11 (3:1 for the visual boundary of a control) on every surface either skin uses: vs #ffffff 3.73 · vs #fbf8f3 3.52 · vs #f2ede6 3.20 vs #211e1b 4.45 · vs #2c2824 3.92 One token, five surfaces, no exceptions. Do not substitute a lighter hairline on inputs, checkboxes, selects or the apex doors. */ /* Copper — The 801's recovered accent, and the lounge's accent again as of 2026-10-01. cu400 is the recovered #dc9148; cu300 is what the lounge ships, and its hover cu200 is defined with the oxblood block below. */ --c-cu300: #efb46f; /* recovered "copper-light" — 9.03 on #211e1b · 7.96 on #2c2824 · 10.48 on #100e0c */ --c-cu400: #dc9148; /* recovered "copper" — DARK surfaces only */ --c-cu600: #95571c; /* light-surface copper, 5.42 on #fbf8f3 */ --c-cu700: #7a4715; /* light-surface copper, 7.24 on #fbf8f3 */ /* BAN: --c-cu300 / --c-cu400 as text or as a border on any light surface. #efb46f on #fbf8f3 = 1.73:1, #dc9148 = 2.42:1 — the shipping accent is the WORSE of the two. Use cu600 or cu700 there. */ /* Gold — the lounge's accent from 2026-09-24 until 2026-10-01, when the lounge returned to the copper above. Sampled from the client's posters: n=28,866 masked pixels, median hue 38.4°, median saturation 37.5%. The posters render it as a gradient, so gd400 was the mid tone (rest state) and gd300 the highlight. gd300 is still live — it is the lounge --focus-ring. gd400 and gd700 are retired: no semantic token in design/ or holding/ binds either one. They stay defined; removing a primitive is a separate change. Measured on this file's own neutrals, which are NOT the shipping lounge file's — see the scope note in theme-lounge.css. */ --c-gd300: #e2cba3; /* 10.51 on n900 · 9.26 on n800 · 12.20 on n1000 */ --c-gd400: #c1a370; /* 6.90 on n900 · 6.09 on n800 · 8.02 on n1000 */ --c-gd700: #7a530f; /* 6.45 on #fbf8f3 — light-surface and print only */ /* BAN: --c-gd400 / --c-gd300 as text or border on any light surface. #c1a370 on #fbf8f3 = 2.27 and #e2cba3 = 1.49. Use gd700. Not the worst pair in this file: the shipping lounge accent cu300 is 1.73 and its hover cu200 is 1.34. The paler the accent the safer it is on dark and the worse on light, which is why each one carries its own BAN. */ /* Verdigris — Station 801's accent until 2026-10-01, when the hall moved to oxblood ox700. No semantic token in design/ or holding/ binds these any more. Chosen at the time over navy and teal because it is the furthest from copper in hue while sitting on the same warm neutrals — the rationale oxblood deliberately reverses, the three sites now being meant to read as one red-brown family. The original note also claimed navy "tested equally accessible (10.84)"; no hex was ever recorded for that figure and it reproduces none of bl800's measured values below, so it is unverified — do not reuse it as a guardrail. */ --c-vd700: #14513c; /* 8.73 on #fbf8f3 · 9.24 under white text */ --c-vd600: #1b6b4f; /* 6.08 on #fbf8f3 · 6.44 under white text */ --c-vd500: #2f8f6b; /* 3.77 on #fbf8f3 — non-text / borders only */ --c-vd400: #4fb68c; /* 6.64 on #211e1b — DARK surfaces only */ --c-vd300: #7fd3ad; /* 9.34 on #211e1b — DARK surfaces only */ /* BAN: --c-vd400 / --c-vd300 on light surfaces (2.36 and 1.68 on #fbf8f3). BAN: --c-vd700 / --c-vd600 on dark surfaces (1.79 and 2.58 on #211e1b). */ /* Civic navy — the apex's accent from 2026-09-25 until the oxblood remap on 2026-10-01. Its primitives are the --c-bl* block further down, which nothing references any more. The rationale was that the landing page belongs to the address, not to either business, so it took the one hue Station 801 rejected: the verdigris note above calls navy institutional, and for the building itself that was the point, not the objection. */ /* Oxblood — the apex accent (ox800) and the hall's (ox700) as of 2026-10-01. One red-brown family across all three sites, so they read as one property rather than three tenants. */ --c-ox800: #5e1d27; /* 12.49 on #ffffff · 11.79 on #fbf8f3 · 10.73 on #f2ede6 */ --c-ox700: #7a2733; /* 9.70 on #ffffff · 9.15 on #fbf8f3 · 8.33 on #f2ede6 */ --c-ox600: #94313f; /* 7.58 on #ffffff · 7.16 on #fbf8f3 — hover only */ --c-ox300: #e8a7b0; /* 8.36 on #211e1b · 9.71 on #100e0c — DARK surfaces only */ --c-cu200: #f6d3a8; /* 11.69 on #211e1b · 10.31 on #2c2824 — lounge hover */ /* BAN: --c-ox800 / --c-ox700 on dark surfaces (1.33 and 1.71 on #211e1b). BAN: --c-ox300 on light surfaces (1.87 on #fbf8f3). BAN: --c-cu200 on light surfaces (1.34 on #fbf8f3). */ --c-bl800: #22356b; /* 11.08 on #fbf8f3 · 11.73 under white text */ --c-bl600: #35508f; /* 7.35 on #fbf8f3 · 7.79 under white text */ --c-bl300: #aec4ea; /* 9.39 on #211e1b — DARK surfaces only */ /* BAN: --c-bl800 / --c-bl600 as text or border on dark surfaces (1.41 and 2.13 on #211e1b). BAN: --c-bl300 on light surfaces (1.67 on #fbf8f3). */ /* Status. Two of each, because one value cannot clear 4.5:1 on both a #fbf8f3 page and a #211e1b page. */ --c-danger-light: #a3231b; /* 7.05 on #fbf8f3 · 7.46 on #ffffff */ --c-danger-dark: #ff9a90; /* 8.12 on #211e1b · 7.16 on #2c2824 */ --c-ok-light: #166534; /* 6.73 on #fbf8f3 */ --c-ok-dark: #7ee2a8; /* 10.53 on #211e1b */ --c-warn-light: #8a5a00; /* 5.59 on #fbf8f3 */ --c-warn-dark: #ffc866; /* 10.82 on #211e1b */ /* --- type primitives --------------------------------------------------- Modular scale, base 16px, TWO stated ratios interpolated by viewport: 1.18 (minor third, compressed) at 360px 1.25 (major third) at 1280px One ratio either overflows a 360px phone at the top of the scale or leaves the desktop hero undersized. Each step's clamp() is the exact linear solution through (360px, 16·1.18ⁿ) and (1280px, 16·1.25ⁿ). step 360px 1280px -1 14.00 → 14.00 (OFF-SCALE, fixed — see note) 0 16.00 → 16.00 1 18.88 → 20.00 2 22.28 → 25.00 3 26.29 → 31.25 4 31.02 → 39.06 5 36.60 → 48.83 6 43.19 → 61.04 7 50.97 → 76.29 step -1 is pinned at 14px rather than taken from the ratio. The ratio gives 13.56px at 360 and 12.80px at 1280 — i.e. it gets SMALLER as the screen grows, so clamp() min would exceed max and the value would stick. 14px flat is also the floor the renewal-disclosure rule needs: several state automatic-renewal statutes require the disclosure be no less prominent than the surrounding text, so legal copy uses --fs-0, never --fs--1. --fs--1 is for optional captions only. */ --fs--1: 0.875rem; /* 14px flat */ --fs-0: 1rem; /* 16px flat */ --fs-1: clamp(1.18rem, 1.15rem + 0.12vw, 1.25rem); --fs-2: clamp(1.39rem, 1.33rem + 0.30vw, 1.56rem); --fs-3: clamp(1.64rem, 1.52rem + 0.54vw, 1.95rem); --fs-4: clamp(1.94rem, 1.74rem + 0.87vw, 2.44rem); --fs-5: clamp(2.29rem, 1.99rem + 1.33vw, 3.05rem); --fs-6: clamp(2.70rem, 2.26rem + 1.94vw, 3.82rem); --fs-7: clamp(3.19rem, 2.57rem + 2.75vw, 4.77rem); /* Off-scale. The building numeral is a graphic, not a heading; putting it on the scale would drag every heading up with it. 72px → 180px. */ --fs-display: clamp(4.50rem, 1.86rem + 11.74vw, 11.25rem); --lh-tight: 1.05; /* --fs-5 and above */ --lh-snug: 1.25; /* --fs-2 … --fs-4 */ --lh-normal: 1.6; /* body */ --lh-loose: 1.7; /* legal and consent copy */ --tracking-tight: -0.02em; --tracking-wide: 0.08em; --tracking-caps: 0.14em; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* Font stacks. No @font-face, no webfont, no network. See README §4. */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* --- spacing rhythm ---------------------------------------------------- 4px grid. 1–4 step linearly by 4px; 5–10 step by ~1.5× so the scale reaches page-level gaps without thirty tokens. */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-9: 6rem; /* 96px */ --sp-10: 8rem; /* 128px */ /* Section rhythm is the one fluid spacing value: 48px → 96px. */ --sp-section: clamp(3rem, 1.83rem + 5.22vw, 6rem); /* --- radii, borders, focus, motion ------------------------------------- */ --r-0: 0; --r-1: 2px; --r-2: 4px; --bw-hair: 1px; --bw-thick: 2px; --bw-focus: 3px; --focus-offset: 2px; /* Touch target. WCAG 2.2 SC 2.5.8 (AA) requires 24×24 CSS px; this build targets 44×44, which is SC 2.5.5 (AAA) and the iOS/Android guidance. 44 is the floor for EVERY interactive element, including the checkbox rows on the application form. */ --target-min: 44px; --dur-fast: 120ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); /* Layout */ --measure: 68ch; /* max line length for body copy */ --wrap-max: 1160px; --gutter: var(--sp-4); /* 16px minimum side gutter; widened at ≥768px */ /* Breakpoints exist as documentation only. Custom properties cannot be used inside a media query, so core.css repeats these as literals: 480px (sm) 768px (md) 1024px (lg) All queries are min-width. There is no max-width query in this system. */ } /* ============================================================================ SEMANTIC DEFAULTS — also the "building" skin (the801lr.com apex). Oxblood ox800, the darkest step of the one accent family all three sites share since 2026-10-01. The apex still belongs to the address rather than to either business; it now says so by being the deepest member of a shared family instead of by borrowing a hue from neither. The SURFACES stay pure neutral even so — the apex renders a light events door and a dark lounge door full-bleed inside one viewport, and each door paints its own background, so only white works behind both. theme-events.css and theme-lounge.css override these. ============================================================================ */ html { --surface: var(--c-white); --surface-raised: var(--c-n50); /* cards */ --surface-sunken: var(--c-n100); /* alternating bands, form wells */ --surface-inverse: var(--c-n900); /* footer, hero */ --text: var(--c-n900); /* 16.59 on white */ --text-muted: var(--c-n600); /* 7.93 on white */ --text-on-inverse: var(--c-white); /* 16.59 on n900 */ --text-muted-on-inverse: var(--c-n300); /* 7.47 on n900 */ --accent: var(--c-ox800); /* 12.49 on white · 11.79 on n50 · 10.73 on n100 */ --accent-hover: var(--c-ox700); /* 9.70 on white · 9.15 on n50 · 8.33 on n100 */ --on-accent: var(--c-white); /* 12.49 on ox800 · 9.70 on ox700. White is the only viable value: n900 on ox800 is 1.33. */ --accent-on-inverse: var(--c-ox300); /* 8.36 on n900 · 9.71 on n1000 */ --border: var(--c-n200); /* decorative only — 1.44, non-normative */ --border-control: var(--c-n400); /* 3.73 on white — SC 1.4.11 */ --border-on-inverse: var(--c-n700); /* decorative, on --surface-inverse */ --border-control-on-inverse: var(--c-n400); /* 4.45 on n900 — SC 1.4.11 */ --focus-ring: var(--c-ox800); /* 12.49 vs white, 11.79 vs n50, 10.73 vs n100. On --surface-inverse core.css rebinds this to --text-on-inverse (16.59); ox800 there is 1.33. */ --danger: var(--c-danger-light); /* 7.46 on white */ --ok: var(--c-ok-light); --warn: var(--c-warn-light); --radius-control: var(--r-1); /* 2px — events 4px, lounge 0, apex 2px */ --radius-card: var(--r-1); --font-display: var(--font-sans); --font-body: var(--font-sans); --display-transform: none; --display-tracking: var(--tracking-tight); }