/* Warm Paper — design-system tokens and component classes. Source of truth: docs/superpowers/plans/2026-08-16-warm-paper-rebuild.md §3. Replaces the retired "Classical" system (_ds/classical-…) — see Github/AuthorCinematic for the build that used it. Font loading: this file used to @import the Google Fonts stylesheet, which blocks discovery of the font request until styles.css itself finishes downloading. Each page now links it directly in instead (see the next to the existing preconnect) — nothing to load here. */ :root { --color-bg: #FBF7F0; --color-ink: #191510; --color-accent: #8E2F24; /* brand red — primary CTA/accent */ --color-accent-hover: #5E1D15; --color-gold: #C08A2E; /* decorative/large-element accent only — fails AA (2.84:1) at body-text size on cream/panel. Every current use sits on a dark background (5.98:1, passes) — keep it that way, never apply as text color on a light section. */ --color-panel: #F2E9DA; --color-border: #E2D6C2; --color-text: #3D362D; --color-text-muted: #544B3F; --color-text-faint: #6E6455; /* darkened 2026-08-20 from #7A6F60 (audit-verified 4.09:1 on panel / 4.61:1 on cream — both under or razor-thin against the 4.5:1 AA floor); this clears 4.82:1 / 5.44:1 */ --color-dark-bg: #191510; --color-dark-text: #E9DFCF; --color-dark-text-muted: color-mix(in srgb, #E9DFCF 60%, #191510); /* verified 5.62:1 on --color-dark-bg — use this instead of ad-hoc color-mix(...50%...) blends, which can fall under AA (50% blend measured 4.28:1) */ --font-heading: 'Newsreader', Georgia, serif; --font-body: 'Instrument Sans', system-ui, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 22px; --space-6: 34px; --space-8: 56px; --radius-sm: 2px; --radius-md: 3px; --shadow-sm: 0 6px 16px -8px rgba(25,21,16,.35); --shadow-md: 0 20px 34px -18px rgba(25,21,16,.5); --shadow-lg: 0 34px 60px -28px rgba(25,21,16,.55); } body { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; margin: 0; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; } a:visited:not(.btn) { color: color-mix(in srgb, var(--color-accent) 70%, #5c4a46); } /* ── Buttons ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 14px 24px; box-sizing: border-box; font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; border: 1.5px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .btn-primary { background: var(--color-accent); color: var(--color-bg); } .btn-primary:hover { background: var(--color-accent-hover); color: var(--color-bg); text-decoration: none; } .btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-ink) 6%, transparent); color: var(--color-ink); text-decoration: none; } .btn-ghost { background: transparent; color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); text-decoration: none; } .btn-block { width: 100%; } /* ── Inputs ─────────────────────────────────────────────────────────── */ .input { min-height: 44px; padding: 11px 14px; box-sizing: border-box; font-family: var(--font-body); font-size: 15px; color: var(--color-ink); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .input:hover { border-color: color-mix(in srgb, var(--color-ink) 40%, var(--color-border)); } .input:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 0; } textarea.input { min-height: 96px; resize: vertical; font-family: var(--font-body); } /* ── Trust bar / kicker / label patterns shared across pages ──────────── */ .kicker { font-family: var(--font-body); font-size: 12.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; } .eyebrow-dark { font-family: var(--font-body); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; } /* ── Accessibility niceties applied everywhere ─────────────────────────── */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: var(--color-accent); color: var(--color-bg); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001s !important; transition-duration: .12s !important; } }