/* ============================================================================ kit/tokens.css — the shared design-token contract One naming scheme for every site. Per-site palettes FILL these names (or alias honest per-site source names onto the slots: --copper: …; --rust: var(--copper)). Moods are named token sets: default fills :root; alternates are [data-mood=""] on — "dark" is proven; new moods are legal per CONVENTIONS §0. See ../STYLE-LANGUAGE.md §1–2 and ../CONVENTIONS.md §0–2. ========================================================================== */ :root { /* ── grounds ───────────────────────────────────────────────────────────── */ --paper: #F4EAD2; /* warm parchment page */ --paper-2: #EDE5CF; /* card / toned band */ /* ── ink ───────────────────────────────────────────────────────────────── */ --ink: #1F140B; /* primary text */ --ink-soft: rgba(31, 20, 11, 0.62); --ink-faint: rgba(31, 20, 11, 0.40); --rule: rgba(31, 20, 11, 0.14); /* ── warm accents (named after their real source — keep this habit) ────── Use sparingly: a hairline, an active state, a single word, a quote mark. Accents BLEED through; they never repaint a panel. */ --rust: #C14E1A; /* primary warm accent */ --terra: #B86A34; --ochre: #B5852F; --wheat: #C9A96B; /* ── support ───────────────────────────────────────────────────────────── */ --olive: #7E7C4A; --sage: #7E7C6D; /* ── the one cool note (links / active / focus ONLY) ───────────────────── Swap to woad (#36536f) on dye/textile subjects. */ --slate: #31586D; --cool: var(--slate); /* ── semantic roles (reference these in components) ─────────────────────── */ --accent: var(--rust); /* per-site/per-page signature accent */ --link: var(--cool); --focus: var(--cool); /* ── type (DEMO DEFAULTS — faces are discovered per client, in the site's brief; the roles are the contract, not these stacks. CONVENTIONS §2) ──── */ --serif: "Cormorant Garamond", "Iowan Old Style", "Hoefler Text", Georgia, serif; --display: "GFS Didot", "Cormorant Garamond", Georgia, serif; /* biggest moments */ --label: "Cagliostro", "Optima", "Gill Sans", "Avenir", system-ui, sans-serif; --hand: "Caveat", "Architects Daughter", cursive; /* light-mood accents */ --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; /* technical only */ /* ── spacing (4px base, 8px rhythm) ──────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 40px; --sp-7: 56px; --sp-8: 88px; --measure: 1180px; /* content max-width */ --gutter: max(6vw, 24px); /* ── radii (small + honest; pills for nav/badges/tabs) ───────────────────── */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ── shadows (warm, low-alpha — never neutral gray) ──────────────────────── */ --shadow-sm: 0 2px 6px rgba(60, 40, 10, 0.10); --shadow-md: 0 8px 18px -10px rgba(60, 40, 10, 0.18); --shadow-lg: 0 18px 36px rgba(26, 12, 6, 0.18), 0 2px 6px rgba(26, 12, 6, 0.10); /* ── motion ──────────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.2, 0.7, 0.3, 1); --dur-fast: 0.18s; --dur: 0.3s; --dur-slow: 0.5s; --dur-hero: 1s; /* ── glass (nav panels) ──────────────────────────────────────────────────── */ --glass-bg: rgba(247, 243, 236, 0.82); --glass-blur: blur(10px) saturate(1.15); --glass-border: rgba(31, 20, 11, 0.18); /* ── sōzu — the shishi-odoshi reading mechanism (kit/sozu.js, kit/wake.js) ── The vessel is themed by tokens; a poem may override --sozu-* per section so the water rides the cycle's day→night axis. Numeric tokens (no unit on --wake-speed) feed the JS wake model — keep them parseFloat-able. */ --sozu-bamboo: var(--olive); /* the culm body; a poem may override */ --sozu-water: var(--cool); /* the fill / water line (the one cool note) */ --sozu-stone: var(--ink-soft); /* the strike surface */ --wake-accent: var(--cool); /* ripple tint, if any (austere = no tint) */ --wake-speed: 520; /* px/s — wavefront c */ --wake-amp: 6px; /* A0 — peak line displacement at the floor */ --wake-decay: 0.9s; /* τ — amplitude decay */ --sozu-fill-dur: 18s; /* default charge (mirrors fillSeconds) */ } /* ── DARK / CINEMATIC MOOD ─────────────────────────────────────────────────── Same accents; swap ground↔ink. Set . Use for galleries/artists; keep imagery big and let one pigment bleed through. */ [data-mood="dark"] { --paper: #0C0B09; /* near-black ground */ --paper-2: #14110D; --ink: #ECE6D4; /* cream ink */ --ink-soft: rgba(236, 230, 212, 0.72); --ink-faint: rgba(236, 230, 212, 0.45); --rule: rgba(236, 230, 212, 0.12); --glass-bg: rgba(12, 18, 36, 0.55); --glass-border: rgba(236, 230, 212, 0.22); }