/* ============================================================================
THE RENZO'S DESIGN TOKENS · v2 · July 2026
One file. Two skins. Every property reads from here.
── THE ARCHITECTURE ────────────────────────────────────────────────────────
LAYER 1 (Primitives) = every hex and font name. Shared by both themes.
LAYER 2 (Semantic) = job names (--field, --voice-display, --accent…).
:root carries the ASADOR theme (default).
[data-theme="tale"] remaps the SAME names.
A property picks its world with ONE attribute:
→ ASADOR (hub, soho, tampa, stpete, bar, jobs)
→ TALE (foods, empanadas, future market/bakery)
Deploy once to the hub, link from every property:
── EDITING RULES (unchanged from v1, now with themes) ─────────────────────
1. NEVER write a raw hex or font name in a page. Tokens only.
2. Only edit raw VALUES in Layer 1. Everything cascades from there.
3. Components consume Layer 2 names only — never Layer 1 directly.
4. To add a color: add to Layer 1, then give it a Layer 2 job. Two steps.
5. A theme overrides ONLY Layer 2. Never Layer 1. Never load two themes.
6. GREENS are accents and nature, NEVER fields.
── THE REGISTER RULE (the one-liner that prevents all drift) ──────────────
In ASADOR: grey speaks Chalet · beige speaks Gilda + Cormorant ·
black is silent (footer/floor only).
In TALE: everything speaks Gilda + Cormorant; Manrope does structure.
Neither voice ever borrows the other's field.
── UNIFICATIONS IN THIS VERSION (veto any, it's a one-line revert) ────────
· SAGE: foods had #8C9A78, library had #909C7E → unified on #909C7E
· GOLD: foods had #C9A84C (retired) → unified on Pinstripe #D0A93E
· RED: foods had #BE1E2D (retired) → unified on Hero Red #D81E24
========================================================================== */
/* ═══ LAYER 1 — PRIMITIVES ═══════════════════════════════════════════════ */
:root{
/* Stone (Brand Library — cool/objective) */
--stone-black: #1B1917; /* tertiary depth. the floor. */
--stone-800: #33302B; /* the soft grey. primary asador field. */
--stone-700: #3D3933; /* hover lift on grey */
--stone-500: #78736B;
--stone-200: #ECE9E3;
--paper: #F5F3EF;
/* The Renzo's Room (Space Library — warm/ethereal) */
--lime-white: #F2EEE6;
--balasto-stone: #C8B49F; /* material: hairlines, mats. never a field. */
--balasto-grey: #BDB6AD; /* the band. stone that remembers warmth. */
--balasto-steel: #695C4D;
--celeste: #7FB2DD; /* Rioplatense sky */
--sage: #909C7E; /* Punta del Este shore rocks — UNIFIED */
--pasture: #568A39; /* Maldonado chacras. display/illustration only. */
--brass: #B89455;
--sunlit-brass: #E3C97B;
--pinstripe: #D0A93E; /* the gold — UNIFIED */
/* The Tale (Foods Library — parchment/poster) */
--parchment: #ECE5D2; /* tale primary field */
--parchment-hi: #F5EFE0; /* frame mats, lifted panels */
--tale-ink: #3A2A1E; /* the tale's darkest is warm ink, not black */
--tale-ink-soft: #6E5A48;
--terra: #B5663F; /* poster terracotta */
--sage-wash: #E3E8DC; /* tinted band */
/* Hero red — one red, both worlds — UNIFIED */
--red: #D81E24;
/* Voices (loading lives in chalet.css + Google Fonts link, not here) */
--chalet: 'Chalet Comprime','Manrope',sans-serif;
--gilda: 'Gilda Display',Georgia,serif;
--cormorant:'Cormorant Garamond',Georgia,serif;
--manrope: 'Manrope',sans-serif;
/* Rhythm — one spacing scale, everything snaps to it */
--u:8px;
--s3:calc(var(--u)*3); --s5:calc(var(--u)*5); --s8:calc(var(--u)*8);
--s14:calc(var(--u)*14); --s16:calc(var(--u)*16);
}
/* ═══ LAYER 2 — SEMANTIC · ASADOR (default) ══════════════════════════════
Restaurants + Bar + hub. Value rhythm: grey → beige → grey → band → floor.
The dark is TERTIARY: it appears once, at the bottom, holding the page. */
:root{
/* fields */
--field: var(--stone-800);
--field-warm: var(--lime-white);
--field-band: var(--balasto-grey);
--field-light: var(--paper); /* large light fields: paper, NOT lime */
--depth: var(--stone-black);
/* ink */
--ink: var(--stone-200); /* on --field */
--ink-dim: #ACA69E;
--ink-warm: var(--stone-black); /* on --field-warm */
--ink-warm-dim: var(--balasto-steel);
/* accents · a section takes ONE section-accent, never both */
--accent: var(--pinstripe); /* gold. constant across themes. */
--section-accent: var(--celeste); /* default rotation: sky */
--section-accent-alt: var(--sage); /* sporadic rotation: shore */
--accent-cta: var(--red); /* the mark + primary action ONLY */
--dropcap: var(--brass);
/* hairlines */
--rule: rgba(208,169,62,.22); /* on grey */
--rule-warm: rgba(105,92,77,.24); /* on beige */
--leader: rgba(105,92,77,.5); /* dotted menu leaders */
/* voices — the register rule, encoded */
--voice-display: var(--chalet); /* headlines on grey */
--voice-tale: var(--gilda); /* headlines on beige ONLY */
--voice-poem: var(--cormorant); /* italic ledes on beige ONLY */
--body: var(--manrope); /* universal */
}
/* ═══ LAYER 2 — SEMANTIC · TALE ══════════════════════════════════════════
Foods, empanadas, future market/bakery. Light-first. The fairy tale is
full-time here; the beige sections of asador pages are windows into it. */
[data-theme="tale"]{
/* fields */
--field: var(--parchment);
--field-warm: var(--parchment-hi);
--field-band: var(--sage-wash);
--field-light: var(--parchment-hi);
--depth: var(--tale-ink); /* warm ink, never stone black */
/* ink */
--ink: var(--tale-ink);
--ink-dim: var(--tale-ink-soft);
--ink-warm: var(--tale-ink);
--ink-warm-dim: var(--tale-ink-soft);
/* accents */
--section-accent: var(--terra); /* poster terracotta leads */
--section-accent-alt: var(--sage);
--dropcap: var(--terra);
/* hairlines */
--rule: rgba(58,42,30,.16);
--rule-warm: rgba(58,42,30,.16);
--leader: rgba(58,42,30,.4);
/* voices — serif leads everywhere; Manrope keeps structure honest */
--voice-display: var(--gilda);
--voice-tale: var(--gilda);
--voice-poem: var(--cormorant);
}
/* ═══ SHARED CRAFT — both worlds ═════════════════════════════════════════ */
::selection{ background:var(--pinstripe); color:var(--stone-black); }
/* The gilt edge — first fairy-tale signal on every property */
body{ border-top:2px solid var(--pinstripe); }
/* The trim profile — one ornament shape, every material junction.
Usage: