/* Element Manage — design tokens Measured off the shipped lettings and sales Hub screens. Drop this in once and replace hardcoded hex values with var(--token). One light theme only: the Hub is a daytime office tool. Do not invent a dark theme. */ :root { /* ── surfaces ─────────────────────────────────────────────────────── */ --surface-page: #fbf8f3; /* the page ground on every screen. Never white. */ --surface-card: #ffffff; /* cards, table rows, stat tiles, the bottom nav */ --surface-sunken: #efe9e0; /* segmented control tracks, empty progress bars */ --surface-head: #f7f7f8; /* table header rows only */ --surface-bar: #3a2d0e; /* the top utility strip; text on it is ink-inverse */ /* ── ink ──────────────────────────────────────────────────────────── */ --ink: #2b2a33; --ink-muted: #7a7788; /* 4.0:1 on surface-page — 15px and above only */ --ink-muted-strong: #6b6877; /* addition: use at 13px and below (5.1:1) */ --ink-inverse: #ffffff; --line: #efe9e0; /* every hairline, 1px, never 2 */ --focus: #5b4bc7; /* 2px solid ring, 2px offset, on everything focusable */ /* ── signals — each colour means ONE thing everywhere ─────────────── */ --chase: #d65a5a; /* late, or due today */ --chase-tint: #fbe9e9; --chase-ink: #a33a3a; /* addition: chip text on chase-tint (5.6:1) */ --waiting: #d9962e; /* blocked on someone outside the team */ --waiting-tint: #fcf0df; --waiting-ink: #8a5a12; --inhand: #5b4bc7; /* raised, running to plan; also every primary button */ --inhand-tint: #ece9fa; --done: #3fa57a; /* booked, in date, complete */ --done-tint: #e3f4ec; --done-ink: #1f7a55; /* addition: chip text on done-tint (4.6:1) */ --sched: #0e6e8e; /* has a date in a diary */ --sched-tint: #dceef4; --pm: #6b3f8c; /* property-management stage */ --pm-tint: #efe6f7; --hold: #9a6a10; /* parked on purpose — snoozed, awaiting access */ --hold-tint: #fdf3d6; --market-tint: #fbe3ef; /* marketing stage box, carried from lettings */ --accent: #e39a4a; /* active tab underline + the ONE forward action per page */ --gold: #b8860b; /* the selected scope pill only */ /* ── spacing ──────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* THE page gutter and the gap between lanes. Every screen. */ --space-8: 32px; --space-10: 40px; /* ── radius ───────────────────────────────────────────────────────── */ --radius-xs: 6px; /* chips, pills, small buttons */ --radius-sm: 8px; /* inputs, stage boxes, table containers */ --radius-md: 12px; /* cards, panels */ --radius-lg: 16px; /* lanes, board container, selection tray */ --radius-pill: 999px; /* ── shadow ───────────────────────────────────────────────────────── */ --shadow-card: 0 1px 2px rgba(43, 42, 51, 0.06); --shadow-raised: 0 6px 16px rgba(43, 42, 51, 0.10); /* a card while dragged, a drawer */ --shadow-tray: 0 -6px 20px rgba(43, 42, 51, 0.12); /* selection tray, bottom nav */ /* ── fixed sizes — this is what keeps rows lined up ───────────────── */ --row-sm: 40px; /* dense table row, 20+ rows on screen */ --row-md: 48px; /* default */ --row-lg: 56px; /* comfortable, or two lines of text */ --chip-h: 22px; /* EVERY chip and pill. One height, no exceptions. */ --control-h: 36px; /* buttons, inputs, selects */ --lane-w: 300px; /* one board lane. Lanes do not flex. */ --tile-h: 92px; /* a stat tile */ --rail-h: 64px; /* snooze rail, selection tray */ --nav-h: 56px; /* bottom nav */ /* ── type ─────────────────────────────────────────────────────────── */ /* NOTE: these are the closest widely-available matches taken from screenshots. If the Hub's stylesheet names the real licensed faces, swap them here only. */ --font-sans: Outfit, Poppins, system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif; } /* Type styles. Use the class, don't re-declare sizes at call sites. */ .page-title { font-family: var(--font-sans); font-size: 34px; line-height: 40px; font-weight: 700; } .lane-title { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 700; } .section-title { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 700; } .stat { font-family: var(--font-sans); font-size: 44px; line-height: 48px; font-weight: 700; } .card-title { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 700; } .body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; } .body-strong { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; } .meta { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; } .chip-text { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; } .label { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .nav-text { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; } .brief-headline{ font-family: var(--font-serif); font-size: 40px; line-height: 44px; font-weight: 700; } .prose { font-family: var(--font-serif); font-size: 16px; line-height: 26px; font-weight: 400; } /* Fonts load from Google. Add to : */ /* ── KNOWN CONTRAST FAILURES in the shipped palette ─────────────────── These are measured, not guessed. Fix them when you next touch the CSS. white on --waiting 2.5:1 FAILS at every size — the amber lane header and the amber date pill. Put --ink on amber instead (5.6:1); the screens look near-identical. white on --gold 3.3:1 the selected scope pill at 14px. Needs 4.5:1. white on --done 3.1:1 fine for a 22px bold lane header, NOT for chip text. --ink-muted on page 4.0:1 keep at 15px+; use --ink-muted-strong below that. --chase on tint 3.3:1 use --chase-ink for chip labels. --done on tint 2.7:1 use --done-ink for chip labels. ─────────────────────────────────────────────────────────────────────── */