/* TokenFusion design tokens — the ONE place the owner's Figma design system lives (DESIGN_SPEC 2026-09-26, read from the sheet's JSON block). Every other stylesheet refers to these custom properties; none of them writes a colour, a face, a radius or a size of the scale by value. viz.py reads the --tf-series-* values below at import, so the chart colours the server hands to a page are these same values, and flipping --tf-accent-secondary flips the charts too. Fonts are VENDORED (static/fonts, woff2, latin subset, SIL Open Font Licence, from @fontsource 5): no font CDN at runtime. Only the weights the scale uses are shipped — add a weight here AND its file in the same commit, or the browser synthesises a fake bold. Poppins 500/600/700 headings, nav, buttons, KPI labels Roboto 400/500/700 body text, tables, figures IBM Plex Mono 400/500/600 tabular ids, times, code (the frames' mono) Outfit 600 the wordmark only (the brand kit's face) */ @font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap; src:url("fonts/poppins-latin-500.woff2") format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap; src:url("fonts/poppins-latin-600.woff2") format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap; src:url("fonts/poppins-latin-700.woff2") format("woff2")} @font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/roboto-latin-400.woff2") format("woff2")} @font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap; src:url("fonts/roboto-latin-500.woff2") format("woff2")} @font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap; src:url("fonts/roboto-latin-700.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap; src:url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap; src:url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2")} @font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap; src:url("fonts/outfit-latin-600.woff2") format("woff2")} :root{ /* ---- colour ---------------------------------------------------------- */ --tf-primary:#2F6BFF; /* The sheet prints "#1055E8" beside an rgb of 29,85,232: the rgb is the colour, the hex a typo of it. */ --tf-primary-hover:#1D55E8; --tf-primary-subtle:#EEF4FF; --tf-primary-subtle-alt:#F1F3FF; /* Text ON --tf-primary-subtle: #2F6BFF there is 4.07:1, under the 4.5:1 body-text floor, so link-coloured text on a tinted surface uses the hover blue (5.41:1). On white, --tf-primary itself is 4.5:1. */ --tf-primary-ink:#1D55E8; --tf-success:#10B981; /* dots, bars — never text (2.5:1) */ --tf-success-pill:#ECFDF5; --tf-success-text:#065F46; /* The sheet has no danger or warning colour; these carry the portal's existing semantic reds and ambers unchanged. */ --tf-danger:#C0392B; --tf-danger-pill:#FDECEA; --tf-danger-text:#8C1E18; --tf-warning-pill:#FFF8E6; --tf-warning-line:#F0DFB0; --tf-warning-text:#7A5A12; /* SECONDARY ACCENT. The swatch says grey #ACACAC ("telemetry charts, secondary progress markers, model distribution graphs"); the JSON says cyan #0EA5E9. The frames' charts are grey, so grey it is — change this one value to flip every chart. */ --tf-accent-secondary:#ACACAC; --tf-divider:#E2E8F0; --tf-divider-alt:#E5E7EB; --tf-divider-soft:#EEF2F7; /* derived: row rules inside a card */ --tf-canvas:#F9F9FF; --tf-panel:#FFFFFF; --tf-card-highlight:#F4F6FF; --tf-code-bg:#0F172A; /* the frames' quickstart terminal */ --tf-text-heading:#0F172A; --tf-text-body:#334155; --tf-text-muted:#64748B; /* 4.76:1 on white, 4.54:1 on canvas */ --tf-text-disabled:#94A3B8; /* 2.56:1: decoration and disabled only */ /* Chart series, in catalogue order (viz.py reads these). 1-3 are the frames' blue / ink / grey; the rest extend the same register. */ --tf-series-1:#2F6BFF; --tf-series-2:#1E293B; --tf-series-3:var(--tf-accent-secondary); --tf-series-4:#93B4FF; --tf-series-5:#64748B; --tf-series-6:#0EA5E9; --tf-series-7:#F59E0B; --tf-series-8:#10B981; --tf-series-other:#D5DAE3; /* ---- type -------------------------------------------------------------- */ --tf-font-head:"Poppins",ui-sans-serif,-apple-system,"Segoe UI",sans-serif; --tf-font-body:"Roboto",ui-sans-serif,-apple-system,"Segoe UI",sans-serif; --tf-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --tf-font-brand:"Outfit",var(--tf-font-head); /* size/line-height/weight per role (the sheet's scale). */ --tf-fs-metric:30px; --tf-lh-metric:36px; --tf-fw-metric:700; /* PAGE TITLES — the frames win over the sheet on dimensions (owner, 2026-09-26), measured from the 2880px exports (cap height / Poppins' 0.7 cap ratio), one size per KIND of screen: greeting the dashboard's "Hello, Salman." frame 01: 24px page a working page ("Models.") frame 06: 30px — also every page the frames do not draw (keys, teams, admin…) hero a ledger/billing page ("Usage & Metering", "Add funds to your balance.") frames 07, 08: 40px */ --tf-fs-title-greeting:24px; --tf-lh-title-greeting:32px; --tf-fs-title:30px; --tf-lh-title:38px; --tf-fs-title-hero:40px; --tf-lh-title-hero:48px; --tf-fs-h1:24px; --tf-lh-h1:32px; --tf-fw-h1:600; --tf-fs-h2:18px; --tf-lh-h2:26px; --tf-fw-h2:600; --tf-fs-h3:15px; --tf-lh-h3:22px; --tf-fw-h3:500; --tf-fs-body:14px; --tf-lh-body:20px; --tf-fs-small:12px; --tf-lh-small:16px; --tf-fs-overline:11px; --tf-ls-overline:.06em; --tf-fw-overline:600; --tf-fs-nav:14px; --tf-lh-nav:20px; --tf-fw-nav:500; /* ---- metrics ----------------------------------------------------------- */ --tf-radius-sm:4px; --tf-radius-md:6px; --tf-radius-lg:8px; /* buttons, inputs */ --tf-radius-xl:12px; /* cards */ --tf-radius-full:9999px; /* pills */ /* The frames' sidebar is 288px and its rail 80px (the sheet said 240/72; the frames win on dimensions — owner, 2026-09-26). */ --tf-sidebar:288px; --tf-rail:80px; --tf-nav-pad:10px 12px; --tf-icon-btn:36px; --tf-btn-pad:10px 16px; --tf-gutter:32px; /* page side padding at desktop */ --tf-focus:0 0 0 3px rgba(47,107,255,.28); --tf-shadow-card:0 1px 2px rgba(15,23,42,.04); --tf-shadow-pop:0 12px 32px rgba(15,23,42,.18); }