/* ============================================================================ PAWN - design tokens Paste into the site build. Light-first: the complete palette lives on bare :root because this brand has ONE state. There is no dark theme and no theme toggle - a ledger is printed, not lit. Every ratio in the comments was computed, not asserted: python3 clients/pawn/brand/contrast.py Every face was audited on the binary: python3 _tools/type_audit.py clients/pawn/brand/fonts --money -> exit 0 ========================================================================= */ :root { color-scheme: light; /* ── GROUNDS ─────────────────────────────────────────────────────────── 🔴 --paper's BLUE channel must stay <= 208. impeccable's cream-palette rule fires on any page background with min(r,g,b) >= 209 AND r>=g>=b AND 6 <= r-b <= 48. #E3DECA (227,222,202) clears it with 6 steps of margin; #F5F0E6 does not, and was verified failing as a control. That rule is also the T-E anti-tell: beige + brass + serif is the reflexive AI-luxury surface. This ground is buff DOCUMENT stock, not ivory. */ --paper: #E3DECA; /* page ground - municipal form stock */ --paper-raised: #F3F2EE; /* receipts, tickets, cards - cool bond white */ --paper-sunk: #D4CEBA; /* wells, table headers, disabled fields */ --greenbar: #DBE2D1; /* alternating ledger rows. THE register tell. */ --oxblood-wash: #E7D5CE; /* stamp grounds, redeemed states */ /* ── INKS ────────────────────────────────────────────────────────────── ratios vs --paper / --paper-raised / --paper-sunk / --greenbar */ --ink: #14120F; /* 13.86 / 16.69 / 11.87 / 14.08 - body, headings */ --ink-2: #3D372D; /* 8.73 / 10.52 / 7.48 / 8.87 - secondary prose */ --ink-3: #5E5648; /* 5.37 / 6.46 / 4.60 / 5.45 - labels, captions */ --dead: #5C5549; /* 5.46 / 6.58 / 4.68 / 5.55 - burned, void */ /* ── RULES ───────────────────────────────────────────────────────────── --rule-hair is DECORATIVE ONLY (1.54:1). It may never be the sole indicator of a boundary, a state or a value. --rule clears 3:1 on paper / raised / greenbar; inside a --paper-sunk well it drops to 2.72, so use --ink-3 (4.60) for a boundary that has to be seen there. */ --rule-hair: #BCB3A0; /* 1.54 vs paper - table lines, ornament */ --rule: #837968; /* 3.18 vs paper - inputs, card edges, focus */ /* ── ACCENT ──────────────────────────────────────────────────────────── Oxblood is seal wax and the ledger rule, not "luxury burgundy". It is the brand's ONLY loud colour and it carries no loss meaning: this machine has no loss state. */ --oxblood: #7B1E22; /* 7.59 / 9.14 / 6.50 / 7.71 */ --oxblood-deep: #5A1417; /* 10.06 /12.12 / 8.62 /10.22 - hover, pressed */ /* ── METAL + STATE ───────────────────────────────────────────────────── 🔴 --brass is ORNAMENT INK ONLY: 1-3px rules, ticket edges, seal hairlines. Never a surface, never a gradient, never text, never a glow. It clears 3:1 on paper (3.58) so it is legal as a non-text boundary and illegal as a label. If brass must carry a word, use --brass-ink. */ --brass: #8A6E2F; /* 3.58 vs paper - non-text ornament only */ --brass-ink: #6B531F; /* 5.40 vs paper - brass that has to be read */ --seal: #2C4A33; /* 7.29 vs paper - live / verified / ratcheted up */ /* ── ON-COLOUR ───────────────────────────────────────────────────────── 🔴 Never --ink on --oxblood: that pair is 1.83:1. */ --on-oxblood: var(--paper-raised); /* 9.14 */ --on-ink: var(--paper-raised); /* 16.69 */ --on-seal: var(--paper-raised); /* 8.78 */ /* ── TYPE ────────────────────────────────────────────────────────────── Four roles, four OFL families, all self-hosted from brand/fonts/. No banned face appears as a primary OR as a fallback - the ship gate only reads the first family, but users see the fallback. */ --font-display: "Zilla Slab", Georgia, "Times New Roman", serif; --font-body: Archivo, system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-accent: "Source Serif 4", Georgia, "Times New Roman", serif; /* 🔴 Archivo's fvar DEFAULT is wght 600 (the binary's name record even reads "Archivo SemiBold"). Body weight must ALWAYS be declared or every paragraph silently ships semibold. */ --fw-body: 400; --fw-medium: 500; --fw-label: 600; --fw-strong: 700; /* Condensed caps = the stamped form label. Archivo carries a real wdth axis, so this is one variable file doing two jobs. */ --wdth-label: 72; --wdth-normal: 100; /* 🔴 Zilla Slab and IBM Plex Mono are STATIC. font-variation-settings on either is silently ignored - use font-weight and ship the real cut. */ --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem); --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem); --step-1: clamp(1.25rem, 1.18rem + 0.35vw, 1.45rem); --step-2: clamp(1.60rem, 1.45rem + 0.75vw, 2.05rem); --step-3: clamp(2.10rem, 1.80rem + 1.50vw, 3.00rem); --step-4: clamp(2.80rem, 2.10rem + 3.40vw, 4.60rem); --step-5: clamp(3.60rem, 2.20rem + 6.80vw, 7.20rem); /* THE FLOOR */ --lh-tight: 1.04; --lh-head: 1.12; --lh-body: 1.55; --lh-data: 1.30; --tracking-label: 0.09em; /* condensed caps labels */ --tracking-display: -0.015em; --measure: 68ch; /* the accent serif overruns without this - found by rendering the theorem block and looking at it */ /* ── SPACE ───────────────────────────────────────────────────────────── 4px base, strictly monotonic. Named --space-* not --spacing-* so it can never collide with a framework scale (css_traps.py rule 6). */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 10rem; --rule-hair-w: 1px; --rule-w: 2px; --rule-brass-w: 3px; /* ── SHAPE ───────────────────────────────────────────────────────────── 🔴 Zero radius everywhere and no shadow anywhere. A document has square corners and no drop shadow; depth comes from stock colour and rules. These tokens exist so the ban is enforceable, not so it can be tuned. */ --radius: 0; --shadow: none; /* ── MOTION ──────────────────────────────────────────────────────────── Mechanical: quick out, hard stop, no overshoot, no bounce, no spring. */ --ease: cubic-bezier(0.35, 0, 0.15, 1); --dur-stamp: 90ms; /* press, stamp, toggle */ --dur-state: 140ms; /* hover, focus, link */ --dur-panel: 220ms; /* disclosure, drawer */ /* 🔴 THE FLOOR never interpolates. It is a ratchet: it advances in discrete ticks, like an odometer. Any smooth count-up is a lie about how the machine works. */ --ease-tick: steps(12, end); --dur-tick: 480ms; } /* Numbers. The default IBM Plex Mono zero is DOTTED - verified by rendering the face with and without the feature. 'zero' 1 SWAPS it to slashed, which turns a long float into hatching. Do not enable it. */ .num, [data-num] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; /* explicit; inherent on a mono */ font-feature-settings: "tnum" 1; /* NOT "zero" 1 */ letter-spacing: 0; } /* The condensed stamped label - form fields, table headers, tags, eyebrows. */ .label { font-family: var(--font-body); font-weight: var(--fw-label); font-variation-settings: "wdth" var(--wdth-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); } html { background: var(--paper); } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: var(--fw-body); /* see the Archivo wght-600 note */ font-size: var(--step-0); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-head); letter-spacing: var(--tracking-display); } a { color: var(--oxblood); text-underline-offset: 0.18em; } a:hover { color: var(--oxblood-deep); } :focus-visible { outline: var(--rule-w) solid var(--oxblood); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { :root { --dur-stamp: 0ms; --dur-state: 0ms; --dur-panel: 0ms; --dur-tick: 0ms; } *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } } /* ── SELF-HOSTED FACES ────────────────────────────────────────────────── Subset to Latin Basic + Latin-1 + the currency/maths glyphs the ledger needs. All four families are OFL-1.1, which explicitly permits subsetting (unlike the Fontshare/ITF licence). Convert the .ttf binaries in brand/fonts/ to .woff2 at build time; ship woff2 only. */ @font-face { font-family: "Zilla Slab"; src: url("/fonts/ZillaSlab-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Zilla Slab"; src: url("/fonts/ZillaSlab-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("/fonts/Archivo-VF.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("/fonts/Archivo-Italic-VF.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("/fonts/SourceSerif4-VF.woff2") format("woff2-variations"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("/fonts/SourceSerif4-Italic-VF.woff2") format("woff2-variations"); font-weight: 200 900; font-style: italic; font-display: swap; }