/* Eve unified design tokens.
Source of truth for the DARK palette: handoff/Design-unified/Eve Shell.dc.html
(Claude Design project "Merging three health apps into one"). Those values are
lifted verbatim from the mock; do not invent new ones.
⚠️ ONE COPY, SERVED BY BOTH SIDES — the same rule as shared/public/recorder.js.
This used to be two byte-identical files, unified/public/tokens.css and
coach/public/tokens.css. That was survivable while there was one palette. With
two it is not: a light mode maintained in two places drifts, and the way it
drifts is "the coach's light mode is a different colour from the client's" —
two people looking at the same number on differently-coloured cards, which is
exactly what C17 exists to prevent. Both servers mount shared/public at
/shared, so both link /shared/tokens.css and there is one palette.
── Why the light palette is derived, not lifted ─────────────────────────────
The mock is dark-only, so there is nothing to copy for the light side. It is
derived from the dark one by holding the SEMANTICS fixed and re-deriving the
values, which is not the same as inverting them:
* Elevation flips direction. In dark, a card is LIGHTER than the page. In
light, a card is WHITE and the page is a soft grey — the card still reads
as floating, but by being brighter than its surround in one case and
cleaner in the other. A literal inversion would give dark-grey cards on a
black page, which reads as sunken.
* The accent cannot be inverted. Periwinkle #93a2f6 is chosen to be legible
ON near-black; on white it is 2.1:1, which is not text. The light accent
is a deeper indigo at 5.5:1 — still periwinkle in character, legible in
the direction that matters here.
* Same for the status colours. Mint #3ad0a4 on white is 1.9:1 and amber
#f2b544 is 1.9:1 — both effectively invisible. Their light counterparts
are darkened to ≥4.9:1. They stop being neon and start being ink, because
on a white card that is what a colour has to be.
* The hairlines are white alphas in dark and black alphas in light, at
slightly higher opacity: the same percentage of black on white reads
stronger than white on black, but a 5% line on white is barely there, so
the values are nudged rather than mirrored.
── How a theme is selected ──────────────────────────────────────────────────
shared/public/theme.js ALWAYS stamps a resolved data-theme on , so this
file needs no @media block: dark is the base and light is an override. If the
script never runs — JS off, an offline miss — the page is dark, which is what
it was before any of this existed. That is the right way for it to fail. */
:root {
color-scheme: dark;
--canvas: #07090e; /* page behind everything */
--bg: #0b0e15; /* screen background */
--card: #12161f; /* solid card */
--card-line: rgba(255,255,255,0.05);
--sub-line: rgba(255,255,255,0.07); /* set-row sub-cards */
--chip-line: rgba(255,255,255,0.09); /* hairline chips */
--chip-line-2: rgba(255,255,255,0.1);
--field: rgba(255,255,255,0.05); /* search fields, quiet chips */
--val: rgba(255,255,255,0.06); /* value chips (load × reps) */
--track: rgba(255,255,255,0.07); /* progress-bar track */
--track-2: rgba(255,255,255,0.08);
--hatch: rgba(255,255,255,0.14); /* dashed drop zones */
--grip: rgba(255,255,255,0.18); /* sheet grab handle */
--wash: rgba(255,255,255,0.03); /* faintest fill on a card */
--ink: #eef1f6; /* primary text */
--ink-2: #c6ccda; /* emphasis inside secondary text */
--ink-3: #aab1c0; /* header pill text */
--dim: #8b93a4; /* secondary */
--faint: #5b6270; /* tertiary / decorative */
--ghost: #454c5b; /* drag handles, off dock items */
--dock-dim: #6b7383; /* inactive dock labels */
--acc: #93a2f6; /* periwinkle — the single action color */
--acc-tint: rgba(147,162,246,0.12);
--acc-tint-2: rgba(147,162,246,0.14);
--acc-border: rgba(147,162,246,0.35);
--acc-border-strong: rgba(147,162,246,0.5);
--good: #3ad0a4; /* mint — status only, never actions */
--good-border: rgba(58,208,164,0.35);
--good-border-strong: rgba(58,208,164,0.4);
--warn: #f2b544;
--warn-border: rgba(242,181,68,0.35);
--bad: #e5655e;
--bad-border: rgba(229,101,94,0.35);
--sheet: #151a26; /* bottom sheets */
--dock-bg: rgba(24,29,42,0.94);
--scrim: rgba(5,7,11,0.5);
/* ⚠️ --bg AT ZERO ALPHA, and it has to be a token rather than `transparent`.
The dock fade is linear-gradient(var(--bg) → nothing); `transparent` is
transparent BLACK, so on a light page the gradient interpolates through
grey and leaves a dirty haze above the dock. This is the same colour as
--bg with alpha 0, per theme, so it fades to nothing visibly. */
--bg-0: rgba(11,14,21,0);
--shadow: rgba(0,0,0,0.4); /* floating dock button */
--shadow-drawer: rgba(0,0,0,0.45); /* coach chat drawer, narrow screens */
--r-card: 24px;
--r-sub: 18px; /* set-row sub-cards, space rows in switcher */
--r-btn: 16px; /* buttons (Start session, Finish, Discard) */
--r-chip: 10px; /* RIR chips, back buttons */
--r-val: 12px; /* value chips in session */
--r-sheet: 28px;
--r-pill: 999px;
--ease: cubic-bezier(.2, .7, .2, 1);
--tap-min: 44px;
}
/* ── DAY ────────────────────────────────────────────────────────────────────
Only the colours change. Radii, easing and the 44px tap minimum are the same
design in both themes; a light mode that also changed the geometry would be a
second design to maintain rather than a second palette.
⚠️ `color-scheme` is not decoration. This app is full of
and , and the native date picker, the number spinners
and the scrollbars take their appearance from this property alone — not from
any colour we set. Without it a light page opens a black date picker. */
:root[data-theme="light"] {
color-scheme: light;
--canvas: #e7e9ef;
--bg: #f2f3f7;
--card: #ffffff;
--card-line: rgba(15,20,35,0.09);
--sub-line: rgba(15,20,35,0.10);
--chip-line: rgba(15,20,35,0.12);
--chip-line-2: rgba(15,20,35,0.14);
--field: rgba(15,20,35,0.05);
--val: rgba(15,20,35,0.06);
--track: rgba(15,20,35,0.08);
--track-2: rgba(15,20,35,0.10);
--hatch: rgba(15,20,35,0.18);
--grip: rgba(15,20,35,0.20);
--wash: rgba(15,20,35,0.03);
--ink: #10131a;
--ink-2: #2b3140;
--ink-3: #444b5c;
--dim: #626a7b; /* 5.4:1 on a white card */
--faint: #838b9a; /* 3.3:1 — tertiary and decorative only */
--ghost: #a3aab8;
--dock-dim: #6e7686;
--acc: #4c5fd0; /* 5.5:1 on white, and takes white text at 4.9:1 */
--acc-tint: rgba(76,95,208,0.10);
--acc-tint-2: rgba(76,95,208,0.13);
--acc-border: rgba(76,95,208,0.35);
--acc-border-strong: rgba(76,95,208,0.55);
--good: #0d8062; /* 4.9:1 */
--good-border: rgba(13,128,98,0.35);
--good-border-strong: rgba(13,128,98,0.45);
--warn: #9a6400; /* 5.0:1 */
--warn-border: rgba(154,100,0,0.35);
--bad: #c62f26; /* 5.5:1 */
--bad-border: rgba(198,47,38,0.35);
--sheet: #ffffff;
--dock-bg: rgba(250,251,253,0.94);
--scrim: rgba(15,18,26,0.32);
--bg-0: rgba(242,243,247,0);
/* Shadows stay black in both themes — they are absence of light, not a
colour — but a 40% black shadow that reads as depth on a dark page reads
as dirt on a white one. Same shadow, less of it. */
--shadow: rgba(15,20,35,0.18);
--shadow-drawer: rgba(15,20,35,0.22);
}
/* Legacy aliases — earlier screens were written against the first token set;
these map the old names onto the new design's values so both vocabularies
render identically. New code uses the new names.
Everything here except the three literal tints derives, so it themes for
free; the tints have to be restated below. */
:root {
--panel: var(--card);
--panel-2: var(--field);
--line: var(--chip-line);
--ink-dim: var(--dim);
--ink-faint: var(--faint);
--accent: var(--acc);
--accent-tint: var(--acc-tint);
--accent-band: var(--acc-border);
--good-tint: rgba(58, 208, 164, 0.10);
--warn-tint: rgba(242, 181, 68, 0.10);
--radius-card: var(--r-card);
--radius-btn: var(--r-val);
--radius-pill: var(--r-pill);
--pad-card: 18px;
--gap-card: 12px;
}
:root[data-theme="light"] {
--good-tint: rgba(13, 128, 98, 0.10);
--warn-tint: rgba(154, 100, 0, 0.10);
}
body {
background: var(--bg);
color: var(--ink);
font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
}
.num { font-variant-numeric: tabular-nums; }