/** * tokens.css — webapp preview shell only. * * As of 2026-08-29 this file no longer defines a single component. It used to * hold 28 component classes (.btn, .chip, .field, .card-s, .status-pill …) * that duplicated what frontend/guide/system/ml-core.css and ml-widgets.css * already define — two files describing the same button, free to drift, and * they had: .btn's pressed state was a hardcoded #262626 while the system used * the --color-ink-pressed token, and .card-s carried a different radius. * * Those classes were renamed to their ml-* equivalents across 96 screens and * deleted from here. What remains is the ONE thing that genuinely belongs to * the webapp and not to the design system: the desktop phone bezel the * workbench draws around a screen. That is preview chrome, not an app * component — the real app has no bezel. * * Tokens come from ml-tokens.css (generated). Components come from * /guide/system/ml-core.css and ml-widgets.css. */ /* The webapp's single entry point to the design system. Screens rebuilt on the system link ml-core/ml-widgets directly in their ; the 94 not yet rebuilt only link this file, so importing here is what keeps their ml-* classes styled without editing 94 heads. Both paths resolve in dev (scripts/dev-preview-server.py) and production (dist/guide/system). */ @import url("./ml-tokens.css"); @import url("/guide/system/ml-core.css"); @import url("/guide/system/ml-widgets.css"); /* --- Phone frame (desktop preview chrome) — classes/values from styleguide.html, with one deliberate divergence: .phone-screen's height. styleguide.html uses this frame as a generic marketing mockup (720px, 360:720 = 18:9). webapp/'s own shared/app-shell.css documents a real, specific target aspect for the screens actually rendered inside this frame: "20:9 ... reference frame 390×844 / 360×800". 720px doesn't match that — every screen previewed here was ~80px shorter/squatter than the ratio the app itself is designed against, so content sat more cramped in the preview than on a real device. Fixed to 800px to match app-shell.css's own stated standard. Not copied down from styleguide.html on purpose — see CLAUDE.md, styleguide.html isn't touched this session, and this is a webapp-specific accuracy fix, not a shared-system value. --- */ .phone-frame { width: 360px; background: #1a1a2e; border-radius: 36px; padding: 12px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .phone-screen { background: var(--color-paper); border-radius: 24px; overflow: hidden; height: 800px; position: relative; } .phone-notch { height: 28px; background: #0D0D0D; display: flex; align-items: center; justify-content: center; gap: 8px; } .phone-notch .dot { width: 8px; height: 8px; background: #2C2F3A; border-radius: 50%; }