/* Typography tokens. Replaces the legacy Proxima Nova family (was licensed/ hosted at fonts.stackcommerce.com) with a deliberate pairing chosen against the brand brief (trustworthy/precise/calm; "load-bearing, not flashy"): Archivo for UI/body -- a grotesk with sturdy, slightly squared proportions that reads as considered rather than a default system font -- and Fragment Mono reserved for key figures and page-level headings (money amounts, order/ID numbers, display-size titles), never body copy or table cells, so its mechanical rhythm reinforces "this number is load-bearing" instead of reading as generic "technical/developer" shorthand. Both self-host via Google Fonts, loaded from every page's . */ :root { /* Archivo is a single variable family -- weight comes from --font-weight-* paired alongside every --font-family-medium/-bold usage, not from a separate family name per weight (unlike the old Proxima Nova Bold/ SemiBold, which were distinct installed font files). */ --font-family-base: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-medium: var(--font-family-base); --font-family-bold: var(--font-family-base); --font-weight-medium: 500; --font-weight-bold: 700; --font-family-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale: purpose-named, not size-named, so usage stays consistent. Deliberately dense at the bottom (caption/body-sm/body) -- this is an internal admin tool used for hours at a time; the design principles prioritize table/list density over the generic 16px body-text floor. Hierarchy gets its real contrast at the top of the scale, where it matters most (page titles vs. panel headers vs. key metrics). */ --font-size-caption: 0.75rem; /* 12px - table meta, timestamps, helper text */ --font-size-body-sm: 0.8125rem; /* 13px - dense table cells */ --font-size-body: 0.875rem; /* 14px - default body/table text */ --font-size-body-lg: 1rem; /* 16px - form labels, emphasized body */ --font-size-heading-sm: 1.1875rem; /* 19px - card/section titles */ --font-size-heading-md: 1.5rem; /* 24px - panel headers */ --font-size-heading-lg: 1.875rem; /* 30px - page titles */ --font-size-display: 2.5rem; /* 40px - flow step headers, key figures */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; /* uppercase labels, badges */ }