:root { /* Light theme, matched to the borrower-facing checkout page so the two read as one product. Every pair below is WCAG-AA-verified (4.5:1 for text, 3:1 for interactive-element borders) against the surface it is actually used on; the check lives in the commit that set them. */ --ink: #ffffff; /* topbar */ --bg: #f4f6f8; /* page background, 13.9:1 with --text */ --panel: #ffffff; /* cards, table, modals */ --border: #e2e6ea; /* decorative dividers - intentionally subtle */ --border-strong: #78828f; /* input/interactive boundaries, 3:1+ on bg and panel */ --hover: #eef1f5; /* row / nav hover surface */ --raised: #e6eaef; /* chips, bars, code - one step up from panel */ --text: #1c2430; /* primary text */ --subtle: #5b6470; /* secondary text, 5.9:1 on panel */ --accent: #3564c7; /* primary button fill - white text is 5.5:1 on this */ --accent-hover: #2a53ad; --accent-text: #2452b3; /* accent used as foreground text/links, 7.0:1 on panel */ --overlay: rgba(20, 28, 40, 0.45); --shadow: 0 18px 48px rgba(20, 28, 40, 0.18); /* Status colours: dark text on a light tint of the same hue. */ --green: #166534; --green-bg: #dcfce7; --green-border: #86efac; --amber: #92400e; --amber-bg: #fef3c7; --blue: #1e40af; --blue-bg: #dbeafe; --red: #991b1b; --red-bg: #fee2e2; --red-border: #fca5a5; --teal: #115e59; --teal-bg: #ccfbf1; /* Community/segment palette (8 slots, cycled by community % 8). Single source of truth for both the .segment-badge.cN rules below and the network canvas + legend in dashboard/app.js (read via getComputedStyle), so the two never drift out of sync. The --cN value doubles as the node fill on the canvas, which is why these are the dark end of each hue. */ --c0: #1e40af; --c0-bg: #dbeafe; --c1: #115e59; --c1-bg: #ccfbf1; --c2: #92400e; --c2-bg: #fef3c7; --c3: #991b1b; --c3-bg: #fee2e2; --c4: #6b21a8; --c4-bg: #f3e8ff; --c5: #166534; --c5-bg: #dcfce7; --c6: #854d0e; --c6-bg: #fef9c3; --c7: #155e75; --c7-bg: #cffafe; /* Type scale - 9 sizes, each with one job, replacing what used to be 12 scattered hardcoded values with no consistent logic. */ --fs-2xs: 11px; /* tertiary meta: timestamps, tool names */ --fs-xs: 12px; /* labels, badges, table headers */ --fs-sm: 13px; /* default body/secondary text */ --fs-base: 14px; /* content that wants slight emphasis over body */ --fs-md: 15px; /* emphasized body, submit buttons */ --fs-lg: 18px; /* card/modal headings */ --fs-xl: 20px; /* view-level headings */ --fs-2xl: 24px; /* page-level headings, stat values */ --fs-display: 36px; /* the one hero number (checkout amount) */ /* Control metrics. The type scale above gave font sizes one job each; the gaps between buttons never got the same treatment, so the four places buttons sit side by side had drifted to three different values (a 6px margin hack, 8px and 10px) plus a stray 4px margin on the delete icon. One gap token, and one height token so a cluster's buttons are the same box whatever tier they are. */ --gap-actions: 8px; /* between sibling controls, everywhere */ --control-h: 30px; /* standard button height */ --control-h-sm: 26px; /* the compact in-table variant */ } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; background: var(--bg); color: var(--text); } .topbar { display: flex; align-items: center; justify-content: space-between; background: var(--ink); color: var(--text); border-bottom: 1px solid var(--border); padding: 14px 24px; } .brand { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.02em; } .clock { display: flex; align-items: center; gap: var(--gap-actions); font-size: var(--fs-sm); } .clock-label { color: var(--subtle); } #clockValue { font-variant-numeric: tabular-nums; font-weight: 600; } /* ---- Buttons: three tiers, consistent everywhere ---------------------- Primary (bare