/* ========================================================================= RoomLine — TOKEN LAYER Implements §3 (tokens), §17 (dark mode) and §8.2 (reduced motion) of the design specification. This file is loaded FIRST and nothing above it may declare a colour, a duration or a spacing step. Rule of engagement #1 from the spec: do not invent values. If a rule elsewhere in this project contains a raw hex or a raw millisecond count, it is a bug — either the token is here and was missed, or the spec has a gap worth flagging in DECISIONS.md. The last block in this file is the LEGACY BRIDGE. RoomLine's original stylesheet (styles.css, ~100KB, written before this spec existed) reads a small set of variables — --ink, --panel, --line, --accent and friends. Rather than rewrite three thousand declarations, those names are re-pointed at the tokens below, so the entire existing surface re-skins from one place and stays in step with dark mode and density for free. ========================================================================= */ :root { /* ---- Neutrals: WARM paper grey ---- Re-hued 2026-09-10. These were a cool blue-grey (#F4F5F7 and friends), which put a second cold hue next to the indigo and made every screen read as generic office software. The ramp now carries a small warm cast — the same greys a printed page has — so the indigo is the only cool thing on screen and therefore the thing your eye goes to. Lightness values are unchanged stop for stop, so every contrast pair §18 checks lands exactly where it did. */ --rl-n-0: #FFFFFF; --rl-n-25: #FCFCFB; --rl-n-50: #F7F7F5; --rl-n-100: #EFEEEA; --rl-n-200: #E4E2DD; --rl-n-300: #CCC9C2; --rl-n-400: #A19E96; /* §3.1 gives this #737A8C. Measured against §18's AA requirement it is 4.29:1 on --rl-surface and 3.94:1 on --rl-canvas — both under 4.5:1, and this is the ramp stop --rl-text-3 resolves to, which §18 itself names as the tightest pair in the system and tells you to check first. Darkened to the nearest value that clears AA on both grounds (5.10:1 and 4.67:1) while keeping the hue and the ramp's ordering. See DECISIONS.md. */ --rl-n-500: #6E6B63; --rl-n-600: #5C594F; --rl-n-700: #45423A; --rl-n-800: #2B2924; --rl-n-900: #1A1915; --rl-n-950: #100F0C; /* ---- Indigo: brand ---- Deepened 2026-09-10, then made RoomLine's own on 2026-10-07 (ink indigo). The 09-10 ramp was Tailwind's indigo stop for stop, and its 600 was the most saturated colour on any screen — chroma 0.215 against 0.18 either side — which is what read as "generic SaaS button". Every stop now sits on one hue (OKLCH 273, a shade bluer) with a smooth chroma curve that peaks at 0.17. Lightness is unchanged stop for stop, so every contrast pair §18 checks lands where it did (white on 600 went 7.90 -> 7.61:1; no pair moved more than 0.3). Generated, not picked: see DECISIONS.md. */ --rl-i-50: #EDF1FD; --rl-i-100: #DDE4FF; --rl-i-200: #C0CDFE; --rl-i-300: #9AADF9; --rl-i-400: #778BEC; --rl-i-500: #5A6CD8; --rl-i-600: #3C47B5; --rl-i-700: #303997; --rl-i-800: #232B74; --rl-i-900: #191F54; /* ---- Green: collected, resolved, healthy ---- */ --rl-g-50: #E8F6EB; --rl-g-100: #C7E9CF; --rl-g-200: #9CD5AA; --rl-g-500: #1FA257; --rl-g-600: #157E42; --rl-g-700: #116031; --rl-g-900: #0C331A; /* ---- Amber: pending, in turn, needs attention ---- One hue (OKLCH 68) from tint to text since 2026-10-07. The tints were yellow (81) and the solids orange (59), so a "Due" chip's text and its own background were visibly different colours. 68 also moves amber further from red, which is the pair that has to be told apart fastest. */ --rl-a-50: #FEF2E6; --rl-a-100: #FDE1C3; --rl-a-200: #FBC489; --rl-a-500: #CD8005; --rl-a-600: #A3660C; --rl-a-700: #7A4A01; --rl-a-900: #442700; /* ---- Red: arrears, failure, out of service ---- One hue (OKLCH 24) since 2026-10-07; the tints leaned pink (17). */ --rl-r-50: #FEECEA; --rl-r-100: #FAD2CF; --rl-r-200: #F2AAA5; --rl-r-500: #D4353B; --rl-r-600: #AF242B; --rl-r-700: #86171E; --rl-r-900: #460C0E; /* ---- Blue: informational, links, non-urgent system ---- Cerulean (OKLCH 238) since 2026-10-07. At 263 it sat 15° from the brand indigo, so "info" and "accent" were two near-identical blues on the same screen. */ --rl-b-50: #E3F3FE; --rl-b-100: #BEE1F9; --rl-b-500: #0479AE; --rl-b-700: #004F74; /* ---- Charts: categorical, in this order, never cycled past 6 ---- 2026-10-07. Dashboards used to take their series colours from the status ramps, so a plain "by building" bar could read as paid / due / overdue. These six are for identity only; status-meaning charts (age bands, priorities, room states) keep naming status tokens. Slot 1 is the brand. Validated with the dataviz checker — lightness band, chroma floor, colour-blind separation of neighbours, 3:1 on the surface — in both themes; the dark set is the same hues re-stepped, so a series keeps its colour when the theme changes. */ --rl-chart-1: #5667C8; --rl-chart-2: #059488; --rl-chart-3: #D67523; --rl-chart-4: #AF467E; --rl-chart-5: #7C9209; --rl-chart-6: #0E84B7; /* ---- Semantic surfaces ---- */ --rl-canvas: var(--rl-n-50); --rl-surface: var(--rl-n-0); --rl-surface-sunk: var(--rl-n-50); --rl-surface-raised:var(--rl-n-0); --rl-rail: var(--rl-n-0); --rl-overlay: rgba(26, 25, 21, 0.34); /* ---- Semantic text ---- */ --rl-text: var(--rl-n-900); --rl-text-2: var(--rl-n-600); --rl-text-3: var(--rl-n-500); --rl-text-disabled: var(--rl-n-400); --rl-text-invert: var(--rl-n-0); --rl-text-accent: var(--rl-i-700); --rl-text-danger: var(--rl-r-600); --rl-text-warning: var(--rl-a-700); --rl-text-success: var(--rl-g-600); /* ---- Semantic borders ---- */ --rl-line: var(--rl-n-200); --rl-line-soft: var(--rl-n-100); --rl-line-strong: var(--rl-n-300); --rl-line-accent: var(--rl-i-300); --rl-line-danger: var(--rl-r-200); /* §18 asks for 3:1 on UI boundaries. --rl-line-strong is 1.64:1 on white, which is right for a structural hairline between table rows and wrong for the edge of a control somebody has to find and click. Interactive boundaries — input, select, textarea, secondary button, checkbox — use this instead, at 3.20:1. Everything decorative keeps the hairline. */ --rl-line-control: #918D84; /* ---- Focus ---- */ --rl-focus: 0 0 0 2px var(--rl-n-0), 0 0 0 4px var(--rl-i-600); --rl-focus-inset: inset 0 0 0 2px var(--rl-i-600); /* ---- §3.2 Room state ---------------------------------------------- The most product-specific colour decision in the system. Occupied is the QUIET state: 94% of rooms are occupied, so if occupied were green the plan would be a wall of green and the four rooms that need attention would vanish. Available is drawn as an outline, not a fill — absence rendered as absence. Out of service additionally carries a 45° hatch (see shell.css) so the state survives greyscale print and colour-blind viewing. ------------------------------------------------------------------ */ --rl-room-occupied-fill: var(--rl-n-100); --rl-room-occupied-line: var(--rl-n-200); --rl-room-occupied-text: var(--rl-n-700); --rl-room-reserved-fill: var(--rl-i-50); --rl-room-reserved-line: var(--rl-i-200); --rl-room-reserved-text: var(--rl-i-700); --rl-room-available-fill: var(--rl-n-0); --rl-room-available-line: var(--rl-n-300); --rl-room-available-text: var(--rl-n-500); --rl-room-turn-fill: var(--rl-a-50); --rl-room-turn-line: var(--rl-a-200); --rl-room-turn-text: var(--rl-a-700); --rl-room-oos-fill: var(--rl-r-50); --rl-room-oos-line: var(--rl-r-200); --rl-room-oos-text: var(--rl-r-700); --rl-room-notice-edge: var(--rl-a-500); /* Booking stages on the occupancy calendar (2026-10-12). The room-state 50-stops are too pale to tell five stages apart at a glance, so the stages step up to the 100 fill / 300-ish line. Hues follow the stage chip tones in booking-state.js. */ --rl-stage-held-fill: var(--rl-a-100); --rl-stage-held-line: var(--rl-a-500); --rl-stage-held-text: var(--rl-a-700); --rl-stage-reserved-fill: var(--rl-i-100); --rl-stage-reserved-line: var(--rl-i-300); --rl-stage-reserved-text: var(--rl-i-800); --rl-stage-inroom-fill: var(--rl-g-100); --rl-stage-inroom-line: var(--rl-g-200); --rl-stage-inroom-text: var(--rl-g-700); /* ---- Semantic tint pairs ---- One name per pair so a component can say "amber tint" and be correct in both themes. Dark remaps these to the 900/200 stops; the 50-stop tints that read as a gentle wash on paper are near-white on a dark canvas. */ --rl-tint-accent-bg: var(--rl-i-50); --rl-tint-accent-fg: var(--rl-i-700); --rl-tint-green-bg: var(--rl-g-50); --rl-tint-green-fg: var(--rl-g-700); --rl-tint-amber-bg: var(--rl-a-50); --rl-tint-amber-fg: var(--rl-a-700); --rl-tint-red-bg: var(--rl-r-50); --rl-tint-red-fg: var(--rl-r-700); /* ---- §3.3 Typography ---- */ --rl-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif; --rl-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --rl-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; /* ---- §3.4 Space, radius, elevation ---- */ --rl-s-1: 4px; --rl-s-2: 8px; --rl-s-3: 12px; --rl-s-4: 16px; --rl-s-5: 20px; --rl-s-6: 24px; --rl-s-8: 32px; --rl-s-10: 40px; --rl-s-12: 48px; --rl-s-16: 64px; --rl-s-20: 80px; --rl-r-xs: 3px; /* chips, room cells, badges */ --rl-r-sm: 5px; /* inputs, buttons, small controls */ --rl-r-md: 8px; /* cards, list containers */ --rl-r-lg: 12px; /* dialogs, drawers, popovers */ --rl-r-full: 999px; /* avatars and only avatars */ --rl-e-0: none; --rl-e-1: 0 1px 2px rgba(20,23,31,.05), 0 0 0 1px rgba(20,23,31,.05); --rl-e-2: 0 4px 14px rgba(20,23,31,.08), 0 0 0 1px rgba(20,23,31,.06); --rl-e-3: 0 20px 48px rgba(20,23,31,.16), 0 0 0 1px rgba(20,23,31,.06); /* ---- §3.5 Motion ---- */ --rl-d-instant: 80ms; --rl-d-fast: 140ms; --rl-d-base: 200ms; --rl-d-mid: 260ms; --rl-d-slow: 360ms; --rl-d-long: 620ms; --rl-ease-standard: cubic-bezier(0.2, 0, 0, 1); --rl-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1); --rl-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15); --rl-ease-overshoot: cubic-bezier(0.34, 1.4, 0.64, 1); --rl-ease-linear: linear; /* ---- §7.2 Sticky offsets. Derived, never hardcoded at the call site, so a density change cannot leave a sticky header floating. ---- */ --rl-topbar-h: 52px; /* The top bar replaced the rail on 2026-09-10. */ --rl-top-h: 56px; --rl-subnav-h: 40px; /* The page header is gone (§4.4 in shell.css). What a sticky table header has to clear is now measured at runtime by rlSyncStickyTop() into --rl-sticky-top on #rlScroll — the tab bar's height, or zero. A token cannot hold it: the tab bar is present on some sections and not others, and its height moves with the density setting. */ --rl-rail-w: 248px; /* ---- §3.6 Density — comfortable is the default ---- */ --rl-row-h: 48px; --rl-cell-pad: 12px 16px; --rl-rail-item-h: 36px; --rl-card-pad: 20px; --rl-base-size: 15px; --rl-section-gap: 32px; --rl-room-cell: 44px; /* ---- §4.2 Content measure ---- */ /* No cap (2026-10-07, DECISIONS.md): a 1180–1600px column left a quarter of a large monitor empty. Reading width is --rl-prose's job. */ --rl-content-max: none; --rl-prose: 68ch; color-scheme: light; } /* §3.6 — compact is what Rina switches to in week two and never switches back. Density never changes colour, radius or motion values. */ [data-density="compact"] { --rl-row-h: 36px; --rl-cell-pad: 6px 12px; --rl-rail-item-h: 32px; --rl-card-pad: 14px; --rl-base-size: 14px; --rl-section-gap: 20px; --rl-room-cell: 34px; } /* §3.6 sets a compact room cell at 34px and §18 sets a 44px minimum touch target, "non-negotiable". Both are right in their own context: compact is a density somebody chooses for a mouse on a large screen. On a phone the accessibility floor wins, so the cell keeps its comfortable size there whatever the density setting says. */ @media (max-width: 719px) { [data-density="compact"] { --rl-room-cell: 44px; } } /* ========================================================================= §17 DARK MODE — not an inversion. A separate, deliberately-chosen palette. Elevation is carried by surface lightness plus a hairline, not by shadow alone. Pure white never appears as text: #E8EAEF prevents halation. ========================================================================= */ :root[data-theme="dark"] { /* Warmed to match the light ramp — a warm-grey light theme and a blue-grey dark one are two different products. These are still near-black rather than brown: the cast is small enough to read as "unlit paper" and not as sepia. */ --rl-canvas: #100F0C; --rl-surface: #1B1A16; --rl-surface-sunk: #141310; --rl-surface-raised:#22201B; --rl-rail: #16150F; --rl-overlay: rgba(8, 7, 5, 0.62); --rl-text: #ECEAE4; --rl-text-2: #AFABA1; --rl-text-3: #87837A; --rl-text-disabled: #5C594F; --rl-text-accent: #A8B7F1; --rl-text-danger: #F39C97; --rl-text-warning: #F5BA79; --rl-text-success: #80CA95; --rl-line: #302E27; --rl-line-soft: #26241E; --rl-line-strong: #423F36; --rl-line-control: #6E6A60; --rl-line-accent: #4654A5; --rl-chart-1: #7184E0; --rl-chart-2: #12A195; --rl-chart-3: #CB7229; --rl-chart-4: #C96598; --rl-chart-5: #829821; --rl-chart-6: #0B8BC0; --rl-e-1: 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05); --rl-e-2: 0 4px 14px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06); --rl-e-3: 0 20px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07); --rl-focus: 0 0 0 2px var(--rl-canvas), 0 0 0 4px var(--rl-i-400); /* Semantic tint backgrounds use the 900 stops; their text uses the 200 stops. Stated as an explicit remap rather than left to the ramps, because the 50-stop tints are unreadable on a dark canvas. */ --rl-tint-accent-bg: var(--rl-i-900); --rl-tint-accent-fg: var(--rl-i-200); --rl-tint-green-bg: var(--rl-g-900); --rl-tint-green-fg: var(--rl-g-200); --rl-tint-amber-bg: var(--rl-a-900); --rl-tint-amber-fg: var(--rl-a-200); --rl-tint-red-bg: var(--rl-r-900); --rl-tint-red-fg: var(--rl-r-200); /* Room states re-map. Occupied stays the quiet state; available stays an outline. */ --rl-room-occupied-fill: #282620; --rl-room-occupied-line: #423F36; --rl-room-occupied-text: #CBC7BE; --rl-room-reserved-fill: var(--rl-i-900); --rl-room-reserved-line: #3F4C95; --rl-room-reserved-text: var(--rl-i-200); --rl-room-available-fill: transparent; --rl-room-available-line: var(--rl-line-strong); --rl-room-available-text: var(--rl-text-3); --rl-room-turn-fill: var(--rl-a-900); --rl-room-turn-line: #6E4817; --rl-room-turn-text: var(--rl-a-200); --rl-room-oos-fill: var(--rl-r-900); --rl-room-oos-line: #6E2726; --rl-room-oos-text: var(--rl-r-200); --rl-stage-held-fill: var(--rl-a-900); --rl-stage-held-line: var(--rl-a-500); --rl-stage-held-text: var(--rl-a-200); --rl-stage-reserved-fill: var(--rl-i-900); --rl-stage-reserved-line: var(--rl-i-500); --rl-stage-reserved-text: var(--rl-i-200); --rl-stage-inroom-fill: var(--rl-g-900); --rl-stage-inroom-line: var(--rl-g-600); --rl-stage-inroom-text: var(--rl-g-200); color-scheme: dark; } /* ========================================================================= BASE ========================================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--rl-canvas); } body { font-family: var(--rl-font-sans); font-size: var(--rl-base-size); line-height: 1.47; /* tnum keeps every figure the same width, so an updating number does not make its container jitter. cv05 disambiguates the lowercase l. */ font-feature-settings: "tnum" 1, "cv05" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--rl-canvas); color: var(--rl-text); } button, input, select, textarea { font-family: inherit; } /* ========================================================================= §3.3 TYPE SCALE Column headers are sentence case. There are no tracked-out all-caps eyebrow labels in this product (§22). ========================================================================= */ .rl-display { font-family: var(--rl-font-serif); font-size: 44px; line-height: 46px; font-weight: 400; letter-spacing: -0.02em; } .rl-title-1 { font-family: var(--rl-font-serif); font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -0.01em; } .rl-title-2 { font-family: var(--rl-font-serif); font-size: 21px; line-height: 28px; font-weight: 400; } .rl-heading { font-family: var(--rl-font-sans); font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; } .rl-body { font-size: 15px; line-height: 22px; font-weight: 400; } .rl-body-strong { font-size: 15px; line-height: 22px; font-weight: 500; } .rl-small { font-size: 13.5px; line-height: 19px; font-weight: 400; } .rl-caption { font-size: 12.5px; line-height: 16px; font-weight: 400; letter-spacing: 0.005em; } .rl-label { font-size: 12.5px; line-height: 16px; font-weight: 500; letter-spacing: 0.005em; } .rl-figure-lg { font-family: var(--rl-font-serif); font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: -0.01em; } .rl-figure { font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; } .rl-mono, .mono { font-family: var(--rl-font-mono); font-size: 13px; line-height: 18px; font-weight: 400; } .rl-num, .rl-display, .rl-figure, .rl-figure-lg { font-variant-numeric: tabular-nums lining-nums; } .rl-t2 { color: var(--rl-text-2); } .rl-t3 { color: var(--rl-text-3); } /* Prose contexts cap at 68 characters. */ .rl-prose { max-width: var(--rl-prose); } /* ========================================================================= §8.2 REDUCED MOTION Reduced motion means less movement, not zero feedback: opacity-only transitions are restored at --rl-d-instant below, because a hard cut between screens is disorienting even for users who asked for less motion. ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Reduced motion means less movement, not zero feedback: the route change and the drawer keep an opacity-only cue at 80ms, because a hard cut between screens is disorienting even for someone who asked for less. */ .rl-content[data-phase="enter"] { animation-duration: var(--rl-d-instant) !important; } .rl-drawer, .rl-dialog-panel, .rl-toast, .rl-scrim, .rl-palette-panel { transition: opacity var(--rl-d-instant) linear !important; transform: none !important; } } /* ========================================================================= LEGACY BRIDGE styles.css predates this spec and reads the names below. Re-pointing them here re-skins every one of the app's forty views at once, keeps them in step with dark mode and density, and means the old stylesheet contains no colour of its own that this token layer does not control. --occupied deliberately resolves to NEUTRAL, not to the brand indigo it used to be: occupied is the quiet state (§2, principles). ========================================================================= */ :root { --bg: var(--rl-canvas); --bg-panel: var(--rl-surface); --panel: var(--rl-surface); --panel-2: var(--rl-surface-sunk); --surface-2: var(--rl-surface-sunk); --ink: var(--rl-text); --ink-soft: var(--rl-text-2); --line: var(--rl-line); --line-soft: var(--rl-line-soft); --line-strong: var(--rl-line-strong); --accent: var(--rl-i-600); --accent-deep: var(--rl-i-700); --accent-light: var(--rl-i-400); --accent-bg: var(--rl-tint-accent-bg); --accent-ring: rgba(79, 70, 196, .34); --ready: var(--rl-text-success); --ready-bg: var(--rl-tint-green-bg); --occupied: var(--rl-n-700); --occupied-bg: var(--rl-n-100); --inspect: var(--rl-text-warning); --inspect-bg: var(--rl-tint-amber-bg); --issue: var(--rl-text-danger); --issue-bg: var(--rl-tint-red-bg); --warn: var(--rl-text-warning); --pending: var(--rl-text-warning); --shadow: var(--rl-e-1); --shadow-lift: var(--rl-e-2); /* Radius encodes hierarchy (§3.4). The old sheet had 16px on cards and 12px on controls; the spec is 8px and 5px. */ --radius-lg: var(--rl-r-md); --radius-md: var(--rl-r-sm); --content-max: var(--rl-content-max); } :root[data-theme="dark"] { /* --accent-deep is a text weight, not a shade: it has to be darker than the accent on paper and LIGHTER than it on ink. Pinned to --rl-i-700 in both themes it drew indigo text on the indigo-900 tint it usually sits on — 1.6:1, effectively invisible. The same reasoning applies to --accent-light, which the old sheet used for emphasis on dark chrome. */ --accent-deep: var(--rl-text-accent); --accent-light: var(--rl-i-300); --occupied: #C3C9D6; --occupied-bg: #232937; --accent-ring: rgba(119, 139, 236, .40); }