/* tokens.css — the Beegait design system (card MV2-18, Story MV2-16 "RE-Design Beegait", 2026-09-25). * * The palette of the design handoff — "Calm cockpit, honey for AI": neutral surfaces do 90 % of the * work, ONE blue for action and selection, amber RESERVED for AI activity, light by default, dark * first-class. Its source of record is the mv2 hub's cards/_files/MV2-16/handoff/design-system/tokens.css * (generated there from tokens.json); the palette blocks below are that file VERBATIM. It replaces * Direction B "Deep Field" (2026-07-25: deep-space blue, the blue→violet gradient, glass surfaces) — * Samer's decision D1 of 2026-09-25 (cards/_files/MV2-16/design-brief.md §2). * * RULES (enforced by tests/shell_design_test.py and the mv2 hub's check_mv2_redesign_tokens.py / * check_mv2_engine_design_tokens.py): * - This file is the ONLY place raw colors and px values may appear. * - Every shell page consumes these custom properties via shell.css classes — zero page-local * styling forks. A NEW rule uses the Beegait names; the legacy --mc-* names are ALIASES (the * block at the end) so every existing rule re-skins without an edit. * - Theme = data-theme="light|dark" on , written by the pre-paint script of shell.py / * home.html and by the toggles (the legacy `light` class stays beside it for element swaps such * as the logo pair). LIGHT is the default when nothing is stored; a stored maistroTheme wins. * - The engine vendors this file as maistro/ui/tokens.css (home.html) and INLINES it in the board * (maistro/ui/board/css/010-tokens.css — the cloud serves board.html verbatim, no may enter * it): keep the NAMES stable; the block between the `mc-tokens:begin` / `mc-tokens:end` markers * stays byte-identical across the three copies (the hub check's parity block). * - Amber (--ai, --ai-ink, --ai-soft) is AI-only — Samer's D2. --danger only for behind, blocked and * rework. A warning that demands no action is neutral ink (--mc-warn below). * - Fonts: Inter and JetBrains Mono, VENDORED (card MV2-20): the five @font-face rules below name the woff2 * files the box serves at /vendor/fonts/ (never a CDN); the system faces stay the stacks' fallback. * * name → role: * --surface-000 / -100 / -200 panel & table fill · the page ground · raised and hover fill * --border / --border-strong hairlines · strong edges (buttons, chips) * --ink / --ink-muted / --ink-subtle text · secondary text · placeholders and carets * --brand / --brand-hover / --brand-soft / --on-brand the ONE blue: primary action, selection, in delivery * --ai / --ai-ink / --ai-soft AMBER — AI activity only (runners, AI proposals, AI actions) * --ok / --ok-soft done * --danger / --danger-soft behind, blocked, rework — always beside the action that fixes it * --caution / --caution-soft AMBER WARNING — a machine problem the person can fix, no action blocked * (card MV2-CHAT-BOX-DECLUTTER, 2026-10-31: the chat box's one amber line). * NOT --warn: the board aliases --warn to --danger and the shell's --mc-warn * is --ink-muted — either name would be overridden or turn red amber * --focus the focus ring (= brand) * --shadow-panel the one shadow: floating layers (the panel, the command bar) * --space-1 … --space-8 the 4 px grid · --radius-sm/md/lg/pill · --row-compact/-default * --sidebar-width / --panel-width the left navigation · the right detail panel * --font-sans / --font-mono Inter · JetBrains Mono (every number is mono, tabular) * --font-display … --font-num the type scale as `font` shorthands (display · title · body · label · caption · * --tracking-display / -caption metric · num) — custom properties only in this file, never a class * --mc-* the legacy shell names — aliases of the tokens above */ /* ── the vendored type (card MV2-20, Story MV2-16 RE-Design Beegait — the self-hosting law of the design brief §4.1): Inter 400 · 500 · 600 and JetBrains Mono 500 · 600 as woff2 under maistro/ui/vendor/fonts/, served from the box at /vendor/fonts/ by the engine's local server and by cloud/board.py — a same-origin path, never a CDN. --font-sans / --font-mono below name the families first; the system faces stay the fallback. ── */ @font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("/vendor/fonts/Inter-Regular.woff2") format("woff2"); } @font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/vendor/fonts/Inter-Medium.woff2") format("woff2"); } @font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("/vendor/fonts/Inter-SemiBold.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/vendor/fonts/JetBrainsMono-Medium.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/vendor/fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); } :root, [data-theme="light"] { --surface-000: #ffffff; --surface-100: #f6f6f4; --surface-200: #eeeeeb; --border: #e4e4e0; --border-strong: #c9c9c3; --ink: #1b1c1f; --ink-muted: #5a5d64; --ink-subtle: #6b6e76; --brand: #2f5bd3; --brand-hover: #2449b0; --brand-soft: #e8eefc; --on-brand: #ffffff; --ai: #f0a514; --ai-ink: #865000; --ai-soft: #fdf2da; --ok: #1d7549; --ok-soft: #e2f3e9; --danger: #c0352a; --danger-soft: #fbe8e6; --caution: #8f3a06; --caution-soft: #fdf1e8; --focus: var(--brand); --shadow-panel: 0 8px 24px rgba(20,22,28,0.12); --scrim: rgba(20,22,28,0.28); /* a see-through dim layer behind a side panel: the page stays visible */ } [data-theme="dark"] { --surface-000: #1c1d21; --surface-100: #141518; --surface-200: #26282d; --border: #2f3137; --border-strong: #474a52; --ink: #ececef; --ink-muted: #a6a9b0; --ink-subtle: #8e9199; --brand: #7c9dff; --brand-hover: #9cb5ff; --brand-soft: #1e2947; --on-brand: #0c1330; --ai: #f2b84b; --ai-ink: #f5c56a; --ai-soft: #35290f; --ok: #5ccb8f; --ok-soft: #15311f; --danger: #ff8173; --danger-soft: #3b1c19; --caution: #ffa36b; --caution-soft: #3a2112; --focus: var(--brand); --shadow-panel: 0 8px 24px rgba(0,0,0,0.5); --scrim: rgba(0,0,0,0.45); } :root { --space-1: 4px; /* Icon-to-label gap. */ --space-2: 8px; /* Inside chips and pills; between avatars. */ --space-3: 12px; /* Row horizontal padding; gap between toolbar items. */ --space-4: 16px; /* Panel padding; tree indent per level. */ --space-6: 24px; /* Between page sections. */ --space-8: 32px; /* Page gutters on wide screens. */ --radius-sm: 4px; /* Checkboxes, type badges. */ --radius-md: 6px; /* Buttons, inputs, chips. */ --radius-lg: 10px; /* Panels, command bar, cards. */ --radius-pill: 999px; /* Status pills, avatars, the AI dot. */ --row-compact: 32px; /* Table row height in dense mode. */ --row-default: 40px; /* Table row height, default. */ --sidebar-width: 232px; /* Left navigation. */ --panel-width: 440px; /* Right detail panel. */ --icon-size: 16px; /* The one icon size: the Lucide glyphs of icon() (card MV2-20). */ --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* the type scale as `font` shorthands (`font: var(--font-title)`) — the handoff's .text-* classes as TOKENS, because this file holds custom properties only (shell_design_test TC2); a class over them lives in shell.css or a board part when a card first needs it */ --font-display: 600 24px/32px var(--font-sans); /* + letter-spacing: var(--tracking-display) */ --font-title: 600 16px/24px var(--font-sans); --font-label: 500 13px/18px var(--font-sans); --font-caption: 500 12px/16px var(--font-sans); /* + letter-spacing: var(--tracking-caption) */ --font-metric: 600 20px/28px var(--font-mono); /* + font-variant-numeric: tabular-nums */ --font-num: 500 13px/18px var(--font-mono); /* + font-variant-numeric: tabular-nums */ --tracking-display: -0.015em; --tracking-caption: 0.02em; } /* ── the legacy shell names as ALIASES of the tokens above (card MV2-18): every existing `var(--mc-…)` in shell.css, home.html and the board re-skins without an edit. The values follow data-theme through the var() references (a var resolves on the element, at computed time). Gradient, glass, blur and lift retire (flat surfaces with hairlines): the gradient names resolve to the flat brand colour — every consumer uses `background:`, which takes a colour. --mc-glow is the focus ring: a translucent brand mix (brand-soft alone vanishes on the dark surfaces). --mc-logo-chip and --mc-qr-pad / --mc-qr-ink keep their literals: the wordmark asset and a QR code are dark on WHITE in every theme (cards 58 · 238 — lived on the dark sign-in page of MV2-18's walk: the logo vanished on a dark chip). Never a self-referential declaration (`--x: var(--x)` is invalid at computed-value time and renders transparent — the board v3.54 lesson). ── */ /* ── mc-tokens:begin ── */ :root { --mc-bg: var(--surface-100); --mc-bg-2: var(--surface-000); --mc-bg-wash: var(--surface-100); --mc-surface: var(--surface-000); --mc-surface-solid: var(--surface-200); --mc-text: var(--ink); --mc-muted: var(--ink-muted); --mc-hairline: var(--border); --mc-hairline-w: 1px; --mc-accent: var(--brand); --mc-accent-2: var(--brand); --mc-accent-grad: var(--brand); --mc-accent-grad-tilt: var(--brand); --mc-on-accent: var(--on-brand); --mc-glow: color-mix(in srgb, var(--brand) 35%, transparent); --mc-danger: var(--danger); --mc-warn: var(--ink-muted); --mc-success: var(--ok); --mc-success-glow: var(--ok-soft); --mc-font: var(--font-sans); --mc-font-mono: var(--font-mono); --mc-fs-sm: 12px; --mc-fs-base: 14px; --mc-fs-lg: 16px; --mc-fs-xl: 24px; --mc-sp-1: var(--space-1); --mc-sp-2: var(--space-2); --mc-sp-3: var(--space-3); --mc-sp-4: var(--space-4); --mc-sp-5: var(--space-6); --mc-sp-6: var(--space-8); --mc-r-xs: var(--radius-sm); --mc-r-sm: var(--radius-md); --mc-r: var(--radius-lg); --mc-r-lg: var(--radius-lg); --mc-r-pill: var(--radius-pill); --mc-blur: 0px; --mc-lift: 0px; --mc-shadow: var(--shadow-panel); --mc-shadow-soft: none; --mc-shadow-accent: none; --mc-tr: .12s ease; --mc-side-w: var(--sidebar-width); --mc-side-rail: 56px; --mc-icon: 16px; --mc-navmark: 2px; --mc-logo-chip: #ffffff; --mc-qr-pad: #ffffff; --mc-qr-ink: #000000; --mc-logo-h: 26px; } /* ── mc-tokens:end ── */ /* ── the visual charter (Samer 2026-10-21, K1–K6 — the mv2 hub's cards/_files/LAYOUT-UPDATE/visual-charter-2026-10-21.html): Linear's RULES on our palette. Four text sizes (12 · 13 · 15 · 24, 20 for a KPI number), three weights, two control heights, two page widths. New Beegait names, never --mc-* (the engine home's name-parity law) ── */ :root { --text-caption: 12px; /* descriptions, hints, meta, timestamps — muted ink */ --text-ui: 13px; /* rows, labels, inputs, buttons, menus, table cells (K1) */ --text-read: 15px; /* reading text: card bodies, docs, chat answers */ --text-title: 15px; /* a section's title */ --text-display: 24px; /* a page's title */ --text-metric: 20px; /* a KPI number, nothing else */ --line-caption: 16px; --line-ui: 20px; --line-read: 24px; --line-title: 22px; --line-display: 32px; --weight-text: 400; --weight-label: 500; /* labels, section titles, buttons */ --weight-title: 600; /* page titles, numbers, emphasis */ --page-settings: 640px; /* every page of the Settings mode (K2) */ --page-focus: 400px; /* sign-in, sign-up, join, reset: the one centred card */ --control-h: 32px; /* a button or an input */ --control-h-sm: 28px; /* inside a row or a toolbar */ } /* ── the /lanes water vessel's % (card MV2-SET-ROW-KIT, after MV2-WATER-PCT-CENTERED): white on the water with a dark-blue halo, a grey halo on an idle vessel; the same in both themes ── */ :root { --water-pct-ink: #ffffff; --water-pct-halo: #002b6b; --water-pct-halo-soft: rgba(0, 43, 107, .85); --water-pct-halo-off: #333333; --water-pct-halo-off-soft: rgba(0, 0, 0, .7); }