/* ═══════════════════════════════════════════════════════════════════ pquote — Cool Neutral base layer ─────────────────────────────────────────────────────────────────── Shared tokens + primitives for every page. Ported from pzip.ai's Cool Neutral system (zipper/ZIPPER-BUILD-SPEC.md is the source of truth). Only the surface is shared — pquote keeps its own page skeletons, per the workspace rule against reusing a layout twice. Load this BEFORE any page stylesheet. A page must not declare its own :root token block; if it does, it will shadow these and the two identities drift apart again, which is the whole problem this file exists to end. ═══════════════════════════════════════════════════════════════════ */ :root { /* Ground — neutral, so the one accent is free to mean "action". */ --bg: #F1F3F4; --surface: #FFFFFF; --surface-2: #F8F9FA; --text: #1F2125; /* 14.5:1 on --bg */ --muted: #474B4F; /* 8.8:1 on --surface */ /* THE TWO-TOKEN RULE — these are NOT interchangeable. --rule is decorative and is allowed to vanish in direct sunlight. --border marks anything the user touches: inputs, buttons, row hit-targets. Never put --rule on a hit target, and never use either as a status mark. */ --rule: #DADCE0; /* 1.4:1 — decorative dividers ONLY */ --border: #A9AEB3; /* 2.2:1 — interactive borders ONLY */ /* Exactly ONE accent hue. Semantic colours below are status and never get promoted to a second accent. */ --accent: #3A5E30; /* 7.4:1 on --surface */ --accent-hover: #2E4E24; --accent-pale: #E6F0E0; --red: #B3261E; --red-pale: #FCEEEE; --amber: #8A6E20; --amber-pale: #FBF3DF; --green: #2A5020; --green-pale: #E6F4EA; --radius: 14px; --radius-sm: 8px; --pill: 999px; /* Panels get elevation, not outlines. */ --shadow-1: 0 1px 2px rgba(31,33,37,.08), 0 4px 16px rgba(31,33,37,.06); --shadow-2: 0 10px 40px rgba(31,33,37,.16); /* One sans. DM Mono is for numerals that line up in columns and nothing else — there is no serif role in this system. */ --sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace; --tap: 44px; /* gloved-hand floor on every control */ } /* ═══ RESET ═══ */ *, *::before, *::after { box-sizing: border-box; } html { /* Set here, not only on body, so nothing can fall back to the UA serif. */ font-family: var(--sans); -webkit-text-size-adjust: 100%; /* Deliberately no overflow-x/max-width here — on iOS Safari those kill the page's vertical scroll when they land on . */ } /* Form controls do NOT inherit font-family — the UA sheet hands them Arial. Without this, any