@usableapp/cardds 0.7.94 → 0.7.96

package/css/layover.css

@@ -69,19 +69,21 @@
   gap: var(--modal-drawer-gap, var(--sp-1));
   text-align: center;
   background: var(--modal-drawer-bg, var(--card-3-bg));
-  color: var(--modal-drawer-ink, var(--card-3-ink));
-  --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
-  --on-accent: var(--card-3-bg);
+  --dark: var(--card-3-dark);
+  color: var(--modal-drawer-ink, var(--card-ink));
+  --accent: var(--card-ink);     /* the one solid button inverts on the brand drawer */
+  --accent-dark: calc(1 - var(--dark));
 }
 .modal__drawer--light {        /* light: the card's paper, dark words (Lh 2026-09-29) — the one solid button turns dark */
   background: var(--modal-drawer-light-bg, var(--card-bg));
+  --dark: inherit;              /* the card's own side */
   color: var(--modal-drawer-light-ink, var(--card-ink));
   --accent: var(--card-ink);
-  --on-accent: var(--card-bg);
+  --accent-dark: calc(1 - var(--dark));
 }
 /* the CONFIRM: a Modal with no ModalBody: the ModalAsk IS the card, as tall as its words (no fixed band, no second beat) */
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
-.modal__drawer .t-caption { opacity: var(--dim); }
+.modal__drawer .t-caption { color: var(--modal-drawer-caption-ink, var(--card-muted)); }
 .modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */
 /* the answers as WORD buttons (a BtnRow of Btns; Lh 2026-10-11): the row fills the ask with room over it and each button keeps its words on one
    line — left to its words' width the row squeezed two buttons into round blobs, their words on two lines. A quiet button is an outline only,
@@ -190,6 +192,7 @@
   background: var(--banner-bg, var(--ink-tint));
   color: var(--banner-ink, inherit);
   border-block: var(--border-w) solid var(--banner-border, var(--hairline));
+  --card-muted: var(--card-ink); /* a tint of the ink is a ground where no lighter shade holds 4.5:1: its secondary words are the full ink */
   /* a band edge to edge of what holds it — the card's or the screen's inset; no radius, no side border: a band, not a card */
   margin-inline: calc(-1 * var(--card-pad, var(--screen-pad)));
   padding-inline: var(--card-pad, var(--screen-pad));
@@ -243,7 +246,8 @@
   border-radius: var(--float-bar-pill-radius, var(--r-chip));
   border: var(--border-w) solid var(--float-bar-pill-border, var(--action-border));
   background: var(--float-bar-pill-bg, color-mix(in srgb, var(--action-bg) 82%, transparent));
-  color: var(--float-bar-pill-ink, var(--action-ink));
+  --dark: var(--action-dark); /* the pill is the items' ground: the paper's side */
+  color: var(--float-bar-pill-ink, var(--card-ink));
   backdrop-filter: blur(var(--sp-3));
   -webkit-backdrop-filter: blur(var(--sp-3));
   box-shadow: var(--float-bar-pill-shadow, var(--shadow-float));
@@ -259,14 +263,14 @@
   border-radius: var(--float-bar-item-radius, var(--r-chip));
   font: var(--float-bar-item-font, var(--type-caption));
   text-decoration: none;
-  opacity: var(--rest);
+  color: var(--float-bar-item-rest-ink, var(--card-muted));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 /* aria-current="false" is the correct way to mark the OTHER tabs, so the
    bare attribute selector lights every one of them up */
-.float-bar__item[aria-current]:not([aria-current="false"]) { background: var(--accent); color: var(--on-accent); opacity: 1; }
+.float-bar__item[aria-current]:not([aria-current="false"]) { background: var(--accent); color: var(--on-accent); }
 .float-bar > .icon-btn { width: var(--bar-h); height: var(--bar-h); box-shadow: var(--shadow-float); }
 
 /* ---- callout: a small card with a tail — over a map, a media, a mascot ----
@@ -303,7 +307,7 @@
   border-left: 0;
 }
 .callout__title { font: var(--callout-title-font, var(--type-title)); }
-.callout__sub { font: var(--callout-sub-font, var(--type-caption)); opacity: var(--dim); }
+.callout__sub { font: var(--callout-sub-font, var(--type-caption)); color: var(--callout-sub-ink, var(--action-muted)); }
 /* ---- splash: the app's mark at the human centre while it boots (Lh 2026-09-24) ----
    <section class="screen screen--fill splash"><div class="splash__group"><div class="splash__mark">{the app's lottie/img}</div>
      <p class="splash__text">…</p></div></section>
@@ -346,7 +350,8 @@
   border: var(--border-w) solid var(--snackbar-border, transparent);
   border-radius: var(--snackbar-radius, var(--r-card));
   background: var(--snackbar-bg, var(--signal-ok-soft));
-  color: var(--snackbar-ink, var(--on-surface));
+  --dark: var(--surface-dark); /* the signal's soft ground is a tint of the screen: the screen's side */
+  color: var(--snackbar-ink, var(--card-ink));
   box-shadow: var(--snackbar-shadow, var(--shadow-float));
   font: inherit; text-align: start;
   pointer-events: auto;
