/* ========================================================================== tokens.css — DIMENSIONAL tokens only. Sizes, spacing, typography, radii, motion and z-index. These are identical in both themes, so no colour value may appear in this file — every colour lives in themes.css under [data-theme="light"] / [data-theme="dark"]. Naming convention: --tn-- ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. SPACING SCALE --------------------------------------------------------------------- */ --tn-sp-0: 0; --tn-sp-1: 2px; --tn-sp-2: 4px; --tn-sp-3: 6px; --tn-sp-4: 8px; --tn-sp-5: 12px; --tn-sp-6: 16px; --tn-sp-7: 20px; --tn-sp-8: 24px; --tn-sp-9: 32px; --tn-sp-10: 40px; /* Layout rhythm — retuned per breakpoint in responsive.css */ --tn-gap-panel: 10px; /* gap between workspace panels */ --tn-pad-workspace: 12px; /* workspace outer padding */ --tn-pad-panel: 14px; /* panel body padding when padded */ --tn-pad-inline: 16px; /* horizontal padding of bars / headers */ /* --------------------------------------------------------------------- 2. TYPOGRAPHY --------------------------------------------------------------------- */ /* IBM Plex Sans, vendored under vendor/ibm-plex-sans (OFL 1.1). The fallbacks are ordered by how little they move the layout if the font never arrives, not by preference: Segoe UI was the previous UI face and is metrically closest on the Windows desktops this runs on, so a failed load lands on what the prototype looked like yesterday rather than on Arial. system-ui sits first for the non-Windows case. */ --tn-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tn-font-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace; /* The whole scale was raised one step for readability during long shifts. Density is preserved by growing control metrics only where the taller text actually needs it — see section 4 — and by holding row height at 32px on short viewports (responsive.css). */ --tn-fs-xxs: 11px; /* eyebrow labels, badges */ --tn-fs-xs: 12px; /* field labels, captions */ --tn-fs-sm: 13px; /* secondary text, panel subtitles */ --tn-fs-md: 14px; /* dense grid text */ --tn-fs-base: 15px; /* application base */ --tn-fs-lg: 16px; --tn-fs-xl: 18px; --tn-fs-title: 23px; /* page title */ --tn-lh-tight: 1.25; --tn-lh-base: 1.45; --tn-fw-regular: 400; --tn-fw-medium: 500; --tn-fw-semibold: 600; --tn-fw-bold: 700; --tn-tracking-caps: 0.06em; /* Global chrome (the top bar). Semantic aliases so the chrome can be tuned for readability without touching the application type scale or the grid density. */ --tn-fs-chrome-label: var(--tn-fs-xs); /* 12px - quiet labels */ --tn-fs-chrome-value: var(--tn-fs-md); /* 14px - values dominate */ --tn-fs-chrome-lead: var(--tn-fs-base); /* 15px - Market, search text */ /* The grid body owns its own step, off the main scale on purpose. IBM Plex Sans sets about 6% wider than the face it replaced, which at 14px cost one visible COLUMN in several dense grids — measured, not assumed. 13.5px puts the rendered width back where it was, and because Plex carries a larger x-height than Segoe UI at the same nominal size the text is no smaller to read. Row height is untouched either way. */ --tn-fs-grid: 13.5px; /* --------------------------------------------------------------------- 3. RADII --------------------------------------------------------------------- */ /* One consistent 6-8px family across controls and surfaces. sm is the control radius, md the surface radius, lg reserved for dialogs. */ --tn-radius-xs: 3px; --tn-radius-sm: 6px; --tn-radius-md: 8px; --tn-radius-lg: 12px; --tn-radius-pill: 999px; /* --------------------------------------------------------------------- 4. CONTROL & LAYOUT METRICS --------------------------------------------------------------------- */ --tn-h-topbar: 60px; /* raised with the type scale */ --tn-h-command: 36px; /* toolbar buttons */ --tn-h-input: 40px; /* filter + form controls */ /* Data entry at dialog density. The same 36px a toolbar button is, and for a while it WAS the button token — but a field in a forty-field dialog and a button in a toolbar are two decisions that happen to agree today, not one decision. Named so they can stop agreeing. */ --tn-h-input-dense: 36px; /* dialog fields, compact bar controls */ --tn-h-tabs: 44px; /* section tab strip */ --tn-h-row: 34px; /* grid row */ --tn-h-row-compact: 28px; --tn-h-row-relaxed: 42px; --tn-h-grid-head: 36px; --tn-h-panel-head: 44px; --tn-h-panel-foot: 30px; /* Top bar branding. Both marks sit well inside the 60px bar, and each box matches its own asset's aspect ratio (200x52 and 200x80) so background-size:contain leaves no dead space beside the mark. The customer mark is set slightly smaller so the two read as balanced. */ --tn-w-logo-tournate: 96px; --tn-h-logo-tournate: 25px; --tn-w-logo-customer: 60px; --tn-h-logo-customer: 24px; --tn-h-context: 40px; /* topbar Market / theme controls */ --tn-h-selection-bar: 46px; /* transfer-list selection toolbar */ --tn-h-context-bar: 52px; /* page-level context selectors */ --tn-h-touch: 44px; /* minimum comfortable touch target */ --tn-w-sidebar: 248px; --tn-w-sidebar-collapsed: 64px; --tn-w-menu: 228px; --tn-w-drawer: 340px; --tn-w-modal: 920px; /* Master / detail proportions (desktop) */ --tn-split-master: 46; --tn-split-detail: 54; --tn-split-left: 46; --tn-split-right: 54; /* --------------------------------------------------------------------- 5. MOTION --------------------------------------------------------------------- */ /* Loading geometry. The spinner had one hard-coded 22px and one hard-coded 0.7s inside its rule; both are named here now so a second size cannot be invented by typing a different number. */ --tn-spin-sm: 14px; /* inline, beside a line of text */ --tn-spin-md: 22px; /* the default: a state block, a button */ --tn-spin-lg: 32px; /* a whole panel or page is waiting */ --tn-spin-dur: 0.7s; --tn-shimmer-dur: 1.3s; --tn-progress-h: 6px; /* the bar */ --tn-progress-h-lg: 10px; /* a file operation, where it is the subject */ --tn-skeleton-h: 14px; /* one skeleton line */ --tn-skeleton-h-sm: 10px; /* a caption under one */ --tn-skeleton-h-title: 20px; /* a heading */ --tn-dur-fast: 120ms; --tn-dur-base: 180ms; --tn-dur-slow: 260ms; /* Charts need longer than UI feedback: a value settling into place is a different act from a button acknowledging a press. Two steps, not four hand-picked numbers — one for anything that fades, grows or slides into position, one for a line tracing itself out, which has further to go. */ --tn-dur-chart: 560ms; --tn-dur-chart-draw: 900ms; --tn-ease: cubic-bezier(0.4, 0.0, 0.2, 1); /* --------------------------------------------------------------------- 6. Z-INDEX SCALE --------------------------------------------------------------------- */ /* Scrollbars. A grid is the one surface people GRAB the bar of — a wide table is scrolled sideways by dragging it — so it gets one step more than the menus and drawers, which are only ever wheeled. */ --tn-scrollbar: 11px; --tn-scrollbar-grid: 14px; --tn-z-sticky: 10; --tn-z-topbar: 30; --tn-z-scrim: 35; --tn-z-sidebar: 40; --tn-z-drawer: 60; --tn-z-menu: 70; /* The page tour sits above the whole application chrome and below the dialog stack. It never has to compete with a dialog, because a tour will not start while one is open and stops if one opens — see js/tour.js. Above the menus so an accidentally open popover cannot float over the spotlight. */ --tn-z-tour: 75; --tn-z-modal: 80; --tn-z-toast: 90; }