/* ========================================================================== Bullet design tokens SOURCE OF TRUTH: the 3 master element frames on the "JOHN REVIEW" page: - Tax Design System (node 3462:17493) - Reconciliation Design System (node 3107:42141) - Payroll Design System (node 3143:10863) Extracted via Figma MCP variable definitions and merged. Do not hand-edit values here — re-extract from Figma if the design changes. FLAGGED — still missing in Figma: - hover states for any colour (brand hover is a provisional gut pick) - type sizes above 24 (headings xl/2xl) - footnote style uses SF Pro in Figma — not web-licensable; needs a substitute decision (system-ui stack?) before use - display font, product mono for amounts (Roboto Mono in the file is annotation chrome, not product) ========================================================================== */ :root { /* --- Colour: neutrals ------------------------------------------------- Figma: "FFF9FA - app-bg-pink", "FFFFFF - bg white", "ECECEC - border - pimary" (sic), "ABACAE - border - on position", "2C2C2C - text-primary", "757575 - text-secondary" */ --color-bg: #fff9fa; --color-bg-translucent: #fff9fa80; /* app-bg-pink 50% */ --color-bg-pink-light: #fffcfd; /* bg pink light - category selection */ --color-border-pink: #F7CED3; /* light-pink pill/dashed border (mobile PILL_BORDER) */ --color-bg-subtle: #f5f5f5; /* subtle-bg - on position */ --color-bg-subtle-light: #f9f9f9; /* subtle-bg - on position lighter */ --color-surface: #ffffff; --color-border: #ececec; --color-border-strong: #abacae; --color-text: #2c2c2c; /* also the solid-button bg in Figma */ --color-text-muted: #757575; /* --- Colour: brand ----------------------------------------------------- PROVISIONAL (Peter: "go with your gut", 11 Jun 2026 — change anytime): brand primary = the dark every solid CTA in the design already uses; hover freezes the derived value components were already computing. */ --color-brand-primary: #2c2c2c; --color-brand-primary-hover: #454545; /* --- Colour: semantic -------------------------------------------------- Figma: "1DA51D - success", "F2994A - active", "D64545 - warning card" */ --color-success: #1da51d; --color-active: #f2994a; /* HIGHLIGHTER (Peter, 8 Jul, GLOBAL): a 1px YELLOW BORDER/ring — NO fill. The marketing-footer yellow. Every highlight — selection (connect-three-views) AND transient just-added fades — is this ring; fills washed out (pink too subtle, turquoise too grey, tints too flat). */ --color-hilite: #fff8d6; /* light companion tint — use sparingly, never as the highlight itself */ --color-hilite-strong: #ffe135; --color-danger: #d64545; --color-danger-bg: #d6454508; /* D64545 3% - bg-warning-card */ --color-danger-border: #d6454533; /* D64545 20% - line-warning-card */ --color-important-bg: #f2994a08; /* F2994A 3% - bg-important-card */ --color-important-text: #fe3d1633; /* FE3D16 20% - text-important-card */ /* info: PROVISIONAL gut pick (11 Jun 2026) — calm accessible blue, tinted 3%/20% to mirror the danger/important card pattern */ --color-info: #2f6fad; --color-info-bg: #2f6fad08; --color-info-border: #2f6fad33; /* --- Typography -------------------------------------------------------- Figma: "Body Base" = Inter Regular 16 / line-height 1.4; heading-size-base = 24 */ --font-body: "Inter", system-ui, -apple-system, sans-serif; --text-xs: 0.8125rem; /* 13px - "Footnote" (SF Pro in Figma — font flagged above) */ --text-sm: 0.875rem; /* 14px - body-size-small */ --text-base: 1rem; /* 16px - body-size-medium */ --text-heading: 1.5rem; /* 24px - heading-size-base */ --text-section: 1.25rem; /* 20px - section titles (node 3462:17884) */ --text-title: 1.8125rem; /* 29px - panel title (node 3462:17550) */ --leading-body: 1.4; --leading-footnote: 1.385; /* 18/13 from "Footnote" style */ --weight-regular: 400; --weight-medium: 500; /* Inter:Medium on input labels (node 3462:17646) */ --weight-bold: 700; /* --font-display, --font-mono, --text-lg/xl/2xl: MISSING IN FIGMA */ /* --- Spacing scale ------------------------------------------------------ Figma: sds-size-space-100..400 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; /* measured: row stacks, section gaps, panel padding */ --space-8: 32px; /* measured: content stacks, section spacing */ /* --- Drawer spacing — GLOBAL "space + calm" rhythm for all right-docked drawers (Peter, 24 Jun 2026; ref: Figma "Bank / settings / edit" 3574:67059, pushed bolder). Every drawer (filter-panel, bank detail, edit-tags, receipts, future ones) uses these. */ --drawer-pad: 32px; /* drawer top + side padding */ --drawer-pad-bottom: 48px; /* roomy bottom */ --drawer-section-gap: 24px; /* between major sections */ --drawer-row-pad: 18px; /* card/row internal padding */ --drawer-row-gap: 14px; /* between stacked cards/rows */ /* --- Radii -------------------------------------------------------------- Figma: sds-size-radius-200 / 400 / full */ --radius-sm: 4px; /* sds-size-radius-100 (Payroll DS) */ --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; /* --- Shadows ------------------------------------------------------------ Figma: "Drop Shadow/300" — two stacked layers, black-100 = #0c0c0d at 5%, black-200 = #0c0c0d at 10%, offset (0, 4), blur 4, spread -1 */ --shadow-md: 0 4px 4px -1px #0c0c0d0d, 0 4px 4px -1px #0c0c0d1a; --shadow-panel: 0 4px 10px #0000000d; /* filter panel (node 3462:17547) */ --shadow-sm: 0 1px 3px #0c0c0d14; /* PROVISIONAL gut pick (11 Jun 2026) */ --shadow-drawer: -8px 0 24px #0c0c0d0d; /* right-docked drawers — very light, Apple-like (~5% alpha) */ --shadow-dropdown: 0 2px 31px rgba(0, 0, 0, 0.055); /* GLOBAL borderless card/menu shadow — even all around, soft + wide (Peter, 23 Jun 2026; lightened 50%). */ /* --- Borders ------------------------------------------------------------ Figma: sds-size-stroke-border */ --border-width: 1px; }