/* ============================================================
POWFU / UNWORTHY — colors_and_type.css
Vintage devotional. Parchment, sage, espresso. Gothic + serif.
============================================================ */
/* --- Webfonts ----------------------------------------------- */
/* SUBSTITUTIONS (no original font files supplied):
- "Unworthy" wordmark style → Pirata One (gothic, sharp serifs)
- "LOFI LIBRARY" all-caps serif → IM Fell English (worn, old-style serif)
- "the" italic script → Petit Formal Script
- "CLUB" blackletter → UnifrakturMaguntia
- Body / paragraph serif → Cormorant Garamond
- UI / mono → JetBrains Mono
Flag these to the user if exact-match fonts are required.
NOTE: The Google Fonts was moved into index.html's with
rel="preload" and display=swap for faster first paint. @import inside
CSS forces the browser to wait for design-tokens.css to load before
it even *starts* fetching the fonts.
*/
:root {
/* ============ COLOR — RAW PALETTE ======================== */
/* The four anchors supplied by the user. */
--ink-cream: #FFF8E8; /* candle-lit parchment, page */
--ink-parchment: #F7EED3; /* aged paper, panel surface */
--ink-sage: #AAB396; /* lichen, sage, muted accent */
--ink-espresso: #674636; /* burnt umber, primary ink */
/* Derived tones (oklch-harmonized off the four anchors). */
--ink-cream-soft: #FBF3DD; /* between cream + parchment */
--ink-parchment-deep: #EDE0BC;
--ink-sage-deep: #8C957A; /* hover / pressed sage */
--ink-sage-pale: #C8CFB9;
--ink-espresso-deep: #4A2F22; /* near-black, headings */
--ink-espresso-soft: #8C6B59; /* secondary text */
--ink-bone: #2B1D15; /* darkest ink, body on cream */
--ink-blood: #8B4543; /* dusty brick — softer devotional red */
--ink-gold: #B08840; /* illumination / metalwork */
/* ============ SEMANTIC SURFACES ========================== */
--bg: var(--ink-cream);
--bg-elevated: var(--ink-cream-soft);
--bg-panel: var(--ink-parchment);
--bg-panel-deep: var(--ink-parchment-deep);
--bg-inverse: var(--ink-espresso-deep);
--fg: var(--ink-bone);
--fg-1: var(--ink-bone); /* default body */
--fg-2: var(--ink-espresso); /* secondary */
--fg-3: var(--ink-espresso-soft); /* tertiary */
--fg-muted: var(--ink-sage-deep);
--fg-inverse: var(--ink-cream);
--border: #DAC9A6; /* soft sepia rule */
--border-strong: var(--ink-espresso);
--border-faint: #E8DBB9;
--accent: var(--ink-espresso); /* primary ink */
--accent-soft: var(--ink-sage);
--accent-hot: var(--ink-blood);
--accent-gold: var(--ink-gold);
/* ============ TYPE — FAMILIES ============================ */
--font-display: "Newsreader", "Cormorant Garamond", Georgia, serif;
--font-display-gothic: "Pirata One", "UnifrakturMaguntia", serif;
--font-blackletter: "UnifrakturMaguntia", "Pirata One", serif;
--font-serif: "Cormorant Garamond", "EB Garamond", "Iowan Old Style", Georgia, serif;
--font-serif-old: "Newsreader", "Cormorant Garamond", Georgia, serif; /* headlines — warm + readable */
--font-serif-sc: "Cormorant Garamond", Georgia, serif; /* used uppercase + letterspaced */
/* "Script" position now resolves to Newsreader 700 italic — readable + bold + elegant.
The brand's actual cursive script lives only in the Lofi Library Club logo (image). */
--font-script: "Newsreader", "Cormorant Garamond", Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--font-ui: "Cormorant Garamond", Georgia, serif; /* UI uses serif here — no sans */
/* ============ TYPE — SCALE =============================== */
/* Display sizes lean LARGE because gothic + parchment loves space. */
--t-display: clamp(72px, 9vw, 144px); /* hero wordmark */
--t-h1: clamp(48px, 5.5vw, 88px);
--t-h2: clamp(36px, 4vw, 60px);
--t-h3: 28px;
--t-h4: 22px;
--t-lead: 22px; /* opening line */
--t-body: 18px;
--t-body-sm: 16px;
--t-caption: 14px;
--t-micro: 12px;
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-normal: 1.45;
--lh-loose: 1.65;
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-loose: 0.08em;
--ls-spaced: 0.18em; /* all-caps labels */
/* ============ SPACING / RADII / SHADOW =================== */
--sp-0: 0;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-10: 128px;
/* Corners are minimal. This brand is squared / etched. */
--r-0: 0;
--r-1: 2px;
--r-2: 4px; /* default card / button */
--r-3: 8px; /* rare, only on softer surfaces */
--r-full: 9999px;
/* Shadows imitate ink-on-paper rather than drop-shadow. */
--shadow-rule: inset 0 -1px 0 var(--border);
--shadow-paper: 0 1px 0 var(--border-faint), 0 2px 0 var(--ink-parchment-deep);
--shadow-press: inset 0 2px 0 rgba(75, 47, 34, 0.18);
--shadow-frame: 0 0 0 1px var(--ink-espresso), 0 0 0 5px var(--ink-cream), 0 0 0 6px var(--ink-espresso);
/* Grain overlay (apply to surfaces with bg-image) */
--grain-url: url("data:image/svg+xml;utf8,");
}
/* ============ ELEMENTS / SEMANTIC RULES ================== */
html, body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-serif);
font-size: var(--t-body);
line-height: var(--lh-normal);
}
/* Body & paragraphs */
p {
font-family: var(--font-serif);
font-size: var(--t-body);
line-height: var(--lh-loose);
color: var(--fg-1);
margin: 0 0 var(--sp-4);
text-wrap: pretty;
}
p.lead {
font-size: var(--t-lead);
font-style: italic;
color: var(--fg-2);
}
p.dropcap::first-letter {
font-family: var(--font-display);
font-size: 4.2em;
float: left;
line-height: 0.85;
padding: 6px 10px 0 0;
color: var(--ink-espresso);
}
/* Headings */
h1, .h1 {
font-family: var(--font-display);
font-size: var(--t-h1);
line-height: var(--lh-tight);
color: var(--ink-espresso-deep);
font-weight: 400;
letter-spacing: var(--ls-normal);
margin: 0 0 var(--sp-5);
}
h2, .h2 {
font-family: var(--font-serif-old);
font-size: var(--t-h2);
line-height: var(--lh-snug);
color: var(--ink-espresso-deep);
font-weight: 500;
margin: 0 0 var(--sp-4);
}
h3, .h3 {
font-family: var(--font-serif-old);
font-size: var(--t-h3);
line-height: var(--lh-snug);
color: var(--ink-espresso);
font-weight: 500;
margin: 0 0 var(--sp-3);
}
h4, .h4 {
font-family: var(--font-serif);
font-size: var(--t-h4);
line-height: var(--lh-snug);
color: var(--ink-espresso);
font-weight: 600;
font-style: italic;
margin: 0 0 var(--sp-2);
}
/* Display / hero */
.display {
font-family: var(--font-display);
font-size: var(--t-display);
line-height: var(--lh-tight);
color: var(--ink-espresso-deep);
}
.blackletter {
font-family: var(--font-blackletter);
}
.script {
font-family: var(--font-script);
font-style: italic;
}
/* All-caps labels (chapter, section, eyebrow) */
.eyebrow,
.label {
font-family: var(--font-serif-sc);
font-size: var(--t-caption);
letter-spacing: var(--ls-spaced);
text-transform: uppercase;
color: var(--fg-3);
}
/* Pull-quote / hymn line */
blockquote {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--t-h4);
line-height: var(--lh-loose);
color: var(--fg-2);
border-left: 2px solid var(--ink-espresso);
padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
margin: var(--sp-5) 0;
}
/* Inline */
a {
color: var(--ink-espresso);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--ink-sage);
transition: color 120ms ease, text-decoration-color 120ms ease;
}
a:hover { color: var(--ink-blood); text-decoration-color: currentColor; }
em, i { font-style: italic; }
strong, b { font-weight: 600; color: var(--ink-espresso-deep); }
small { font-size: var(--t-caption); color: var(--fg-3); }
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--bg-panel);
padding: 1px 5px;
border-radius: var(--r-1);
border: 1px solid var(--border);
}
hr {
border: 0;
border-top: 1px solid var(--border);
margin: var(--sp-6) 0;
}
hr.ornament {
border: 0;
height: 24px;
background: center / contain no-repeat;
/* a hairline rule with a centered diamond */
background-image: linear-gradient(var(--ink-espresso), var(--ink-espresso));
background-size: 100% 1px;
position: relative;
}
hr.ornament::after {
content: "✦";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--bg);
padding: 0 var(--sp-3);
color: var(--ink-espresso);
font-size: 14px;
}
/* Selection */
::selection { background: var(--ink-sage); color: var(--ink-espresso-deep); }