/* ============================================================ ZEN LIVING STANDARD — Design Tokens tokens.css · v01 · 2026-07-09 Built on the established ZLS identity: black / champagne gold #B69F82 / white. Single accent. Institutional, quiet, enduring. Layers, in order: 1. Fonts 2. Raw palette (never used directly in components) 3. Semantic roles — light default 4. Dark theme override (.dark OR [data-theme="dark"]) 5. Typography (families, scale, weights, tracking) 6. Space, line, radius, shadow, motion Components consume ONLY the semantic roles: --bg, --surface, --ink, --soft, --muted, --accent, --hair, and the type roles. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Questrial&family=Mulish:wght@300;400;500;600;700&display=swap'); :root { /* ---- 2. RAW PALETTE ------------------------------------ */ --zls-black: #000000; /* absolute black — logo, rule of last resort */ --zls-ink: #14110D; /* warm near-black — primary text */ --zls-white: #FFFFFF; --zls-paper: #FAF7F2; /* warm white — page ground */ --zls-bone: #F1ECE2; /* raised surface / bands */ --zls-linen: #E7DFD1; /* deeper warm neutral */ --zls-gold: #B69F82; /* THE accent — sampled from the gold master */ --zls-gold-deep: #9A8163; /* pressed / hover / text-on-light accent */ --zls-gold-soft: #CDBCA1; /* light accent, disabled */ --zls-gold-tint: #EFE8DC; /* faint gold wash — hover fills, callouts */ --zls-stone: #8B8377; /* muted warm gray — secondary text */ --zls-soft-ink: #4C463C; /* soft ink — subheads, captions */ --zls-hair: #E4DCCE; /* hairline on light */ /* dark grounds */ --zls-obsidian: #0C0B09; /* deep near-black ground */ --zls-char: #17140F; /* raised surface on dark */ --zls-ash: #221E17; /* deeper band on dark */ /* ---- 3. SEMANTIC ROLES — LIGHT (default) --------------- */ --bg: var(--zls-paper); --surface: var(--zls-white); --surface-alt: var(--zls-bone); --ink: var(--zls-ink); --soft: var(--zls-soft-ink); --muted: var(--zls-stone); --accent: var(--zls-gold); --accent-deep: var(--zls-gold-deep); --accent-soft: var(--zls-gold-soft); --accent-wash: var(--zls-gold-tint); --hair: var(--zls-hair); --on-accent: var(--zls-ink); /* text sitting on a gold fill */ /* ---- 5. TYPOGRAPHY ------------------------------------- */ --font-display: 'EB Garamond', 'Iowan Old Style', Georgia, serif; /* editorial titles */ --font-brand: 'Questrial', 'Century Gothic', 'Futura', sans-serif; /* wordmark echo, eyebrows, labels, UI */ --font-body: 'Mulish', ui-sans-serif, system-ui, -apple-system, sans-serif; /* running text */ /* modular scale (~1.25) */ --fs-eyebrow: 0.75rem; /* 12px — tracked labels */ --fs-caption: 0.8125rem; /* 13px */ --fs-small: 0.9375rem; /* 15px */ --fs-body: 1.0625rem; /* 17px — base running text */ --fs-lead: 1.25rem; /* 20px — intros */ --fs-h4: 1.375rem; --fs-h3: 1.75rem; --fs-h2: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); --fs-h1: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); --fs-display: clamp(3rem, 1.8rem + 5vw, 5.25rem); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.08; --lh-snug: 1.28; --lh-body: 1.62; /* letter-spacing — the wordmark is wide-tracked; brand labels echo it */ --track-brand: 0.28em; /* eyebrows / kickers — very wide */ --track-label: 0.16em; /* nav, buttons */ --track-display: 0.005em; --track-tight: -0.01em; /* ---- 6. SPACE / SHAPE / MOTION ------------------------- */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 7rem; --radius: 2px; /* restraint — near-square corners */ --radius-pill: 999px; --hair-w: 1px; --shadow-soft: 0 1px 2px rgba(20,17,13,.04), 0 8px 30px rgba(20,17,13,.06); --shadow-lift: 0 2px 6px rgba(20,17,13,.06), 0 24px 60px rgba(20,17,13,.10); --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: .45s; --measure: 68ch; /* ideal reading width */ color-scheme: light; } /* ---- 4. DARK THEME ------------------------------------- */ .dark, [data-theme="dark"] { --bg: var(--zls-obsidian); --surface: var(--zls-char); --surface-alt: var(--zls-ash); --ink: #F4EFE7; --soft: #CBC3B4; --muted: #8E8677; --accent: var(--zls-gold); --accent-deep: var(--zls-gold-soft); /* lighten on dark for contrast */ --accent-soft: #6E5F4A; --accent-wash: rgba(182,159,130,.10); --hair: rgba(182,159,130,.20); --on-accent: var(--zls-ink); color-scheme: dark; } /* ============================================================ OPTIONAL BASE — thin reset + element defaults keyed to roles. Import tokens.css alone for variables only; these element rules are namespaced-safe (they only touch bare elements). ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--track-display); color: var(--ink); margin: 0 0 var(--space-3); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { margin: 0 0 var(--space-3); max-width: var(--measure); } a { color: var(--accent-deep); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--ink); } hr { border: 0; border-top: var(--hair-w) solid var(--hair); margin: var(--space-5) 0; } ::selection { background: var(--accent-wash); color: var(--ink); } /* ---- Brand utility classes (opt-in) -------------------- */ .zls-eyebrow { font-family: var(--font-brand); font-size: var(--fs-eyebrow); letter-spacing: var(--track-brand); text-transform: uppercase; color: var(--accent-deep); } .zls-kicker { font-family: var(--font-brand); font-size: var(--fs-caption); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } .zls-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-regular); line-height: var(--lh-tight); } .zls-lead { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--soft); } .zls-rule { border: 0; border-top: var(--hair-w) solid var(--hair); } .zls-rule-accent { border: 0; border-top: 2px solid var(--accent); width: 48px; }