/* ui-prototype/tokens.css — Private Digital Product Factory design tokens. * * ONE authoritative token layer. Components never use a raw colour; they use these * variables, so the palette is swappable without touching a component. * * =========================================================================== * VISUAL_BRAND_LOCK = APPROVED (Owner decision, MM04 close-out) * =========================================================================== * * APPROVED PALETTE — the four colours the Owner specified. Everything below is either one * of these four or a mechanically derived shade of one, and every rendered pair is verified * against WCAG 2.1 by scripts/mm04-ui/design-system-lint.js. * * #18202A navy surfaces that carry the product's weight: sidebar, primary text * #4E6FE7 indigo the brand accent: focus, progress, active state, primary action * #2F9D8F teal "this is good": success, approved, provider ready * #F6F8FB mist the canvas everything sits on * * PRIMARY DESIGN DNA: Linear — calm density, cool near-neutrals, restrained borders, * a dark navy rail against a bright working surface, * small confident type, almost no shadow. * SECONDARY REFERENCE: Raycast — compact rows, monospace for identifiers, fast scanning. * * These are DIRECTION, not assets. No logo, wordmark, icon set, illustration, copy or * proprietary asset from either product is used or reproduced anywhere in this repository. * * WHY TWO OF THE FOUR APPEAR IN DERIVED FORM * ------------------------------------------ * #4E6FE7 on white is 4.42:1 — just under the 4.5:1 floor for body-sized text, and the same * ratio for a white label on an indigo button. #2F9D8F on white is 3.31:1. Used literally * for text they would fail WCAG AA, so: * - the brand indigo is kept EXACTLY at #4E6FE7 wherever contrast is not the binding * constraint — the focus ring, the progress fill, the active-nav accent (a 3:1 surface); * - text and button surfaces use a darker mix of the same hue, so the identity is intact * and the interface is legible; * - the same applies to teal for "approved / ready" text. * The alternative — shipping a brand that fails contrast — is not one. */ :root { /* ==== the approved brand colours, verbatim ==== */ --brand-navy: #18202A; --brand-indigo: #4E6FE7; --brand-teal: #2F9D8F; --brand-mist: #F6F8FB; /* ---- color.background ---- */ --color-background-canvas: #F6F8FB; /* brand mist */ --color-background-surface: #ffffff; --color-background-elevated: #ffffff; --color-background-inset: #eaecf0; /* mist deepened toward navy */ --color-background-sidebar: #18202A; /* brand navy */ --color-background-sidebar-active: #233050; /* navy lifted toward indigo */ /* ---- color.text ---- */ --color-text-primary: #18202A; /* brand navy — 16.42:1 on surface */ --color-text-secondary: #4b5159; /* 8.01:1 */ --color-text-muted: #62676e; /* 5.70 / 5.36 / 4.82:1 on surface / canvas / inset */ --color-text-invert: #f1f2f2; --color-text-sidebar: #a7aaae; /* 7.05:1 on the navy rail */ --color-text-sidebar-active: #ffffff; /* ---- color.border ---- */ --color-border-default: #d9dce0; --color-border-strong: #90959b; /* 3.09:1 — an input boundary is a UI component */ --color-border-focus: #4E6FE7; /* brand indigo, used at its true value */ /* ---- color.action ---- */ --color-action-primary: #4967d4; /* indigo darkened 10% toward navy; white label 5.03:1 */ --color-action-primary-text: #ffffff; --color-action-hover: #425ebd; --color-action-disabled: #b3b7bc; --color-action-secondary-bg: #eceef2; --color-action-danger: #B3372F; --color-action-danger-hover: #96281F; /* ---- color.status ---- */ --color-status-success-bg: #eaf5f4; --color-status-success-fg: #287871; /* brand teal family */ --color-status-warning-bg: #FBF0D8; --color-status-warning-fg: #8A5A10; --color-status-danger-bg: #FAE4E2; --color-status-danger-fg: #9C2C24; --color-status-info-bg: #edf1fd; --color-status-info-fg: #425ebd; /* brand indigo family */ --color-status-neutral-bg: #e6e9ec; --color-status-neutral-fg: #595e66; /* ---- color.ai (§49: honest AI state, no sparkle-everything) ---- * Synthetic uses a magenta-violet deliberately far from the brand indigo: a * "TEST / SYNTHETIC" marker must never be mistakable for a brand-coloured chip. */ --color-ai-fake-bg: #F7E9F6; --color-ai-fake-fg: #8A2C7E; --color-ai-disabled-bg: #e6e9ec; --color-ai-disabled-fg: #595e66; --color-ai-live-bg: #eaf5f4; --color-ai-live-fg: #287871; --color-ai-blocked-bg: #FBF0D8; --color-ai-blocked-fg: #8A5A10; /* ---- color.review ---- */ --color-review-pending-bg: #FBF0D8; --color-review-pending-fg: #8A5A10; --color-review-approved-bg: #eaf5f4; --color-review-approved-fg: #287871; --color-review-revision-bg: #FAE4E2; --color-review-revision-fg: #9C2C24; /* ---- color.provider (§28: disabled is NEUTRAL, never alarming) ---- */ --color-provider-disabled-bg: #e6e9ec; --color-provider-disabled-fg: #595e66; --color-provider-ready-bg: #eaf5f4; --color-provider-ready-fg: #287871; --color-provider-blocked-bg: #FAE4E2; --color-provider-blocked-fg: #9C2C24; /* ---- spacing ---- */ --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; /* ---- radius ---- * Tightened for the Linear direction: a 12px card radius reads consumer-soft, a 8px one * reads like tooling. Token-level only; no component changed. */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px; /* ---- shadow ---- * Linear separates surfaces with a border and a hairline, not with elevation. The surface * shadow is nearly absent; only the dialog lifts. Tinted with navy, never neutral black. */ --shadow-surface: 0 1px 1px rgba(24, 32, 42, .04); --shadow-elevated: 0 8px 28px rgba(24, 32, 42, .16); --shadow-focus: 0 0 0 3px rgba(78, 111, 231, .30); /* ---- font ---- * Offline-safe stacks; Vazirmatn (already shipped for exports) serves fa/ar when * available. No external font dependency: the interface renders with no network access. */ --font-ui: -apple-system, "Segoe UI", Roboto, "Vazirmatn", "Noto Sans", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-size-xs: 11px; --font-size-sm: 12.5px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-size-title: 24px; /* ---- motion (restrained; §46) ---- */ --motion-fast: 120ms ease; --motion-normal: 200ms ease; /* ---- z-index ---- */ --z-sidebar: 40; --z-topbar: 30; --z-scrim: 35; --z-dialog: 100; --z-toast: 110; /* ---- surfaces that are not "background" ---- */ --color-scrim: rgba(24, 32, 42, .48); --color-sidebar-rule: rgba(255, 255, 255, .09); --color-progress-track: #d7dade; --color-progress-fill: #4E6FE7; /* brand indigo at its true value */ /* ---- control geometry (governed; components never invent a control padding) ---- */ --control-pad-y: 7px; --control-pad-x: 14px; --control-pad-y-sm: 3px; --control-pad-x-sm: 9px; /* ---- table density (Raycast direction: compact rows, fast scanning) ---- */ --table-cell-y: 7px; --table-cell-x: 12px; /* ---- layout ---- */ --sidebar-width: 236px; --content-max: 1400px; } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-normal: 0ms; } * { animation: none !important; transition: none !important; } }