/* ========================================================================== * tokens.css — Unified Design System for NOC + MAP + Copilot * * Single source of truth for spacing, type, color, radii, and motion. * Theme switching: [data-theme="dark"] | [data-theme="light"] | (auto via * prefers-color-scheme when no [data-theme] attribute is set). * * Per-app accent: add class .app-noc | .app-map | .app-copilot to or * the root mount node to override --color-accent / --color-accent-dim. * * Mirrored into each app's local design dir. Sync any change here into: * - forge-app/custom-ui/src/design/tokens.css (Copilot) * - .../work-order-creator/src/styles/tokens.css (NOC) * - .../forge-analysis-order/static/hello-world/src/styles/tokens.css (MAP) * ========================================================================== */ /* === Theme-agnostic primitives (spacing, type, radii, motion) ============ */ :root { /* Spacing scale (rem-based, 4px ⇒ 0.25rem assuming 16px root) */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; /* Font families */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Inter", "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Consolas, monospace; /* Type scale (px to keep telemetry / monospace aligned) */ --text-xs: 11px; --text-sm: 13px; --text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; /* Header chrome (V-C.1 / CC-3 + CC-4) — explicit tokens for the * SlimIntakeBar + each app's chrome header so the bar reads at the * same weight as the surrounding header instead of feeling grafted on. * - --header-font-size: body font of chrome header bands (16px, * one step up from --text-md so titles read * against Tailwind's text-base / Forge sm). * - --header-font-weight: 600 — semibold; matches Forge UI Kit sm * label weight and Tailwind text-base/font-medium. * - --eyebrow-font-weight: 600 — promotes the INTAKE eyebrow + bucket * headings off the muted body weight (was 400). * - --header-pad-y: vertical padding for chrome bands; bumps * the bar from a hairline to a solid band. * - --header-shadow-accent: subtle inset bottom accent stripe so the * bar reads as a discrete header band even * when the page background sits a hair below. */ --header-font-size: 16px; --header-font-weight: 600; --eyebrow-font-weight: 600; --header-pad-y: var(--space-3); --header-shadow-accent: inset 0 -1px 0 var(--color-divider); /* Radii */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 9999px; /* Motion */ --motion-fast: 80ms; --motion-med: 160ms; --motion-slow: 320ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Severity tokens — resolve against status colors below. * These do not vary by theme directly; they reference --color-* which do. */ --severity-P1: var(--color-crit); --severity-P2: var(--color-warn); --severity-P3: var(--color-info); --severity-P4: var(--color-text-muted); --severity-info: var(--color-info); } /* === Light theme palette (default) ======================================= */ :root, :root[data-theme="light"] { --color-bg: #f7f8fa; --color-panel: #ffffff; --color-panel-elev: #fafbfc; --color-divider: #e1e4e8; --color-border: #d0d7de; --color-text-primary: #1a1d21; --color-text-muted: #5b6577; --color-text-dim: #8b95a7; --color-accent: #2563eb; --color-accent-dim: #1e40af; --color-ok: #2da44e; --color-warn: #d29922; --color-crit: #cf222e; --color-info: #0969da; --color-row-hover: #f3f5f8; --color-row-focus: #e8eef9; --color-overlay: rgba(11, 14, 20, 0.30); --color-shadow: rgba(15, 20, 30, 0.08); } /* === Dark theme palette ================================================== */ :root[data-theme="dark"] { --color-bg: #0b0e14; --color-panel: #11151c; --color-panel-elev: #161a23; --color-divider: #1f2531; --color-border: #2a3340; --color-text-primary: #e6e8eb; --color-text-muted: #8b95a7; --color-text-dim: #5b6577; --color-accent: #5ce0e6; --color-accent-dim: #2d7a7e; --color-ok: #3fb950; --color-warn: #d6a850; --color-crit: #f85149; --color-info: #58a6ff; --color-row-hover: #161a23; --color-row-focus: #1c2230; --color-overlay: rgba(0, 0, 0, 0.45); --color-shadow: rgba(0, 0, 0, 0.5); } /* === Auto theme: honor prefers-color-scheme when no data-theme set ======= */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #0b0e14; --color-panel: #11151c; --color-panel-elev: #161a23; --color-divider: #1f2531; --color-border: #2a3340; --color-text-primary: #e6e8eb; --color-text-muted: #8b95a7; --color-text-dim: #5b6577; --color-accent: #5ce0e6; --color-accent-dim: #2d7a7e; --color-ok: #3fb950; --color-warn: #d6a850; --color-crit: #f85149; --color-info: #58a6ff; --color-row-hover: #161a23; --color-row-focus: #1c2230; --color-overlay: rgba(0, 0, 0, 0.45); --color-shadow: rgba(0, 0, 0, 0.5); } } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --color-bg: #f7f8fa; --color-panel: #ffffff; --color-panel-elev: #fafbfc; --color-divider: #e1e4e8; --color-border: #d0d7de; --color-text-primary: #1a1d21; --color-text-muted: #5b6577; --color-text-dim: #8b95a7; --color-accent: #2563eb; --color-accent-dim: #1e40af; --color-ok: #2da44e; --color-warn: #d29922; --color-crit: #cf222e; --color-info: #0969da; --color-row-hover: #f3f5f8; --color-row-focus: #e8eef9; --color-overlay: rgba(11, 14, 20, 0.30); --color-shadow: rgba(15, 20, 30, 0.08); } } /* === Per-app accent overrides ============================================ * Apply on or the root mount: etc. */ .app-noc { --color-accent: #cf222e; --color-accent-dim: #a01724; } .app-map { --color-accent: #2563eb; --color-accent-dim: #1e40af; } .app-copilot { --color-accent: #5ce0e6; --color-accent-dim: #2d7a7e; } /* In dark mode the NOC/MAP accents need slightly raised lightness for AA * contrast against the panel bg. Override only when both conditions meet. * * Wave U5 polish (OQ8): NOC accent shifted from #f85149 → #ff7b72 to * stay distinct from --color-crit (#f85149). Prior value collided with * the P1 severity dot, eroding the severity hierarchy in dark mode. * #ff7b72 keeps the warm-red NOC family identity but pops less than * P1 critical, preserving the legibility ladder * (P1 #f85149 > accent #ff7b72 > P2 warn). */ :root[data-theme="dark"] .app-noc { --color-accent: #ff7b72; --color-accent-dim: #b8323c; } :root[data-theme="dark"] .app-map { --color-accent: #58a6ff; --color-accent-dim: #316dca; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .app-noc { --color-accent: #ff7b72; --color-accent-dim: #b8323c; } :root:not([data-theme]) .app-map { --color-accent: #58a6ff; --color-accent-dim: #316dca; } } /* === Reduced-motion override ============================================= */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-med: 0ms; --motion-slow: 0ms; } } /* === Focus ring (Wave U5 OQ10) =========================================== * Token-driven focus indicator for keyboard users. Visible in both light * + dark themes because --color-accent shifts with the theme. * * Targets the listitem rows in SlimIntakeBar drawers (which set inline * outline:none for the default click state but need a visible ring for * keyboard navigation). The `box-shadow` form does NOT conflict with * inline `outline: none` and renders inside the row's bottom border. */ [role="listitem"][tabindex="0"]:focus-visible, [role="button"][tabindex="0"]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-accent); }