/* ═══════════════════════════════════════════════════════════ DESIGN TOKENS — "Ledger": a compact, calm, light operations console. Semantic names only: use --text-2, --line, --warn…, never a raw hex in a component or a view. The accent is per dealer (Dealer:AccentColor): the layouts write --accent / --accent-hover / --accent-tint / --accent-ring onto , which overrides the defaults here. Below 900px (phones, portrait tablets) the size tokens switch to touch values: 15px text, 44px controls. See the @media block at the end. ═══════════════════════════════════════════════════════════ */ :root { /* ── Accent (per dealer; defaults = the design boards' teal) ── */ --accent: #0F5E5B; --accent-hover: #0B4744; /* accent mixed 25% towards black */ --accent-tint: #DCE6E3; /* accent mixed 86% towards --surface: active nav, selected row */ --accent-ring: #C9D9D6; /* accent mixed 78% towards --surface: focused input halo */ --on-accent: #FFFFFF; /* text and icons on an accent fill */ /* ── Surfaces ── */ --bg: #F7F5EF; /* page, top bar, filter bars, pager */ --bg-sidebar: #EFECE4; /* sidebar, login aside, segmented-control track */ --surface: #FDFCF9; /* panels, inputs, table body, pane */ --surface-sunken: #F1EEE7; /* table header, list section bands */ --surface-column: #F1EEE6; /* kanban column */ --surface-chip: #F3F0E8; /* neutral chip, note box */ --surface-hover: #F6F3EC; /* row / nav hover */ --surface-avatar: #DDD7CA; /* initials avatar */ --surface-avatar-light: #E6E1D6; /* 17px advisor initials on a pipeline card */ --surface-kbd: #F7F5EF; --scrim: rgba(27, 26, 23, .42); /* ── Lines (hairlines instead of shadows) ── */ --line: #E2DDD2; /* panel borders, section dividers */ --line-strong: #CFC8BA; /* table header underline, pager top, pane edge */ --line-row: #EAE6DD; /* table row divider */ --line-control: #948C7D; /* input / select / secondary button border (3:1) */ --line-chip: #DDD7CB; /* neutral chip border */ --line-timeline: #D9D3C6; /* ── Text ── */ --text: #1B1A17; /* primary */ --text-2: #4A463E; /* secondary: labels, meta, table secondary cells */ --text-3: #686359; /* tertiary: captions, column headers (4.5:1 on --bg-sidebar) */ --text-placeholder: #6E695F; --text-disabled: #8A8478; /* disabled controls only (exempt from contrast) */ /* ── Feedback ── */ --warn: #9A4509; /* low stock, defect, an invalid field (border and message) */ --warn-bg: #F5E6D6; --warn-line: #E7C9AE; --warn-text: #7A3707; /* text on --warn-bg */ --danger: #A3241B; /* destructive actions, a failure (not a field to fix) */ --danger-hover: #7F1C15; --danger-bg: #F8E6E3; --danger-line: #EBC4BD; --danger-text: #8A1F17; --ok: #2F6B3A; --ok-bg: #E4EFE4; --ok-line: #BFD8C1; --ok-text: #265730; --info: #1F4C8F; --info-bg: #E4E9F6; --info-line: #C4CFE6; --info-text: #1F3F73; /* ── Order status (dots: Available is a ring, the rest are filled) ── */ --os-available: #8A8478; --os-cash: #1F4C8F; --os-loan: #6B8FC9; --os-ready: #C2600F; --os-sold: #2F6B3A; /* ── Category (chart fills; tag background / text) ── */ --cat-new: #2A78D6; --cat-preowned: #4A3AA7; --cat-new-bg: #E3EDF9; --cat-new-fg: #1E568F; --cat-preowned-bg: #EAE7F6; --cat-preowned-fg: #43359A; /* ── Brand tags (background / text), from the dashboard board ── */ --brand-yamaha-bg: #E4E9F6; --brand-yamaha-fg: #273C73; --brand-honda-bg: #F6E3E5; --brand-honda-fg: #7F1F2E; --brand-suzuki-bg: #E1EDF5; --brand-suzuki-fg: #1D4C70; --brand-modenas-bg: #EAE5F6; --brand-modenas-fg: #463585; --brand-benelli-bg: #E2EFEA; --brand-benelli-fg: #1D5641; --brand-ktm-bg: #FAE7D8; --brand-ktm-fg: #823B09; --brand-wmoto-bg: #E6ECF1; --brand-wmoto-fg: #33475B; --brand-kove-bg: #F2EADB; --brand-kove-fg: #654510; --brand-sym-bg: #E5EFE3; --brand-sym-fg: #2D5A2B; --brand-cfmoto-bg: #DFEEF0; --brand-cfmoto-fg: #1B535D; --brand-aveta-bg: #F1E4F0; --brand-aveta-fg: #682D66; --brand-kawasaki-bg: #E3EEDD; --brand-kawasaki-fg: #2F5A1E; --brand-zontes-bg: #ECE4F1; --brand-zontes-fg: #573A6E; --brand-other-bg: #ECE8DF; --brand-other-fg: #4A463E; /* ── Type ── */ --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; --text-2xs: 10.5px; /* brand tags */ --text-xs: 11px; /* column headers, group labels, badges */ --text-sm: 12px; /* captions, meta, labels */ --text-base: 13px; /* body */ --leading-base: 18px; --text-title: 15px; /* top-bar page title */ --text-heading: 13px; /* panel headings */ --text-pane-title: 20px; --text-kpi: 26px; /* KPI numerals */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --tracking-caps: .05em; /* uppercase labels */ /* ── Size ── */ --sidebar-w: 200px; --topbar-h: 48px; --control-h: 30px; /* inputs, selects, buttons */ --control-h-sm: 24px; /* segmented-control items, small buttons */ --control-h-lg: 36px; /* sign-in form */ --row-h: 36px; /* table rows */ --row-h-head: 32px; /* table header row */ --panel-head-h: 36px; --pane-w: 480px; /* split-pane detail column */ --tabbar-h: 64px; /* phone bottom tab bar */ --touch: 44px; /* minimum touch target below 900px */ --icon: 16px; /* ── Space ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --page-pad-x: 24px; --page-pad-y: 20px; /* ── Radii (4–6px) ── */ --radius-xs: 3px; /* tags, kbd, chips */ --radius-sm: 4px; /* controls, cards in a column */ --radius-md: 5px; /* segmented track */ --radius-lg: 6px; /* panels */ --radius-pill: 999px; /* ── Focus & elevation ── */ --focus-ring: 2px solid var(--accent); --focus-offset: 2px; --shadow-overlay: 0 12px 32px rgba(27, 26, 23, .16), 0 2px 6px rgba(27, 26, 23, .08); /* modals, sheets, toast only */ --ease: cubic-bezier(.2, 0, 0, 1); --duration: .18s; } /* Phones and portrait tablets: touch sizes and larger text. */ @media (max-width: 899.98px) { :root { --text-sm: 13px; --text-base: 15px; --leading-base: 20px; --text-title: 17px; --control-h: var(--touch); --control-h-sm: 34px; --control-h-lg: 48px; --row-h: 44px; --page-pad-x: 16px; --page-pad-y: 16px; } } /* ═══════════════════════════════════════════════════════════ LEGACY ALIASES — DEPRECATED. The prototype's token names, mapped onto the Ledger palette so the screens that still carry the old markup (inline style="var(--t1)", Display.ActivityDotColor, the toast dot set by app.js) render in the new colours. Do not use them in new code; each screen drops them as it is rewritten. --grn / --red / --amb stay: Ec.toast writes them on the toast dot and the E2E Toast page object reads them back. ═══════════════════════════════════════════════════════════ */ :root { --w: var(--surface); --f0: var(--bg); --f1: var(--surface-sunken); --f2: var(--line); --f3: var(--line-strong); --b1: var(--line); --b2: var(--line-strong); --t1: var(--text); --t2: var(--text-2); --t3: var(--text-3); --t4: var(--text-disabled); --red: var(--danger); --redd: var(--danger-hover); --rbg: var(--danger-bg); --rb2: var(--danger-bg); --rbd: var(--danger-line); --blk: var(--text); --grn: var(--ok); --gbg: var(--ok-bg); --gbd: var(--ok-line); --amb: var(--warn); --abg: var(--warn-bg); --abd: var(--warn-line); --blu: var(--info); --bbg: var(--info-bg); --bbd: var(--info-line); --pur: var(--cat-preowned); --pbg: #ECE9F6; --pbd: #CFC8EA; --r6: var(--radius-sm); --r8: var(--radius-sm); --r10: var(--radius-lg); --r12: var(--radius-lg); --r16: var(--radius-lg); --r20: var(--radius-lg); --sh1: none; --sh2: none; --sh3: var(--shadow-overlay); }