/* ══════════════════════════════════════════════════════════════════ QMyTurn — Canonical design tokens Load this FIRST, before any stylesheet that resolves var(--qmt-*). Currently linked from header_links.php only, because the public pages are the only consumers so far. Add the link to a back-end head include (dashboard-clinic/, qmyturn_admin/, doctors/) at the point a rule there first references a token -- not before. A stylesheet that nothing consumes is a request every visitor pays for and no screen uses. WHY THIS FILE EXISTS Until now the site carried four independent, non-overlapping token sets that knew nothing about each other: 1. styles/design4.css --d4-* the public marketing pages 2. styles/style.css --blue, Shards Dashboard Lite's Bootstrap 4 styles/dashboard.css --primary palette, duplicated verbatim in both 3. clinic_page.php --ink, an inline set on the public clinic --accent page, its own naming convention 4. web-lcd/index*.php --bg1, one inline set per LCD design The result is measurable drift. A survey of the non-vendor PHP and CSS counted SEVEN different blues in live use, none of which is a token anywhere outside its own file: #007bff 471x Bootstrap 4 default, inherited from the Shards theme #217ed5 59x the customised Shards accent (style/dashboard.css) #1565c0 38x chatbot, admin/clinic/LCD dark themes, registration #0d47a1 18x the dark companion in those same gradients #1d6fa4 6x design4.css's marketing primary #1e88e5 3x web-lcd's light LCD design #0d7490 1x clinic_page.php's accent RESOLVED 2026-09-14 -- #1565c0 (--qmt-blue-800) is canonical. User's call, made as a brand decision, not a refactor: it was already the majority value (38 occurrences vs. #1d6fa4's 6) and it's the blue in the brand's own navy->blue->cyan gradient. design4.css's --d4-blue now aliases --qmt-blue-800 instead of --qmt-blue-marketing (below), which is why that token has zero live consumers as of this change -- kept defined rather than deleted, as the historical record of what the marketing pages used before this decision. Every other value above is still just recorded, not chosen -- picking one for a Bootstrap-default or Shards-accent surface would be a much larger visual change than this one was, since those blues carry far more live surface area (471x and 59x respectively) than #1d6fa4 did. ADOPTION RULE Migrate a declaration onto a token only when the token's value is byte-identical to the literal it replaces. Where a literal sits off the scale, leave it and flag it rather than snapping it silently; a mass find-and-replace across stylesheets this old is how you get regressions nobody notices for a month. ── WHAT IS DELIBERATELY NOT CONSOLIDATED, AND WHY ── clinic_page.php and web-lcd/index*.php are NOT drift. The clinic page's palette (--paper/--ink/--busy/--open/--wait) shares exactly two values with anything here -- #fff and its own accent -- and the other eleven are genuinely different colours serving a queue-status display, not a stale copy of the marketing set. The LCD sets are a shipped feature: a clinic picks a design, and the designs are meant to look unalike. Repointing either at this file would be a redesign wearing a refactor's clothes. style.css and dashboard.css ARE true duplication -- the same 33-line Shards/Bootstrap 4 :root, verbatim, in both. Moving it here is the obvious next step and there is a trap in it worth knowing about first: those names (--primary, --blue, --danger...) are ALSO defined by bootstrap.css's own :root. Today style.css and dashboard.css load AFTER bootstrap and win on source order. A file loaded FIRST, as this one is, would lose that tie and hand every one of those values back to Bootstrap's defaults. Whoever does that move has to either keep the Shards block last or scope it above :root -- not simply cut and paste it up here. ══════════════════════════════════════════════════════════════════ */ :root { /* ──────────────────────────────────────────────────────────────── BRAND RAMP Ordered dark to light. The -900/-800/-600 rungs are the values already load-bearing across the back-end panels and the LCD designs; they are named by weight rather than by the surface that happens to use them today, so a surface can move between rungs without the token name becoming a lie. ──────────────────────────────────────────────────────────────── */ --qmt-navy: #1a237e; /* deepest rung: registration hero gradients */ --qmt-blue-900: #0d47a1; /* dark companion in every primary gradient */ --qmt-blue-800: #1565c0; /* most-used brand blue across the back end */ --qmt-blue-600: #217ed5; /* the customised Shards accent */ --qmt-blue-500: #1e88e5; /* light LCD design */ /* Surface-specific blues. --qmt-blue-clinic is still live and deliberately NOT aliased onto a ramp rung -- see the "NOT CONSOLIDATED" note below for why clinic_page.php's palette is a separate system, not drift. --qmt-blue-marketing is now RETIRED, zero live consumers -- kept only as the historical record of design4.css's pre-2026-09-14 primary, in case anything ever needs to know what it was. Nothing should reference it going forward. */ --qmt-blue-marketing: #1d6fa4; /* retired -- see above */ --qmt-blue-clinic: #0d7490; /* clinic_page.php accent */ /* Supporting brand colours */ --qmt-teal: #34b89a; /* marketing accent */ --qmt-ink-navy: #00103a; /* marketing footer ground only */ /* ──────────────────────────────────────────────────────────────── NEUTRALS Biased slightly toward the brand blue rather than pure grey, so borders and muted text sit in the same family as the accent instead of reading as a separate, colder system. ──────────────────────────────────────────────────────────────── */ --qmt-white: #fff; --qmt-surface: #fff; /* card / panel ground -- separate from --qmt-white on purpose: one is a colour, the other is a role, and only the role should move if surfaces ever go off-white */ --qmt-bg: #f8fbff; /* page ground, faint blue cast */ --qmt-bg-tint: #e8f4fb; /* banded section ground */ --qmt-border: #dde4ef; --qmt-text: #1a2744; --qmt-muted: #6b7a99; --qmt-muted-soft: #8f9db3; /* fine print, one step lighter than muted */ /* ──────────────────────────────────────────────────────────────── SEMANTIC Each state is a pair: a saturated value for text and icons, and a soft companion for the ground behind them. Kept separate from the brand ramp -- a status colour must not shift when the brand blue is repointed. ──────────────────────────────────────────────────────────────── */ --qmt-success: #059669; --qmt-success-soft: #d1fae5; --qmt-warning: #d97706; --qmt-warning-soft: #fef3c7; --qmt-info: #00b8d8; /* No --qmt-danger-soft yet. --qmt-danger is the Shards value, in real use across the back end; nothing on any surface pairs a soft ground with it, and inventing one here would put a colour in the palette that no screen has ever rendered. Add it when a screen needs it. */ --qmt-danger: #c4183c; /* ──────────────────────────────────────────────────────────────── TYPE SCALE Promoted here from design4.css so every surface can reach it, not just the marketing pages. An audit counted 26 distinct font sizes on the homepage alone, most of them one-off values set inline. 0.75rem is the floor deliberately: anything smaller falls under the 12px accessibility threshold. ──────────────────────────────────────────────────────────────── */ --qmt-fs-xs: 0.75rem; /* 12px - pill labels, badges, fine print */ --qmt-fs-sm: 0.82rem; /* 13px - captions, secondary notes */ --qmt-fs-base: 0.88rem; /* 14px - body */ --qmt-fs-md: 1.1rem; /* 18px - lead paragraphs */ --qmt-fs-lg: 1.4rem; /* 22px - card and sub-section headings */ --qmt-fs-xl: 2rem; /* 32px - section headings */ --qmt-fs-2xl: 2.8rem; /* 45px - hero */ /* ──────────────────────────────────────────────────────────────── SPACING SCALE design4.css alone carries 25 distinct padding/margin/gap values. The nine rungs below already cover more than half of its occurrences exactly; the remainder (0.2, 0.65, 0.9, 1.1, 1.25, 1.75rem and friends) are off-scale and stay as literals until someone deliberately decides where each one belongs. ──────────────────────────────────────────────────────────────── */ --qmt-space-1: 0.25rem; --qmt-space-2: 0.5rem; --qmt-space-3: 0.75rem; --qmt-space-4: 1rem; --qmt-space-5: 1.5rem; --qmt-space-6: 2rem; --qmt-space-7: 3rem; --qmt-space-8: 4rem; --qmt-space-9: 5rem; /* section band top/bottom */ /* ──────────────────────────────────────────────────────────────── RADIUS Four rungs plus two shapes. design4.css had eight distinct radii, including a 7px and a 10px sitting one pixel off their neighbours for no reason anyone recorded. ──────────────────────────────────────────────────────────────── */ --qmt-radius-sm: 6px; --qmt-radius-md: 8px; --qmt-radius-lg: 12px; --qmt-radius-xl: 16px; --qmt-radius-pill: 2rem; --qmt-radius-circle: 50%; /* ──────────────────────────────────────────────────────────────── ELEVATION TINT There is deliberately no --qmt-shadow-sm/md/lg here. design4.css carries ten box-shadows and all ten are distinct -- no two share a geometry, so no named elevation rung could be adopted without changing how something looks. Tokenising them would produce a palette nothing could use. What IS shared is the tint: nine of the ten were originally the marketing blue decomposed by hand as rgba(29,111,164, a) -- #1d6fa4. That hidden coupling is exactly why this token exists instead of nine literal decompositions: writing shadows as rgba(var(--qmt-shadow-tint), .12) meant the 2026-09-14 canonical-blue decision below was a ONE-LINE change here instead of a 9-site find and replace across design4.css. The alpha stays at the call site, since that is the part that genuinely differs per shadow. Updated 2026-09-14 to rgb(21,101,192) -- #1565c0, the new canonical blue -- so the glow under every button/card tracks the brand colour it's actually shadowing, rather than quietly keeping the retired hue. ──────────────────────────────────────────────────────────────── */ --qmt-shadow-tint: 21, 101, 192; }