/* ============================================================================ PRIMARC TOKENS — canonical design tokens for the whole suite v6.0 · the single source of truth for colour, radius, type, motion. ---------------------------------------------------------------------------- WHY THIS FILE EXISTS The suite declared --p-* in FOUR places with different values: primarc-dashboard/assets/css/base.css primarc-dashboard/assets/css/primarc-redesign.css primarc-dashboard/assets/css/login.css <- missed by the audit primarc-command-center/primarc-command-center.php 15 of the 16 shared names conflicted. Every component already reads var(--p-*) — ~2,100 references — so fixing the VALUES in one place restyles the entire product without touching a single component rule. The existing --p-* names are kept deliberately. Renaming them would mean rewriting 2,100 references for zero user-visible benefit. LOAD ORDER — this must come FIRST, before every other suite stylesheet. primarc-core owns the file; Primarc_Assets registers it as 'primarc-tokens' and every other stylesheet declares it as a dependency. ============================================================================ */ :root, :root[data-theme="dark"] { /* ---- SURFACES --------------------------------------------------------- Four steps, evenly spaced in perceptual lightness (OKLab dL ~ 0.037). The old ramp had three steps at uneven intervals, and the top two were close enough to read as one surface. Near-neutral on purpose: this app sits next to renders and site photos, and a green-cast substrate shifts how they read. */ --p-bg: #080b0a; /* page okL 0.140 */ --p-bg-elev: #121614; /* card, panel - the default okL 0.195 */ --p-bg-elev-2: #1a1e1c; /* inset, hover, nested okL 0.230 */ --p-bg-elev-3: #232725; /* NEW - popover, dropdown okL 0.268 */ --p-surface: var(--p-bg-elev); /* todo.css reads this; it was declared nowhere in the suite */ /* ---- TRANSLUCENT WASHES · v6.3.2 --------------------------------------- The September console does not use the solid ramp above for its cards. It lays near-white at very low alpha over the page, so the radial accent glows behind a card show through it — that translucency is what makes the screen read as the new design rather than as the old one restyled. They live here, not in console.css, because console.css declared them as literals and that made a second source of truth for the same decision. Alpha, not a mixed hex, so they work over any of the four surfaces. */ --p-wash: rgba(255,255,255,0.028); /* card */ --p-wash-hover: rgba(255,255,255,0.05); /* hover, inner card */ --p-hairline: rgba(255,255,255,0.07); /* the console's default rule */ --p-hairline-soft: rgba(255,255,255,0.06); /* row separators inside cards */ /* ---- BORDERS ----------------------------------------------------------- */ --p-border: rgba(255,255,255,0.09); --p-border-strong: rgba(255,255,255,0.16); --p-border-s: var(--p-border); /* command-center alias */ --p-border-h: var(--p-border-strong); /* command-center alias */ /* ---- TEXT -------------------------------------------------------------- THE BIGGEST ACCESSIBILITY FIX IN THIS FILE. --p-text-dim is the second-most-used token in the codebase (232 uses) and at alpha 0.25-0.30 it measured 2.7:1 against the card surface. That fails WCAG AA (4.5:1) and even the large-text floor (3.0:1). --p-text-faint measured 1.51:1 - effectively invisible. Lifting the alphas fixes every one of those usages at once. */ --p-text: rgba(255,255,255,0.94); /* 16.2:1 titles, values */ --p-text-mid: rgba(255,255,255,0.66); /* 8.4:1 body */ --p-text-dim: rgba(255,255,255,0.46); /* 4.7:1 meta - was 2.7:1 */ --p-text-faint: rgba(255,255,255,0.28); /* 2.5:1 decorative ONLY - never for readable text */ /* ---- INPUTS ------------------------------------------------------------ */ --p-input-bg: rgba(255,255,255,0.05); --p-input-border: rgba(255,255,255,0.12); --p-hover-bg: rgba(255,255,255,0.05); /* ---- ACCENT · ONE INTERACTIVE COLOUR ----------------------------------- The suite shipped THREE limes - #cdf24d (dashboard, 50 uses), #9BEF3F (command-center, 12 uses) and #c8ff4d (the new mockups) - plus a forest --p-accent (#2d6b58) and a mint --p-accent-text (#5DD4A8) each doing a second accent job. One lime wins. v6.0 settled on #cdf24d because it had the most existing usage; v6.3.2 moves it the 4 points to #c9f24d, which is the value the September handoff calls exact and final. Two limes 4 points apart is still two limes, and the console is now the product's main surface. RULE: lime means "you can act on this" - primary button, active nav, focus ring, drag target, selected state. Never status, never health, never progress, never an avatar. NOT changed with it: `orbit_worlds.accent_text` and the seeded world definitions still carry #cdf24d. Those are stored data an admin can edit per world, not a token — rewriting them here would overwrite a choice somebody made. The wp-admin menu icon keeps it too; it is painted by WordPress chrome that never loads this file. */ --p-lime-rgb: 201, 242, 77; --p-lime: rgb(var(--p-lime-rgb)); --p-lime-dim: #b4dd3c; /* hover - the handoff's a:hover */ --p-on-lime: #080b0a; /* text on a lime fill - 15.6:1 */ --p-neon: var(--p-lime); /* command-center alias */ --p-accent: var(--p-lime); /* retires #2d6b58 */ --p-accent-2: var(--p-lime-dim); --p-accent-text: var(--p-lime); /* retires #5DD4A8 */ /* Focus. --p-focus is the keyboard ring; --p-focus-glow is the soft halo that component rules pair with border-color:var(--p-accent) on :focus. Both were previously hardcoded as rgba(45,107,88,.15) in 9 places, which is why focus states stayed forest-green after the accent moved to lime. */ --p-focus: 0 0 0 2px var(--p-bg), 0 0 0 4px var(--p-lime); --p-focus-glow: 0 0 0 3px rgba(var(--p-lime-rgb), 0.18); /* ---- AFFIRMATIVE TINT · the pair that was never a token ----------------- About 70 rules hardcode rgba(45,107,88,alpha) as a surface wash and pair it with #5DD4A8 text: "done", "paid", "milestone", "restore", secondary buttons, drag targets. It is a real and coherent pair — but because it was written as a literal and never as a token, it survived every previous unification attempt untouched. Retiring --p-accent did nothing to it. Named here at its EXACT current values, so this pass changes none of those 70 surfaces. Whether it folds into --p-st-done is now a two-line edit instead of a 70-rule sweep. That is the whole point of the layer. Kept as an RGB triple because the usages need arbitrary alphas. */ --p-tint-rgb: 45, 107, 88; --p-tint: rgb(var(--p-tint-rgb)); --p-tint-text: #5dd4a8; /* ---- STATUS · what a project IS ---------------------------------------- Deliberately excludes lime, so status can never be mistaken for a control. All verified >=5.9:1 on --p-bg-elev. */ --p-st-idle: #78877f; /* not active */ --p-st-active: #5ecfb8; /* in progress */ --p-st-review: #7fb3ef; /* in review */ --p-st-hold: #e8c24a; /* on hold */ --p-st-done: #4fbf7a; /* completed */ /* ---- HEALTH · how a project is DOING ----------------------------------- A separate scale from status, on purpose: a project can be IN PROGRESS and SEVERELY LATE at the same time. The threshold lives in ONE place — Primarc_Rest_Api::summary_row() in primarc-core/api/class-rest-api.php — and it is a RATIO against the stage's own standard_days, not a fixed day count: overdue days_in_stage > standard_days severely overdue days_in_stage > standard_days * 1.5 so a 4-day stage and a 40-day stage go amber at their own pace. The API ships stage_overdue / stage_severely_overdue as flags; nothing in CSS or JS re-derives them, and nothing should. --p-h-due has no server-side state yet. It is here so a "due soon" band can be added by extending that one function rather than by inventing a fourth colour at the call site. Always paired with the day count in text, so health never relies on hue alone (~8% of men have some colour-vision deficiency). */ --p-h-ontime: #4fbf7a; /* within standard_days */ --p-h-due: #e8c24a; /* reserved - see note above */ --p-h-over: #ef9a4b; /* stage_overdue */ --p-h-severe: #f0656a; /* stage_severely_overdue */ /* ---- LEGACY SEMANTIC ALIASES ------------------------------------------- Existing rules reference these. Point them at the health scale rather than maintaining a fourth parallel set of near-identical colours. */ --p-warn: var(--p-h-due); --p-warn-text: var(--p-h-due); --p-over: var(--p-h-severe); --p-over-text: var(--p-h-severe); --p-info: var(--p-st-active); --p-info-text: var(--p-st-review); /* ---- PRIORITY (command-center) ----------------------------------------- Was using lime for "critical", which collided with the CTA colour. */ --p-prio-critical: var(--p-h-severe); --p-prio-high: var(--p-h-over); --p-prio-medium: var(--p-h-due); --p-prio-low: var(--p-st-review); --p-prio-backlog: var(--p-st-idle); /* ---- EXTRA ACCENTS · v6.3.2 -------------------------------------------- The four the September handoff lists under "extra", used by the console for things that are neither status nor health: a violet secondary action, a coral warning that is not a health state, a cyan and a green for chart series. Distinct from --p-cat-* below, which is the categorical hue set for pie slices and tag groups; these four are named colours the design asks for by name. */ --p-violet: #a678ff; --p-coral: #ff6f5e; --p-cyan: #4fd8c0; --p-green: #5fc48d; /* ---- CATEGORICAL · charts, dots, tag groups, event types --------------- Hue set for things that are neither status nor health: summary-bar dots, calendar event types, drawing categories, orbit planet themes. Kept separate so nobody reaches for a status colour to fill a pie slice. Named rather than numbered — .cal-evt.evt-meeting reads better as --p-cat-violet than as --p-cat-1. */ --p-cat-violet: #b09ae8; --p-cat-violet-deep: #7c5cbf; --p-cat-sky: #8fcaee; --p-cat-sky-deep: #6fb7d6; --p-cat-cyan: #5dd4d5; --p-cat-teal: #8fc6c6; --p-cat-amber: #f4be5e; --p-cat-clay: #c9785a; --p-cat-orchid: #d987d9; --p-cat-mint: #6fe7b9; --p-cat-rose: #f0a0a0; --p-cat-rose-deep: #ff9a9a; --p-cat-slate: #9aa6b2; /* Numbered aliases — a few call sites already use these. */ --p-cat-1: var(--p-cat-violet-deep); --p-cat-2: var(--p-cat-cyan); --p-cat-3: var(--p-cat-sky); --p-cat-4: var(--p-cat-orchid); --p-cat-5: var(--p-cat-mint); --p-cat-6: var(--p-cat-rose); /* ---- FILL FOREGROUND --------------------------------------------------- White text on a saturated fill — avatars, coloured chips, the WhatsApp badge. Stays white in the light theme too, because the fills stay saturated. ~40 rules wrote this as a literal #fff. */ --p-on-fill: #ffffff; /* Its opposite: near-black on a bright fill. The console's person avatars sit on teal, violet and mint from the per-person colour map, all of which are too light to carry white. Same value as --p-on-lime and deliberately a separate name — one is "text on the accent", this is "text on any bright fill", and they would drift apart the moment the accent moves. */ --p-on-bright: var(--p-bg); /* ---- EMERALD RAMP ------------------------------------------------------ The brand green at four depths. Used by the sign-in sun, the avatar gradient and a handful of two-stop bars. --p-tint (above) is the middle of this ramp; these are its neighbours, previously hardcoded. */ --p-tint-lift: #5fae8c; --p-tint-2: #3a8570; /* was --p-accent-2 */ --p-tint-deep: #1a4a3a; --p-tint-deepest: #0d2b22; /* ---- THIRD-PARTY BRAND ------------------------------------------------- Not ours to restyle. Named so nobody "unifies" it by accident. */ --p-brand-whatsapp: #25d366; --p-brand-whatsapp-on: #06310f; /* ---- DAYBREAK · the sign-in screen's light panel ------------------------ login.css declared its own :root for these. They are a real brand surface, not a legacy alias, so they live here with the rest. */ --p-ground: #e4e6e0; --p-ground-2: #d9dcd4; --p-ground-text: #1d211c; --p-ground-mid: rgba(29,33,28,0.62); /* ---- RADIUS ------------------------------------------------------------ base.css said 10/7/14. primarc-redesign.css overrode to 4/2/6. command-center said 8/6/12. Settling on the sharp scale, which is what is actually on screen today. */ --p-radius-sm: 2px; --p-radius: 4px; --p-radius-lg: 6px; --p-radius-pill: 999px; /* chips, counts - was 99px/999px, ad hoc */ /* ---- TYPE -------------------------------------------------------------- command-center loaded Inter; the dashboard loaded Space Grotesk; base.css imported Outfit and never used it. Same product, three typefaces. Space Grotesk wins - it is the studio's face. */ --p-font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --p-font-brand: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --p-font-mono: "Space Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --p-mono: var(--p-font-mono); /* command-center alias */ /* ---- ELEVATION (new - was ad-hoc per file) ------------------------------ */ --p-shadow-1: 0 1px 2px rgba(0,0,0,.40); --p-shadow-2: 0 4px 12px rgba(0,0,0,.45); --p-shadow-3: 0 16px 40px rgba(0,0,0,.55); /* ---- MOTION ------------------------------------------------------------ Budget: at most ONE ambient loop visible at a time. Everything else transitions on interaction only. */ --p-dur-fast: 120ms; --p-dur: 200ms; --p-dur-slow: 320ms; --p-ease: cubic-bezier(.2,.8,.2,1); } /* ============================================================================ LIGHT THEME base.css already shipped a light theme and the switcher is live in user prefs, but --p-lime (#cdf24d) on white measures 1.2:1 - every primary button was illegible. Only the values that must invert are redeclared. ============================================================================ */ :root[data-theme="light"] { --p-bg: #f5f6f5; --p-bg-elev: #ffffff; --p-bg-elev-2: #eef0ee; --p-bg-elev-3: #e4e7e4; --p-border: rgba(10,13,12,0.10); --p-border-strong: rgba(10,13,12,0.20); --p-text: rgba(10,13,12,0.92); --p-text-mid: rgba(10,13,12,0.68); --p-text-dim: rgba(10,13,12,0.52); --p-text-faint: rgba(10,13,12,0.30); --p-input-bg: rgba(10,13,12,0.04); --p-input-border: rgba(10,13,12,0.14); --p-hover-bg: rgba(10,13,12,0.04); --p-lime-rgb: 79, 125, 12; /* 5.1:1 on white */ --p-lime: rgb(var(--p-lime-rgb)); --p-lime-dim: #3f6409; --p-on-lime: #ffffff; --p-focus-glow: 0 0 0 3px rgba(79,125,12,0.20); --p-tint-rgb: 31, 125, 94; --p-tint-text: #1f7d5e; --p-st-idle: #5c6a63; --p-st-active: #10806a; --p-st-review: #1c5fa8; --p-st-hold: #8a6a05; --p-st-done: #17773f; --p-h-ontime: #17773f; --p-h-due: #8a6a05; --p-h-over: #a1560c; --p-h-severe: #b3242a; /* Categorical hues darken so they still carry on white. */ --p-cat-violet: #5b3f96; --p-cat-violet-deep: #4a3080; --p-cat-sky: #2f6f9e; --p-cat-sky-deep: #245a82; --p-cat-cyan: #10707a; --p-cat-teal: #2a6f6f; --p-cat-amber: #8a6205; --p-cat-clay: #9c4f2e; --p-cat-orchid: #944a94; --p-cat-mint: #14795c; --p-cat-rose: #a44a4a; --p-cat-rose-deep: #8f3535; --p-cat-slate: #55616d; --p-tint-lift: #2f8a68; --p-tint-2: #26705a; --p-tint-deep: #1a4a3a; --p-tint-deepest: #0d2b22; /* On the light theme the daybreak panel and the page are the same family, so the sign-in screen inverts with everything else. */ --p-ground: #ffffff; --p-ground-2: #eef0ee; --p-ground-text: rgba(10,13,12,0.92); --p-ground-mid: rgba(10,13,12,0.68); } /* ============================================================================ ACCESSIBILITY FLOOR None of this existed anywhere in the suite. ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media (prefers-contrast: more) { :root, :root[data-theme="dark"] { --p-border: rgba(255,255,255,0.20); --p-border-strong: rgba(255,255,255,0.34); --p-text-dim: rgba(255,255,255,0.62); --p-text-faint: rgba(255,255,255,0.44); } } /* No :focus-visible rule existed in any of the 13 stylesheets. Anyone navigating by keyboard had no idea where they were. */ :focus-visible { outline: none; box-shadow: var(--p-focus); border-radius: var(--p-radius-sm); } /* ============================================================================ HEALTH UTILITIES Set ONE class from the server's stage_overdue / stage_severely_overdue flags; never hand-assign a colour at the call site. is-severe <- stage_severely_overdue is-over <- stage_overdue is-ontime <- neither dashboard.js and projects-index.js still assign colours inline in a few places (see '#F08080' in dashboard.js). Moving those onto these classes is the next step, and belongs with the shared component layer rather than here. ============================================================================ */ .is-ontime { --p-health: var(--p-h-ontime); } .is-due { --p-health: var(--p-h-due); } .is-over { --p-health: var(--p-h-over); } .is-severe { --p-health: var(--p-h-severe); } .health-text { color: var(--p-health, var(--p-text-mid)); } .health-bg { background: var(--p-health, var(--p-border)); } .health-border { border-color: var(--p-health, var(--p-border)); }