/* DQ Fitness design tokens. One palette, linked by every surface: the marketing site, the athlete app and the coach dashboard. It replaces four independent :root blocks that had already started to disagree with each other, in index.html, app/hub.css, app/index.html and coach/index.html. Two real disagreements were found when they were merged, and both are kept here under separate names so this change is pixel-for-pixel identical to what is live. Pick one of each when you have a minute and delete the other: --green #5FB37A the athlete app's green --green-deep #3FA96A the coach hub's green, 6% darker for no reason anybody remembers --line-red rgba(192,57,43,.4) the app and the coach hub --line-red-soft rgba(192,57,43,.32) the marketing site Nothing in this file is a component or a layout rule. Surface CSS lives in /site.css, /coach/coach.css and /app/hub.css. Versioned in the link, the same as dq-core.js and hub.css. Bump it here, in every page that links it, and in sw.js, together. */ :root{ /* surfaces */ --ink:#0C0C0E; --coal:#141417; --coal2:#1C1D21; --coal3:#26272C; /* red, the brand */ --red:#C0392B; --red-hot:#E74C3C; --red-deep:#8E2A20; /* gold means free, or a caution that is not a fault */ --gold:#FFD21F; /* text */ --bone:#EDE9E3; --white:#FFFFFF; --grey:#8A8A90; --grey-d:#56565B; /* status */ --green:#5FB37A; --green-deep:#3FA96A; --amber:#D9922B; --warn:#E0A030; /* lines */ --line:rgba(255,255,255,.07); --line-red:rgba(192,57,43,.4); --line-red-soft:rgba(192,57,43,.32); --safe-b:env(safe-area-inset-bottom,0px); } /* Light theme for the athlete app. Same brand, inverted surfaces. Red and gold are untouched. The rules that go with it (.top, .tabbar, .quick button) stay in app/hub.css, because they are layout, not palette. */ html[data-dq-theme='light']{ --ink:#F5F3F0; --coal:#FFFFFF; --coal2:#F5F3F0; --coal3:#E7E3DD; --bone:#141410; --white:#000000; --grey:#5A5A60; --grey-d:#83838A; --line:rgba(0,0,0,.09); --line-red:rgba(192,57,43,.35); /* The brand colours have to move in light, and this is measurement rather than taste. At their dark values on cream, gold measures 2.42, green 2.56 and red-hot 3.82. AA wants 4.5 for body text. A gold figure an athlete cannot read is not a brand decision, it is an unreadable number. Only the app and the coach hub set data-dq-theme, so nothing here reaches the marketing site. The dark values above are untouched for that reason: changing one is the website lane's call, not this one's. Three dark values do measure as AA failures and are corrected in app/hub.css, scoped to the app, with the ratios written next to them. */ --red:#A32E22; --red-hot:#B3311F; --red-deep:#7A2018; --gold:#826600; --green:#2F7A48; --green-deep:#276B3D; --amber:#8A5F12; --warn:#8A5F12; } /* =========================================================================== /tokens.css — polish pass additions. APPEND TO THE END of /tokens.css. Nothing above is edited. Two things go in here and nothing else: 1. A corner radius scale. There isn't one today. The app alone ships eight different radii (0, 2, 6, 8, 9, 12, 20, 99) while the coach hub is square except for its dots, so the three surfaces disagree at every corner. Four steps is enough for everything currently drawn. 2. Eight colour concepts that only exist inside dq-core.js today, under its own --dq- prefix. They are real parts of the palette — a sunken ground, a scrim, a bar ground, four status colours — and the only reason they are not here is that they were written in a different file on a different week. Named here, both themes, same values that are live. No rule in this file paints anything. Surface CSS stays in /site.css, /coach/coach.css and /app/hub.css. Bump the version in every page that links tokens.css, and in sw.js, together. =========================================================================== */ :root{ /* ---- corner radius ----------------------------------------------------- r-1 chips, plates, segmented controls, small tags r-2 controls: buttons, inputs, metric chips, close buttons, number tiles r-3 cards, sheets, modals, heroes r-full pills, dots, avatars, rings Deliberately four and not six. Every value currently in the codebase maps onto one of these without a change anybody would notice: 8 and 9 both go to r-2, 20 goes to r-3. The two that stay exactly as they are are 2 and 99, because both are already doing a specific job. */ --r-1:2px; --r-2:6px; --r-3:12px; --r-full:99px; /* ---- text on a brand fill ---------------------------------------------- White on red, in both themes, because red stays dark in light rather than inverting. dq-core.js has had this as --dq-on-brand from the start; the rest of the codebase hardcodes #fff in about a dozen places. It matters because of --white, three lines further down this file, which is set to #000000 in light. --white does NOT mean the colour white, it means the strongest text colour, and anybody reaching for it to put text on a red button gets black on red the moment an athlete picks light. This is the name to reach for instead. */ --on-brand:#FFFFFF; /* ---- promoted from dq-core.js ------------------------------------------ Same values that are live, dark theme. */ --sunken:#0F0F12; /* a ground below the card ground */ --scrim:rgba(6,6,8,.72); /* behind a sheet or a modal */ --bar:rgba(12,12,14,.97); /* sticky header and tab bar ground */ --bar-soft:rgba(12,12,14,.86); /* the same bar over a scrolled page */ --orange:#D4753B; /* between amber and red, load warnings */ --bad:#E8836F; /* a fault, softer than red-hot */ --dimmer:#86868E; /* text below --grey */ --faint:#4A4A50; /* a figure that is absent, not low */ } html[data-dq-theme='light']{ --on-brand:#FFFFFF; /* unchanged: red stays dark in light */ --sunken:#EFEDE8; --scrim:rgba(20,20,16,.45); --bar:rgba(245,243,240,.97); --bar-soft:rgba(245,243,240,.88); --orange:#8A4718; --bad:#B33A22; --dimmer:#5E5E66; --faint:#9A9AA2; } /* ============================================================ THE REPOSITION TOKENS, additive only. Nothing here replaces an existing value and nothing here restyles a screen. From DQ's design bundle, 26 August 2026, verbatim from its own `tokens-diff.css` rather than improved on, because a token block that has been reasoned about elsewhere is not the place to have a second opinion. ONE CORRECTION TO WHERE IT SAID TO PUT THEM. The bundle says the palette lives in thirteen places and to add these to `app/hub.css`. That was true when it was written and is not now: `tokens.css` is the single source of truth and 39 HTML files link it, `app/` and `coach/` among them. The bundle anticipates this and says to use the single source if one has landed. It has. ============================================================ */ /* --- The fourth family ------------------------------------- Newsreader 300 and its italic, with exactly one job: TEXT A COACH WROTE THEMSELVES. A session note, a weekly letter, the verdict on a lift. Never a UI label, never a heading, never marketing copy. The real text exists and is not hypothetical: `coach_reply` on `set_reviews`, rendered in the coach hub with `white-space:pre-wrap` and no tidying, because it is whatever DQ typed. THE FONT ITSELF IS NOT REQUESTED HERE, and that is deliberate. 46 files ask Google Fonts for the other three families and only `app/` and `coach/` will ever set anything in this one, so adding Newsreader to all of them would download a variable serif on thirty marketing pages that cannot use it. On a site being repositioned on how expensive it feels, that is the wrong trade. The token is here so those surfaces can adopt it; the import belongs with them. */ :root{ --font-note:'Newsreader',Georgia,serif; --t-note:17.5px; --t-note-lg:19px; --lh-note:1.6; --weight-note:300; } /* --- Numbers as dials -------------------------------------- `--t-dial` is for a screen built around ONE figure: the unit small in mono beside it, a hairline under it, small tabular rows below. `--num-tabular` goes on every figure that can change in place, so it never shifts width as it updates. A number that jumps sideways when it changes reads as cheap. Tokens only. No screen is restyled to the dial treatment here. */ :root{ --t-dial:82px; --t-dial-sm:54px; --num-tabular:tabular-nums; } /* --- The bone primary action ------------------------------- A white button on near-black is the most expensive button there is, and it frees red to mean something. Red becomes a signal used once per screen: live, recording, over-target, destructive confirm. `.btn-bone` carries no metrics of its own on purpose. It sets ground, ink and border and nothing else, so it inherits whatever `.btn` is on the surface it lands on and stays a drop-in swap for `.btn-red` on all of them. Giving it padding here would fix it to one surface's idea of a button and quietly break the others. */ :root{ --action-bone:var(--bone); --action-bone-hover:var(--white); --on-bone:#14110E; } .btn-bone{background:var(--action-bone); color:var(--on-bone); border:0} .btn-bone:hover{background:var(--action-bone-hover)} /* --- Elevated spacing and slower motion -------------------- These live ALONGSIDE the originals rather than replacing them. The 14px stack gap and 18px card padding stay correct everywhere they are used today. Fewer cards with more room in them is most of the difference between competent and expensive. `--press-scale` IS NOT REMOVED HERE BECAUSE IT DOES NOT EXIST. The bundle asks for it to be taken off anything that is not an athlete-app quick button. Grepped across every css, html and js file in the repo: zero occurrences of the token, and exactly one `scale(.97)`, at `app/hub.css:192` on `.quick button:active`, which is precisely the case the bundle says to keep. So that item is already satisfied and there is nothing to sweep. */ :root{ --pad-card-elev:22px; --gap-stack-elev:18px; --dur-row:.22s; --dur-sheet-slow:.34s; --dur-reveal-slow:.5s; --ease-slow:cubic-bezier(.2,.8,.2,1); }