/* getxfree — design tokens. * * The world is an early-80s rhythm machine panel, chosen by the direction round on * 25 Aug 2026 (seed 484fcb59). The full contract rides in every page's markup as the * first child of ; this file is that contract's palette and type. * * Two rules govern everything below and are the difference between the world and a * costume of it: * * 1. NOTHING ON THIS SITE HAS A GRADIENT. A machine panel is screen-printed and * injection-moulded. Flat ink on flat surface, depth from hairlines and inset * shadow only. * 2. THE ONLY LIGHT IS AN LED OR A READOUT. Nothing else glows, tints, or halos. * Every glow on the page therefore means "this is live", which is what makes it * readable as state rather than decoration. * * Dark is not a category default here. It comes from the use scene, written out: one * hand, a phone held close, a dark room, screen brightness low. A bright field would * be glare in the exact moment this tool is used. */ :root { color-scheme: dark; /* ---- surface ------------------------------------------------------------ * Four steps of one charcoal, not four greys. The page is the bench the machine * sits on; the panel is the machine; the recess is a window cut into it. */ --void: #000000; --ground: #0E0E0E; --panel: #1A1A1A; --panel-lift: #212121; --recess: #080808; /* Legacy names still referenced by the route diagram and prose blocks. Kept as * aliases so one rename cannot silently blank a figure. */ --ground-lift: var(--panel-lift); --stock: var(--panel); --stock-edge: var(--rule); /* ---- silkscreen --------------------------------------------------------- * Bone, not white: screen-print ink on a matte panel never reads as #FFF. The * dimmed step is the same ink at lower value, never a grey — a grey secondary on * a warm ink reads as a different material. */ --ink: #E9E5DB; --ink-2: #A29D92; /* NOT FOR TEXT. Measured 3.24:1 on the panel, under the 4.5:1 floor — it is the * colour of an unlit mark, a scrollbar thumb, a dot. Anything a visitor reads * takes --ink-2 or --ink. */ --ink-3: #6F6A61; --on-ground: var(--ink); --on-ground-2: var(--ink-2); --rule: rgba(233, 229, 219, 0.13); --rule-strong: rgba(233, 229, 219, 0.26); /* ---- the step ladder ---------------------------------------------------- * The machine quarters its sixteen keys red, orange, yellow, white. Here the * ladder encodes file weight: the hotter the key, the larger the file. It is a * real ordering, not decoration, so it is never used for anything else. */ --key-red: #FF3B30; --key-orange: #FF9A00; --key-yellow: #FFD600; --key-white: #F2F2F2; --key-dark: #262626; --key-edge: rgba(0, 0, 0, 0.55); /* Ink that sits ON a lit key. The three hot keys are bright enough that bone ink * fails contrast on them; they take the panel colour instead. */ --on-key: #14110C; /* ---- light -------------------------------------------------------------- * Two LEDs and one readout colour. `--stamp` is the site-wide signal and keeps * its name because the route diagram in pages.js draws with it. */ --led-red: #FF3B30; --led-amber: #FFA500; --led-off: #2A2320; --stamp: var(--led-red); --stamp-on-ground: var(--led-red); --stamp-on-stock: var(--led-red); --readout: #FF4136; --readout-off: rgba(255, 65, 54, 0.14); /* ---- type --------------------------------------------------------------- * Chakra Petch is the machine face: squarish, mechanical, drawn with the flat * corners a moulded panel legend has. It was sourced for this build rather than * taken from what the scaffold happened to carry — the sibling site's condensed * display face is a different instrument and was removed. * * Libre Franklin carries running prose, because a machine face at paragraph * length is unreadable and the legal pages are real reading. * * Martian Mono is measurement only: durations, sizes, counts. Never a costume for * "technical" — if it is not a number that was measured, it is not set in mono. */ --face-display: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif; --face-text: 'Libre Franklin', ui-sans-serif, system-ui, sans-serif; --face-figure: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --t-xs: 0.6875rem; --t-sm: 0.8125rem; --t-base: 0.9375rem; --t-md: 1.0625rem; --t-lg: 1.3125rem; --t-xl: 1.75rem; --t-2xl: 2.25rem; --t-3xl: 3rem; --t-4xl: 3.75rem; /* Silkscreen legends are small, tracked, and always caps. This is one value so a * legend can never drift between panels. */ --legend-size: 0.6875rem; --legend-track: 0.16em; /* ---- measure ------------------------------------------------------------ */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --measure: 68ch; --shell: 68rem; /* Moulded plastic has a small, consistent corner. One radius, everywhere. */ --radius: 4px; --radius-key: 7px; /* Depth is an inset well plus a hairline top light — the way a recess in a panel * actually reads. Never an outer halo. */ --lift: inset 0 1px 0 rgba(233, 229, 219, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.5); --well: inset 0 2px 6px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.6); --ease: cubic-bezier(0.2, 0.9, 0.2, 1); --beat: 140ms; } /* The machine has one clock and the chase light runs on it. Anything that moves on * this site moves at this rate or not at all. */ @media (prefers-reduced-motion: reduce) { :root { --beat: 0ms; } } @font-face { font-family: 'Chakra Petch'; src: url('/fonts/chakrapetch-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Chakra Petch'; src: url('/fonts/chakrapetch-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Libre Franklin'; src: url('/fonts/librefranklin-var.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Martian Mono'; src: url('/fonts/martianmono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }