/* ============================================================================ shell-tokens.css — MarkIt (task #817) The bridge between MarkIt's OWN palette and the layoutTest floating-pane shell. ── A NOTE THAT MATTERS FOR THIS APP SPECIFICALLY ──────────────────────── layoutTest's theme.css says so in its own header: its "PART A" IS `MarkIt/css/theme.css`, copied verbatim. layoutTest was built ON MarkIt's green-grey palette. So unlike LinkIt (#816), where the shell had to be pulled off MarkIt's colours and onto LinkIt's, here the two already agree — and the derivations below land on layoutTest's own numbers legitimately, because they ARE MarkIt's numbers. The real risk for this app is the opposite one: importing LinkIt's blue-grey by copying #816's bridge file. Every colour here is color-mixed off MarkIt's --bg / --surface / --accent, so: MarkIt --bg #f5f7f6 (green-grey, g > b) -> --frame #e6ebe8 (g > b) LinkIt --bg #f6f7f9 (blue-grey, b > g) -> --frame #e7e8ea (b > g) A probe asserts g > b at runtime, in both themes, so a silent drift toward LinkIt's chrome would be caught rather than eyeballed. MarkIt already carries --font, --font-num and the --r-* radii the shell expects, so there are NO palette aliases to write here at all — only the chrome layer MarkIt did not have: --frame, --frame-2, --pane, the scrims, the shell dimensions, motion and z-index. Load order (index.html): reset.css -> theme.css -> shell-tokens.css -> app.css -> shell.css app.css loads after these tokens and before shell.css, so MarkIt's own component rules stay authoritative; kit.css is deliberately NOT loaded (26-selector collision — see the header of shell.css). ⚠️ NEW FILE — must be added to the SHELL array in service-worker.js or it 404s offline. `npm run check:shell` (new, ported from LinkIt) reports it. ========================================================================= */ :root { /* ── Chrome surfaces ───────────────────────────────────────────────── DERIVED from MarkIt's --bg, never hardcoded. --frame is one step darker than --bg so the pane (which is --surface) reads as floating ON it. */ --frame: color-mix(in srgb, var(--bg) 94%, #000); /* title bar, status bar */ --frame-2: color-mix(in srgb, var(--bg) 91%, #000); /* recessed: the rail */ --pane: var(--surface); /* alias — zero new colour */ --scrim: rgba(10,14,12,.50); /* tinted toward MarkIt's ink */ --scrim-soft: rgba(10,14,12,.28); /* ── Derived state colours ───────────────────────────────────────────── */ --pane-ring: color-mix(in srgb, var(--accent) 52%, transparent); --focus-ring: color-mix(in srgb, var(--accent) 22%, transparent); --ok-soft: color-mix(in srgb, var(--ok) 14%, var(--surface)); --warn-soft: color-mix(in srgb, var(--warn) 16%, var(--surface)); --danger-soft: color-mix(in srgb, var(--danger) 13%, var(--surface)); /* ── Shell dimensions (mobile base — overridden per breakpoint below) ── The radii use MarkIt's own --r-sm/--r-md (7px/11px). MarkIt shares those values with layoutTest, but they are referenced as tokens, not copied as numbers, so if MarkIt's radii ever change the chrome follows. */ --gutter: 0px; --pane-radius: 0px; --titlebar-h: 52px; --statusbar-h: 0px; /* hidden on phones */ --rail-w: 0px; /* rail is tablet/desktop only */ --ctl-h: 44px; --row-h: 48px; --tap: 44px; /* MarkIt's OWN bottom tab bar (.mobile-tabbar, #197) stays the phone nav — the shell does not add a second one. This token exists only so the pane body can reserve the right amount of room for it; the bar sizes itself. */ --bottomnav-h: 56px; /* ── Motion ──────────────────────────────────────────────────────────── */ --dur-1: 90ms; --dur-2: 140ms; --dur-3: 200ms; --dur-4: 260ms; --ease-out: cubic-bezier(.2,0,0,1); --ease-in: cubic-bezier(.4,0,1,1); /* ── Layers ────────────────────────────────────────────────────────── app.css already uses concrete z-indexes: .app-header 30, .fab 25, .mobile-tabbar 20, .modal/.sheet overlays higher. These tokens are set to agree with that existing stack rather than fight it. */ --z-pane: 1; --z-sticky: 10; --z-rail: 20; --z-chrome: 30; --z-drawer: 40; --z-scrim: 50; --z-modal: 51; --z-popover: 60; --z-toast: 70; } /* Dark. NOTE the selector shape differs from LinkIt's on purpose: MarkIt's prefs.js ALWAYS stamps data-theme (it writes "light" explicitly, it never removes the attribute), and MarkIt's own theme.css pairs :root[data-theme="dark"] with a :root:not([data-theme]) pre-boot fallback. Both are mirrored here so the chrome can never be light behind dark panes, including in the split second before prefs.js runs. Different percentages from light on purpose: near black there is far less room below --bg, so 94%/91% would be an invisible step. */ :root[data-theme="dark"] { --frame: color-mix(in srgb, var(--bg) 66%, #000); --frame-2: color-mix(in srgb, var(--bg) 38%, #000); --scrim: rgba(0,0,0,.62); --scrim-soft: rgba(0,0,0,.40); --pane-ring: color-mix(in srgb, var(--accent) 60%, transparent); --ok-soft: color-mix(in srgb, var(--ok) 18%, var(--surface)); --warn-soft: color-mix(in srgb, var(--warn) 20%, var(--surface)); --danger-soft: color-mix(in srgb, var(--danger) 18%, var(--surface)); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --frame: color-mix(in srgb, var(--bg) 66%, #000); --frame-2: color-mix(in srgb, var(--bg) 38%, #000); --scrim: rgba(0,0,0,.62); --scrim-soft: rgba(0,0,0,.40); --pane-ring: color-mix(in srgb, var(--accent) 60%, transparent); } } /* ── Breakpoint token overrides ───────────────────────────────────────── 640 is MarkIt's own phone/desktop cut (app.css uses max-width:639 / min-width:640 throughout, including for .mobile-tabbar and .fab), so the shell's breakpoints line up with the app's instead of introducing a second, competing set. */ @media (min-width: 640px) { /* TABLET — rail + status bar appear */ :root { --gutter: 6px; --pane-radius: var(--r-sm); /* MarkIt's 7px */ --titlebar-h: 46px; --statusbar-h: 24px; --bottomnav-h: 0px; --rail-w: 48px; --ctl-h: 38px; --row-h: 44px; } } @media (min-width: 1024px) { /* DESKTOP — the full floating shell */ :root { --gutter: 8px; --pane-radius: var(--r-md); /* MarkIt's 11px */ --titlebar-h: 44px; --statusbar-h: 26px; --ctl-h: 34px; --row-h: 40px; } } /* Reduced motion — set the TOKENS too, so any JS reading --dur-* agrees. */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; } }