/* ============================================================================= SONDA - DESIGN TOKENS Version: v1.0.0 | Date: 19.08.2026 | Origin: 57U, D-91 NOTHING USES THIS FILE YET, AND THAT IS THE POINT. It is placed now so the DESIGN STOP reskin is an afternoon of editing values rather than a rewrite of a page that hard-codes them. public/index.html deliberately does NOT link it: server.js serves exactly one file today and has no static route, so a link here would be a request that 404s. WHEN THE STATIC ROUTE EXISTS, index.html links this file and deletes its own inline scaffold block. Until then these values live in ONE place - here - and the scaffold uses literals, because two copies of a token is the desync tax LAW 05 rule 6 exists to refuse. Values below are the DESIGN CANON floor, not a decision. Every one is expected to change at DESIGN STOP. ========================================================================== */ :root { /* surface. THE GROUND IS A REFERENCE AND NOT A LITERAL since D-310: the four ruled grounds are spelled once, further down, because the picker's swatches need to name a ground that is not the active one. */ --sonda-bg: var(--sonda-ground-black); --sonda-surface: #111111; --sonda-rule: #333333; /* ink */ --sonda-ink: #ffffff; --sonda-ink-muted: #9a9a9a; --sonda-ink-faint: #6f6f6f; /* the one money number (PRODUCT LAW 21) gets its own token, because it is the only element on the page allowed to be loud */ --sonda-money: #ffffff; --sonda-money-size: clamp(2.5rem, 12vw, 6rem); /* WOUND SEVERITY, used by the report and not by the landing. ONE HUE FAMILY AT THREE STRENGTHS SINCE D-310, and the two upper values moved that day. They were #d94a4a red and #d9a441 amber, and the amber was one step from the Allegro orange on a pale ground: two roles, one colour. Now high is a muted brick, mid is the SAME hue at low chroma, low stays neutral - so severity keeps three levels and the page keeps ONE warm colour that means something else, the orange that means the number is Allegro's (D-309). NOTHING THAT IS NOT A SEVERITY MAY USE THESE. */ --sonda-wound-high: #b5564f; --sonda-wound-mid: #7a4a46; --sonda-wound-low: #6f6f6f; /* type */ --sonda-font: system-ui, sans-serif; --sonda-line: 1.5; /* rhythm */ --sonda-gap-s: 0.75rem; --sonda-gap-m: 1.5rem; --sonda-gap-l: 3rem; --sonda-radius: 0.25rem; --sonda-measure: 34rem; } /* --------------------------------------------------------------------------- THE FIGURE COLOUR (D-309). RULED 24.08.2026: ORANGE ON NUMBERS ONLY - never the frame, the logo or the furniture. THE REASON IS ATTRIBUTION AND NOT DECORATION, and it is why this token is named for a ROLE and not for a subject (D-89): EVERY NUMBER IN THIS PRODUCT IS ALLEGRO'S. Allegro counted the visits, refused the offers and named the codes; we did the arithmetic. An Allegro-orange figure is accurate credit, not borrowed authority. The Commander's earlier warning against Allegro orange STANDS for the page's identity and is WITHDRAWN for the figures. --------------------------------------------------------------------------- */ :root { --sonda-figure: #ff5a00; } /* --------------------------------------------------------------------------- THE FOUR RULED SURFACES (D-310, 24.08.2026). D-309 rendered three UNPICKED candidates. The Commander then RULED an order, and the order is not the one the candidates were listed in: DEFAULT paper, with the Allegro orange on the figures SECOND graphite THIRD black FOURTH blue, the technical-tool register SLATE IS DELETED. It was a candidate, it was not ruled, and a candidate kept after the ruling is a fifth choice nobody picked (LAW 02). THE FLOOR STAYS BLACK AND THAT IS NOT A CONTRADICTION OF "DEFAULT PAPER". Two different surfaces are being talked about. PRODUCT LAW 24 says the LANDING is a black page, one line, one field, one button; public/index.html and src/zaufanie.js render against bare :root and must not turn white because the REPORT's default moved. So :root keeps the black floor, and the REPORT names its default explicitly: renderDesign2 emits data-surface="paper" when nobody has chosen. The default is a property of the report, not of the sheet. data-surface="black" therefore matches NO block below, on purpose: it falls through to the floor. Restating the floor's six values under a fourth selector would be a second copy of a palette, which is the desync tax LAW 05 rule 6 refuses. The picker still emits the attribute for black, because a ruled choice must be visible in the markup as a choice. --------------------------------------------------------------------------- */ /* THE FOUR GROUNDS, EACH SPELLED EXACTLY ONCE. The palettes below reference these rather than repeating a value, and so do the four swatch circles in the picker - which is the whole reason these exist as separate tokens. A swatch must show PAPER's ground while GRAPHITE is the active surface, so it cannot read var(--sonda-bg), and the alternative was four hex literals in a page template (LAW 05 rule 6, D-89). */ :root { --sonda-ground-black: #000000; --sonda-ground-graphite: #16181a; --sonda-ground-paper: #f4f5f6; --sonda-ground-blue: #10243a; } /* THE RED IS TUNED DOWN AND THE AMBER RAIL IS GONE (D-310). The Commander's report from a customer's eye: too much red, and red fights orange because they carry two different jobs - ORANGE MEANS THIS NUMBER IS ALLEGRO'S (D-309), RED MEANS THIS IS SEVERE. On a pale ground the amber severity rail (#d9a441) sat one step from the Allegro orange (#ff5a00) and the two roles read as one colour. THE FIX IS ONE HUE FAMILY AT THREE STRENGTHS INSTEAD OF THREE HUES: high is a muted brick, medium is the SAME hue at low chroma, low stays neutral grey. Severity keeps its three levels, the page loses its second warm colour, and the orange is left alone as the only colour that means attribution. Nothing that is not a SEVERITY may use these tokens - the layout-risk box and the unresolved-group rule moved to --sonda-rule in the same commit, because neither is a wound. */ /* PAPER - THE DEFAULT. The only variant where the orange has to hold against a pale ground rather than glow on a dark one, which is why it is the only one that moves the figure colour: #ff5a00 on #f4f5f6 is about 3.1:1, enough for the money number at 6rem and NOT enough for the 0.85rem count on a card summary. #d24500 is the same orange darkened until the small figures clear 4.5:1, and the large one is unaffected by the change to the eye. */ :root[data-surface="paper"] { --sonda-bg: var(--sonda-ground-paper); --sonda-surface: #ffffff; --sonda-rule: #d5dade; --sonda-ink: #14181b; --sonda-ink-muted: #4d565c; --sonda-ink-faint: #737f86; --sonda-money: #14181b; --sonda-figure: #d24500; --sonda-wound-high: #a33c33; --sonda-wound-mid: #c39b96; --sonda-wound-low: #8b959b; } /* GRAPHITE - the smallest honest lift off pure black. Still a dark product. */ :root[data-surface="graphite"] { --sonda-bg: var(--sonda-ground-graphite); --sonda-surface: #1e2124; --sonda-rule: #33383d; --sonda-ink: #f2f4f5; --sonda-ink-muted: #a8b0b6; --sonda-ink-faint: #7b848b; } /* BLUE - the technical-tool register, the one the incumbents are dressed in. IT IS OUR READING OF THAT REGISTER AND NOT A COPY OF ANY COMPANY'S BRAND VALUE, which is deliberate on two grounds: a competitor's exact hex is their mark and not a colour we are free to wear, and a tool that looks like a dashboard is claiming to BE one - and the whole positioning is that we are not (docs/strategy). It exists so the Commander can see what the dashboard register costs us before he rules it in or out. */ :root[data-surface="blue"] { --sonda-bg: var(--sonda-ground-blue); --sonda-surface: #17304a; --sonda-rule: #2c4a6b; --sonda-ink: #eef4fa; --sonda-ink-muted: #a9bed3; --sonda-ink-faint: #7d95ad; --sonda-wound-high: #c0665f; --sonda-wound-mid: #7f4f4a; }