/* * CadeBrownlee design tokens — the single source of visual values (charter §5). * Components reference these custom properties; they never hard-code colors, fonts, * spacing, radii, or shadows. Retheme the whole platform by editing this one file. * * Base tokens live on :root. The `.read` (public) and `.admin` surfaces remap a small * subset (backgrounds, sidebar) while sharing every token NAME, so the same component * looks correct in either host. */ :root { /* ---- Color: warm paper + ink + brass ---------------------------------- */ --paper: #f7f3ea; /* warm cream reading surface */ --paper-raised: #fcfaf4; /* cards / raised panels */ --ink: #211c15; /* warm near-black body text */ --muted: #6b6154; /* secondary text, captions */ --faint: #9c9384; /* hints, disabled */ --accent: #9a7b2e; /* brass/gold — links, primary actions */ --accent-strong: #7d6220; /* hover / active brass */ --accent-contrast: #fdfaf2;/* text/icon on an accent fill */ --border: #e4dcc9; /* hairlines, field borders */ --border-strong: #d2c7ae; /* emphasized dividers */ /* Surface aliases — remapped per host below. Default to the public look. */ --bg: var(--paper); --surface: var(--paper); --card: var(--paper-raised); --sidebar: #1b1915; --sidebar-ink: #efe9dc; --sidebar-muted: #a89c86; /* Status + feedback */ --status-published: #2f7d57; --status-scheduled: #b0740f; --status-draft: #8a8172; --success: #2f7d57; --warn: #b0740f; --error: #a33a2b; /* ---- Typography ------------------------------------------------------- */ /* Literary serifs by default; specific woff2 faces land with the FontLibrary in a later phase. Admin chrome uses the UI sans. */ --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --font-body: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace; /* Modular scale (~1.25). rem-based. */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --line-height: 1.7; /* reading comfort */ --line-height-tight: 1.2; /* headings */ --measure: 68ch; /* max reading width */ /* ---- Space scale (0.25rem base) --------------------------------------- */ --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; /* ---- Radii / shadows / motion ----------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(33, 28, 21, 0.06), 0 1px 1px rgba(33, 28, 21, 0.04); --shadow-md: 0 4px 16px rgba(33, 28, 21, 0.10); --transition: 150ms ease; } /* Public "Read" — warm paper surface, ink text. */ .read { --bg: var(--paper); --surface: var(--paper); --card: var(--paper-raised); } /* Admin — same paper content area, warm near-black sidebar, same brass accent. */ .admin { --bg: var(--paper); --surface: var(--paper); --card: var(--paper-raised); } /* * Dark mode (charter §5). A warm dark palette that remaps only the COLOR tokens — every token * NAME is unchanged, so the whole platform re-themes here. The reading surface stays warm paper * by default and goes dark only when the OS prefers dark or the reader/writer toggles it (the * editor Dark button stamps data-theme on ). The explicit toggle wins in both directions. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #191510; --paper-raised: #221d16; --ink: #ece4d3; --muted: #a89c86; --faint: #6f6656; --accent: #c79a3e; --accent-strong: #d9ad4e; --accent-contrast: #191510; --border: #342d22; --border-strong: #463d2e; --sidebar: #131009; --sidebar-ink: #ece4d3; --sidebar-muted: #a89c86; --status-published: #46a877; --status-scheduled: #d29a3a; --status-draft: #9c927f; --success: #46a877; --warn: #d29a3a; --error: #d1614f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { --paper: #191510; --paper-raised: #221d16; --ink: #ece4d3; --muted: #a89c86; --faint: #6f6656; --accent: #c79a3e; --accent-strong: #d9ad4e; --accent-contrast: #191510; --border: #342d22; --border-strong: #463d2e; --sidebar: #131009; --sidebar-ink: #ece4d3; --sidebar-muted: #a89c86; --status-published: #46a877; --status-scheduled: #d29a3a; --status-draft: #9c927f; --success: #46a877; --warn: #d29a3a; --error: #d1614f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); } /* ---- Minimal base element styling (spare; real layout lands in phase 1) -- */ body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-height); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--line-height-tight); color: var(--ink); margin: 0 0 var(--space-4); } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--transition); } a:hover { color: var(--accent-strong); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* * Theme toggle control (ThemeToggle.razor). Lives here because the sun/moon icon choice keys * off the same data-theme / prefers-color-scheme logic as the palette above, so both stay in * lockstep and the correct icon shows before first paint (no flash). */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; color: inherit; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle .tt-icon { width: 1.15rem; height: 1.15rem; } /* Show the icon for the theme you can switch TO. Default (light) shows the moon. */ .theme-toggle .tt-sun { display: none; } .theme-toggle .tt-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .tt-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .tt-moon { display: none; } } :root[data-theme="dark"] .theme-toggle .tt-sun { display: block; } :root[data-theme="dark"] .theme-toggle .tt-moon { display: none; } :root[data-theme="light"] .theme-toggle .tt-sun { display: none; } :root[data-theme="light"] .theme-toggle .tt-moon { display: block; } /* Floating variant for the minimal review host (no nav to sit in). */ .theme-toggle.theme-toggle--floating { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 20; background: var(--paper-raised); box-shadow: var(--shadow-sm); }