/* ============================================================================
JOSEMARÍA EARTH — theme tokens
Terracotta, olive and warm stone. Rooted in Spain.
Light + dark, switched by a `data-theme` attribute on :
forced light
forced dark
(absent) follows the OS via prefers-color-scheme
Every text/background pair below meets WCAG 2.1 AA (>= 4.5:1).
Measured ratios are noted beside each token.
========================================================================= */
/* ---------------------------------------------------------------- palette */
:root {
/* Raw ramp — reference only. Use the semantic tokens below in components. */
--clay-50: #FFFCF8;
--clay-100: #F7F2EC;
--clay-200: #F3DFD5;
--clay-300: #E0D3C6;
--clay-400: #B39C8D;
--clay-500: #6E5C52;
--clay-700: #3B2F27;
--clay-800: #221B17;
--clay-900: #171310;
--clay-950: #2C2320;
--terracotta-400: #E08A63;
--terracotta-600: #A4472A;
--terracotta-950: #3A241A;
--olive-300: #A9BE73;
--olive-700: #55632F;
--olive-950: #262B18;
/* Non-color primitives (mode-independent) */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
--step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);
--step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
--step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.42rem);
--step-2: clamp(1.50rem, 1.35rem + 0.75vw, 1.95rem);
--step-3: clamp(1.90rem, 1.62rem + 1.40vw, 2.75rem);
--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;
--radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px;
--measure: 62ch; /* prose line length */
--transition: 200ms cubic-bezier(.2, 0, 0, 1);
}
/* ------------------------------------------------------- semantic: light */
:root,
[data-theme="light"] {
color-scheme: light;
--bg: #F7F2EC; /* page */
--surface: #FFFCF8; /* cards, panels */
--surface-sunk: #F1E9E0; /* wells, inputs, track backgrounds */
--text: #2C2320; /* 13.79:1 on bg · 15.00:1 on surface */
--muted: #6E5C52; /* 5.69:1 on bg · 6.19:1 on surface */
--border: #E0D3C6;
--accent: #A4472A; /* 5.37:1 on bg · 5.84:1 on surface */
--accent-soft: #F3DFD5; /* accent on accent-soft = 4.65:1 */
--accent-hover: #8E3C22;
--on-accent: #FFFCF8; /* 5.84:1 on accent — text inside filled btns */
--olive: #55632F; /* 5.87:1 on bg — secondary accent */
--olive-soft: #E6E8D4; /* olive on olive-soft = 5.25:1 */
--on-olive: #FFFCF8;
--shadow-sm: 0 1px 2px rgb(44 35 32 / .06);
--shadow-md: 0 2px 8px rgb(44 35 32 / .08), 0 1px 2px rgb(44 35 32 / .06);
--shadow-lg: 0 8px 28px rgb(44 35 32 / .12);
}
/* -------------------------------------------------------- semantic: dark */
[data-theme="dark"] {
color-scheme: dark;
--bg: #171310;
--surface: #221B17;
--surface-sunk: #120F0C;
--text: #EFE4DA; /* 14.76:1 on bg · 13.56:1 on surface */
--muted: #B39C8D; /* 7.09:1 on bg · 6.51:1 on surface */
--border: #3B2F27;
--accent: #E08A63; /* 7.02:1 on bg · 6.45:1 on surface */
--accent-soft: #3A241A; /* accent on accent-soft = 5.52:1 */
--accent-hover: #EDA07E;
--on-accent: #171310; /* 7.02:1 on accent */
--olive: #A9BE73; /* 9.06:1 on bg */
--olive-soft: #262B18; /* olive on olive-soft = 7.15:1 */
--on-olive: #171310;
--shadow-sm: 0 1px 2px rgb(0 0 0 / .40);
--shadow-md: 0 2px 8px rgb(0 0 0 / .45), 0 1px 2px rgb(0 0 0 / .35);
--shadow-lg: 0 8px 28px rgb(0 0 0 / .55);
}
/* Auto mode: no data-theme attribute set, follow the OS. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
--bg: #171310; --surface: #221B17; --surface-sunk: #120F0C;
--text: #EFE4DA; --muted: #B39C8D; --border: #3B2F27;
--accent: #E08A63; --accent-soft: #3A241A; --accent-hover: #EDA07E;
--on-accent: #171310;
--olive: #A9BE73; --olive-soft: #262B18; --on-olive: #171310;
--shadow-sm: 0 1px 2px rgb(0 0 0 / .40);
--shadow-md: 0 2px 8px rgb(0 0 0 / .45), 0 1px 2px rgb(0 0 0 / .35);
--shadow-lg: 0 8px 28px rgb(0 0 0 / .55);
}
}
/* ============================================================= base reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--step-0);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
transition: background-color var(--transition), color var(--transition);
}
/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
:where(h1, h2, h3, h4) {
font-family: var(--font-serif);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
margin: 0 0 var(--space-3);
text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
::selection { background: var(--accent-soft); color: var(--text); }
/* ============================================================= components */
/* --- prayer / reading surface ------------------------------------------ */
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
box-shadow: var(--shadow-sm);
}
.prose {
font-family: var(--font-serif);
font-size: var(--step-1);
line-height: 1.75;
max-width: var(--measure);
}
.prose p { margin: 0 0 1em; }
.prose em { color: var(--muted); font-style: italic; }
/* The quoted prayer itself. */
.quote {
font-family: var(--font-serif);
font-style: italic;
border-left: 3px solid var(--accent);
background: var(--accent-soft);
padding: var(--space-3) var(--space-4);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin: 0 0 var(--space-4);
}
/* Rubric / imprimatur small print. */
.rubric {
font-size: var(--step--1);
color: var(--muted);
line-height: 1.5;
}
/* Day label above a heading. */
.eyebrow {
font-size: var(--step--1);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--space-2);
}
/* --- buttons ------------------------------------------------------------ */
.btn {
font: inherit;
font-weight: 600;
font-size: var(--step-0);
padding: var(--space-3) var(--space-5);
border: 1px solid transparent;
border-radius: var(--radius-md);
background: var(--accent);
color: var(--on-accent);
cursor: pointer;
min-height: 44px; /* touch target */
transition: background-color var(--transition);
}
.btn:hover { background: var(--accent-hover); }
.btn--ghost {
background: transparent;
color: var(--text);
border-color: var(--border);
}
.btn--ghost:hover { background: var(--surface); }
.btn--olive { background: var(--olive); color: var(--on-olive); }
/* --- chips / pills ------------------------------------------------------ */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--step--1);
font-weight: 600;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
background: var(--accent-soft);
color: var(--accent);
}
.pill--muted {
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
}
.pill--olive { background: var(--olive-soft); color: var(--olive); }
/* --- nine-day progress -------------------------------------------------- */
.days { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.days__day {
inline-size: 2.25rem; block-size: 2.25rem;
display: grid; place-items: center;
font-size: var(--step--1); font-weight: 700;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--muted);
}
.days__day[data-state="done"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.days__day[data-state="current"] { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.progress {
block-size: 5px;
background: var(--surface-sunk);
border-radius: var(--radius-full);
overflow: hidden;
}
.progress__fill {
block-size: 100%;
background: var(--accent);
border-radius: inherit;
transition: inline-size var(--transition);
}
/* --- layout ------------------------------------------------------------- */
.container {
inline-size: min(100% - 2rem, 46rem);
margin-inline: auto;
padding-block: var(--space-6);
}
.appbar {
display: flex; align-items: center; gap: var(--space-3);
padding-block-end: var(--space-4);
border-block-end: 1px solid var(--border);
margin-block-end: var(--space-5);
}
/* ============================================================================
THEME TOGGLE — System + manual override
const KEY = 'theme'; // 'light' | 'dark' | null (=auto)
let mode = null; // swap for localStorage in a real app
const apply = () => {
if (mode) document.documentElement.dataset.theme = mode;
else delete document.documentElement.dataset.theme; // fall back to OS
};
document.getElementById('theme-toggle').addEventListener('click', () => {
const osDark = matchMedia('(prefers-color-scheme: dark)').matches;
const shown = mode ?? (osDark ? 'dark' : 'light');
mode = shown === 'dark' ? 'light' : 'dark';
apply();
});
apply();
To avoid a flash of the wrong theme, set data-theme in an inline