/* Design tokens for the dashboards (Mocha, picked 21 Oct 2026). Values from projects/active/design-system/palettes-2026-10-21/v6-build/mocha-tokens.json
   and knowledge/design/DESIGN.md "Tokens". Everything is scoped to .ui26 so Maggie's training screens (app.css) do not move.
   Raw colours live only in this file. Load it after app.css and before dash/dash.css. */
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }

.ui26 {
  --bg: #F4F1EF;
  --surface: #FFFFFF;
  --surface-2: #ECE6E3;
  --ink: #351D2D;
  --muted: #7F5F54;
  --line: #E7E0DC;
  --jacob: #d1a836; --jacob-text: #7a6427; --jacob-on: #351D2D;
  --maggie: #72498a; --maggie-text: #72498a; --maggie-on: #FFFFFF;
  --p2: #A47864; --p2-text: #805f51; --p2-on: #351D2D;
  --p3: #744245; --p3-text: #744245; --p3-on: #FFFFFF;
  --p4: #857A78; --p4-text: #6c6463; --p4-on: #351D2D;
  --spin: #59aaf8; --spin-text: #3a6896; --spin-on: #351D2D;
  --food: #267a08; --food-text: #257608; --food-on: #FFFFFF;
  /* Us page: selected segment is the mocha text shade with white in light, the mocha fill with the page colour in dark */
  --p2-fill: var(--p2-text); --p2-fill-on: #FFFFFF;
  --scrim: rgb(53 29 45 / .38);
  --shadow-float: 0 -8px 32px rgb(53 29 45 / .16);
  /* aliases for the names app.css gives the dashboards */
  --card: var(--surface); --soft: var(--surface-2); --d: var(--jacob); --c: var(--maggie); --b: var(--ink);
  --d-t: color-mix(in oklch, var(--jacob) 14%, var(--surface)); --c-t: color-mix(in oklch, var(--maggie) 14%, var(--surface)); --b-t: color-mix(in oklch, var(--p2) 14%, var(--surface));
  --r: 16px;
  --font: "DM Sans", -apple-system, system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  color-scheme: light dark;
  color: var(--ink);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
  .ui26 {
    --bg: #161214;
    --surface: #221C1F;
    --surface-2: #2F272B;
    --ink: #F5E9DF;
    --muted: #A78B82;
    --line: #362D31;
    --jacob: #b58e18; --jacob-text: #b58e18; --jacob-on: #161214;
    --maggie: #966cb0; --maggie-text: #a784bd; --maggie-on: #120E10;
    --p2: #B48A76; --p2-text: #b48a76; --p2-on: #161214;
    --p3: #8F5A5D; --p3-text: #ae888a; --p3-on: #161214;
    --p4: #9C918F; --p4-text: #9c918f; --p4-on: #161214;
    --spin: #225bb9; --spin-text: #6d93d1; --spin-on: #161214;
    --food: #3f6e35; --food-text: #799a72; --food-on: #161214;
    --p2-fill: var(--p2); --p2-fill-on: var(--bg);
    --scrim: rgb(0 0 0 / .55);
    --shadow-float: 0 -8px 32px rgb(0 0 0 / .5);
  }
}
.ui26 body { font-family: var(--font); background: var(--bg); color: var(--ink); }