/* Paid2Call: design tokens. * * The direction is a printed ledger. Ink on bone paper, one gold arc where the * money is, and nothing on the screen that glows. Every product in this * category is a dark dashboard; this one is a statement you could have been * handed across a counter. * * Every colour is computed in OKLCH from four anchors, not picked from a * framework palette. Nothing here is a default. If a value looks arbitrary, it * is because it was chosen; the ones that were not chosen are the ones that * get rejected. * * The token NAMES are unchanged from the dark version on purpose: the whole * theme turns over in this file, and the sixteen pages never learn about it. */ /* Martian Mono, SIL Open Font License 1.1, Evil Martians. * Every figure on this site is set in it. The numbers are the product, so the * numerals are the identity: one width, tabular by construction, nothing * shifting under a countdown. */ @font-face { font-family: "Martian Mono"; src: url("../assets/fonts/martian-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Martian Mono"; src: url("../assets/fonts/martian-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Martian Mono"; src: url("../assets/fonts/martian-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* Archivo, SIL Open Font License 1.1, Omnibus-Type. Reading text only. * The three files really are three weights. The pair of families shipped * before carried one file declared as three, so every 600 on the site was a * weight the browser faked. Caught by hashing them, 2026-09-24. */ @font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } :root { /* ---- Paper: the ground. Bone, warm, never white ---------------------- */ /* A pure white page is the same nothing as a pure black one. This one is * mixed toward the warm end so the gold sits in it rather than on it. */ --paper-50: oklch(0.982 0.005 84); --paper-100: oklch(0.962 0.008 82); --paper-200: oklch(0.936 0.011 80); --paper-300: oklch(0.898 0.013 78); --paper-400: oklch(0.842 0.014 76); --paper: var(--paper-100); /* ---- Ink: the mark. Warm near-black, never neutral ------------------- */ --ink-950: oklch(0.152 0.016 56); --ink-900: oklch(0.212 0.016 58); --ink-800: oklch(0.302 0.016 60); --ink-700: oklch(0.402 0.015 62); --ink-600: oklch(0.512 0.013 64); --ink-500: oklch(0.618 0.011 66); /* ---- Signal: money in motion. The single loud colour in the system --- * Darkened against the dark theme's values: the same hue at L 0.795 is * unreadable on bone. These clear 4.5:1 on --paper-100. */ --signal-700: oklch(0.505 0.132 62); --signal-600: oklch(0.585 0.148 66); --signal-500: oklch(0.712 0.160 74); --signal-400: oklch(0.858 0.110 82); /* ---- Verified: the chain answered. Deliberately cool against signal --- */ --verified-600: oklch(0.468 0.092 172); --verified-500: oklch(0.590 0.108 170); /* ---- Rust: refusal. Desaturated so it reads as a verdict, not an alarm */ --rust-600: oklch(0.468 0.142 30); --rust-500: oklch(0.552 0.158 32); /* ---- Text: ink at chosen weights, never grey without intention ------- */ --text-loud: var(--ink-900); --text-plain: var(--ink-800); --text-quiet: var(--ink-700); --text-faint: var(--ink-600); /* ---- Edges: hairlines drawn from the ink, not from grey -------------- */ --edge-soft: color-mix(in oklch, var(--ink-900) 13%, transparent); --edge-firm: color-mix(in oklch, var(--ink-900) 26%, transparent); --edge-signal: color-mix(in oklch, var(--signal-600) 55%, transparent); /* ---- Radii: generous where a surface exists. A 4px corner is a corner * nobody chose. Most of this design has no surface at all: a rule and some * air separate two things better than a box does. */ --radius-control: 14px; --radius-card: 22px; --radius-sheet: 30px; --radius-pill: 999px; /* ---- Type: the mono carries the identity, the grotesque carries the * reading. That is the inversion: figures are not an afterthought set in * the body face, they are the face. */ --font-display: "Martian Mono", ui-monospace, monospace; --font-body: "Archivo", "Martian Mono", system-ui; --font-figure: "Martian Mono", ui-monospace, monospace; --size-display: 34px; /* headings stay under 40px, on purpose */ --size-title: 22px; --size-lead: 17px; --size-body: 15px; --size-small: 13px; --size-micro: 11px; --leading-tight: 1.14; /* the mono is wide: it needs more room than a sans */ --leading-body: 1.62; --tracking-display: -0.03em; --tracking-micro: 0.1em; /* ---- Motion: every curve has physics. Nothing is linear -------------- */ --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-exit: cubic-bezier(0.55, 0.06, 0.68, 0.19); --dur-tap: 120ms; --dur-move: 260ms; --dur-reveal: 480ms; /* ---- Elevation: drawn, not borrowed. Offset, blur, spread, opacity ---- * Tinted with the ink's own hue. A neutral black shadow on a warm ground * reads as dirt. */ --lift-resting: 0 1px 1px oklch(0.35 0.03 58 / 0.07), 0 8px 18px -10px oklch(0.35 0.03 58 / 0.18); --lift-raised: 0 2px 3px oklch(0.35 0.03 58 / 0.09), 0 22px 40px -20px oklch(0.35 0.03 58 / 0.26); --lift-signal: 0 0 0 1px var(--edge-signal), 0 16px 34px -20px oklch(0.55 0.14 68 / 0.45); --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 22px; --space-5: 34px; --space-6: 52px; /* ---- Layers: a scale, so nothing has to guess ------------------------ */ --z-grain: 60; --z-topbar: 20; --z-panel: 2; } @media (prefers-reduced-motion: reduce) { :root { --dur-tap: 1ms; --dur-move: 1ms; --dur-reveal: 1ms; } }