@font-face { font-family: 'CMU Sans Demi Condensed'; src: url('../fonts/cmu-sans-demicondensed.ttf') format('truetype'); font-weight: 400 600; font-display: swap; } /* Old Standard TT, served from here rather than Google Fonts: the app makes no third-party requests, and the published web demo can run under a `default-src 'self'` CSP. SIL OFL 1.1, see fonts/OldStandard-OFL.txt. */ @font-face { font-family: 'Old Standard TT'; src: url('../fonts/OldStandard-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Old Standard TT'; src: url('../fonts/OldStandard-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Old Standard TT'; src: url('../fonts/OldStandard-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } /* Dark is the default palette. Light's --text-dim, --accent, --accent-dim and --you were darkened in the 2026-09 redesign (JRNL-58): the originals failed AA against #faf7f2 (eyebrows sat at ~1.9:1). Dark is unchanged. The light palette below applies either when the OS asks for light *and* the reader hasn't pinned dark, or when the Appearance setting pins light outright (data-theme on , set from localStorage by the inline head script and settings.js). An explicit pin always beats the OS; "Auto" clears the attribute and hands it back. */ :root { color-scheme: light dark; /* native controls (select popups, checkboxes, scrollbars) follow the theme */ --bg: #211d19; /* warm charcoal, not pitch black */ --bg-raised: #2a2521; --bg-input: #322c27; --text: #e8e0d5; --text-dim: #a99f92; --accent: #d99e5b; /* lamp amber */ --accent-hover: #e8b377; /* the primary's hover: a step brighter */ --accent-dim: #8a6a44; --border: #3d362f; --you: #c9b99f; --error: #c96a5a; /* the app's one danger/error color */ /* fonts */ --font-ui: 'CMU Sans Demi Condensed', system-ui, sans-serif; --font-body: 'Old Standard TT', Georgia, 'Times New Roman', serif; /* type — UI chrome scale (prose uses body { font: 17px/1.65 ... } directly) */ --font-3xs: .7rem; --font-2xs: .75rem; --font-xs: .8rem; --font-sm: .85rem; --font-base: .95rem; --font-md: 1.05rem; --font-lg: 1.15rem; --font-xl: 1.4rem; /* spacing */ --space-1: .25rem; --space-2: .4rem; --space-3: .5rem; --space-4: .6rem; --space-5: .8rem; --space-6: 1rem; --space-7: 1.2rem; --space-8: 1.5rem; /* radius */ --radius-sm: 6px; --radius-base: 8px; --radius-lg: 10px; --radius-pill: 999px; --radius-circle: 50%; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #faf7f2; --bg-raised: #ffffff; --bg-input: #f1ece4; --text: #38322b; --text-dim: #6b6258; --accent: #9c6021; --accent-hover: #82501b; --accent-dim: #827020; --border: #e4dcd0; --you: #6a4a2a; --error: #a8493a; } } :root[data-theme="light"] { color-scheme: light; --bg: #faf7f2; --bg-raised: #ffffff; --bg-input: #f1ece4; --text: #38322b; --text-dim: #6b6258; --accent: #9c6021; --accent-hover: #82501b; --accent-dim: #827020; --border: #e4dcd0; --you: #6a4a2a; --error: #a8493a; } :root[data-theme="dark"] { color-scheme: dark; }