/* ═══ the surface ═══ Stark, contemporary — the register is an instrument, not a hymnal. No serif body, almost no chrome colour: the only colour on the page belongs to the belief systems themselves (each line's generated hue). Everything Pantheo says about itself is said in grey, so the tree stays the loudest thing on screen. The neutrals are warm, and only the PAGE is warm. The ground used to be a cool #EDEDEA, which read as an admin console — the page was the coldest thing on screen and the covers had to fight it. It is a warm off-white now, and every other neutral is mixed from the same taupe. Content surfaces stay pure #FFFFFF on purpose. Tinting them too was a mistake: it flattened the one separation that matters — the step from the page you are on to the thing you are reading — and made the whole app look slightly stained. Warm ground, white paper, and the difference between them is what the elevation scale below is drawing. Contrast improved on every pair rather than merely holding: faint/bg 5.27 (was 4.85), faint/card 5.83 (was 5.69), muted/card 6.20 (was 5.95), ink/card 17.7. */ :root{ /* --faint was #9C9CA3: 2.33:1 on the page background, 2.73:1 on a card. It carries every mono meta line, every shelf subtitle, and both copies of "Numbers count Pantheo activity only" — the one sentence holding the product's honesty commitment was the least readable text in it. */ --bg:#F6F3EF;--card:#FFFFFF;--ink:#1A1815;--muted:#676057;--faint:#6B645C; --line:#E7E2DC;--accent:#6D4E2F;--warn:#8A6A12;--live:#2F6B4A; /* ── the accent as a surface ── A selected chip is a STATE, not an action, and it was wearing a solid black fill — the heaviest object the system owns, applied to the lightest meaning it has. Ten of them on a filter row read as ten buttons shouting. State now gets a tint it can wear quietly. */ --accent-soft:#F1EAE1;--accent-line:#DED2C2; /* the one ink-ish fill left: the "idea" avatar, which is a face, not a control, and needs to read as a silhouette rather than a hole */ --ink-soft:#453D33; --disp:"Manrope",system-ui,sans-serif; --wordmark:"Manrope",system-ui,sans-serif; --ui:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --r:4px; --r-lg:10px; --r-pill:99px; /* ── elevation: three steps, all warm ── Depth used to be carried entirely by the hairline, so a card at rest and a card you could act on were the same object. Three shadows, each a tight contact shadow plus a wide soft one — that pairing is what makes a surface look lifted rather than blurred. Tinted with the page's own clay (43,35,24) instead of black, because a neutral-black shadow on a warm ground turns visibly grey. sh-1 at rest every card, the pinned chrome sh-2 on hover the thing under the cursor, paired with -1/-2px sh-3 overlay popovers, the search dropdown */ --sh-1:0 1px 2px rgba(43,35,24,.045), 0 2px 6px rgba(43,35,24,.045); --sh-2:0 2px 4px rgba(43,35,24,.05), 0 10px 24px rgba(43,35,24,.075); --sh-3:0 3px 10px rgba(43,35,24,.06), 0 18px 44px rgba(43,35,24,.15); /* ── the two measures (docs/ux.md §5a) ── Browse is for picking; read is for reading. A component never invents a third. Before this there were ten in the file: 560, 620, 640, 660, 720, 768 and 60 / 62 / 64 / 66 / 70ch, which is why no two surfaces lined up. */ --m-browse:1250px; --m-read:720px; --m-prose:64ch; /* offset for pinned page chrome — app.js re-measures it on lines, where the whole identity card pins under the top bar */ --stick:69px; /* ── depth: three levels (docs/ui.md §3) ── There was one — card + hairline + 4px — and every surface used it for everything, so eight identical white rectangles carried no hierarchy. list hairline-divided rows, no container ≥3 similar things panel --sunk fill, no border secondary information card --card + hairline things you act on, one per surface --sunk is the ground one step down from a card, and it is the level the system was missing. */ --sunk:#EDEAE6; /* ── space: one scale (docs/ui.md §5) ── Inside a component 8/12/16; between sections 56 or 80. It was ~20 both ways, which is the mechanical reason nothing grouped. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px; --sect:56px; /* ── the type scale ── Seven steps, and nothing between them. The previous "scale" was twelve half-point sizes that components then ignored anyway: a census of one page found EIGHTEEN distinct sizes in 0.5px increments, with 13 / 13.5 / 14 all doing the same job. That is the mechanical reason nothing had vertical rhythm — there were no steps to snap to. */ /* One notch chunkier across the board (the "bolder, bigger, readable" pass) — same seven steps, each lifted. */ --t-meta:12px; /* mono eyebrows, counts, captions */ --t-sm:14px; /* secondary UI, card meta, notes */ --t-body:16px; /* body copy, list rows */ --t-lede:18px; /* ledes, card titles */ --t-h2:23px; /* block headings */ --t-h1:33px; /* page titles */ --t-hero:44px; /* the door only */ /* The old names survive as aliases, so every rule already using them snapped onto the scale without being rewritten twice. */ --fs-1:var(--t-meta); --fs-2:var(--t-meta); --fs-3:var(--t-meta); --fs-4:var(--t-sm); --fs-5:var(--t-sm); --fs-6:var(--t-body); --fs-7:var(--t-body); --fs-8:var(--t-lede); --fs-9:var(--t-lede); --fs-10:var(--t-h2); --fs-11:var(--t-h2); --fs-12:var(--t-h1); } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:var(--t-body); line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit} /* ── the focus ring ── There wasn't one anywhere outside two form fields, so tabbing through the app moved an invisible caret. One rule, in the accent, offset far enough to clear the pill borders. :focus-visible, not :focus, so it never fires on a mouse click — which is why nobody added it before. */ :where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{ outline:2px solid var(--accent);outline-offset:2px} /* body>nav only — the rail's sdnav is also a