/* ==========================================================================
The Reading Room — Design Tokens
Janet Travell Foundation · janettravell.org
Every color, type, spacing and surface value for the Reading Room is
defined here. Components should use these custom properties and never
hard-code values.
Fonts are loaded from Google Fonts. Add this to each page's :
========================================================================== */
:root {
/* ------------------------------------------------------------------------
1. Brand palette (locked)
------------------------------------------------------------------------ */
--color-crimson: #7A1F2A;
--color-gold: #C8A24B;
--color-navy: #1E2A44;
--color-parchment: #F6F1E4;
--color-walnut: #6E4A2E;
--color-ink: #2A2420;
/* Tints and shades derived from the brand palette */
--color-crimson-dark: #5E1720;
--color-gold-light: #E3CB8F;
--color-gold-pale: #F1E5C3;
--color-navy-light: #34425F;
--color-parchment-dark: #ECE4D0; /* recessed panels, thumbnails */
--color-parchment-deep: #DFD4BA; /* placeholder fills */
--color-parchment-light: #FBF8F0; /* raised surfaces */
--color-walnut-light: #9A7556;
--color-ink-soft: #5A4F47; /* secondary text */
--color-ink-muted: #6F645C; /* tertiary text, captions */
/* ------------------------------------------------------------------------
2. Semantic color roles
------------------------------------------------------------------------ */
--color-bg: var(--color-parchment);
--color-surface: var(--color-parchment);
--color-surface-raised: var(--color-parchment-light);
--color-surface-sunken: var(--color-parchment-dark);
--color-text: var(--color-ink);
--color-text-secondary: var(--color-ink-soft);
--color-text-muted: var(--color-ink-muted);
--color-text-inverse: var(--color-parchment);
--color-heading: var(--color-ink);
--color-eyebrow: var(--color-crimson);
--color-link: var(--color-crimson);
--color-link-hover: var(--color-crimson-dark);
--color-accent: var(--color-gold);
--color-focus: var(--color-navy);
--color-rule: rgba(110, 74, 46, 0.28); /* walnut, hairlines */
--color-rule-strong: rgba(110, 74, 46, 0.55);
--color-border: var(--color-rule);
/* Archive status */
--color-status-digitized-bg: var(--color-gold);
--color-status-digitized-text: var(--color-ink);
--color-status-digitized-border: var(--color-gold);
--color-status-pending-bg: transparent;
--color-status-pending-text: var(--color-walnut);
--color-status-pending-border: var(--color-walnut);
--color-status-progress-bg: var(--color-gold-pale);
--color-status-progress-text: var(--color-ink);
--color-status-progress-border: var(--color-gold);
/* Series tags */
--color-tag-bg: var(--color-navy);
--color-tag-text: var(--color-parchment);
/* ------------------------------------------------------------------------
3. Typography — families
Merriweather: headings and body
IBM Plex Mono: navigation, metadata, labels, tags
Courier Prime: primary source archive excerpts only
------------------------------------------------------------------------ */
--font-serif: "Merriweather", Georgia, "Times New Roman", serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--font-archive: "Courier Prime", "Courier New", Courier, monospace;
--font-heading: var(--font-serif);
--font-body: var(--font-serif);
--font-nav: var(--font-mono);
--font-meta: var(--font-mono);
--font-label: var(--font-mono);
--font-tag: var(--font-mono);
--font-excerpt: var(--font-archive);
/* Weights */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 900;
/* Type scale (1.25 ratio, 16px base) */
--text-2xs: 0.6875rem; /* 11px — eyebrows, tags */
--text-xs: 0.75rem; /* 12px — metadata, labels */
--text-sm: 0.875rem; /* 14px — captions, card body */
--text-base: 1rem; /* 16px — body */
--text-md: 1.125rem; /* 18px — lead text */
--text-lg: 1.25rem; /* 20px — card titles */
--text-xl: 1.5625rem; /* 25px — h3 */
--text-2xl: 1.953rem; /* 31px — h2 */
--text-3xl: 2.441rem; /* 39px — h1 */
--text-4xl: 3.052rem; /* 49px — display */
/* Line heights */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.6;
--leading-relaxed: 1.75; /* long-form reading */
/* Letter spacing */
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.08em;
--tracking-widest: 0.14em; /* eyebrows, uppercase labels */
/* Measure (line length) */
--measure-narrow: 45ch;
--measure: 65ch;
--measure-wide: 80ch;
/* ------------------------------------------------------------------------
4. Spacing (4px base)
------------------------------------------------------------------------ */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* ------------------------------------------------------------------------
5. Borders, radii, shadows
------------------------------------------------------------------------ */
--border-width: 1px;
--border-width-thick: 2px;
--border-hairline: var(--border-width) solid var(--color-rule);
--border-strong: var(--border-width) solid var(--color-rule-strong);
--border-accent: var(--border-width-thick) solid var(--color-gold);
--radius-none: 0;
--radius-sm: 2px; /* cards, thumbnails — library-quality, near-square */
--radius-md: 4px; /* badges */
--radius-pill: 999px; /* series tags */
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(42, 36, 32, 0.06);
--shadow-card: 0 1px 2px rgba(42, 36, 32, 0.05), 0 2px 8px rgba(42, 36, 32, 0.06);
--shadow-hover: 0 2px 4px rgba(42, 36, 32, 0.07), 0 8px 20px rgba(42, 36, 32, 0.09);
/* ------------------------------------------------------------------------
6. Layout
------------------------------------------------------------------------ */
--container-sm: 640px;
--container-md: 880px;
--container-lg: 1120px;
--container-xl: 1280px;
--gutter: var(--space-4);
--card-thumb-width: 100px;
--card-padding: var(--space-6);
--card-gap: var(--space-5);
/* ------------------------------------------------------------------------
7. Motion
------------------------------------------------------------------------ */
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ------------------------------------------------------------------------
8. Focus
------------------------------------------------------------------------ */
--focus-ring: 0 0 0 2px var(--color-parchment), 0 0 0 4px var(--color-focus);
--focus-ring-offset: 2px;
/* ------------------------------------------------------------------------
9. Navigation
------------------------------------------------------------------------ */
--color-nav-bg: var(--color-bg);
--color-nav-link: var(--color-text); /* typed-ink links */
--color-nav-link-hover: var(--color-link);
--color-nav-link-current: var(--color-link);
--color-nav-underline: var(--color-accent); /* hover */
--color-nav-underline-current: var(--color-link); /* current page: 9:1 on parchment */
--color-wordmark: var(--color-crimson);
--color-wordmark-hover: var(--color-crimson-dark);
--color-wordmark-sep: var(--color-gold);
--nav-target: 2.75rem; /* 44px minimum tap target */
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}