@@ -354,5 +359,5 @@
 .snackbar__body > .icon { flex: none; color: var(--snackbar-icon-ink, var(--signal-ok)); }
 .snackbar__words { display: grid; min-width: 0; overflow-wrap: anywhere; }
 .snackbar__text { font: var(--snackbar-text-font, var(--type-body)); }
-.snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); opacity: var(--dim); }
+.snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); color: var(--snackbar-caption-ink, inherit); } /* on the signal's soft ground the full ink: a muted shade there fell under AA */
 @media (prefers-reduced-motion: reduce) { .snackbar { transition: none; } }

package/css/lists.css

@@ -32,7 +32,6 @@
 .row__body { flex: 1; min-width: 0; display: grid; gap: var(--row-body-gap, var(--sp-0)); }
 .row__title { font: var(--row-title-font, var(--type-title)); overflow-wrap: anywhere; } /* wraps freely — no clip, so no padding trick for Thai marks (Lh 2026-09-16, same call as the card heading) */
 .row__meta { font: var(--row-meta-font, var(--type-caption)); color: var(--row-meta-ink, var(--card-muted)); display: flex; align-items: center; gap: var(--row-meta-gap, var(--sp-1)); }
-.card--3 .row__meta { color: var(--card-3-muted); }
 .row__end { margin-left: auto; text-align: right; display: grid; gap: var(--row-end-gap, var(--sp-0)); justify-items: end; flex: none; }
 .row--lg { min-height: var(--row-lg-min-h, var(--fab)); } /* menu rows: a taller target, round arrow at the end; .rows gives them more air */
 .row--lg .row__title { font: 700 var(--fs-lg)/1.2 var(--font-display); }
@@ -51,7 +50,6 @@
    at --tap-sm, but not an input: nothing to press. */
 .row--done { pointer-events: none; cursor: default; }
 .row--done .row__title { color: var(--card-muted); }
