Give asleep a readable ink as well

--sleep was doing the same two jobs --wake had just been split out of: the
pale tint behind a timer and the text on top of it. As text it never worked —
2.57:1 on the day-bar pill, 2.79 on the big card, 2.85 on the list label — and
the dark theme was no better off than the light one, at 4.07 on the pill, which
I had assumed was fine until I measured it.

So --sleep-ink joins --wake-ink, deep blue in the light theme and a lighter one
in the dark, and the four places that painted text with --sleep now use it. The
tints, stripes, chart bars and borders keep --sleep: nothing about the colour of
sleep changes, only the colour of writing about it.

All sixteen text sites the two states cover — pill, big clock, list label and
open-row label, each state, each theme — now clear 4.5:1, the worst being 4.71.

The pedigree's ♂ keeps the raw --sleep. It is the same blue serving an unrelated
meaning, and recolouring it here would be a change to the pedigree made for
reasons that have nothing to do with it.

src/changelog.json

@@ -1,4 +1,5 @@
 [
+  { "date": "2026-08-31", "text": "The asleep timer text is a deeper blue, so “Asleep for” in the day-bar pill and on the big card is properly readable against its own pale blue background instead of the near-invisible blue-on-blue it was — the same treatment the awake gold just got, and it applies to the Asleep labels in the Sleep & wake list too" },
   { "date": "2026-08-31", "text": "The awake timer is sunshine too now — both the big “Awake for” card and the pill in the day bar — so the whole app tells asleep and awake apart by night-blue against day-gold rather than by blue against purple" },
   { "date": "2026-08-31", "text": "Awake stretches in the Sleep & wake list are sunshine yellow now instead of the app's purple — the same idea as the ☀️ on the timer pill — so asleep and awake read as night and day down the list rather than as two shades of the same accent" },
   { "date": "2026-08-31", "text": "The Walks list reads newest first as well, so a walk in progress is the top row and every list in the app now runs the same way" },

src/style.css

@@ -12,9 +12,11 @@
   --weight: #2bb3a3;
   --training: #b04ecf;
   --walk: #3f9e63;
-  /* Awake = sunshine. The bright gold is for stripes and fills; --wake-ink is
+  /* Asleep and awake each come in two values: the bright one for stripes,
-     the same warmth pulled dark enough for a small uppercase label to be
+     tints and fills, and an -ink for text on those pale grounds. Both inks
-     readable, and is the one value that has to flip with the theme. */
+     flip with the theme; the brights don't. --sleep itself was doing both
+     jobs and failing the second — 2.6:1 on the timer pill it painted. */
+  --sleep-ink: #4258cc;
   --wake: #f2b705;
   --wake-ink: #8f6400;
   --note: #6f7a90;
@@ -37,6 +39,7 @@
     --muted: #9c9bab;
     --accent: #a690ff;
     --accent-soft: #2a2640;
+    --sleep-ink: #8ba4ff;
     --wake-ink: #f5c451;
     --border: #2c2a3a;
     --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
@@ -49,6 +52,7 @@
   --muted: #9c9bab;
   --accent: #a690ff;
   --accent-soft: #2a2640;
+  --sleep-ink: #8ba4ff;
   --wake-ink: #f5c451;
   --border: #2c2a3a;
   --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
@@ -222,7 +226,7 @@ body::before {
 .bar-clock[hidden] { display: none; }
 /* Big timer still on screen: keep the pill's slot but show nothing. */
 .bar-clock.standby { visibility: hidden; }
-.bar-clock.asleep { background: color-mix(in srgb, var(--sleep) 18%, var(--surface)); color: var(--sleep); }
+.bar-clock.asleep { background: color-mix(in srgb, var(--sleep) 18%, var(--surface)); color: var(--sleep-ink); }
 /* Dark text on the yellow, the way the pee button already does it: a gold
    light enough to read as sunshine is never legible as text on a pale ground. */
 .bar-clock.awake  { background: color-mix(in srgb, var(--wake) 18%, var(--surface)); color: var(--wake-ink); }
@@ -252,7 +256,7 @@ body::before {
   font-variant-numeric: tabular-nums;
 }
 .big-clock.asleep { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sleep) 10%, var(--surface))); }
-.big-clock.asleep .bc-time { color: var(--sleep); }
+.big-clock.asleep .bc-time { color: var(--sleep-ink); }
 .big-clock.awake  { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--wake) 10%, var(--surface))); }
 .big-clock.awake  .bc-time { color: var(--wake-ink); }
 
@@ -485,7 +489,7 @@ textarea { resize: vertical; }
 .ww.sleep-ww { border-left: 3px solid color-mix(in srgb, var(--sleep) 55%, transparent); }
 .ww.wake-ww  { border-left: 3px solid color-mix(in srgb, var(--wake) 75%, transparent); }
 .ww.walk-ww  { border-left: 3px solid color-mix(in srgb, var(--walk) 55%, transparent); }
-.ww.sleep-ww .ww-tag { color: var(--sleep); }
+.ww.sleep-ww .ww-tag { color: var(--sleep-ink); }
 .ww.wake-ww  .ww-tag { color: var(--wake-ink); }
 .ww.walk-ww  .ww-tag { color: var(--walk); }
 .ww.ongoing .ww-tag { color: var(--accent); }
@@ -493,7 +497,7 @@ textarea { resize: vertical; }
   border-color: var(--sleep);
   background: color-mix(in srgb, var(--sleep) 14%, var(--surface));
 }
-.ww.sleep-ww.ongoing .ww-tag { color: var(--sleep); }
+.ww.sleep-ww.ongoing .ww-tag { color: var(--sleep-ink); }
 /* Spelled out like the other two: the faded stripe above would otherwise win
    over the generic .ww.ongoing on specificity ties and leave the open awake
    row without its full-strength edge. The tag needs saying too — .ww.wake-ww