/* ══════════════════════════════════════════════════════════════════════ EntBox AI — design tokens (shared by the app, the admin console, docs and the legal pages). Values are the EIOS app's own palette, one for one with the --ei-* tokens in sam-barbs-eios board/css/tokens.css (lifted from the AgentBox dashboard's /box), so every Entbox surface is one material. COLOUR. One hue: Entbox blue. Surfaces are four elevation steps a few percent apart (frame darkest, canvas, raised, hover); on a dark ground depth is a lighter surface, not a shadow. Lines are low-alpha blue so edges are felt rather than drawn. The only other hues are the three STATUS colours, and they only ever mean state (ok / needs attention / failed), always next to a label. Nothing is colour-coded by category: similar objects are told apart by an icon and a name. INK. Every text tone clears WCAG AA on every surface it can sit on, including the raised one: 14.4 / 8.0 / 5.6 to 1. Blue is a mark colour, never body text. TYPE. DM Sans names, counts, labels, titles and controls; IBM Plex Sans is for anything read as a sentence. JetBrains Mono is banned from the brand (Matt, 2026-09-02): figures use DM Sans with tabular numerals, and --fterm (system fonts only) exists for genuine code/terminal output. ══════════════════════════════════════════════════════════════════════ */ /* DM Sans is self-hosted (static/fonts). It is the upstream build (googlefonts/dm-fonts @4412393, v4.004, OFL), subset to Google's latin ranges and weights 500-700, with its optical-size axis (9-40) kept. Google Fonts serves an older snapshot of the same version that has no tabular figures (no tnum feature, proportional digits), so tabular-nums did nothing on DM Sans. The vertical metrics are identical, so nothing moves. Plex still comes from Google (its digits are tabular by default). */ @font-face{font-family:'DM Sans';font-style:normal;font-weight:500 700;font-display:swap; src:url(/static/fonts/DMSans-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'DM Sans';font-style:normal;font-weight:500 700;font-display:swap; src:url(/static/fonts/DMSans-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root{ color-scheme:dark; /* brand blue */ --blue:#3446FF; /* fills, primary buttons, selected marks */ --blue-mid:#2735BF; /* pressed / hover on a blue fill */ --soft:#7B8FFF; /* marks on dark: links, focus, icons that lead */ --ice:#B9C4FF; /* the lightest step, for a second data series */ --on-accent:#FFFFFF; --accent-rgb:52,70,255; /* elevation: frame, canvas, raised, hover */ --l0:#0A0E27; /* frame: sidebar, top bar, rails, inputs (EIOS --ei-l0) */ --l1:#0E1333; /* canvas: the page (EIOS --ei-l1, the chat card) */ --l2:#131A42; /* raised: table headers, popovers, nodes */ --l3:#182052; /* hover on raised */ --l4:#1C2255; --border:#242B5A; /* solid tracks (bar backgrounds) */ --border2:#3B4590; /* ink: 14.4 / 8.0 / 5.6 to 1 on the raised surface */ --ink:#EAEDFF; --ink2:#A9B1DE; --ink3:#8A93C4; --ink4:#525A88; /* disabled only; fails AA on purpose */ /* lines */ --line-soft:rgba(123,143,255,.10); --line:rgba(123,143,255,.16); /* EIOS --ei-line */ --line-strong:rgba(123,143,255,.42); --line-ui:rgba(123,143,255,.60); /* control borders on hover/active: 3:1 on the canvas */ --tint-soft:rgba(123,143,255,.05); --tint:rgba(123,143,255,.10); --tint-blue:rgba(52,70,255,.16); /* status: state only, always beside a label */ --ok:#57C77E; --ok-tint:rgba(87,199,126,.10); --ok-line:rgba(87,199,126,.32); --warn:#E9C56E; --warn-tint:rgba(233,197,110,.10); --warn-line:rgba(233,197,110,.32); --red:#FF5A6E; --red-tint:rgba(255,90,110,.10); --red-line:rgba(255,90,110,.34); --paper:#FFFFFF; /* content that must sit on white: QR codes, a user's own HTML preview */ --hl:rgba(233,197,110,.45); /* the highlighter: --warn at .45, marks an answer's source text */ --focus:0 0 0 2px var(--l1),0 0 0 4px var(--soft); --scrim:rgba(4,6,20,.66); --pop-shadow:0 18px 48px rgba(0,0,0,.5); /* floating layers only: menus, popovers, toasts */ /* type: one scale, each size has a role */ --fh:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --fb:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --fterm:'SF Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace; --t-xs:11px; --t-sm:12px; --t-body:13px; --t-md:14px; --t-lg:16px; --t-xl:18px; --t-title:20px; --t-fig:28px; --t-hero:36px; --lh-fig:1.05; --lh-head:1.2; --lh-table:1.4; --lh-ui:1.45; --lh-prose:1.55; /* TYPE ROLES — the only type styles the UI may use. Each role is one face, one size, one weight and one leading (on a 2px rhythm; single-line roles sit on 4px). Tracking: a hair open at 11-12px (as Carbon, Material and Apple do), none elsewhere. DM Sans's optical-size axis already tightens it at display sizes, and IBM says Plex is not meant to be spaced tightly. Stylesheets map their classes onto these in a TYPE ROLES block that comes last. The typography audit gives the reason for each value. */ --type-micro: 500 11px/16px var(--fh); --track-micro:.02em; /* chart ticks, counts, run chips: the floor */ --type-label: 500 12px/16px var(--fh); --track-label:.01em; /* field labels, table heads, KPI labels, pills */ --type-caption: 400 12px/18px var(--fb); /* sub-lines, hints, notes: may wrap, so 1.5 */ --type-control-sm: 500 12px/16px var(--fh); /* small buttons, chips, segmented tabs */ --type-ui: 400 13px/18px var(--fb); /* table cells, list text, dense fields */ --type-ui-strong: 500 13px/18px var(--fh); /* what names a row: titles, figures in rows */ --type-subhead: 600 13px/18px var(--fh); /* a heading inside a card */ --type-nav: 500 13px/16px var(--fh); /* navigation, tabs (600 when current) */ --type-control: 600 13px/16px var(--fh); /* buttons */ --type-body: 400 14px/20px var(--fb); /* short prose in UI: descriptions, empty states, dialogs */ --type-card: 600 14px/20px var(--fh); /* card and panel titles */ --type-control-lg: 600 14px/20px var(--fh); /* the one large call to action (sign in) */ --type-reading: 400 15px/24px var(--fb); /* reading inside the console: chat answers, explanations */ --type-reading-lg: 400 16px/24px var(--fb); /* a standalone document: docs, terms, privacy */ --type-lede: 400 18px/28px var(--fb); /* a document's opening paragraph */ --type-section: 600 16px/24px var(--fh); /* a section of cards */ --type-dialog: 600 18px/24px var(--fh); /* dialog and drawer titles */ --type-page: 600 20px/28px var(--fh); /* the page title */ --type-figure-sm: 700 20px/24px var(--fh); /* a figure in a denser strip */ --type-doc: 600 28px/36px var(--fh); /* a document's title */ --type-figure: 700 28px/32px var(--fh); /* the figure that leads a KPI */ --type-code: 400 12px/18px var(--fterm); /* code, keys, logs */ --type-code-lg: 400 13px/20px var(--fterm); /* code inside reading text, file viewers */ /* the longest line of running prose: about 72 characters of Plex. Not 70ch: Plex's zero is 0.60em wide against an average character of 0.446em (measured on the terms page), so 70ch would allow about 94. */ --measure:32em; /* MOTION — the EIOS grammar (EIOS board/js/motion.js and rails.js, and the AgentBoxDashboard /box workspace). Things arrive from where they come from and settle; leaving is quicker than arriving; a size changes by really resizing, never by scaling; a press moves a control 1px, the closest the web gets to a click you can feel. Reduced motion: instant. */ --ease:cubic-bezier(.2,.7,.2,1); /* arrive, glide, settle (the EIOS rail ease) */ --ease-fold:cubic-bezier(.5,0,.15,1); /* expand and collapse */ --ease-exit:cubic-bezier(.5,0,.75,0); /* leave: accelerate away */ --ease-pop:cubic-bezier(.25,1.2,.4,1); /* land with a small overshoot */ --dur-press:.1s; /* the press */ --dur-hover:.15s; /* a tone change under the pointer */ --dur-out:.16s; /* something leaving */ --dur-in:.26s; /* a menu, popover or dialog arriving */ --dur-rail:.35s; /* a rail or column resizing */ --dur-enter:.45s; /* content rising into place */ --dur-fold:.5s; /* a block expanding or collapsing */ /* space: a 4px base, 8px step. Spacing lives on containers as gap. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --row:40px; /* list and table rows */ --bar:64px; /* top bar and sidebar brand band */ --r-field:4px; /* text fields only; everything else is square */ /* ── names the entbox-ui stylesheet (entbox.css) expects from its host ── */ --text-primary:var(--ink); --text-secondary:var(--ink2); --text-tertiary:var(--ink3); --text-quaternary:var(--ink4); --font-dm-sans:'DM Sans'; --font-ibm-plex-sans:'IBM Plex Sans'; /* ── legacy aliases ───────────────────────────────────────────────────── The app, its JavaScript-built markup and the admin console were written against these names. They now resolve to the palette above, so anything still using them lands on-brand. New code uses the names above. */ --bg:var(--l0); --bg2:var(--l1); --panel:var(--l2); --panel2:var(--l3); --line2:var(--line-strong); --txt:var(--ink); --mut:var(--ink2); --dim:var(--ink3); --text:var(--ink); --muted:var(--ink2); --acc:var(--blue); --acc2:var(--soft); --grn:var(--ok); --amb:var(--warn); --amber:var(--warn); --rad:0; --rad-sm:0; --shadow:var(--pop-shadow); --font-head:var(--fh); --font-body:var(--fb); --font-mono:var(--fterm); }