/* ============================================================= DESIGN TOKENS — single source of truth for the entire site Change anything here and it propagates everywhere. Sections: 1. Colors 2. Typography 3. Spacing 4. Layout / container widths <-- full-width vs contained toggle 5. Borders / radii 6. Shadows 7. Motion 8. Z-index ============================================================= */ :root { /* ----------------------------------------------------------- 1. COLORS ----------------------------------------------------------- */ --color-bg: #ffffff; --color-bg-alt: #fafaf7; /* subtle off-white sections */ --color-bg-cream: #f6f1ea; /* warm literary cream */ --color-surface: #ffffff; --color-text: #1a1a1a; --color-text-soft: #3d3d3d; --color-text-muted: #6b6b6b; --color-text-faint: #9a9a9a; --color-text-inverse: #ffffff; --color-border: #e7e5e0; --color-border-strong: #d4d2cc; --color-divider: #ececec; /* CTA / accent — gold. Change here, applies to every CTA. */ --color-accent: #F9D162; --color-accent-hover: #E8C24E; --color-accent-active: #D4AE3A; --color-accent-soft: #FEF6DC; /* tinted backgrounds */ --color-accent-contrast: #1a1a1a; /* text color on accent buttons */ --color-link: #1a1a1a; --color-link-hover: var(--color-accent); --color-success: #3a8a5a; --color-error: #c0392b; /* ----------------------------------------------------------- 2. TYPOGRAPHY ----------------------------------------------------------- */ --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fs-base: 17px; /* root body size */ --lh-base: 1.65; --lh-tight: 1.2; --lh-snug: 1.35; /* Fluid type scale — clamp(min, preferred, max) */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --fs-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.94rem); --fs-md: 1rem; --fs-lg: clamp(1.1rem, 1.05rem + 0.25vw, 1.22rem); --fs-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.65rem); --fs-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); --fs-3xl: clamp(2.1rem, 1.7rem + 2vw, 3.2rem); --fs-4xl: clamp(2.6rem, 2rem + 3vw, 4.4rem); --fs-5xl: clamp(3rem, 2.2rem + 4vw, 5.6rem); --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-widest: 0.18em; /* ----------------------------------------------------------- 3. SPACING — 4px scale ----------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 12rem; /* Section vertical rhythm */ --section-pad-y: clamp(3.5rem, 3rem + 3vw, 7rem); --section-pad-y-lg: clamp(5rem, 4rem + 4vw, 9rem); /* ----------------------------------------------------------- 4. LAYOUT — container width Toggle between contained and full-width by changing --container-width. Or override per-page with [data-layout]. ----------------------------------------------------------- */ --container-max: 1240px; /* contained max width */ --container-narrow: 880px; /* prose/reading width */ --container-gutter: clamp(1.25rem, 4vw, 2.5rem); /* The active container width. Change this one line to compare layouts. */ --container-width: var(--container-max); /* --------------------------------------------------------------- HEADER HEIGHTS The header has two states: - "tall" : initial state at top of page (nav row + big wordmark) - "compact" : after the user scrolls (wordmark hides, nav stays) --header-height-tall -> used to reserve space for the partial-loaded header so the page doesn't jump (zero CLS). --header-height -> compact value; used for sticky offsets (e.g. book-detail cover, scroll anchors) because that's what's visible while scrolling. --------------------------------------------------------------- */ --header-height-tall: clamp(160px, 130px + 4vw, 200px); --header-height: clamp(64px, 56px + 0.6vw, 78px); --footer-height: auto; /* ----------------------------------------------------------- 5. BORDERS / RADII ----------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; --border-thin: 1px solid var(--color-border); --border-strong: 1px solid var(--color-border-strong); /* ----------------------------------------------------------- 6. SHADOWS ----------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(20,20,20,0.04); --shadow-sm: 0 2px 6px rgba(20,20,20,0.06); --shadow-md: 0 6px 18px rgba(20,20,20,0.08); --shadow-lg: 0 18px 40px rgba(20,20,20,0.12); --shadow-book: 0 22px 50px -12px rgba(20,20,20,0.35), 0 8px 18px -8px rgba(20,20,20,0.2); /* ----------------------------------------------------------- 7. MOTION ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 260ms; --dur-slow: 520ms; --dur-reveal: 900ms; /* ----------------------------------------------------------- 8. Z-INDEX ----------------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-header: 80; --z-overlay: 90; --z-modal: 100; } /* ============================================================= RESPONSIVE OVERRIDES The header is shorter on mobile (smaller wordmark, tighter padding), so reserve less space below it to avoid extra whitespace. ============================================================= */ @media (max-width: 880px) { :root { --header-height-tall: clamp(120px, 100px + 4vw, 140px); --header-height: clamp(60px, 52px + 1vw, 70px); } } /* ============================================================= LAYOUT MODE — full-width vs contained Set on or Default = contained. Press Alt+W in browser to live-toggle. ============================================================= */ html[data-layout="full"] { --container-width: 100%; --container-gutter: clamp(1.5rem, 5vw, 4rem); } html[data-layout="contained"] { --container-width: var(--container-max); } /* ============================================================= DARK MODE (optional — off by default; flip with data-theme="dark") ============================================================= */ html[data-theme="dark"] { --color-bg: #111110; --color-bg-alt: #181816; --color-bg-cream: #1d1c19; --color-surface: #1a1a18; --color-text: #f3f1ec; --color-text-soft: #d8d6d0; --color-text-muted: #a09e98; --color-text-faint: #75736d; --color-border: #2a2926; --color-border-strong: #3a3935; --color-divider: #25241f; --color-link: #f3f1ec; }