-.card--3 .row--done .row__title { color: var(--card-3-muted); }
 .row__done {
   width: var(--row-done-size, var(--tap-sm));
   height: var(--row-done-size, var(--tap-sm));
@@ -96,7 +94,6 @@
 .kv-cell > .icon { margin-bottom: var(--sp-1); }
 .kv-cell__val { font: var(--kv-cell-val-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
 .kv-cell__key { font: var(--kv-cell-key-font, var(--type-caption)); color: var(--kv-cell-key-ink, var(--card-muted)); }
-.card--3 .kv-cell__key { color: var(--card-3-muted); }
 
 /* ---- bubble: a chat message — theirs on the left, mine on the right (Lh 2026-09-18, replaces the chip's tail) ----
    No tail: a rounded block whose corner nearest the sender is square-ish
@@ -125,7 +122,8 @@
   border-radius: var(--bubble-body-radius, var(--r-card));
   border-bottom-left-radius: var(--r-control);
   background: var(--bubble-body-bg, var(--card-2-bg));
-  color: var(--bubble-body-ink, var(--card-2-ink));
+  --dark: var(--card-2-dark);
+  color: var(--bubble-body-ink, var(--card-ink));
   font: var(--bubble-body-font, var(--type-body));
   overflow-wrap: anywhere;
 }
@@ -136,10 +134,9 @@
   color: var(--on-accent);
   text-align: right;
 }
-.bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--on-surface-muted)); }
+.bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--card-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
-.bubble__meta > .icon { color: var(--accent); }
-.card--3 .bubble__meta { color: var(--card-3-muted); }
+.bubble__meta > .icon { color: var(--bubble-meta-icon-ink, var(--accent-ink)); }
 
 /* ---- timeline: a hairline with date chips, entries to the right ----
    <ol class="timeline"><li class="timeline__item"><span class="timeline__mark">Wed 14</span><p class="t-body">…</p></li>…</ol> */
@@ -182,7 +179,6 @@
 /* ---- legend: signal dots with captions ----
    <div class="legend"><span class="legend__item"><span class="dot"></span> very high</span>…</div> */
 .legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font: var(--legend-font, var(--type-caption)); color: var(--legend-ink, var(--card-muted)); }
-.card--3 .legend { color: inherit; opacity: 0.8; }
 .legend__item { display: inline-flex; align-items: center; gap: var(--legend-item-gap, var(--sp-2)); min-height: var(--legend-item-min-h, var(--icon)); }
 
 /* ---- link: "See all ↗" in a card head, big enough to tap ----
@@ -203,7 +199,6 @@
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
 .link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a Countdown) */
 .link--wait { font-variant-numeric: tabular-nums; } /* the countdown's digits keep their width: the words do not jiggle each second */
-.card--3 .link--muted { color: var(--card-3-muted); }
 
 /* ---- bullets: a list, each item led by a small square picture as tall as a line of its words (Lh 2026-09-28, timebank #153) ----
    <ul class="bullets"><li class="bullets__item"><img class="bullets__pic" alt=""><span class="bullets__text">…</span></li></ul>

package/css/media.css

@@ -10,9 +10,9 @@
      <div class="row">…meta…</div></article> */
 .card--cover {
   --card-bg: var(--card-3-bg);
-  --card-ink: var(--card-3-ink);
-  --accent: var(--card-3-ink);
-  --on-accent: var(--card-3-bg);
+  --dark: var(--card-3-dark);
+  --accent: var(--card-ink);
+  --accent-dark: calc(1 - var(--dark));
   min-height: var(--_cover-min-h);
   align-content: space-between;
   overflow: hidden;
@@ -38,8 +38,6 @@
   z-index: -1;
   background: linear-gradient(to bottom, var(--scrim), transparent 40% 60%, var(--scrim));
 }
-.card--cover .t-muted { color: inherit; opacity: 0.75; }
-.card--cover .row__meta { color: inherit; opacity: 0.85; }
 
 /* ---- quote: giant mark, big text, attribution ----
    <blockquote class="quote"><p class="quote__text">It's overcast…</p><footer class="quote__by">Wednesday 15</footer></blockquote> */
@@ -74,35 +72,40 @@
   border: var(--border-w) solid var(--tile-border, var(--outline));
   border-radius: var(--tile-radius, var(--r-card));
   background: var(--tile-bg, var(--action-bg));
-  color: var(--tile-ink, var(--action-ink));
+  --dark: var(--action-dark); /* a tile is a surface: the paper's side (a toned tile takes its tone's, below) */
+  color: var(--tile-ink, var(--card-ink));
   font: inherit;
   text-align: left;
   position: relative;
 }
 .tile__label { font: var(--tile-label-font, var(--type-title)); }
 .tile__value { font: var(--tile-value-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
-.tile__sub { font: var(--tile-sub-font, var(--type-caption)); opacity: var(--dim); }
+.tile__sub { font: var(--tile-sub-font, var(--type-caption)); color: var(--tile-sub-ink, var(--card-muted)); } /* the muted words of the tile's ground; --dim faded the full ink to 2.4–3.4:1 */
 .tile__text { display: grid; gap: var(--tile-text-gap, var(--sp-0)); }
-.tile--on { background: var(--tile-on-bg, var(--accent)); color: var(--tile-on-ink, var(--on-accent)); border-color: transparent; }
+.tile--on { background: var(--tile-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--tile-on-ink, var(--card-ink)); border-color: transparent; }
 /* .tile--pick's hidden input and :has(:checked) fill are declared once in choice.css, alongside .chip--pick and .mood__opt */
 .tile--wide { grid-column: 1 / -1; }
 /* stat: READ, not pressed — no frame of its own inside a card (a frame says "tap me"): icon · value · words on the card's ground */
-.tile--stat { border-color: transparent; background: none; padding-inline: 0; min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
+/* a stat tile has no fill of its own, so it has no ink of its own: it takes the ink of what it stands on (currentColor on `color`
+   = the inherited colour), as the card's heading does. It kept the plain tile's --action-ink, dark on a dark card (timebank, tone 3,
+   Lh 2026-10-18). --tile-ink still overrides; a toned stat tile (.tile--N, below) takes its fill and its ink back */
+.tile--stat { --dark: inherit; color: var(--tile-ink, currentColor); border-color: transparent; background: none; padding-inline: 0; min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
 /* upload: dashed, centred plus + label */
 .tile--upload {
   border-style: dashed;
   background: transparent;
   color: inherit;
+  --dark: inherit;
   align-content: center;
   justify-items: center;
   gap: var(--tile-upload-gap, var(--sp-2));
   text-align: center;
 }
 /* tinted tiles: slot colors inside a card (schedule, notes) */
-.tile--2 { background: var(--tile-2-bg, var(--card-2-bg)); color: var(--tile-2-ink, var(--card-2-ink)); border-color: transparent; }
-.tile--4 { background: var(--tile-4-bg, var(--card-4-bg)); color: var(--tile-4-ink, var(--card-4-ink)); border-color: transparent; }
-.tile--5 { background: var(--tile-5-bg, var(--card-5-bg)); color: var(--tile-5-ink, var(--card-5-ink)); border-color: transparent; }
-.tile--3 { background: var(--tile-3-bg, var(--card-3-bg)); color: var(--tile-3-ink, var(--card-3-ink)); border-color: transparent; }
+.tile--2 { background: var(--tile-2-bg, var(--card-2-bg)); --dark: var(--card-2-dark); color: var(--tile-2-ink, var(--card-ink)); border-color: transparent; }
+.tile--4 { background: var(--tile-4-bg, var(--card-4-bg)); --dark: var(--card-4-dark); color: var(--tile-4-ink, var(--card-ink)); border-color: transparent; }
+.tile--5 { background: var(--tile-5-bg, var(--card-5-bg)); --dark: var(--card-5-dark); color: var(--tile-5-ink, var(--card-ink)); border-color: transparent; }
+.tile--3 { background: var(--tile-3-bg, var(--card-3-bg)); --dark: var(--card-3-dark); color: var(--tile-3-ink, var(--card-ink)); border-color: transparent; }
 
 /* ---- fold: a sticky-note corner on any card (decorative) ----
    No border. The card's outline follows its border box, so it ran straight
@@ -225,7 +228,7 @@
 }
 .postcard__turn:focus-visible { outline-offset: calc(-1 * var(--sp-1)); } /* the ring inside the card's edge */
 /* the front: the photo (or the wireframe box) fills it; the band reads on a scrim */
-.postcard__front { background: var(--postcard-front-bg, var(--card-3-bg)); color: var(--postcard-front-ink, var(--card-3-ink)); }
+.postcard__front { background: var(--postcard-front-bg, var(--card-3-bg)); --dark: var(--card-3-dark); color: var(--postcard-front-ink, var(--card-ink)); }
 .postcard__front .postcard__turn > img,
 .postcard__front .postcard__turn > .ph {
   position: absolute;
@@ -248,7 +251,8 @@
 /* the back: paper — the caption and the name packed at the middle, big enough to read at arm's length */
 .postcard__back {
   background: var(--postcard-back-bg, var(--card-2-bg));
-  color: var(--postcard-back-ink, var(--card-2-ink));
+  --dark: var(--card-2-dark);
+  color: var(--postcard-back-ink, var(--card-ink));
   transform: rotateY(180deg);
 }
 .postcard__back .postcard__turn { align-content: start; padding-top: var(--postcard-back-top, 20%); gap: var(--postcard-back-gap, var(--sp-5)); } /* the name a fifth down the paper, the words after it */
@@ -266,7 +270,7 @@
 }
 .postcard__band > * { pointer-events: auto; }
 .postcard__words { display: grid; gap: var(--postcard-words-gap, var(--sp-1)); flex: 1; min-width: 0; pointer-events: none; }
-.postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-3-ink)); --on-accent: var(--postcard-front-bg, var(--card-3-bg)); }
+.postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-ink)); --accent-dark: calc(1 - var(--dark)); }
 .postcard__band .icon-btn[aria-pressed="true"] .icon { fill: currentColor; }
 .postcard.is-flipped > .postcard__front { transform: rotateY(-180deg); }
 .postcard.is-flipped > .postcard__back { transform: rotateY(0); }

