/* SOURCE OF TRUTH: johanneskagerer-de/design/tokens.css — edit there, copy here. */ /* ───────────────────────────────────────────────────────────────────── One hand, three rooms — the constellation's shared bones. Canon: design/design-system.md. Every value traces to the as-is inventory of the three live sites (docs/discovery-report-phase1.md). Sites consume roles, never raw values. Rooms are declared with data-room="hub|practice|product" on . ───────────────────────────────────────────────────────────────────── */ :root { /* ── type — one fluid modular scale (360→1200px viewports) ── */ --font-serif: 'Newsreader', Georgia, serif; --step--1: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem); /* 13→14 meta, labels */ --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16→18 body */ --step-1: clamp(1.125rem, 1.06rem + 0.45vw, 1.375rem); /* 18→22 lead-s, title */ --step-2: clamp(1.375rem, 1.28rem + 0.55vw, 1.625rem); /* 22→26 lead */ --step-3: clamp(1.5rem, 1.31rem + 0.95vw, 2rem); /* 24→32 section head */ --step-4: clamp(2rem, 1.52rem + 2.4vw, 3.25rem); /* 32→52 page h1 */ --step-5: clamp(2.5rem, 1.55rem + 4.8vw, 5rem); /* 40→80 hero display */ --leading-tight: 1.15; --leading-base: 1.6; --leading-loose: 1.8; --measure: 65ch; /* ── space — one rhythm ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: clamp(3rem, 2rem + 4vw, 5rem); /* 48→80 section rhythm */ --space-9: clamp(4rem, 2.4rem + 6.5vw, 7.5rem); /* 64→120 hero rhythm */ /* ── color roles ── */ --ground: #FAFAF8; --surface: #FFFFFF; --ink: #2F2F2F; --ink-soft: #6B6560; --line: #EDE8E0; --accent: #b47a5a; --accent-ink: #8f5b3c; /* ── motion — settles, never grabs ── */ /* one breath constellation-wide: the app's signature curve (its --ease) */ --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-1: 200ms; /* micro: hovers, color shifts */ --dur-2: 320ms; /* the arrival settle */ /* ── edges & depth ── */ --radius-1: 6px; /* controls: buttons, inputs */ --radius-2: 10px; /* cards */ --hairline: 1px; --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.05); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.10); --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.12); /* the artifact (book cover) */ /* ── focus ── */ --focus-ring: 2px solid var(--accent-ink); --focus-offset: 2px; } /* ── the three rooms — shared bones, distinct atmospheres ── */ [data-room="hub"] { --ground: #F7F5F2; --line: #DDDCD8; /* elegant grey — the logo's silver diamond, as a hairline */ --silver: #CECECE; /* the logo diamond's corner silver (sampled) — quiet UI marks */ --accent: #E8C840; /* the logo's gold center — surfaces, borders, hovers only */ --accent-ink: #8a6a3e; /* gold darkened for text (AA 4.6:1 on ground) */ --halo: rgb(255 220 170); /* the portrait's warm glow */ } [data-room="practice"] { --accent: #b47a5a; --accent-ink: #8f5b3c; } [data-room="product"] { /* Values sourced from the app (agenticjournaling-app src/app/styles/tokens.css) — the room's strongest voice; the app is where these were AA-tuned for inhabited sessions (Phase 4 brief, locked 2026-07-04). Site and app are one room. Keep in sync via design/check-alignment.mjs. */ --ground: #f7f5f2; --ink: #36302b; --ink-soft: #6f6c66; --line: #eae6e0; --accent: #9c6a4d; --accent-ink: #8a5c42; } /* ── quality floor (part of the canon) ── */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } /* the arrival settle — once per page, on the page's single idea */ @keyframes settle { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .settle { animation: settle var(--dur-2) var(--ease-settle) both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto !important; } }