/* === Living Scroll design tokens from light.html style guide =======================
Dark = default (on or data-theme="dark").
Light = via [data-theme="light"] on .
======================================================================== */
/* Dark theme (default) */
:root,
html[data-theme="dark"] {
/* Ink scale */
--color-ink-50: oklch(0.97 0.01 80);
--color-ink-100: oklch(0.93 0.015 80);
--color-ink-200: oklch(0.85 0.020 75);
--color-ink-300: oklch(0.72 0.025 70);
--color-ink-400: oklch(0.58 0.025 65);
--color-ink-500: oklch(0.46 0.020 60);
--color-ink-600: oklch(0.34 0.018 55);
--color-ink-700: oklch(0.24 0.015 50);
--color-ink-800: oklch(0.17 0.012 45);
--color-ink-900: oklch(0.12 0.010 40);
--color-ink-950: oklch(0.08 0.008 35);
/* Accents */
--color-copper-300: oklch(0.82 0.10 55);
--color-copper-400: oklch(0.74 0.13 52);
--color-copper-500: oklch(0.65 0.15 48);
--color-copper-600: oklch(0.55 0.16 45);
--color-crimson-400: oklch(0.70 0.18 25);
--color-crimson-500: oklch(0.60 0.20 22);
--color-emerald-400: oklch(0.78 0.14 155);
--color-emerald-500: oklch(0.68 0.15 155);
--color-amber-400: oklch(0.82 0.15 85);
/* Semantic (theme-aware) */
--color-bg: var(--color-ink-950);
--color-surface: var(--color-ink-900);
--color-surface-2: var(--color-ink-800);
--color-surface-3: var(--color-ink-700);
--color-border: var(--color-ink-700);
--color-border-soft: var(--color-ink-800);
--color-text: var(--color-ink-100);
--color-text-muted: var(--color-ink-300);
--color-text-faint: var(--color-ink-400);
--color-text-inv: var(--color-ink-950);
--color-accent: var(--color-amber-400);
--color-accent-hi: oklch(0.88 0.13 88);
--color-accent-lo: oklch(0.74 0.15 82);
--color-danger: var(--color-crimson-400);
--color-success: var(--color-emerald-400);
--color-warning: var(--color-copper-400);
/* Typography */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-serif: "EB Garamond", "Iowan Old Style", "Apple Garamond", ui-serif, serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
--font-hebrew: "Noto Serif Hebrew", "SBL Hebrew", "Times New Roman", serif;
/* Radii */
--radius-xs: 0.25rem;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
--shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.5);
--shadow-lg: 0 12px 32px -4px rgb(0 0 0 / 0.6);
--shadow-glow: 0 0 0 1px var(--color-copper-500), 0 0 24px -4px var(--color-copper-500);
}
/* Light theme overrides (exact from light.html) */
html[data-theme="light"] {
--color-bg: oklch(0.97 0.018 85);
--color-surface: oklch(0.94 0.020 83);
--color-surface-2: oklch(0.90 0.022 81);
--color-surface-3: oklch(0.84 0.025 78);
--color-border: oklch(0.62 0.030 65);
--color-border-soft: oklch(0.80 0.022 70);
--color-text: oklch(0.22 0.030 45);
--color-text-muted: oklch(0.38 0.025 50);
--color-text-faint: oklch(0.52 0.025 55);
--color-text-inv: oklch(0.98 0.012 85);
--color-accent: oklch(0.42 0.16 42);
--color-accent-hi: oklch(0.34 0.16 40);
--color-accent-lo: oklch(0.55 0.15 45);
--color-danger: oklch(0.42 0.20 25);
--color-success: oklch(0.40 0.15 155);
--color-warning: oklch(0.45 0.16 75);
--shadow-sm: 0 1px 2px 0 rgb(60 40 20 / 0.08);
--shadow-md: 0 4px 12px -2px rgb(60 40 20 / 0.12);
--shadow-lg: 0 12px 32px -4px rgb(60 40 20 / 0.16);
--shadow-glow: 0 0 0 1px var(--color-accent), 0 0 16px -4px var(--color-accent);
}
/* Base styles from light.html */
html {
background: var(--color-bg);
color-scheme: dark;
}
html[data-theme="light"] {
color-scheme: light;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Paper-grain dots removed per user request */
/* Focus ring */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Inline SVG icon sizing */
.btn-icon {
width: 0.875rem;
height: 0.875rem;
flex-shrink: 0;
fill: currentColor;
}
/* Hebrew */
.hebrew {
font-family: var(--font-hebrew);
direction: rtl;
unicode-bidi: isolate;
}
/* Scholarly */
.prose-scholarly {
font-family: var(--font-serif);
}
/* Selection */
::selection {
background: var(--color-copper-500);
color: var(--color-ink-950);
}
/* === Header logo =========================================== */
.header-logo {
display: none;
height: auto;
width: auto;
/* Desktop default: cap height within h-16 (64px) bar */
max-height: 46px;
max-width: 160px;
object-fit: contain;
}
/* Mobile: slightly smaller */
@media (max-width: 767px) {
.header-logo {
max-height: 38px;
max-width: 140px;
}
}
/* Show the correct image per theme */
html[data-theme="dark"] .header-logo-dark {
display: block;
}
html[data-theme="light"] .header-logo-light {
display: block;
}
/* === Footer background (distinct from page bg) ============= */
:root,
html[data-theme="dark"] {
--color-footer-bg: oklch(0.17 0.012 45); /* ink-800: lighter than bg (ink-950) */
--color-footer-border: var(--color-ink-700);
}
html[data-theme="light"] {
--color-footer-bg: oklch(0.84 0.025 78); /* surface-3: darker than bg (0.97) */
--color-footer-border: oklch(0.62 0.030 65);
}
/* === Living Scroll Scripture Quote (front-end rendering) ===================== */
.ptm-scripture {
border-left: 4px solid var(--color-accent);
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
background: var(--color-surface-2);
padding: 0.75rem 1rem 0.75rem 1.25rem;
margin: 1rem 0;
color: var(--color-text-muted);
font-family: var(--font-serif, Georgia, serif);
font-size: 1rem;
line-height: 1.6;
}
.ptm-scripture p { margin: 0; }
.ptm-scripture p + p { margin-top: 0.5rem; }
/* === Living Scroll Table cell defaults — top + left ===================== */
article td,
article th,
.prose-scholarly td,
.prose-scholarly th,
.ptm-scripture td,
.ptm-scripture th,
.s-article-body td,
.s-article-body th {
vertical-align: top;
text-align: left;
}
/* === Living Scroll Table width — fill container ======================== */
article table,
.prose-scholarly table,
.s-article-body table,
.ptm-scripture table {
width: 100%;
}
/* === Living Scroll Table — figure wrapper + table fill container ============== */
article figure.table,
.prose-scholarly figure.table,
.s-article-body figure.table,
.s-article-body figure.table > table {
width: 100%;
margin-left: 0;
margin-right: 0;
}
article figure.table > table,
.s-article-body figure.table > table {
width: 100% !important;
table-layout: auto;
}
/* === Living Scroll Table header row — bold + surface-2 bg ===================== */
article table thead th,
article table thead td,
.prose-scholarly table thead th,
.prose-scholarly table thead td,
.s-article-body table thead th,
.s-article-body table thead td {
font-weight: 700;
color: var(--color-text);
background: var(--color-surface-2);
text-align: left;
vertical-align: top;
padding: 0.5rem 0.75rem;
border-bottom: 2px solid var(--color-border);
}
/* === Living Scroll Global H1/H2 — primary accent color per theme ============= */
/* Gold on dark theme, copper-red on light theme */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2 {
color: var(--color-accent) !important;
}
[data-theme="light"] h1,
[data-theme="light"] h2,
html[data-theme="light"] h1,
html[data-theme="light"] h2 {
color: var(--color-accent) !important;
}
/* Fallback: when no data-theme attribute is set, use default (dark) */
h1, h2 {
color: var(--color-accent) !important;
}