package/css/numbers.css

@@ -45,25 +45,21 @@
 .track {
   --_step: calc(var(--tap-base) * 2 / 3); /* 32 the round of one step */
   --_pad: calc((var(--header-h) - var(--_step)) / 2); /* 14 round + its room = the top bar's height; the end rounds sit concentric in the pill */
-  --_bg: var(--card-3-bg);
-  --_ink: var(--card-3-ink);
-  /* the track lays down its own dark ground, so like the dark card slot it
-     re-points the accent to its own ink (README rule 10). Without this, any
-     palette where --accent equals --card-3-bg — field, hydro, and the
-     wireframe default — paints done steps invisibly on the track. */
-  --accent: var(--_ink);
-  --on-accent: var(--_bg);
+  /* the track lays down the accent fill of where it stands (the brand on a light card, the card's ink on the brand card), so it is a
+     surface of that fill's side; its steps re-point the accent to its ink, as the brand card slot does (README rule 10) */
+  --dark: var(--accent-dark);
   list-style: none;
   margin: 0;
   padding: var(--track-pad, var(--_pad));
   display: flex;
   align-items: center;
   border-radius: var(--track-radius, var(--r-chip));
-  background: var(--_bg);
-  color: var(--_ink);
+  background: var(--accent);
+  color: var(--card-ink);
 }
-.card--3 .track { --_bg: var(--card-3-ink); --_ink: var(--card-3-bg); }
 .track__step {
+  --accent: var(--card-ink);
+  --accent-dark: calc(1 - var(--dark));
   flex: 1;
   display: flex;
   align-items: center;
@@ -75,7 +71,7 @@
   content: "";
   flex: 1;
   height: var(--sp-2);
-  background: var(--ink-rail); /* the track's own ink at 30% — identical to color-mix(in srgb, var(--_ink) 30%, transparent): --ink-rail already reads currentColor, and .track sets color to --_ink */
+  background: var(--ink-rail); /* the track's own ink at 30%: --ink-rail reads currentColor */
 }
 .track__step:first-child::before { display: none; }
 .track__step.is-done::before { background: var(--accent); }
@@ -87,8 +83,9 @@
   padding: calc(var(--_step) * 7 / 32); /* the glyph = 18 in the 32 round */
   border-radius: 50%;
   background: var(--ink-rail);
-  color: var(--_ink);
+  color: var(--card-ink);
 }
