/* ========================================================================== Design System v2.1 β€” NON-COLOUR PRIMITIVES Type, radius, control sizing. -------------------------------------------------------------------------- Source: Figma "Software" (dkeA87APVZ88xI0Fm9Acsp) β†’ "πŸ“– Guidelines" (node 945:8483 / frame 946:8554), sections 5 (Typography) and 6 (Spacing & dimensions). Values are quoted from the spec tables, not inferred β€” anything inferred is marked INFERRED. The Guidelines open by saying they are "a plain-language summary of the fundamentals… not the full spec. For any exact value β€” especially sizing, spacing, effects β€” Figma dev mode is always the source of truth." So treat this file as the defaults, and read dev mode when building a component. Everything below is the DESKTOP spec; mobile is still in progress and "steps down slightly at mobile breakpoint". Like tokens.css this is primitives only. Components consume the role tokens in semantic.css. ========================================================================== */ :root { /* ── User font-size preference ─────────────────────────────────────── The status-bar panel has an "AA" control, so type must be scalable at runtime. That is why every size below is rem, not the px the spec states: px cannot be scaled by a preference, and a px-typed UI also ignores a browser's own base-font setting. base.css applies this as `html { font-size: calc(100% * scale) }`. Using 100% rather than a fixed 16px is the accessible form β€” it multiplies whatever base size the user's browser is set to instead of overriding it. Spacing stays in px on purpose: text grows, layout doesn't balloon. The consequence is that controls must use min-height, never height, or scaled text will clip out of them. */ --ui-font-scale: 1; /* ── Type scale (Guidelines Β§5) ────────────────────────────────────── The spec gives size + weight per role. rem values are the spec's px at a 16px base and render identically at scale 1 β€” the px is kept in the comment so this stays checkable against the file. Line heights are NOT specified; those are INFERRED (1.2 display, 1.5 reading) and should be confirmed against the component designs. */ --type-h1-size: 2.25rem; /* 36px Β· Section heading */ --type-h1-weight: 700; /* Bold */ --type-h1-leading: 1.2; /* INFERRED */ --type-h2-size: 1.5rem; /* 24px Β· Subheading */ --type-h2-weight: 700; /* Bold */ --type-h2-leading: 1.25; /* INFERRED */ --type-heading-size: 1rem; /* 16px Β· "Heading copy" */ --type-heading-weight: 500; /* Medium */ --type-heading-leading: 1.4; /* INFERRED */ --type-body-size: 0.9375rem; /* 15px */ --type-body-weight: 500; /* Medium β€” note the spec's body is MEDIUM, not regular; don't "correct" it to 400 */ --type-body-leading: 1.5; /* INFERRED */ --type-caption-size: 0.75rem; /* 12px Β· form field instructions etc. */ --type-caption-weight: 500; /* Medium */ --type-caption-leading: 1.4; /* INFERRED */ --type-button-size: 0.9375rem; /* 15px */ --type-button-weight: 500; /* Medium */ /* Secondary nav is the one role that changes size by breakpoint: 15px mobile / 18px desktop, Semi Bold. The desktop value is applied in the media query at the bottom of this file. */ --type-nav2-size: 0.9375rem; /* 15px */ --type-nav2-weight: 600; /* Semi Bold */ /* ── Dashboard-shell roles ─────────────────────────────────────────── Sizes measured off the Homepage frames (798:407), which predate the Guidelines type table and don't appear in it. Kept as named roles rather than inline values so they're visible and challengeable. The greeting in particular is far larger than H1 β€” it's a display role, not a heading role. */ --type-greeting-size: 4rem; /* 64px Β· "Good morning, Jonathan" */ --type-greeting-weight: 700; --type-greeting-leading: 1.05; --type-greeting-sub-size: 1.75rem; /* 28px Β· the "12 orders" line */ --type-dock-label-size: 1.25rem; /* 20px Β· dock tile captions */ --type-dock-label-weight: 400; /* Regular in the design */ --type-status-size: 1.125rem; /* 18px Β· status bar */ --type-status-weight: 600; /* Semi Bold */ /* Typeface β€” "Roboto throughout" (Guidelines Β§5). The fallbacks matter: the portal does not currently load Roboto anywhere, so until the webfont is wired up every v2 surface would silently render in the system stack. Roboto IS the default UI face on Android, so the fallback chain is only exercised on desktop/iOS. TODO: self-host the Roboto subset rather than adding a Google Fonts . The audit's finding stands β€” first paint is already gated on CDN stylesheets (header.php:1016-1023) and a webfont request would extend that, so weights 400/500/600/700 as woff2 in assets/v2/fonts/. */ --font-family-base: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* ── Corner radius (Guidelines Β§6) ─────────────────────────────────── Quoted exactly. Note panels are LARGER than the cards inside them (24 vs 20) β€” nesting reads correctly only if that relationship holds. */ --radius-panel: 24px; /* outermost panels */ --radius-card: 20px; /* cards / sections within panels */ --radius-button: 12px; /* large & medium buttons */ --radius-button-sm: 8px; /* small buttons */ --radius-pill: 999px; /* tags, pills β€” spec says radius = half the height, which 999px achieves for any height */ /* ── Control heights (Guidelines Β§6, "Button heights") ─────────────── The spec states these as BUTTON heights, but they're the sizing ramp for every control (inputs, selects, chips) β€” keeping one ramp is what stops a select and its adjacent button disagreeing by 2px, which the current portal does in several places. Medium is the desktop default. Large is the 44px touch target and is "mobile only (currently)". */ --control-h-sm: 28px; --control-h-md: 36px; /* desktop default */ --control-h-lg: 44px; /* touch target β€” mobile only, currently */ /* ── Spacing scale (Guidelines Β§6) ─────────────────────────────────── Base principle, quoted: "all spacing and radius values follow an even-number scale β€” 4, 8, 12, 16, 20, 24, and so on. If a value ever looks like an odd number, it's likely a mistake." So: no 5px, no 15px, no 0.9rem. If a design needs a gap that isn't on this ramp, that's a question for the file, not a one-off value. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Stated component metrics (Guidelines Β§6) ──────────────────────── Given explicitly in the spec, so they live here rather than being re-derived per component. */ --button-pad-y: var(--space-2); /* 8px top & bottom */ --button-pad-x: var(--space-4); /* 16px left & right */ --button-gap: var(--space-2); /* 8px between buttons (primary default) */ --tag-height: var(--space-6); /* 24px, fully rounded β€” see --radius-pill */ } /* Secondary nav grows on desktop (Guidelines Β§5): 15px mobile, 18px desktop. "Desktop" is 1025px here so it agrees with the layout breakpoint in components.css β€” a tablet takes the mobile layout, so it should take the mobile nav size too. Two different desktop thresholds is how you end up with 18px nav text inside a mobile-sized control. */ @media (min-width: 1025px) { :root { --type-nav2-size: 1.125rem; } /* 18px */ } /* The greeting is the one place where the desktop size would dominate a smaller screen; the mobile frames draw it at roughly half. Three steps, matching the layout breakpoints in components.css β€” phone, tablet, desktop. Everything else follows the Guidelines' "steps down slightly at mobile" note, which isn't specified yet, so it is left alone rather than guessed at. */ /* Tablet β€” takes the mobile *layout* but not the mobile type size; there is plenty of width for a larger greeting at 768–1024. */ @media (max-width: 1024px) { :root { --type-greeting-size: 3rem; /* 48px */ --type-greeting-sub-size: 1.375rem; /* 22px */ --type-dock-label-size: 0.875rem; /* 14px */ } } /* Phone. The greeting is the hero on this screen and should read like it β€” in the mobile frame it fills roughly 62% of the width, where 34px was giving about 52%. 40px matches the frame's proportion. The sub-line stays small: the frame draws it in a 37px box over two lines, so ~15px, and the contrast between the two is the point. */ @media (max-width: 640px) { :root { --type-greeting-size: 2.5rem; /* 40px */ --type-greeting-sub-size: 0.9375rem; /* 15px */ --type-dock-label-size: 0.75rem; /* 12px */ } }