/* SUPASMART estate tokens — the one served token sheet. * * Founder, 2026-08-20, ruling 1 — "Serve the values": /shell/ serves one token * sheet, tokens.css. Nothing else moves to the shell. * * Consume it BEFORE the app's own styles, so a surface that deliberately * differs still wins from its own :root: * * * Values are BRAND.md §2 (palette), §3 (type), §6 (motion). This is the ONE * estate `ui/` file that may DECLARE a §2 hex; gate.sh's check_palette_law * fails every other declaration site. */ :root { /* ── §2 palette — one neutral ramp, one accent, white paper ───────────── Every colour carries a job. Never repurpose one, never add a hue. */ --paper: #fff; --ink: #202124; --muted: #5f6368; --faint: #9aa0a6; --hairline: #e8eaed; --box: #dfe1e5; --wash: #f8f9fa; --calm: #f1f3f4; --tomato: #df3b2f; --tomato-dark: #bc2b23; --tomato-wash: #fdeceb; /* ── §3 type ──────────────────────────────────────────────────────────── Founder, 2026-08-20, ruling 3: "Which font are we using on the homepage? That is what we have to stick to. Make those points the default." The homepage face is Inter, and its display points are the defaults below. A default is overridable: a surface whose own recorded canon is 400/500 keeps it, and a font ruling changes no body size. "Supa Display" (Bebas) retires from product surfaces and has no token here. */ --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fw-display: 650; --fw-label: 550; /* ── shape ────────────────────────────────────────────────────────────── The three radii the estate actually repeats, counted off the shipped CSS: 999px (166 uses), 12px (88), 16px (74). */ --r-sm: 12px; --r: 16px; --pill: 999px; /* ── §6 motion and the ink depth cues ─────────────────────────────────── Founder, 2026-08-20, ruling 2 — "Ink everywhere": the chosen/selected state fills INK, the keyboard focus ring is INK, tomato (#df3b2f) is only the single accent and the invalid marker. Nothing below may reach for --tomato, and --focus supersedes the launcher's tomato outline rings. Every shadow is --ink at an alpha, written so it says so — each mix computes to §2's shipped rgba(32,33,36,…) value exactly. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: .15s; --swift: var(--dur) var(--ease); --rest: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent); --lift: 0 1px 8px color-mix(in srgb, var(--ink) 14%, transparent); --ring: 0 1px 6px color-mix(in srgb, var(--ink) 18%, transparent); --scrim: color-mix(in srgb, var(--ink) 32%, transparent); --focus: 2px solid var(--ink); /* pair with outline-offset: 2px */ /* ── spacing and layout values (founder, 2026-08-20, ruling 4) ────────── Verbatim: "While you're at it, try to make the spacing and the layouts consistent and reusable, and also improve everything using front-end design skills or other good trending skills for front-end." "Select what looks best and try to replicate it and improve it across. For example, the 'draft a month' in social media manager is very poor, but it is slightly better in the SupaSales 'create an agent'." The scale is measured, not invented: a census of every estate `ui/` file counted 3,067 spacing declarations. It keeps every value in that census's top-15 gap, padding and margin lists except 2, 5, 7, 9, 11, 13, 22 and 26px — each within 2px of the step it now rounds onto. 2px apart up to 20px, where the estate's mass sits (10px is its single most-used gap at 150 uses, 12px its most-used padding at 236); 4px apart above it, where nothing was ever that precise. Keeping every observed value would have made a census, not a scale. */ --s1: 4px; --s2: 6px; --s3: 8px; --s4: 10px; --s5: 12px; --s6: 14px; --s7: 16px; --s8: 18px; --s9: 20px; --s10: 24px; --s11: 28px; --s12: 32px; --s13: 40px; /* Rhythm — the four jobs every surface kept re-deriving by hand, each read off the benchmark ruling 4 names, SupaSales' agents home (`apps/supasales/ui/app.css`): between blocks 16px (its grid gap), inside a block 10px (its sub-line lead), page gutter and card padding 24px (its stage padding-inline and its card padding). Reach for these before a bare step — a name says WHY, a number only says how much. */ --stack: var(--s7); --stack-tight: var(--s4); --page-pad: var(--s10); --card-pad: var(--s10); /* Columns — the three widths the estate already converged on, one per job. 560px is its most-repeated width (6 folders) and reads near 70 characters at the body size, so it is the reading and single-form column; 720px (3 folders) is the ordinary app column; 1120px (3) is the workspace, and is the benchmark's own `width: min(1120px, 100%)`. */ --col-read: 560px; --col-app: 720px; --col-wide: 1120px; /* ── aliases ──────────────────────────────────────────────────────────── Every custom-property NAME the estate already binds to a §2 hex, pointed at its canonical token, so a surface can delete its local :root without touching one var() call. Load order settles the rest: a surface that deliberately binds one of these to something else — the wiki reader's --ink/--line/--accent, the mindmap's --bg/--ink/--line/--accent, the Brain's --paper — keeps its own :root and still wins over this sheet. */ --land-ink: var(--ink); --we-ink: var(--ink); --sc-ink: var(--ink); --forget-ink: var(--ink); --g-ink: var(--ink); --land-muted: var(--muted); --we-muted: var(--muted); --sc-muted: var(--muted); --forget-muted: var(--muted); --g-muted: var(--muted); --land-faint: var(--faint); --muted-2: var(--faint); --line: var(--hairline); --hair: var(--hairline); --land-hair: var(--hairline); --we-line: var(--hairline); --sc-line: var(--hairline); --forget-line: var(--hairline); --c-line: var(--hairline); --line-strong: var(--box); --land-box: var(--box); --sc-box: var(--box); --soft: var(--wash); --we-soft: var(--wash); --c-wash: var(--wash); --fill: var(--calm); --calm-bg: var(--calm); --line-soft: var(--calm); --land-calm-bg: var(--calm); --sc-fill: var(--calm); --forget-calm: var(--calm); --c-fill: var(--calm); --bg: var(--paper); --white: var(--paper); --sc-paper: var(--paper); --forget-paper: var(--paper); --red: var(--tomato); --accent: var(--tomato); --land-accent: var(--tomato); --we-tomato: var(--tomato); --sc-tomato: var(--tomato); --red-dark: var(--tomato-dark); --accent-dark: var(--tomato-dark); --land-accent-hover: var(--tomato-dark); --we-tomato-dark: var(--tomato-dark); --sc-tomato-dark: var(--tomato-dark); --forget-danger: var(--tomato-dark); --soft-red: var(--tomato-wash); --land-accent-bg: var(--tomato-wash); --we-soft-red: var(--tomato-wash); --sc-tomato-wash: var(--tomato-wash); --forget-danger-wash: var(--tomato-wash); /* Shape, motion and type names bound to these same values in the wild. */ --r-card: var(--r); --r-input: var(--r-sm); --r-pill: var(--pill); --shadow: var(--lift); --lift-2: var(--lift); --lift-input: var(--ring); --we-ease: var(--ease); --land-sans: var(--font); --wiki-shell-sans: var(--font); --sc-sans: var(--font); }