+.track__step > .track__dot { background: var(--ink-tint); } /* a number is words: on the 30% rail it fell under 4.5:1 on a mid-dark track; the 12% tint is what every tone holds its ink on */
 .track__step > .track__dot { /* a number in the round (TrackStep num) */
   display: grid; place-items: center; box-sizing: border-box;
   font: var(--track-dot-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
@@ -185,10 +182,11 @@
   font: var(--picker-item-font, var(--type-stat));
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
-  opacity: var(--faint);
+  --_rest: var(--picker-rest-ink, var(--card-muted)); /* the values either side: the ground's muted words (they faded to 0.3, 1.8:1) */
+  color: var(--_rest);
   text-align: center;
 }
-.picker__item[aria-selected="true"] { opacity: 1; }
+.picker__item[aria-selected="true"] { color: var(--card-ink); }
 /* centre rules either side of the selected value */
 .picker::before,
 .picker::after {
@@ -204,10 +202,10 @@
 .picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
-  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); } /* opacity: var(--faint) already set above — the animation alone is new here */
+  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); }
   @keyframes picker-focus {
-    0%, 100% { opacity: var(--faint); }
-    45%, 55% { opacity: 1; }
+    0%, 100% { color: var(--_rest); }
+    45%, 55% { color: var(--card-ink); }
   }
 }
 

package/css/palette.css

@@ -3,156 +3,138 @@
    Apply with <html data-palette="clay"> (or <body>).
    No attribute = wireframe grayscale from tokens.css.
    Each palette overrides role tokens only — components never change.
+   A palette sets its grounds, its two ink sets (onlight, ondark; README "Ink follows its ground") and the side of any ground
+   that is not the default's (tokens.css: tones 1, 2, 4 and the paper light; tone 3, tone 5 and the brand dark). Each ink set
+   holds 4.5:1 on every ground of its side; a tone with words on its 12% tint (a banner, a step bar, today) holds them there too.
    ============================================================ */
 
 /* ---- CLAY — earth-toned: cream surface, terracotta / mustard / ink cards ---- */
 [data-palette="clay"] {
   --surface: #ece5d8;
-  --on-surface: #191713;
-  --on-surface-muted: #6f675a;
+  --ink-onlight: #191713;  --ink-onlight-muted: #2a2723;  /* the terracotta is a middle ground: no muted shade a step lighter holds 4.5:1 on it (4.6) */
+  --ink-ondark: #f4efe4;   --ink-ondark-muted: #aeaaa1;   /* 4.6:1 on tone 5's grey */
 
-  --card-1-bg: #e8b647;  --card-1-ink: #191713;  /* mustard hero */
-  --card-2-bg: #e05c3a;  --card-2-ink: #191713;  /* terracotta */
-  --card-3-bg: #1c1a17;  --card-3-ink: #f4efe4;  /* ink */
+  --card-1-bg: #e8b647;  /* mustard hero */
+  --card-2-bg: #eb6644;  /* terracotta, a step lighter: the ink 5.5:1, 4.5 on its own tint (#e05c3a was 4.9 and 4.1) */
+  --card-3-bg: #1c1a17;  /* ink */
 
-  --card-border: transparent;
-  --card-muted: #45412f;       /* 5.5:1 on the mustard card — AA for captions and metas (#55503f was 4.3:1) */
-  --card-2-muted: var(--card-2-ink); /* terracotta holds 5:1 for its ink alone; nothing lighter passes AA, so tone 2 has no muted */
-
-  --accent: #1c1a17;     --on-accent: #f4efe4;
-  --action-bg: #f7f3e9;  --action-ink: #191713;  --action-border: transparent;
+  --accent: #1c1a17;
+  --action-bg: #f7f3e9;  --action-border: transparent;
 
   --pos: #3e7d4f;  --neg: #c23c1d;
-  --dot-a: #e05c3a;  --dot-b: #6f6be0;
+  --dot-a: #eb6644;  --dot-b: #6f6be0;
+  /* the signals, deep enough for words on the terracotta (4.5:1) and so on every lighter ground; nearly the ink, the hue stays */
+  --signal-ok-onlight: #1b2c18;  --signal-warn-onlight: #2f280d;  --signal-error-onlight: #471a17;  --signal-info-onlight: #1d2938;
 }
 
 /* ---- ROAST — coffee: warm cream surface, caramel accent ---- */
 [data-palette="roast"] {
   --surface: #f6f1e7;
-  --on-surface: #2b211a;
-  --on-surface-muted: #8c7f70;
-
-  --card-1-bg: #ffffff;  --card-1-ink: #2b211a;
-  --card-2-bg: #e9dcc6;  --card-2-ink: #2b211a;
-  --card-3-bg: #b97e3c;  --card-3-ink: #fdf9f1;
+  --ink-onlight: #2b211a;  --ink-onlight-muted: #5e554d;  /* 4.6:1 on the water note, the darkest light ground */
+  --ink-ondark: #fdf9f1;   --ink-ondark-muted: #ecdfcb;   /* 4.6:1 on the caramel */
 
-  --card-border: transparent;
-  --card-muted: #8c7f70;
+  --card-1-bg: #ffffff;
+  --card-2-bg: #e9dcc6;
+  --card-3-bg: #8c5402;  /* caramel, on its own hue as far as the light ink holds 4.5:1 on it and on its tint (#b97e3c held it at 3.3) */
 
-  --accent: #b97e3c;     --on-accent: #fdf9f1;
-  --action-bg: #ffffff;  --action-ink: #2b211a;  --action-border: transparent;
+  --accent: #8c5402;
+  --action-bg: #ffffff;  --action-border: transparent;
 
   --pos: #3e7d4f;  --neg: #bf4028;
-  --dot-a: #b97e3c;  --dot-b: #2b211a;
+  --dot-a: #8c5402;  --dot-b: #2b211a;
 }
 
 /* ---- HYDRO — cool shiny blue: airy surface, saturated blue CTA ---- */
 [data-palette="hydro"] {
   --surface: #e9f0fb;
-  --on-surface: #17203a;
-  --on-surface-muted: #64729a;
+  --ink-onlight: #17203a;  --ink-onlight-muted: #4e566c;  /* 4.6:1 on the water note, the darkest light ground */
+  --ink-ondark: #ffffff;   --ink-ondark-muted: #e0e6f9;   /* 4.6:1 on the blue */
 
-  --card-1-bg: #ffffff;  --card-1-ink: #17203a;
-  --card-2-bg: #cddcf7;  --card-2-ink: #17203a;
-  --card-3-bg: #3d63e0;  --card-3-ink: #f2f6ff;
+  --card-1-bg: #ffffff;
+  --card-2-bg: #cddcf7;
+  --card-3-bg: #365bd7;  /* white 5.7:1, 4.5 on its tint (#3d63e0 was 5.2 and 4.1) */
 
-  --card-border: transparent;
-  --card-muted: #64729a;
-
-  --accent: #3d63e0;     --on-accent: #f2f6ff;
-  --action-bg: #ffffff;  --action-ink: #17203a;  --action-border: transparent;
+  --accent: #365bd7;
+  --action-bg: #ffffff;  --action-border: transparent;
 
   --pos: #2e8f52;  --neg: #d13b1a;
-  --dot-a: #3d63e0;  --dot-b: #eec85a;
+  --dot-a: #365bd7;  --dot-b: #eec85a;
 }
 
