/* ============================================================ MECH DASHBOARD — DESIGN TOKENS (REDESIGN-PROMPT §3) The single source of truth for color, type, spacing, geometry, elevation and motion. styles.css and the JS MOTION module both read from here — nothing below this file should hardcode a hex, a spacing px, a radius, a duration or an easing. Values are carried verbatim from the v3 "Drawing Room" look so the token swap is visually identical; only NEW tokens were added. Loaded BEFORE styles.css in index.html / tv.html. Status-color contract (hard rule): --org = MP safety orange = the ONE signal accent. --ok / --warn / --crit / --info carry FIXED meaning (good / caution / loss-or-late / neutral-info) and are the ONLY other colors allowed. They are never decoration. ============================================================ */ :root{ /* ---- surfaces (graphite paper → carbon panels) ---- */ --paper:#080a0d; /* matte-black room backdrop */ --panel:#10141a; /* anodized graphite */ --panel2:#171c24; /* lifted control surface */ --panel3:#1d232d; /* highest static surface */ --well:#0a0d11; /* recessed data well */ --line:rgba(188,202,220,.12); /* quiet structural rule */ --line2:rgba(202,214,230,.22); /* emphasized divider / frame */ --hair:rgba(255,255,255,.055); /* faint inner hairline */ --hair-w:1px; /* every rule is 1px — this is a drawing */ /* ---- ink ---- */ --ink:#f4f6f8; /* drafting-paper white */ --dim:#a0a8b4; /* brushed aluminum */ --dim2:#68717e; /* tertiary / annotation ink */ /* ---- micro-contrast washes + soft rules (21st overhaul, surface 1) ---- the "Charcoal Ink" layering: interaction states are ink WASHES over the surface, not new surface colors; interior dividers are half-opacity so the 1px frame rules stay the strongest line on the sheet. */ --wash-1:rgba(244,246,248,.045); /* hover wash */ --wash-2:rgba(244,246,248,.085); /* active / selected wash */ --line-soft:rgba(188,202,220,.075);/* interior divider */ --panel-glass:rgba(16,20,26,.72);/* panel glass for backdrop strips */ --paper-glass:rgba(8,10,13,.88); /* paper glass for sticky heads */ /* ---- THE accent (orange = signal, nothing else) ---- */ --org:#ff7a1a; --org-hi:#ff8c3a; /* hover / pressed lift */ --org-dim:rgba(255,122,26,.14); /* accent wash (fills, glows) */ --on-accent:#0c0e11; /* ink ON an orange fill (= --paper) */ /* ---- status semantics (fixed meaning, never decoration) ---- */ --ok:#3dd68c; --warn:#ffb020; --crit:#ff4d5e; --info:#4d9fff; /* status tints — the .5 "line" + .08 "wash" pair used by chips/badges */ --ok-line:rgba(61,214,140,.5); --ok-dim:rgba(61,214,140,.08); --warn-line:rgba(255,176,32,.5); --warn-dim:rgba(255,176,32,.08); --crit-line:rgba(255,77,94,.5); --crit-dim:rgba(255,77,94,.08); --info-line:rgba(77,159,255,.5); --info-dim:rgba(77,159,255,.08); /* ---- blueprint grid (the app's only texture) ---- */ --blueprint:rgba(126,150,178,.045); --grid-size:96px; /* legacy aliases (status only) + muted categorical hues for the event legend — categorical hues are for the calendar legend ONLY, never KPIs */ --green:var(--ok); --amber:var(--warn); --red:var(--crit); --blue:var(--info); --purple:#9a7bff; --cyan:#56c8d8; --pink:#d774b8; /* ---- type ---- */ --body:"InterX",-apple-system,"Segoe UI",sans-serif; /* text + every number */ --disp:"Chakra Petch","Segoe UI",sans-serif; /* small-caps annotations only */ --num:"InterX",sans-serif; /* tabular numerals */ /* role: InterX 600 tabular carries ALL numerals/big values; Chakra Petch is demoted to small-caps callout labels (panel title strips, axes, chips). */ /* ---- spacing — 8px grid (4px half-step) ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px; /* note: a few dense list rows still use 10/14px optical half-steps carried from v3; those stay literal until the §2 screen rebuilds revisit them. */ /* ---- geometry — near-square. a drawing, not a SaaS app ---- */ --r:4px; --r-lg:10px; /* ---- elevation — the app is flat; depth is a hairline + one soft cast ---- */ --shadow-float:0 18px 42px rgba(0,0,0,.48); /* ISO cutouts lifting off paper */ --shadow-panel:0 0 0 1px rgba(255,255,255,.025),0 18px 46px rgba(0,0,0,.22); --shadow-hero:0 0 0 1px rgba(255,122,26,.08),0 28px 70px rgba(0,0,0,.34); --ring-accent:0 0 0 3px var(--org-dim); /* orange focus/active glow */ /* ============================================================ MOTION (REDESIGN-PROMPT §4) — ONE set of durations + easings. JS (GSAP) reads the same numbers via the MOTION module in common.js; CSS reads the *s tokens directly. Keep them in sync. ============================================================ */ --dur-fast:.12s; /* micro: hovers, toggles */ --dur-1:.2s; /* title sweep, small state changes */ --dur-2:.32s; /* section enter (interactive) */ --dur-3:.38s; /* slide card cascade (TV) */ --dur-slow:.5s; /* deliberate, large moves */ --stagger:.035s; /* per-item cascade delay */ --ease-out:cubic-bezier(.16,.84,.44,1); /* ≈ power2.out — the house ease */ --ease-inout:cubic-bezier(.65,0,.35,1); /* ≈ power2.inOut */ --ease-exit:cubic-bezier(.76,0,.24,1); /* splash exit ONLY (preloader) */ /* ambient idle loops for the wall (long, low-energy, never distracting) */ --amb-pulse:2.4s; /* LED / live-dot breathing */ --amb-conveyor:1.2s; /* pipeline conveyor dashes */ --amb-ticker:60s; /* revision-strip ticker scroll */ --amb-drift:22s; /* TV card/sheet gradient drift — very slow */ /* premium interaction (interactive mode only — never the wall) */ --lift:-3px; /* hover card lift */ --tilt:5deg; /* max tilt-on-hover rotation */ --e-hover:0 14px 34px rgba(0,0,0,.55); /* elevated shadow on hover */ --spot:180px; /* cursor spotlight radius */ }