/* ============================================================================
palette.css: "KILN", the whole site's colour, as one file every page loads.
Daniel picked it out of five on 2026-09-12: terracotta on warm paper. It
replaces the cool blue that shipped two days earlier, and this file kept its
shape while changing every value in it, which was the point of building it
this way. (It was called cool.css until the blue went; a file named for a
colour it no longer holds is a trap for whoever reads it next.)
WHY IT IS SO SHORT
It redefines assets/toolpath.css's own :root tokens. That single decision is
what makes it small, and it is worth stating because the first attempt did the
opposite and cost a day.
A custom property whose value contains var() is substituted where it is
DECLARED. toolpath.css declares `--gold: var(--accent)` on :root, so scoping
an `--accent` override to a DESCENDANT (say `.mg`) leaves --gold resolving
against :root's original accent. Twenty-one composed tokens behaved that way
(--gold, --gold-soft, --gold-deep, --accent-soft, --gold-glow*, --grid,
--shadow-card/-float/-btn/-plate, --on-enc*, --enc-line*, --enc-grid,
--on-accent-base) and every one had to be restated by hand.
Overriding at :root, the same element the aliases are declared on, makes all
of them follow for free. Verified in the browser, not assumed. It also fixes
the thing scoping never could: openSheet(), confirmDialog(), toast() and the
FAB all mount on document.body, OUTSIDE any page wrapper, so a scoped palette
never reached a single sheet in the product.
Load it AFTER toolpath.css. Same specificity, so source order decides.
THE SIGNAL, WHICH IS NOW THE OTHER WAY AROUND. Under the blue palette the one
warm thing on screen meant "a job is waiting for you". The accent is warm now,
so that rule would make the whole interface look like an alarm. Inverted: the
accent is terracotta, and --new, the unanswered request, is the one COOL,
saturated blue on the page. It is still the only colour that means that, it is
still the only thing wearing it, and blue for unread is a convention every
person on earth already knows from their phone.
THE ENCLOSURE STAYS NAVY. --dark-1/-2/-3 are untouched, and that is a choice
rather than an omission: the logo is navy outlines with vermillion fills, so
a navy enclosure under a terracotta accent is the mark's own pairing at page
scale.
NOT TOUCHED, deliberately: the material ramp (--pla, --petg, --tpu, --abs,
--resin, --wood, --acrylic, --metal, --fabric), the status colours (--ok,
--err, --warn), WhatsApp green, --protick*, and --craft-gold. Those are
functional colour and legend, not brand, and the craft gold is a colour a
maker CHOSE. Repainting any of them would be a bug, not a refresh.
Light only. No prefers-color-scheme and no [data-theme]: the design system has
no dark variant yet, and a half dark page is worse than no dark page.
Every pair below was measured, not eyeballed. The numbers in the comments are
real contrast ratios against the surface named.
========================================================================== */
:root {
color-scheme: only light; /* "only": a phone's own dark mode must not repaint a light-only site */
/* ---- the kiln palette under its own names ---------------------------- */
--g: #F6F1EA; /* the page ground: warm paper, not white */
--card: #FFFDFA;
--sunk: #EAE0D2; /* a well in the ground */
--glass-2: #E0D3C1; /* a quiet fill that still reads when nested ON --soft */
--tx: #2A2018; /* ink, three steps: 15.7:1 / 7.7:1 / 5.8:1 on --card */
--tx2: #5E4F42;
--tx3: #71624F; /* the faintest step, one shade darker than drawn: 5.8:1 on --card */
--pri: #B0542F; /* white on it 5.05:1, so it may carry a label */
--pri-sh: #8E3F1F; /* 7.2:1, and the hard offset shadow under a pressed button */
--on-pri: #FFFFFF;
--soft: #F4E5D8;
--soft-tx: #8E3F1F; /* 7.2:1 on --card, 5.9:1 on --soft, 5.6:1 on --sunk */
/* The only place white sits on colour, and it carries a store's own name, so
the stops move in HUE rather than in lightness: terracotta, rust, warm plum.
White clears 7.3 / 5.1 / 6.5 on them, and 90% white still clears 4.5. */
--grad: linear-gradient(120deg, #8E3F1F 0%, #B0542F 52%, #8C4A5E 100%);
--sh: rgba(74,48,28,.12);
--ok-sh: #0E8C77; /* --ok itself is functional and stays toolpath's */
--new: #1F5FA8; /* THE one cool hue: a request nobody has answered */
/* /join's measured steps (join.css, join-live.css), here so the colour stays one file */
--jn-edge: #96806A; /* field borders: 3.70:1 on the card, 3.72:1 on a white field */
--jn-tile-edge: #A38C74; /* tiles and choice cards: 3.15:1 on the card */
--jn-ok-text: #0B6355; /* "הכתובת פנויה": 7.06:1 on the card, 6.38:1 on paper */
--jn-ph: var(--tx3); /* placeholders and faint text: 5.81:1 on the card, 5.25:1 on paper */
--jn-wa-ink: #073B2A; /* the WhatsApp glyph on --wa #25D366 (toolpath .btn-wa's own ink), 6.35:1 */
--mark-tile: #F7F5EF; /* the mark's own cream plate (art.js MARK.tile), for a mark set on colour */
/* the device on its print bed: a dark graphite body and bed, decoration only */
--jn-dev-1: #243043; --jn-dev-2: #0B111B; --jn-dev-3: #1A2230; --jn-dev-edge: #02060C; --jn-dev-notch: #03070D;
--jn-bed-1: #33415A; --jn-bed-2: #1B2433;
--new-deep: #164A85; /* 7.2:1 on the badge tint below */
--quoted: #6F55BC; /* the request states, as hues rather than four beiges */
--printing: #0E7A6C;
--printing-deep: #0B6355;
--done: #7C7267; /* white on it 4.7:1, because .mg-tag paints white on this */
--on-tag: #FFFFFF;
--mg-grid: rgba(90,55,30,.05);
/* ---- 60 percent: the ground ------------------------------------------
--powder also draws .receipt's punch holes, so pointing it here stops two
stray dots floating on every review card. Its CHANNELS only ever feed
light-on-dark ramps (--on-enc, --enc-line, --enc-grid), which still work. */
--powder: var(--g);
--powder-rgb: 246,241,234;
--powder-lift: #FCF8F2;
--paper: var(--card);
--paper-rgb: 255,253,250;
--line: #D9C9B4;
--line-soft: var(--sunk);
--glass: var(--glass-2);
/* ---- 30 percent: the ink ---------------------------------------------
--graphite is the body ink AND a dark fill (.btn-primary, .toast). The
enclosure is NOT a third role: --enc/-2/-3 read var(--dark-1...) and those
are declared, so the color-mix fallback naming --graphite never fires.
--dark-1/-2/-3 are already navy and are left exactly as they are. */
--graphite: var(--tx);
--graphite-rgb: 42,32,24;
--ink-soft: #43352A;
--steel-text: #5F503F; /* 7.6:1 on card, and it lands on --sunk and --soft as often as on white: 6.0 / 6.3 there */
/* ---- 10 percent: the accent ------------------------------------------ */
--accent: var(--pri);
--accent-rgb: 176,84,47;
--accent-deep: var(--soft-tx);
--accent-ink: var(--pri-sh);
/* The far stop of .grad-text on a LIGHT ground, and nothing else reads it. It is its own token
rather than --accent-ink, which is what toolpath.css used to point that stop at, because
--accent-ink is the section kicker: the one piece of type Daniel said he could not read, and
it was taken darker for him until it resolved to --pri-sh, the same #8E3F1F that --accent-deep
already sits at 55 percent of the way along. So the second half of every light headline came
out one flat colour. Pointing the kicker back up to lift the gradient would undo his fix, so
the gradient gets its own value instead: #A84B23 is 5.06:1 on the ground, 5.60:1 on the card
and 4.61:1 on --soft, which matters because Hebrew reads right to left and the 100 percent
stop lands on the FIRST word read, so it has to clear 4.5:1 standing alone.
themes.css declares a whole accent scale per theme and would add this beside the --accent-ink
it already sets; no page sets data-theme today, and until one does the fallback chain in
toolpath.css keeps every theme exactly where it is. */
--accent-grad-end: #A84B23;
--accent-bright: #E8905F; /* the step that reads on the dark enclosure: 7.04:1, and 6.43:1 on a dark plate */
/* The bright END of .grad-text on the dark ground. It was #E8905F, the same value as both stops
after it, so an enclosure headline spent a three stop gradient painting one flat colour.
#F4B08A is 9.36:1 on the navy #051C33 and 8.56:1 on a dark plate #08243F, so the movement is
free: the brightest end of the sweep is also the most readable point on it. */
--accent-glow: #F4B08A;
--accent-on-enc: #E8905F;
--accent-kicker: #E8905F;
--accent-light: var(--soft);
--accent-wash: var(--soft);
--accent-pale: var(--sunk);
--accent-pale-warm: var(--sunk);
--accent-sand: var(--sunk);
--accent-dim: var(--pri);
--on-accent: var(--on-pri);
/* the three glyphs that bake their colour into an SVG data URI, so no token
reaches them */
--tick-deep: url("data:image/svg+xml;utf8,");
--tick-accent: url("data:image/svg+xml;utf8,");
--plus-deep: url("data:image/svg+xml;utf8,");
}
/* --- the exemptions: things a token cannot express --------------------------
Rating stars stay GOLD, and they had to get DEEPER to stay gold. They follow
--gold, which is now terracotta, and a terracotta star is not a rating, it is
the accent. The old #E0A32B sat at 2.2:1 on the cool white card and got away
with it; on warm paper it is the same family as the ground and vanishes.
#B8800C is 3.4:1 on the card and 3.1:1 on the ground, clears the 3:1 a
graphical object needs, and reads as brass rather than as the accent. */
.stars svg.on,
.stars-input button.on svg,
.stars-input button:hover svg,
/* The storefront sets its own, more specific star rules in its page