/* ═══════════════════════════════════════════════════════════════════════
grush-tokens.css — the shared vocabulary. NO COLOUR VALUES LIVE HERE.
THIS FILE MUST BE BYTE-IDENTICAL IN EVERY REPO THAT CARRIES IT. The
reference copy is Grush/shell/grush-tokens.css; a venture holds a copy,
never a cross-repo link. Two copies that have drifted apart are the
failure this whole layer exists to prevent, and the check is one line:
compare checksums across the repos.
See GRUSH-SHELL-CONTRACT.md §1. This file carries the token NAMES every
Grush deployment answers to, plus the non-colour values that must NOT
vary between ventures. The colour values live in {site}-palette.css,
which is the only file in a venture repo allowed to contain a hex.
WHY THE NON-COLOUR VALUES ARE FIXED. Colour is what makes a venture
itself; radius, easing, tap targets and type are what make it Grush. A
deployment that softens its corners or speeds up its easing stops
feeling like the others, which defeats the entire point of a shared
shell. Change them here, for everyone, or not at all.
LOAD ORDER
Custom properties resolve at use time, so order does not affect
resolution — but palette second reads correctly and keeps the override
direction obvious.
COPY, DO NOT HOTLINK. Each Grush site keeps its own copy, for the same
reason as grush-brand.css: a cross-repo stylesheet reference means
removing the Grush layer leaves a dangling request to a domain the
venture may no longer have any relationship with.
═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Courier+Prime:wght@400;700&display=swap');
:root{
/* ── TYPE ───────────────────────────────────────────────────────────
Three families, no more. Mono labels at .6rem / .2em tracking are,
after colour, the most recognisable thing in this language — keep
the tracking.
Courier Prime is canonical for mono over IBM Plex Mono: it is in use
107 times across LancerFarms against getgrush.com's smaller
footprint, and the typewriter face is the established Grush look.
NOTE: LancerFarms pages currently also pull Bricolage Grotesque and
IM Fell English directly. Those are page-level deviations, not part
of this contract, and get removed as pages are migrated. */
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'Courier Prime', ui-monospace, monospace;
--label-size: .6rem;
--label-track: .2em;
/* ── GEOMETRY ───────────────────────────────────────────────────────
16px is canonical over getgrush.com's 14px: the softer corner was a
deliberate tactile decision and carries the larger deployment.
Refinement in this system means thinner lines and softer corners,
never smaller targets. --tap-floor is sized for gloved hands
outdoors, not bare fingertips indoors, and nothing interactive may
go below it. */
--radius-sm: 12px;
--radius: 16px;
--radius-lg: 20px;
--border-w: 1px;
--tap-floor: 68px;
--tap-small: 52px;
/* ── MOTION ─────────────────────────────────────────────────────────
One curve, three durations. --ease is the tuned tactile curve that
was already the only easing token in real use. */
--ease: cubic-bezier(0.33, 0.9, 0.28, 1);
--fast: 160ms;
--mid: 240ms;
--slow: 340ms;
/* ── DEPTH ──────────────────────────────────────────────────────────
Neutral black and white only — these carry no brand hue, so they are
structure rather than palette and stay shared. */
--shadow: 0 1px 2px rgba(0,0,0,.18),
0 4px 16px rgba(0,0,0,.22);
--shadow-soft: 0 2px 8px rgba(0,0,0,.16);
--shadow-lift: 0 6px 24px rgba(0,0,0,.28);
--tap: rgba(255,255,255,.07);
/* ── LEGACY MOTION AND SHAPE ALIASES ────────────────────────────────
Kept so unmigrated pages keep working. Remove an alias only once no
page references it. */
--ease-soft: var(--ease);
--ease-out: var(--ease);
--ease-spring: var(--ease);
--dur-fast: var(--fast);
--dur-mid: var(--mid);
--dur-slow: var(--slow);
--hair: var(--border-w);
--font-head: var(--font-display);
/* getgrush.com's names, kept so its three token-driven pages keep
working while they migrate. --touch-small was 56px there and is 52px
here: geometry is shared and does not vary per deployment. */
--display: var(--font-display);
--body: var(--font-body);
--mono: var(--font-mono);
--touch-min: var(--tap-floor);
--touch-small: var(--tap-small);
/* CAREFUL. This repo's --tap-min meant the SMALL target (52px), while
the shell contract's first draft used the same name for the 68px
glove floor — opposite meanings. Renamed to --tap-floor/--tap-small
to remove the ambiguity; this alias preserves the original 52px
meaning for any page still asking for it. */
--tap-min: var(--tap-small);
}
/* ── SHARED BASE ──────────────────────────────────────────────────────
The minimum every Grush page inherits. Deliberately tiny: this is not
a component library, and the moment it starts styling buttons it stops
being portable. Colour comes entirely from the palette file. */
body{
background: var(--ground);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
body:not(.card-custom) .card{
border-radius: var(--radius);
border-width: var(--border-w);
border-style: solid;
box-shadow: var(--shadow-soft);
}
::selection{ background: var(--accent); color: var(--ground); }
:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}