-/* ---- ORCHARD — modern earth: calm, real, touchable (Lh 2026-09-25). Linen base, bone paper, moss brand; every
-   tone's ink + muted is a deep shade of ITS OWN ground, so lines (currentColor mixes: --hairline, --outline, field
-   edges) come out as a darker tint of the ground under them — never a grey on a warm card. Four highlights for the
-   atmosphere, off the earth wheel on purpose: maple red · bright yellow · sky · fuchsia. ---- */
+/* ---- ORCHARD — modern earth: calm, real, touchable (Lh 2026-09-25). Linen base, bone paper, moss brand. Four highlights for
+   the atmosphere, off the earth wheel on purpose: maple red · bright yellow · sky · fuchsia. ---- */
 [data-palette="orchard"] {
   --surface: #f4efe6;          /* linen */
-  --on-surface: #2a241c;       /* umber */
-  --on-surface-muted: #6e6353;
-
-  --card-1-bg: #fbf8f2;  --card-1-ink: #2a241c;                          /* bone paper — sheets */
-  --card-2-bg: #e6d8bf;  --card-2-ink: #33291c;                          /* sand */
-  --card-3-bg: #5c6b47;  --card-3-ink: #f6f1e6;  --card-3-muted: #d3d8c4; /* moss — the brand */
-  --card-4-bg: #d3d9c4;  --card-4-ink: #2b3322;  --card-4-muted: #515c42; /* sage mist */
-  --card-5-bg: #dcc2a6;  --card-5-ink: #3a2a1c;  --card-5-muted: #6b503a; /* clay */
+  --ink-onlight: #2a241c;  --ink-onlight-muted: #565148;  /* umber; muted 4.6:1 on the clay tone */
+  --ink-ondark: #f6f1e6;   --ink-ondark-muted: #d7d6c6;   /* linen; muted 4.6:1 on the moss */
 
-  --card-border: transparent;
-  --card-muted: #736754;
-  --card-2-muted: #66573f;
+  --card-1-bg: #fbf8f2;  /* bone paper — sheets */
+  --card-2-bg: #e6d8bf;  /* sand */
+  --card-3-bg: #52613d;  /* moss — the brand: its ink 5.9:1, 4.5 on its tint (#5c6b47 was 5.1 and 4.0) */
+  --card-4-bg: #d3d9c4;  /* sage mist */
+  --card-5-bg: #dcc2a6;  --card-5-dark: 0;  /* clay: a light tone here */
 
-  --accent: #5c6b47;     --on-accent: #f6f1e6;
-  --action-bg: #fbf8f2;  --action-ink: #2a241c;  --action-border: transparent;
+  --accent: #52613d;
+  --action-bg: #fbf8f2;  --action-border: transparent;
 
   /* highlights — decoration and atmosphere, a small dose: counts, marks, chart dots, a badge on a tile */
-  --highlight-1: #d93a1f;  /* maple red */
+  --highlight-1: #d03114;  /* maple red — the linen ink 4.5:1 on it (#d93a1f was 4.1) */
   --highlight-2: #f5c518;  /* bright yellow */
   --highlight-3: #3a9fe0;  /* sky */
-  --highlight-4: #e0457b;  /* fuchsia */
+  --highlight-4: #ca2e69;  /* fuchsia — the linen ink 4.5:1 on it (#e0457b was 3.5) */
   --dot-a: var(--highlight-1);  --dot-b: var(--highlight-3);
 
   /* signals from Sweet Salmon #dd9787 — words and edges, always with an icon */
-  --pos: #6f8f5a;  --neg: #c4694f;
-  --signal-error: #b5503b;  /* salmon, deepened */
-  --signal-warn: #a0721f;   /* ochre */
-  --signal-ok: #4f7f4a;     /* leaf */
-  --signal-info: #4d6f96;   /* slate */
+  --pos: #6f8f5a;  --neg: #ad553b;  /* a falling delta's linen words 4.5:1 (#c4694f was 3.4) */
+  --signal-error-onlight: #82402f;  --signal-warn-onlight: #6b4e1b;  --signal-ok-onlight: #3e5a37;  --signal-info-onlight: #40556c;  /* 4.5:1 on the clay tone */
+  --signal-error-ondark: #f9ccc0;  --signal-warn-ondark: #f2d28b;  --signal-ok-ondark: #cfe6b8;  --signal-info-ondark: #c5d7ef;  /* the same hues, 4.5:1 on the moss */
 }
