/* ============================================================ TALISMAN ZINE โ€” DESIGN TOKENS ยท THE SWAP LAYER Real Talisman Design Studio system expressed as variables. Re-skin the entire zine by editing values in this file only. Fonts load via Adobe Fonts (Typekit kit dfw2azm) in . ============================================================ */ :root { /* ---- Type families (Adobe Fonts slugs) --------------------- */ --font-display: "posterama-2001", system-ui, sans-serif; /* wordmark + structural labels */ --font-body: "hoss-round", system-ui, sans-serif; /* body + editorial headlines */ --font-goo: "cheee-variable", "hoss-round", sans-serif; /* gooey poster accents */ --font-mark: "lunatique-variable", "posterama-2001", sans-serif;/* monogram / initial marks */ /* ---- Raw palette (pulled from the wordmark) ---------------- */ --purple-900:#1A0026; --purple-800:#2D003F; --purple-700:#460064; --purple-600:#5C1A7A; --purple-500:#7C3B97; --purple-200:#E4D2EE; --purple-100:#F4ECF8; --yellow-700:#C99A00; --yellow-600:#E5AE00; --yellow-500:#FFC700; --yellow-300:#FFE082; --yellow-100:#FFF6D6; --bone:#FAFAF7; --paper:#F3F1EB; --sand:#E8E4DA; --stone:#B8B3A8; --graphite:#6B6660; --ink:#1F1B17; --obsidian:#0E0B08; --night:#14111C; --night-2:#1F1B2A; /* ---- Semantic roles (light context = default) ------------- */ --bg: var(--paper); --bg-sunken: var(--sand); --fg: var(--ink); --fg-soft: var(--graphite); --accent: var(--purple-700); --accent-2: var(--yellow-500); --line: rgba(31,27,23,0.12); --line-2: rgba(31,27,23,0.22); /* ---- Fluid type scale ------------------------------------- */ --fs-mega: clamp(3.4rem, 15.5vw, 17rem); /* cover studio name */ --fs-display: clamp(2.9rem, 9.5vw, 8.5rem); /* page display heads */ --fs-h1: clamp(2.3rem, 6vw, 5rem); --fs-h2: clamp(1.7rem, 4vw, 3.1rem); --fs-h3: clamp(1.35rem, 2.2vw, 1.9rem); --fs-lead: clamp(1.1rem, 1.55vw, 1.55rem); --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.875rem; /* 14px */ --fs-label: 0.72rem; /* eyebrows / sprint codes */ --lh-tight:.88; --lh-snug:1.02; --lh-normal:1.5; --lh-loose:1.62; --track-label:.22em; --track-display:-.03em; --track-tight:-.015em; /* ---- Spacing (4px base) ----------------------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:192px; --gutter: clamp(20px, 5vw, 84px); /* ---- Corners (hard by default) ---------------------------- */ --r0:0; --r1:2px; --r2:4px; --r-pill:999px; /* ---- Motion ----------------------------------------------- */ --e-out: cubic-bezier(.16,1,.3,1); --e-std: cubic-bezier(.2,0,0,1); --e-inout: cubic-bezier(.65,0,.35,1); --d1:120ms; --d2:200ms; --d3:320ms; --d4:600ms; /* ---- Layout / chrome -------------------------------------- */ --maxw:1680px; --z-cursor:9999; --z-chrome:400; --z-overlay:100; --page-count:8; } /* Dark spread context โ€” add .is-dark to a spread to flip semantics */ .is-dark { --bg: var(--purple-900); --bg-sunken: var(--night-2); --fg: var(--bone); --fg-soft: rgba(250,250,247,.60); --accent: var(--yellow-500); --accent-2: var(--yellow-500); --line: rgba(250,250,247,.16); --line-2: rgba(250,250,247,.30); } /* Yellow wash context โ€” the closing CTA spread */ .is-wash { --bg: var(--yellow-500); --bg-sunken: var(--yellow-300); --fg: var(--purple-900); --fg-soft: rgba(26,0,38,.66); --accent: var(--purple-700); --accent-2: var(--purple-900); --line: rgba(26,0,38,.22); --line-2: rgba(26,0,38,.36); }