/* ============================================================================ 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. cu400 is the recovered #dc9148. */ --c-cu300: #efb46f; /* recovered "copper-light" */ --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-cu400 as text or as a border on any light surface. #dc9148 on #fbf8f3 = 2.42:1. Use cu600 or cu700 there. */ /* Verdigris — Station 801's accent. Chosen over navy and teal because it is the furthest from copper in hue while sitting on the same warm neutrals; navy tested equally accessible (10.84) but reads institutional. */ --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). */ /* 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). Neutral, no brand accent: the apex belongs to the address, not to either business. 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-n900); /* the building has no accent hue */ --accent-hover: var(--c-n700); --on-accent: var(--c-white); /* 16.59 */ --accent-on-inverse: var(--c-white); --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-n900); /* 15.66 vs n50, 16.59 vs white */ --danger: var(--c-danger-light); /* 7.46 on white */ --ok: var(--c-ok-light); --warn: var(--c-warn-light); --radius-control: var(--r-2); --radius-card: var(--r-2); --font-display: var(--font-sans); --font-body: var(--font-sans); --display-transform: none; --display-tracking: var(--tracking-tight); }