-/* on the dark moss card the signals turn to their light shades — the same hues, readable on the ground */
-/* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a knob) */
-[data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, #fff8f0); }
-[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); color: var(--tile-badge-ink, #2a241c); }
-[data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 40%, transparent)); }
-/* fields are WHITE boxes on every ground (Lh 2026-09-25) — the words typed in them read dark, even on the moss card */
-[data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: #2a241c; }
-[data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: #2a241c; }
+/* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a
+   knob). Each fill says its side; the words on it follow */
+[data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, var(--ink-ondark)); }
+[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); --dark: 0; }
+[data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 15%, transparent)); }
+/* fields are WHITE boxes on every ground (Lh 2026-09-25): a light ground, so the words typed in them are onlight, even on the moss card */
+[data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: var(--ink-onlight); }
+[data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: var(--ink-onlight); }
 /* the vivid ones, tried on the live parts (Lh 2026-09-25): primary = yellow · a user avatar = fuchsia · ring = sky · a switch on = sky · maple only on small dots (the count, dot a); the chosen stack tab stays moss */
-[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, #2a241c); }
-[data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); color: var(--avatar-ink, #ffffff); }
+[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
+[data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); --dark: 1; }
 [data-palette="orchard"] .ring::before { background: conic-gradient(var(--highlight-3) calc(var(--value) * 1%), var(--ink-tint) 0); }
-[data-palette="orchard"] .toggle:checked { background: var(--highlight-3); }
-[data-palette="orchard"] .toggle:checked::after { background: #ffffff; }
-[data-palette="orchard"] .card--3 { --signal-error: #f4b7a6; --signal-warn: #f1d18a; --signal-ok: #cfe6b8; --signal-info: #bcd0ec; }
+[data-palette="orchard"] .toggle:checked { background: var(--highlight-3); --accent-dark: 0; } /* sky is a light ground: its knob is onlight */
 
 /* ---- VERS — Lh's own-palette pick (2026-09-25): white surface, champagne paper, sage brand; earth tones for tones 2·4·5 ---- */
 [data-palette="vers"] {
   --surface: #ffffff;
-  --on-surface: #1f1b16;
-  --on-surface-muted: #6b6358;
-
-  --card-1-bg: #f6e7cb;  --card-1-ink: #1f1b16;  /* paper — Champagne */
-  --card-2-bg: #e3cfa6;  --card-2-ink: #1f1b16;  /* sand */
-  --card-3-bg: #678d58;  --card-3-ink: #ffffff;  /* brand — Sage */
-  --card-4-bg: #c9d6b0;  --card-4-ink: #1f1b16;  --card-4-muted: #4a5438;  /* lichen */
-  --card-5-bg: #d4bf9c;  --card-5-ink: #1f1b16;  --card-5-muted: #5e4a36;  /* wheat — bark was too dark */
-
-  --card-border: transparent;
-  --card-muted: #6b5f4c;
-  --card-2-muted: #5c4f3a;
-  --card-3-muted: #dfe8d6;
-
-  --accent: #678d58;     --on-accent: #ffffff;
-  --action-bg: #f6e7cb;  --action-ink: #1f1b16;  --action-border: transparent;
-
-  /* signals from Sweet Salmon #dd9787, deepened to read on white/champagne */
-  --pos: #7fa86f;  --neg: #dd9787;
-  --signal-error: #b5503b;  /* salmon */
-  --signal-warn: #a5782a;   /* ochre */
-  --signal-ok: #4f7f4a;     /* leaf */
-  --signal-info: #4d6f96;   /* slate */
+  --ink-onlight: #1f1b16;  --ink-onlight-muted: #534f4c;  /* 4.5:1 on the wheat */
+  --ink-ondark: #ffffff;   --ink-ondark-muted: #dee5dc;   /* 4.6:1 on the sage */
+
+  --card-1-bg: #f6e7cb;  /* paper — Champagne */
+  --card-2-bg: #e3cfa6;  /* sand */
+  --card-3-bg: #496d3a;  /* brand — Sage, on its own hue as far as white holds 4.5:1 on it and on its tint (#678d58 held it at 3.8) */
+  --card-4-bg: #c9d6b0;  /* lichen */
+  --card-5-bg: #d4bf9c;  --card-5-dark: 0;  /* wheat — a light tone here */
+
+  --accent: #496d3a;
+  --action-bg: #f6e7cb;  --action-border: transparent;
+
+  /* signals from Sweet Salmon #dd9787, deepened to read on every light ground (4.5:1 on the wheat) */
+  --pos: #7fa86f;  --neg: #a76557;  /* the salmon deepened as far as a falling delta's white words hold 4.5:1 (#dd9787 was 2.4) */
+  --signal-error-onlight: #803c2d;  --signal-warn-onlight: #654b1e;  --signal-ok-onlight: #3b5734;  --signal-info-onlight: #3c5169;
   --dot-a: #dd9787;  --dot-b: #b08a5a;
 }
 
-/* Colored palettes trade wireframe outlines for soft elevation. */
+/* Colored palettes add a soft elevation under the card's edge. */
 [data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
 /* COLOURED MODE is the attribute, whatever its value: a project with colours of its own (the five
    --color-* bases, or roles, in its theme.css) writes <html data-palette="own"> — no block here matches
    "own", so only the three generic rules apply: the card's shadow, the soft outline, the field's soft
-   edge (forms.css); and the two wireframe borders step back, as in every stock palette. */
-[data-palette] { --card-border: transparent; --action-border: transparent; }
+   edge (forms.css); and the controls' wireframe border steps back, as in every stock palette.
+   THE CARD KEEPS AN EDGE (Lh 2026-10-18, timebank's help sheet: white cards on the white sheet, "no different from
+   the background at all"). A card is one boundary, and WCAG 2.2 SC 1.4.11 asks 3:1 for it against what it stands
+   on. Light cards on a light ground cannot reach 3:1 by fill (a tone-1 card in a tone-1 sheet is 1:1), so the
+   edge carries it: the muted ink of the ground, which every palette already holds to AA on its surface.
+   `cardGrounds()` measures each tone on each ground (tests/card-grounds.spec.js). */
+[data-palette] { --card-border: var(--on-surface-muted); --action-border: transparent; }
 /* …but controls keep a faint edge so they still read as controls */
 [data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }

package/css/people.css

@@ -16,7 +16,8 @@
   display: grid;
   place-items: center;
   background: var(--avatar-bg, var(--card-2-bg));
-  color: var(--avatar-ink, var(--card-2-ink));
+  --dark: var(--card-2-dark);
+  color: var(--avatar-ink, var(--card-ink));
   font: var(--avatar-font, var(--type-label));
   font-size: calc(var(--_size) * 0.3);
   text-transform: uppercase;
@@ -30,10 +31,10 @@
 .avatar--lg { --_size: var(--avatar-lg); }
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
 /* outline avatar: no fill, an edge — icons in a ring, "add" slots */
-.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
-.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); }
+.avatar--outline { background: transparent; --dark: inherit; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
+.avatar--add { background: transparent; --dark: inherit; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); }
 /* accent avatar: the "+7" tail, the selected person */
-.avatar--on { background: var(--avatar-on-bg, var(--accent)); color: var(--avatar-on-ink, var(--on-accent)); }
+.avatar--on { background: var(--avatar-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--avatar-on-ink, var(--card-ink)); }
 /* halo: faint concentric rings behind a hero avatar (decorative) */
 .avatar--halo::before {
   content: "";

package/css/post.css

@@ -6,7 +6,8 @@
 /* ---- post-paper: the card stock. Its own ground and ink, wherever it lies; its parts read --_muted and --_rule ---- */
 .post-paper {
   background: var(--post-paper-bg, var(--card-1-bg));
-  color: var(--post-paper-ink, var(--card-1-ink));
+  --dark: var(--card-1-dark);
+  color: var(--post-paper-ink, var(--card-ink));
   border-radius: var(--post-paper-radius, var(--sp-2));
   box-shadow: var(--post-paper-shadow, var(--shadow-card));
   --_muted: var(--post-paper-muted-ink, var(--card-muted));