/* ===== Site-wide styles — jeremiahstover.com ===== */

/* --- Design tokens --- */
:root {
    --js-primary: #7A756A;
    --js-primary-light: #5C5448;
    --js-primary-dim: #c5bfb4;
    --js-warm: #1a1816;
    --js-text: #3D372C;
    --js-muted: #7A756A;
    --js-bg: #f5f0e8;
    --js-bg-card: #ebe5d9;
    --js-border: #d5cfc4;
    --js-accent: #3d6a3d;
}

/* --- Light theme --- */
html[data-theme="light"] {
    --pico-background-color: var(--js-bg);
    --pico-color: var(--js-text);
    --pico-h1-color: var(--js-warm);
    --pico-h2-color: var(--js-primary-light);
    --pico-muted-color: var(--js-muted);
    --pico-primary: var(--js-accent);
    --pico-primary-hover: var(--js-primary-light);
    --pico-blockquote-border-color: var(--js-primary-dim);
}
html[data-theme="light"], html[data-theme="light"] body {
    background-color: #f5f0e8 !important;
    background-image: url('../img/parchment-speckle-light.jpg') !important;
    background-repeat: repeat !important;
    background-size: 512px 512px !important;
}

/* --- Dark theme --- */
html[data-theme="dark"] {
    --js-primary: #8A8070;
    --js-primary-light: #A89E90;
    --js-primary-dim: #5C5448;
    --js-warm: #E0DCC8;
    --js-text: #D6CCBF;
    --js-muted: #8E8A7A;
    --js-bg: #1A1208;
    --js-bg-card: #231A0E;
    --js-border: #3D2A10;
    --js-accent: #A4B890;
    --pico-background-color: var(--js-bg);
    --pico-color: var(--js-text);
    --pico-h1-color: var(--js-warm);
    --pico-h2-color: var(--js-primary-light);
    --pico-muted-color: var(--js-muted);
    --pico-primary: var(--js-accent);
    --pico-primary-hover: var(--js-primary-light);
    --pico-blockquote-border-color: var(--js-primary-dim);
}
html[data-theme="dark"], html[data-theme="dark"] body {
    background-color: #1A1208 !important;
    background-image: url('../img/parchment-speckle-dark.jpg') !important;
    background-repeat: repeat !important;
    background-size: 512px 512px !important;
}

/* --- Shared layout --- */
.section {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2.5rem 1rem;
}
.section h2 { font-size: 1.3rem; font-weight: 600; margin-bottom: 1.25rem; }
.section p { line-height: 1.85; margin-bottom: 1.25rem; }
.section a { color: var(--js-accent); text-decoration: none; }
.section a:hover { color: var(--js-warm); }

.divider {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--js-primary-dim);
    font-size: 1.2rem;
    letter-spacing: 0.5em;
}

blockquote { border-left: 3px solid var(--js-primary-dim); padding: 0.75rem 1.25rem; margin: 1.5rem 0; font-style: italic; color: var(--js-muted); }
blockquote cite { display: block; font-style: normal; font-size: 0.85rem; margin-top: 0.5rem; color: var(--js-primary-dim); }

/* --- Footer --- */
footer { text-align: center; padding: 3rem 1rem; font-size: 0.8rem; color: var(--js-primary-dim); border-top: 1px solid var(--js-border); }
footer a { color: var(--js-muted); text-decoration: none; }
footer a:hover { color: var(--js-accent); }

/* --- Theme toggle button --- */
#theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: none;
    border: 1px solid var(--pico-muted-color, #7A756A);
    color: var(--pico-muted-color, #7A756A);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.7rem;
    border-radius: 0.2rem;
    cursor: pointer;
    text-transform: uppercase;
    opacity: 0.6;
    z-index: 999;
    transition: opacity 0.2s;
}
#theme-toggle:hover { opacity: 1; }