/* * Design tokens * * Single source of truth for colours, typography, spacing, and layout sizes. * No hardcoded values elsewhere in the stylesheet tree — every other file * must reference these custom properties. */ :root { /* Colour */ --color-primary: #6a1e1e; /* oxblood, slightly darker but visibly red */ --color-primary-hover: #833030; /* oxblood, lifted for hover */ --color-primary-dark: #551616; /* deeper oxblood for headings */ --color-bg: #efe6d0; /* deep warm cream */ --color-bg-subtle: #e5dbc4; /* slightly deeper cream for small panels */ --color-ink: #221e1a; /* deep warm ink, near-black */ --color-ink-muted: #635848; /* warm grey for meta and secondary */ --color-border: rgba(34, 30, 26, 0.14); /* Manuscript test (components/manuscript.css): the page background becomes a desk, slightly deeper than the cream sheet the article sits on. The sheet keeps --color-bg so the reading surface never changes. Shadow is warm ink-tinted, never pure black. */ --color-desk: #e3d8c0; --shadow-sheet: 0 4px 24px rgba(34, 30, 26, 0.16), 0 2px 6px rgba(34, 30, 26, 0.10); /* Marginalia slip (components/marginalia.css): a smaller piece of paper in the right column. Slightly lighter than the sheet so it reads as its own slip resting on top, with a smaller, tighter shadow. */ --color-slip: #f5edda; --shadow-slip: 0 2px 10px rgba(34, 30, 26, 0.18), 0 1px 3px rgba(34, 30, 26, 0.12); /* Paper texture: SVG fractal noise grain, generated inline (no image asset). Layered over the sheet's background colour — the slope value in feFuncA is the grain opacity. */ --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.4' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); /* Read-state styling — consumed via selectors injected at runtime by partials/read-preload.html (no static rules reference these in this file tree; the inline script is the only consumer). */ --color-link-read: #682c29; /* ~25% shift from primary toward ink-muted */ --opacity-card-read: 0.6; /* whole-card recession in listings */ /* Typography */ --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-xxl: 5rem; /* Layout */ --reading-width: 680px; --content-max: 1040px; --body-narrow: 740px; /* Responsive breakpoints */ --bp-narrow: 720px; --bp-wide: 1000px; } /* Dark mode token overrides. Triggered by [data-theme="dark"] on , set by the inline preload script in each page head. */ [data-theme="dark"] { --color-primary: #a08028; /* warm aged gold (testing options via presets) */ --color-primary-hover: #b89838; --color-primary-dark: #b09030; /* headings: warm gold, clear on dark */ --color-bg: #1e1814; /* warm near-black */ --color-bg-subtle: #28221a; --color-ink: #ece4d0; /* warm cream, close to light-mode bg tone */ --color-ink-muted: #9a8d78; --color-border: rgba(236, 228, 208, 0.12); /* Manuscript test: in dark mode the desk is lighter than the sheet, so the article reads as the darker, focal plane and the cream text keeps its contrast. (Inverts the light-mode relationship — deliberate; the sheet's reading surface itself never changes.) Shadows need more weight in dark mode; still warm, not pure black. */ --color-desk: #28221a; --shadow-sheet: 0 4px 28px rgba(10, 6, 2, 0.7), 0 2px 8px rgba(10, 6, 2, 0.5); /* Marginalia slip: a step lighter than the desk (which is itself lighter than the sheet), keeping the same on-top reading without breaking the inverted focal hierarchy. */ --color-slip: #332b21; --shadow-slip: 0 2px 12px rgba(10, 6, 2, 0.6), 0 1px 4px rgba(10, 6, 2, 0.45); /* Paper texture: weaker grain in dark mode — light noise on near-black surfaces tips into sensor-noise territory quickly. */ --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.14' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); --color-link-read: #9e833c; /* ~25% shift from primary toward ink-muted */ /* --opacity-card-read inherits from :root — mode-agnostic */ }