/* ============================================================================ 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 */ --sozu-trail: 0.16; /* ink-diffusion fade/frame (waters' trailAlpha) */ --wake-accent: var(--cool); /* ripple tint, if any (austere = no tint) */ --wake-speed: 880; /* px/s — wavefront c (520 left ~1.3s between the kon and the text bending — cause and effect stopped reading as one event) */ --wake-amp: 14px; /* A0 — peak line displacement at the floor (re-tuned 2026-07-11 against the japan seam: 6px measured 0.3–1.7px on the real marks — invisible; 14 lands 4–10px nearby and dies within a viewport; the 22px demo is the ceiling) */ --wake-decay: 0.9s; /* τ — amplitude decay */ --sozu-fill-dur: 18s; /* default charge (mirrors fillSeconds) */ /* ── lachak — the Persian corner spandrel (kit/lachak.js): static tile art ── Named for the لچکی corner-piece of tile panels and illuminated frontispieces. The barg carries these same defaults in-file, so standalone pages (the Persian translation pages load no tokens.css) keep the palette; a kit page may re-tint per section through these. */ --lachak-lapis: #1E4C8F; /* the glazed cobalt field */ --lachak-lapis-deep: #14356B; /* the deep almond tiles & diamonds */ --lachak-gold: #C39A3B; /* strapwork, bosses, beads */ --lachak-gold-deep: #8F6D25; /* rules & tile joints */ --lachak-ivory: #F5EFE0; /* bands, star tiles, filets */ /* ── juy — the rail (kit/juy.js): a STATIC illuminated band down the page's translation seams — the muraqqa border grammar (ultramarine ground, gold vine + blossoms, rosette medallions, stacked jadval rules), surfacing beside each language pair, absent everywhere else. No animation (v5). Defaults carried in-file. */ --juy-ground: #24357E; /* the ultramarine band */ --juy-ground-deep: #16204F; /* medallion fields & glaze shadow */ --juy-gold: #C39B45; /* vine, rules, medallion rings */ --juy-gold-deep: #8F6D25; /* their shadow lines */ --juy-cream: #EFE6CE; /* filets, blossoms, medallion petals */ --juy-madder: #A83C32; /* outer hairs, blossom hearts */ /* ── jadval — the ruled frame (kit/jadval.js): the rail's grammar bent around a rectangle to frame a panel (first use: the Ashlar notes). Same register as --juy-*; separate namespace so the bargs stay separable. Defaults carried in-file. */ --jadval-ground: #24357E; /* the ultramarine band */ --jadval-ground-deep: #16204F; /* rosette fields & glaze shadow */ --jadval-gold: #C39B45; /* rules, vine, rosette rings */ --jadval-gold-deep: #8F6D25; /* their shadow lines */ --jadval-cream: #EFE6CE; /* filets, blossoms, rosette petals */ --jadval-madder: #A83C32; /* outer hair, blossom hearts */ /* ── tazhib — the illumination ENGINE (kit/tazhib.js): the tier above the single flourishes. Prefabs: 'unwan headpiece, cartouche, scroll band. Craft analysis + method: jaanam/skills/tazhib/SKILL.md. Defaults carried in-file. */ --tazhib-lapis: #24357E; /* the saturated field */ --tazhib-lapis-deep: #16204F; /* its shadow */ --tazhib-gold: #C39B45; /* stems, rules, medallion grounds */ --tazhib-gold-deep: #8F6D25; /* stem under-lines */ --tazhib-cream: #EFE6CE; /* khatai petals */ --tazhib-madder: #A83C32; /* buds, hearts, tip-dots */ --tazhib-turquoise: #3FB3A5; /* leaves' whisper */ --tazhib-buff: #E6D6AE; /* the quiet contrast panel */ --tazhib-ink: #2B2117; /* the tahrir line over every fill */ /* ── shamseh — the dome's sun-medallion (kit/shamseh.js): static tile art ── Companion to lachak (the lachak-o-toranj pair). Palette drawn from the Tomb of Hafez ceiling; the barg carries these same defaults in-file. */ --shamseh-strap: #3FB3A5; /* turquoise strapwork */ --shamseh-strap-edge: #17554E; /* the straps' dark joint line */ --shamseh-ground: #232850; /* panel ground (indigo) */ --shamseh-ground-deep: #1B1F40; /* the base disc & almond panels */ --shamseh-gold: #C1953C; /* the medallion field */ --shamseh-cream: #EBE2C9; /* floret petals */ --shamseh-madder: #B04437; /* floret petals & centres */ --shamseh-cobalt: #35509E; /* floret petals & centres */ --shamseh-paper: #F5EFE0; /* the oculus — the one opening of plain light*/ } /* ── 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); }