/* design-tokens.css — spaces-svc canonical design tokens (SINGLE SOURCE OF TRUTH). Loaded FIRST, before space.css (reader/eZine) and admin.css (dashboard), so the same semantic brand role carries ONE name across both properties instead of three. This is spaces-svc's OWN copy — it does NOT touch ~/noo/network. Values are the Niche of One brand set (RATION v5): warm paper stock, ink text, Poppins display, Figtree UI, Space Mono kickers, Lora reading. Red (--buy) is the MONEY DOOR ONLY — price, unlock, tip. Never décor. Consumers: • space.css uses these names directly (--paper/--ink/--buy/--panel/--panel2/--rule-hard/ --lift/--disp/--ui/--read/--mono). It keeps only genuine per-property overrides (--muted, --rule, --measure, --gutter, --yellow) locally. • admin.css aliases its historical names onto these (--black:var(--ink); --white:var(--paper); --red:var(--buy); --bg-dim:var(--panel2); --font:var(--ui)) and inherits --panel/--lift/ --disp/--read/--mono. It keeps its own --grey, --border, --min, --yellow and its denser --sN. Theme: follow the OS by default, but the shared network theme choice (noo_theme cookie, applied as data-theme on before paint) wins — an explicit light choice overrides OS-dark, an explicit dark choice applies even on a light OS. Mirrors the structure both sheets already used so the cookie keeps behaving identically. font-display etc. live in the @font-face files. */ :root { /* ── Surfaces & ink ─────────────────────────────────────────────── */ --paper: #f5f0e6; /* warm stock, matches the network */ --ink: #1a1a1a; --panel: var(--paper); /* redesign 2026-07: single cream ground (matches network) */ --panel2: var(--paper); /* separation via rules/borders, not tone */ --btn-radius: 999px; /* redesign 2026-07: full-pill buttons (matches network) */ /* ── Muted text + rules (reader/brand defaults; space.css restates its own documented copies — dashboard uses its own --grey/--border) ── */ --muted: #5c5952; --rule: color-mix(in srgb, var(--ink) 20%, var(--paper)); --rule-hard: #1a1a1a; /* ── The money door (red) — price, unlock, tip, Delete, error only ── */ --buy: #d70015; --on-buy: #ffffff; /* ── The zine offset-shadow — craft, not decoration ──────────────── */ --lift: 5px 5px 0 var(--rule-hard); /* ── Type faces ──────────────────────────────────────────────────── */ --disp: 'Poppins', 'Helvetica Neue', Arial, sans-serif; --ui: 'Figtree', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --read: 'Lora', Georgia, 'Times New Roman', serif; --mono: 'Space Mono', 'Courier New', Courier, monospace; /* ── Readability floor ───────────────────────────────────────────── */ --min: 11.5px; /* ── Spacing scale (reader/brand rhythm; the dashboard keeps a denser local scale of its own in admin.css) ─────────────────────────── */ --s1: 8px; --s2: 14px; --s3: 22px; --s4: 34px; --s5: 52px; --s6: 76px; } /* Dark palette — OS by default, noo_theme cookie (data-theme) wins. --rule and --lift are defined once above in terms of --ink/--paper/--rule-hard, so they auto-flip; only the raw values below change. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0d0d0d; --ink: #f3f2ee; --panel: var(--paper); --panel2: var(--paper); --muted: #9a988f; --rule: color-mix(in srgb, var(--ink) 26%, var(--paper)); --rule-hard: #f3f2ee; --buy: #ff4536; --on-buy: #0d0d0d; } } :root[data-theme="dark"] { --paper: #0d0d0d; --ink: #f3f2ee; --panel: #161615; --panel2: #1b1b19; --muted: #9a988f; --rule: color-mix(in srgb, var(--ink) 26%, var(--paper)); --rule-hard: #f3f2ee; --buy: #ff4536; --on-buy: #0d0d0d; } /* ── BUTTON PRIMITIVE ──────────────────────────────────────────────────── ONE button both surfaces consume. The zine button: Figtree, 2px ink frame, hard 3px radius, 44px touch floor. The offset-lift ONLY on prominent CTAs (.btn--cta); --buy = money door + destructive; --dense = dashboard density. Reader (space.css) + dashboard (admin.css) conform their legacy button classes to this so the whole product reads as one component. ──────────────────────────────────────────────────────────────────────── */ :root { --lift-hover: 8px 8px 0 var(--rule-hard); --btn-radius: 3px; --btn-pad-y: 10px; --btn-pad-x: 16px; --btn-dense-pad-y: 6px; --btn-dense-pad-x: 12px; --btn-min-h: 44px; --btn-dense-min-h: 36px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; box-sizing: border-box; min-height: var(--btn-min-h); padding: var(--btn-pad-y) var(--btn-pad-x); font: 700 var(--min)/1 var(--ui); text-transform: none; letter-spacing: normal; text-decoration: none; white-space: nowrap; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--btn-radius); cursor: pointer; transition: transform .08s, box-shadow .08s, background .12s, color .12s; } .btn:hover { background: var(--panel2); } .btn--cta { box-shadow: var(--lift); } .btn--cta:hover { box-shadow: var(--lift-hover); transform: translate(-1px,-1px); background: var(--paper); } .btn--fill { background: var(--ink); color: var(--paper); } .btn--fill:hover { background: var(--ink); opacity: .88; } .btn--buy { background: var(--buy); color: var(--on-buy); border-color: var(--buy); } .btn--buy:hover { background: var(--buy); filter: brightness(1.08); } .btn--dense { min-height: var(--btn-dense-min-h); padding: var(--btn-dense-pad-y) var(--btn-dense-pad-x); } .btn:disabled, .btn.is-disabled, .btn[disabled] { opacity: .5; cursor: default; box-shadow: none; transform: none; }