/* --------------------------------------------------------------------------- * Risky Business design tokens. * * Copied verbatim from design-system/tokens/*.css (colors, typography, * spacing, effects, base), concatenated into one file so the browser makes a * single request instead of chaining six @imports. * * Do not hand-edit. Change the tokens in design-system/tokens/ and re-copy — * that directory is the design system's source of truth, and Claude Design * writes back to it. * * The fonts (Bevan / Bitter / Oswald) are NOT imported here. The design * system's tokens/fonts.css uses `@import url(fonts.googleapis.com)`, which * serialises the font request behind this stylesheet; each page links Google * Fonts directly in instead, with preconnect. Same three families. * ------------------------------------------------------------------------- */ /* --- colors ------------------------------------------------------------- */ :root{ /* base palette — sampled from cover art */ --cream-50:#FBF7EC;--cream-100:#F4ECD6;--cream-200:#EBE0BF;--cream-300:#DCCEA4; --ink-900:#181F27;--ink-800:#232E3A;--ink-700:#2E3D4F;--ink-500:#4C5D70;--ink-300:#8B97A4; --brick-700:#8C2E26;--brick-600:#A03B31;--brick-500:#B14B3E; --amber-600:#B0682A;--amber-500:#C77A33;--amber-300:#E0A868; --steel-400:#9AA3AB;--black-900:#161513; /* semantic aliases */ --surface-page:var(--cream-100);--surface-card:var(--cream-50);--surface-raised:var(--cream-50);--surface-inverse:var(--ink-800);--surface-tint:var(--cream-200); --text-display:var(--ink-700);--text-body:#2B2A26;--text-muted:#6E6A5E;--text-inverse:var(--cream-100);--text-accent:var(--brick-600); --accent:var(--brick-600);--accent-hover:var(--brick-700);--accent-press:#77251E; --highlight:var(--amber-500);--highlight-hover:var(--amber-600); --border-strong:var(--ink-700);--border-subtle:#D8CCAB;--focus-ring:var(--amber-500); --success:#4E6B3F;--warning:var(--amber-600);--danger:var(--brick-600); } /* --- typography --------------------------------------------------------- */ :root{ --font-display:'Bevan',serif;/* poster slab — headlines, wordmark */ --font-serif:'Bitter',Georgia,serif;/* body + secondary */ --font-label:'Oswald','Arial Narrow',sans-serif;/* uppercase UI labels */ --text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:19px;--text-xl:24px;--text-2xl:32px;--text-3xl:44px;--text-4xl:64px; --leading-tight:1.05;--leading-snug:1.25;--leading-body:1.6; --track-label:0.12em;--track-display:0.01em; --weight-body:400;--weight-bold:700; } /* --- spacing ------------------------------------------------------------ */ :root{ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px; --radius-sm:3px;--radius-md:6px;--radius-pill:999px; --container:1080px; } /* --- effects ------------------------------------------------------------ */ :root{ --border-rule:2px solid var(--border-strong); --border-hairline:1px solid var(--border-subtle); --shadow-poster:4px 4px 0 var(--ink-700);/* hard letterpress offset */ --shadow-poster-sm:2px 2px 0 var(--ink-700); --shadow-poster-accent:4px 4px 0 var(--brick-600); --shadow-soft:0 2px 8px rgba(24,31,39,.12); --ease-brand:cubic-bezier(.2,.7,.3,1); --dur-fast:120ms; --dur-med:200ms; } /* --- base --------------------------------------------------------------- */ body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-serif);font-size:var(--text-md);line-height:var(--leading-body)} a{color:var(--text-accent);text-decoration-color:var(--amber-500);text-underline-offset:3px} a:hover{color:var(--accent-hover)} ::selection{background:var(--amber-300);color:var(--ink-900)}