/* ============================================================================ StridorRT · ui/tokens.css — the design token layer (Step 1 of the revamp) ---------------------------------------------------------------------------- SOURCE OF TRUTH: sims/vent-trainer.html (StridorVENT), the platform's design high-water mark. Every color below is lifted verbatim from the sim's CSS, or composed from a sim color via an alpha tint. Nothing is invented. NAMESPACE: every token is prefixed `--s-`. The legacy sheets (pulse.css, shell.css, app-extra.css, student-bg.css) define un-prefixed vars with the SAME NAMES as the sim (--canvas, --accent, …) but DRIFTED VALUES — pulse's accent is #24c9a0, app-extra's is #24c9a0 via --x-accent, the sim's is #22e0b0, and companion.html carries a fourth (#3df0b4). The --s- prefix lets this file load everywhere TODAY with zero cascade interference; surfaces are migrated onto it one at a time in Steps 2–5. MIGRATION MAP (legacy var -> token), applied per-surface in later steps: --canvas -> --s-bg-0 --accent -> --s-teal --bg-2 -> --s-bg-1 --accent-d -> --s-teal-2 --surface -> --s-bg-2 --accent-ink -> --s-on-teal --surface-2 -> --s-bg-3 --good -> --s-ok --raise -> --s-bg-4 --warn/--mid -> --s-warn --ink / --x-ink -> --s-ink --risk/--x-risk -> --s-danger --sub / --x-sub -> --s-ink-2 --r -> --s-r-lg --mute / --x-mute -> --s-ink-3 --sh -> --s-elev-1 --faint -> --s-ink-4 --sh-lg -> --s-elev-2 --hair / --x-hair -> --s-line --x-bg -> --s-bg-0/1 --hair-2 / --x-hair2-> --s-line-2 --x-card(2) -> --s-bg-2/3 FONTS: self-hosted below (public/ui/fonts/, SIL OFL — licenses alongside). Same families and weights the pages previously pulled from Google Fonts, so the swap is visually inert while making the app work fully offline. ========================================================================== */ /* ---- Plus Jakarta Sans — prose / UI sans (was Google Fonts CDN) ---------- */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/ui/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/ui/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/ui/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/ui/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/ui/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')} /* ---- JetBrains Mono — the numeric / instrument face (kept, self-hosted) -- */ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/ui/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/ui/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/ui/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/ui/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2')} :root{ /* ======================== COLOR · NEUTRAL LAYERS ========================= Five canvas depths, deepest -> most raised. (sim :root --canvas … --raise) */ --s-bg-0:#05070b; /* page canvas */ --s-bg-1:#0a0e14; /* recessed strip / alt canvas */ --s-bg-2:#0e1520; /* surface: cards, inputs */ --s-bg-3:#131c28; /* raised surface: hovered card, chip base */ --s-bg-4:#1c2938; /* highest: active/raised element */ /* Panel + well gradient endpoints (sim .panel / .scal backgrounds) */ --s-panel-hi:#0f1621; --s-panel-lo:#0a1017; --s-well-hi:#0b1017; --s-well-lo:#05080d; --s-ctl-bg:#0c131d; /* control resting fill (sim .tbtn/.modebtn) */ /* ============================ COLOR · INK ================================ */ --s-ink:#eef4fb; /* primary text (sim --ink) */ --s-ink-2:#a4b4c4; /* secondary (sim --sub) */ --s-ink-3:#778a9b; /* muted — smallest body text that must read */ --s-ink-4:#556472; /* faint — decorative/large labels only (AA: fails for body sizes; never use on prose) */ /* ========================== COLOR · HAIRLINES ============================ */ --s-line:#18222f; /* subtle rule (sim --hair) */ --s-line-2:#24303e; /* strong rule / control border (--hair-2) */ --s-panel-line:#1a2432; /* panel edge (sim .panel) */ /* =========================== COLOR · ACCENTS ============================= The sim's four instrument tones. Each ships base, dim, on-color ink, and an RGB triplet for alpha tints: rgba(var(--s-teal-rgb), .12) etc. */ --s-teal:#22e0b0; --s-teal-2:#12c79a; --s-on-teal:#04231b; --s-teal-rgb:34,224,176; --s-amber:#ffcf47; --s-amber-2:#f2b23a; --s-on-amber:#2a1c06; --s-amber-rgb:255,207,71; --s-blue:#5cb4ff; --s-blue-2:#2a6aa8; --s-on-blue:#041a2e; --s-blue-rgb:92,180,255; --s-violet:#c99bff; --s-on-violet:#1d1230; --s-violet-rgb:201,155,255; /* Blue "command" fill pair (sim --cmd/--cmd-2/--cmd-b): push-to-class acts */ --s-cmd:#1a5590; --s-cmd-2:#0f3865; --s-cmd-line:#2a6aa8; /* ========================== COLOR · SEMANTIC ============================= */ --s-ok:#2fe3a0; --s-ok-rgb:47,227,160; /* sim --good/--flow */ --s-warn:#f2b23a; --s-warn-rgb:242,178,58; /* sim --warn */ --s-danger:#ff5a4d; --s-danger-rgb:255,90,77; /* sim --risk */ --s-danger-ink:#ffb0a4; /* alert numerals (.alert) */ --s-info:#5cb4ff; --s-info-rgb:92,180,255; /* ================== COLOR · CLINICAL TRACES (do not remap) =============== Waveform identities from the sim; students learn these associations. Pressure=amber, Flow=green-teal, Volume=blue. Values, not decoration. */ --s-trace-paw:#ffcf47; --s-trace-flow:#2fe3a0; --s-trace-vol:#5cb4ff; /* ============================== FOCUS ==================================== */ --s-focus:#63b6ff; /* trigger-blue: visible against every tone */ --s-ring:0 0 0 2px var(--s-bg-0),0 0 0 4px var(--s-focus); /* ============================ TYPOGRAPHY ================================= */ --s-font-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --s-font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* Modular scale anchored to the sim's actual sizes: 10/11 micro-labels · 12.5 controls · 14 body · 17 lead · 20 h3 · 25 h1 · 33 chip value · 42 room-scale chip value */ --s-fs-2xs:10px; --s-fs-xs:11px; --s-fs-sm:12.5px; --s-fs-md:14px; --s-fs-lg:17px; --s-fs-xl:20px; --s-fs-2xl:25px; --s-fs-3xl:33px; --s-fs-4xl:42px; --s-lh-tight:1.1; --s-lh-snug:1.3; --s-lh-body:1.5; --s-track-tight:-.02em; /* display headings (sim h1/.vb-mode) */ --s-track-label:.12em; /* mono micro-labels (sim panel h3, chips) */ --s-track-wide:.18em; /* eyebrows / join codes */ /* ============================== SPACING ================================== */ --s-sp-1:4px; --s-sp-2:8px; --s-sp-3:12px; --s-sp-4:16px; --s-sp-5:20px; --s-sp-6:24px; --s-sp-8:32px; --s-sp-10:40px; /* =============================== RADIUS ================================== */ --s-r-sm:8px; /* inner chips, kbd, small buttons */ --s-r-md:11px; /* controls, inputs, seg buttons */ --s-r-lg:14px; /* cards, wells (sim --r) */ --s-r-xl:18px; /* panels, modals (sim .panel) */ --s-r-pill:999px; /* ============================= ELEVATION ================================== */ --s-elev-1:inset 0 1px 0 rgba(255,255,255,.03),0 1px 2px rgba(2,6,11,.5),0 5px 16px rgba(2,6,11,.4); --s-elev-2:inset 0 1px 0 rgba(255,255,255,.03),0 18px 44px rgba(0,0,0,.32); /* sim .panel */ --s-elev-3:0 24px 90px rgba(0,0,0,.72); /* sim zoom */ --s-inset-well:inset 0 0 34px rgba(0,0,0,.55); /* sim .scal */ /* Accent glow recipes (sim .btn.primary / .tbtn.on / slider thumb) */ --s-glow-teal:0 4px 16px rgba(var(--s-teal-rgb),.3); --s-onring-teal:0 0 0 1px rgba(var(--s-teal-rgb),.35),inset 0 0 22px rgba(var(--s-teal-rgb),.06); /* =============================== MOTION ================================== Short, eased, purposeful. Nothing bouncy. */ --s-dur-1:120ms; --s-dur-2:180ms; --s-dur-3:260ms; --s-ease:cubic-bezier(.4,0,.2,1); --s-ease-out:cubic-bezier(.16,1,.3,1); /* ============================== Z-INDEX ================================== Slots chosen around the shell's existing stack (scrim 95 · nav 100 · login 200 · sim zoom 290–310). */ --s-z-raised:10; --s-z-sticky:60; --s-z-nav:100; --s-z-modal:320; --s-z-toast:400; /* ============================ CONTROL SIZING ============================= */ --s-ctl-h-sm:32px; --s-ctl-h:40px; --s-ctl-h-lg:48px; --s-tap:44px; /* minimum touch target on student phones */ /* ======================= PAGE ATMOSPHERE (opt-in) ======================== The sim's signature backdrop: cool glow top-center, faint teal top-right, over the deepest canvas. Surfaces adopt it in Steps 2–4 via `background:var(--s-page-glow);` */ --s-page-glow: radial-gradient(1200px 560px at 50% -14%,rgba(24,72,120,.32),rgba(5,8,12,0) 60%), radial-gradient(900px 520px at 92% 0%,rgba(20,120,96,.10),rgba(5,8,12,0) 55%), #05070b; } /* Honor reduced motion everywhere the tokens are consumed. Durations collapse to a near-zero (not exactly 0, so any transitionend hooks still fire). */ @media (prefers-reduced-motion:reduce){ :root{--s-dur-1:.01ms;--s-dur-2:.01ms;--s-dur-3:.01ms} }