/*
Theme Name: Old St. John Lutheran Church
Theme URI: https://oldstjohnlutheranchurch.org
Description: Custom child theme for Old St. John Lutheran Church, a historic congregation founded in 1799 in Wytheville, Virginia. Features searchable cemetery records and heritage content.
Author: Dr00bie
Author URI:
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oldstjohn
*/

/*--------------------------------------------------------------
# CSS Custom Properties - Classic/Traditional Design System
--------------------------------------------------------------*/
:root {
    /* Primary Colors — Signature green from church grounds */
    --osjl-primary: #2d4335;           /* Signature green */
    --osjl-primary-dark: #1e2e24;      /* Darker green for hover states */
    --osjl-primary-light: #3d5a47;     /* Accent green */

    /* Secondary Colors — Amber sunlight on stone */
    --osjl-secondary: #b8943f;         /* Amber */
    --osjl-secondary-dark: #a07e2f;    /* Amber hover */
    --osjl-secondary-light: #d4af5c;   /* Lighter amber for dark backgrounds */
    /* Burnished-gold variant for amber AS TEXT on light/cream backgrounds.
     * #b8943f and #a07e2f both fail WCAG 1.4.3 (2.85:1 on white, 3.23:1 on
     * cream). #7d6224 passes 4.5:1 on white (5.87:1) and on cream (4.97:1).
     * Use this token for any amber TEXT — see .osjl-timeline-year,
     * .osjl-callout-label, .osjl-gallery active-tab. Bead 2a3 (CC-1). */
    --osjl-amber-deep: #7d6224;
    /* Static dark text for amber backgrounds — does NOT flip in dark mode.
     * White-on-amber-#b8943f = 2.85:1 (fails). Dark-on-amber-#b8943f =
     * 6.31:1 (passes). In dark mode the amber bg lightens to #d4af5c and
     * dark-on-#d4af5c = 8.5:1 — the SAME dark text works in both modes,
     * so this token is mode-pinned (same shape as --osjl-fg-on-primary). */
    --osjl-fg-on-amber: #1a1a1a;

    /* Spec palette — derived from physical materials on site.
     * Aliases route through canonicals via var() so the dark-mode :root
     * block only needs to override the canonical and the alias flows
     * through. Tokens that are standalone (stone-border, granite,
     * cabin-warm, muted, surface, selection) have their own dark-mode
     * overrides in the @media (prefers-color-scheme: dark) block. */
    --osjl-signature: var(--osjl-primary);           /* Church grounds */
    --osjl-amber: var(--osjl-secondary);             /* Sunlight on stone */
    --osjl-amber-hover: var(--osjl-secondary-dark);  /* Amber hover state */
    --osjl-stone-border: #a09a90;                    /* Limestone borders */
    --osjl-granite: #4a4843;                         /* Footer background */
    --osjl-cabin-warm: #5f4d3c;                      /* Log cabin brown */
    --osjl-muted: #4a4a4a;                           /* Muted text (AAA) */
    --osjl-surface: var(--osjl-white);               /* Card surfaces */
    --osjl-accent-green: var(--osjl-primary-light);  /* Hover/active green */
    --osjl-selection: #e8ede9;                       /* Selection highlight */
    --osjl-background: var(--osjl-cream);            /* Clapboard background */

    /* Neutral Colors */
    --osjl-cream: #f5f4f0;             /* Clapboard background */
    --osjl-cream-dark: #ebe8e2;        /* Darker cream for contrast */
    --osjl-white: #ffffff;

    /* Static colors that must NOT flip in dark mode. Use these for text
     * that sits on a hex-baked Elementor background (hero sections store
     * their bg color directly in _elementor_data — CSS token flips don't
     * reach it, so text that uses --osjl-white flips to near-black while
     * the section bg stays dark, producing 1.48:1 contrast.) */
    --osjl-fg-on-primary: #ffffff;     /* Text on the dark-green hero bg */
    --osjl-gray-100: #f5f5f5;
    --osjl-gray-200: #e8e8e8;
    --osjl-gray-300: #d1d1d1;
    --osjl-gray-400: #9e9e9e;
    --osjl-gray-500: #757575;
    --osjl-gray-600: #616161;
    --osjl-gray-700: #424242;
    --osjl-gray-800: #1a1a1a;
    --osjl-gray-900: #0a0a0a;

    /* Semantic text + surface tokens referenced by components. These
     * are aliases routed through the canonical tokens so the dark-mode
     * block only needs to override the canonicals. Previously missing —
     * callers relied on inline hex fallbacks, which silently bypassed
     * dark mode. */
    --osjl-text: var(--osjl-gray-800);       /* primary body/foreground text */
    --osjl-text-muted: var(--osjl-muted);    /* secondary/meta text */
    --osjl-border: #d5cfbe;                  /* parchment-stone border (chips, tables) */

    /* Accent Colors */
    --osjl-rust: #8b4513;              /* Rustic brown for Flohr House content */
    --osjl-sage: #5a6e5a;              /* Muted green for cemetery */
    --osjl-parchment: #f4ecd8;         /* Old paper color */

    /* Status Colors */
    --osjl-error: #991b1b;             /* Error text */
    --osjl-error-bg: #fef2f2;          /* Error background */
    --osjl-error-border: #fecaca;      /* Error border */
    --osjl-success: #166534;           /* Success text */
    --osjl-success-bg: #f0fdf4;        /* Success background */
    --osjl-success-border: #bbf7d0;    /* Success border */

    /* Plot chip colors (Civil War / 1812 / Died-in-Service). Sibling chips
     * (Patriot, Krone, Veteran) ride on existing palette tokens; these three
     * carry their own paired bg/fg so dark mode can flip them. Bead 4zw. */
    --osjl-chip-cw-bg: #d4d8dc;        /* light slate */
    --osjl-chip-cw-fg: #38404a;
    --osjl-chip-1812-bg: #cdd4cc;      /* light sage */
    --osjl-chip-1812-fg: #353e35;
    --osjl-chip-died-bg: #b4b8b6;      /* light stone */
    --osjl-chip-died-fg: #252a28;

    /* Typography */
    --osjl-font-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --osjl-font-sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
    --osjl-font-mono: 'Source Code Pro', 'Courier New', monospace;

    /* Font Sizes */
    --osjl-text-xs: 0.8125rem;         /* 13px — was 12px; legibility bump 2026-04 */
    --osjl-text-sm: 0.9375rem;         /* 15px — was 14px */
    --osjl-text-base: 1.0625rem;       /* 17px — was 16px; body prose lift */
    --osjl-text-lg: 1.1875rem;         /* 19px — was 18px; lead paragraphs */
    --osjl-text-xl: 1.25rem;           /* 20px */
    --osjl-text-2xl: 1.5rem;           /* 24px */
    --osjl-text-3xl: 1.875rem;         /* 30px */
    --osjl-text-4xl: 2.25rem;          /* 36px */
    --osjl-text-5xl: 3rem;             /* 48px */
    --osjl-text-6xl: 3.5rem;           /* 56px — hero display */
    --osjl-text-7xl: 4rem;             /* 64px — drop caps */

    /* Alpha overlays (use on dark photographic or colored backgrounds) */
    --osjl-white-a10: rgba(255, 255, 255, 0.10);
    --osjl-white-a20: rgba(255, 255, 255, 0.20);
    --osjl-white-a30: rgba(255, 255, 255, 0.30);
    --osjl-white-a70: rgba(255, 255, 255, 0.70);
    --osjl-white-a80: rgba(255, 255, 255, 0.80);
    --osjl-white-a85: rgba(255, 255, 255, 0.85);
    --osjl-white-a90: rgba(255, 255, 255, 0.90);
    --osjl-black-a15: rgba(0, 0, 0, 0.15);
    --osjl-black-a70: rgba(0, 0, 0, 0.70);
    --osjl-cream-a85: rgba(250, 248, 243, 0.85);
    --osjl-hero-overlay-start: rgba(45, 67, 53, 0.30);
    --osjl-hero-overlay-end:   rgba(45, 67, 53, 0.60);
    --osjl-secondary-a20: rgba(184, 148, 63, 0.20);

    /* Spacing */
    --osjl-spacing-xs: 0.25rem;
    --osjl-spacing-sm: 0.5rem;
    --osjl-spacing-md: 1rem;
    --osjl-spacing-lg: 1.5rem;
    --osjl-spacing-xl: 2rem;
    --osjl-spacing-2xl: 3rem;
    --osjl-spacing-3xl: 4rem;

    /* Border Radius */
    --osjl-radius-sm: 0.25rem;
    --osjl-radius-md: 0.5rem;
    --osjl-radius-lg: 1rem;

    /* Shadows */
    --osjl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --osjl-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --osjl-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --osjl-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --osjl-transition-fast: 150ms ease;
    --osjl-transition-base: 300ms ease;
    --osjl-transition-slow: 500ms ease;

    /* Animation easing — natural deceleration */
    --osjl-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --osjl-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Container widths */
    --osjl-container-sm: 640px;
    --osjl-container-md: 768px;
    --osjl-container-lg: 1024px;
    --osjl-container-xl: 1200px;
}

/*--------------------------------------------------------------
# Base Typography
--------------------------------------------------------------*/
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-base);
    line-height: 1.75;
    color: var(--osjl-gray-800);
    background-color: var(--osjl-cream);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--osjl-font-serif);
    line-height: 1.2;
    color: var(--osjl-primary);
    margin-bottom: var(--osjl-spacing-md);
}

h1 {
    font-size: var(--osjl-text-5xl);
    font-weight: 800;
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--osjl-text-4xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--osjl-text-3xl);
    font-weight: 600;
}

h4 {
    font-size: var(--osjl-text-2xl);
    font-weight: 600;
}

h5 {
    font-size: var(--osjl-text-xl);
    font-weight: 500;
    letter-spacing: 0.02em;
}

h6 {
    font-size: var(--osjl-text-lg);
    font-weight: 500;
    letter-spacing: 0.02em;
}

p {
    margin-bottom: var(--osjl-spacing-md);
}

a {
    color: var(--osjl-primary);
    text-decoration: none;
    transition: color var(--osjl-transition-fast);
}

a:hover {
    color: var(--osjl-secondary);
}

/*--------------------------------------------------------------
# Links and Buttons
--------------------------------------------------------------*/
/* Button system.
 * Base + variant selectors use the .osjl-btn.osjl-btn-VARIANT doubled form
 * (specificity 0,2,0) so they beat Elementor's kit rule
 * `.elementor-kit-XXXX button, …` (0,1,1) which otherwise paints every
 * native <button> primary-navy regardless of our variant class.
 * See custom.css .osjl-btn-amber for the original fix that exposed this. */
.osjl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--osjl-spacing-md) var(--osjl-spacing-xl);
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-base);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--osjl-radius-sm);
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    transition: all var(--osjl-transition-fast);
}

.osjl-btn.osjl-btn-primary,
.osjl-btn-primary {
    background-color: var(--osjl-primary);
    color: var(--osjl-white);
    border-color: var(--osjl-primary);
}

.osjl-btn.osjl-btn-primary:hover,
.osjl-btn.osjl-btn-primary:focus-visible,
.osjl-btn-primary:hover,
.osjl-btn-primary:focus-visible {
    background-color: var(--osjl-primary-dark);
    border-color: var(--osjl-primary-dark);
    color: var(--osjl-white);
}

.osjl-btn.osjl-btn-secondary,
.osjl-btn-secondary {
    background-color: var(--osjl-secondary);
    color: var(--osjl-white);
    border-color: var(--osjl-secondary);
}

.osjl-btn.osjl-btn-secondary:hover,
.osjl-btn.osjl-btn-secondary:focus-visible,
.osjl-btn-secondary:hover,
.osjl-btn-secondary:focus-visible {
    background-color: var(--osjl-secondary-dark);
    border-color: var(--osjl-secondary-dark);
    color: var(--osjl-white);
}

.osjl-btn.osjl-btn-outline,
.osjl-btn-outline {
    background-color: transparent;
    color: var(--osjl-primary);
    border-color: var(--osjl-primary);
}

.osjl-btn.osjl-btn-outline:hover,
.osjl-btn.osjl-btn-outline:focus-visible,
.osjl-btn-outline:hover,
.osjl-btn-outline:focus-visible {
    background-color: var(--osjl-primary);
    color: var(--osjl-white);
}

/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.osjl-card {
    background-color: var(--osjl-white);
    border-radius: var(--osjl-radius-md);
    box-shadow: var(--osjl-shadow-md);
    padding: var(--osjl-spacing-xl);
    transition: box-shadow var(--osjl-transition-base);
}

.osjl-card:hover {
    box-shadow: var(--osjl-shadow-lg);
}

.osjl-card-header {
    border-bottom: 1px solid var(--osjl-gray-200);
    padding-bottom: var(--osjl-spacing-md);
    margin-bottom: var(--osjl-spacing-md);
}

.osjl-card-title {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-xl);
    color: var(--osjl-primary);
    margin: 0;
}

/*--------------------------------------------------------------
# Cemetery Search Specific Styles
--------------------------------------------------------------*/
.osjl-cemetery-search {
    background-color: var(--osjl-white);
    padding: var(--osjl-spacing-xl);
    border-radius: var(--osjl-radius-md);
    box-shadow: var(--osjl-shadow-md);
    margin-bottom: var(--osjl-spacing-xl);
}

.osjl-cemetery-search input[type="text"],
.osjl-cemetery-search input[type="search"] {
    width: 100%;
    padding: var(--osjl-spacing-md);
    font-size: var(--osjl-text-lg);
    border: 2px solid var(--osjl-gray-300);
    border-radius: var(--osjl-radius-sm);
    transition: border-color var(--osjl-transition-fast);
}

.osjl-cemetery-search input:focus {
    border-color: var(--osjl-primary);
    outline: 2px solid var(--osjl-secondary);
    outline-offset: 2px;
}

.osjl-cemetery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--osjl-spacing-md);
    margin-top: var(--osjl-spacing-md);
}

.osjl-view-toggle {
    display: flex;
    gap: var(--osjl-spacing-sm);
    margin-bottom: var(--osjl-spacing-lg);
}

.osjl-view-toggle button {
    padding: var(--osjl-spacing-sm) var(--osjl-spacing-md);
    background-color: var(--osjl-gray-100);
    border: 1px solid var(--osjl-gray-300);
    border-radius: var(--osjl-radius-sm);
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    transition: all var(--osjl-transition-fast);
}

.osjl-view-toggle button.active,
.osjl-view-toggle button:hover {
    background-color: var(--osjl-primary);
    color: var(--osjl-white);
    border-color: var(--osjl-primary);
}

.osjl-view-toggle button:focus-visible {
    outline: 2px solid var(--osjl-primary);
    outline-offset: 2px;
}

/* Cemetery Record Cards */
.osjl-burial-card {
    background-color: var(--osjl-white);
    border: 1px solid var(--osjl-gray-200);
    border-radius: var(--osjl-radius-md);
    padding: var(--osjl-spacing-lg);
    transition: all var(--osjl-transition-base);
}

.osjl-burial-card:hover {
    border-color: var(--osjl-secondary);
    box-shadow: var(--osjl-shadow-md);
}

.osjl-burial-name {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-xl);
    color: var(--osjl-primary);
    margin-bottom: var(--osjl-spacing-sm);
}

.osjl-burial-dates {
    font-size: var(--osjl-text-sm);
    color: var(--osjl-gray-600);
    margin-bottom: var(--osjl-spacing-sm);
}

.osjl-burial-location {
    font-size: var(--osjl-text-sm);
    color: var(--osjl-sage);
    font-weight: 500;
}

/* Cemetery Table */
.osjl-cemetery-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--osjl-white);
}

.osjl-cemetery-table th {
    background-color: var(--osjl-primary);
    color: var(--osjl-white);
    font-family: var(--osjl-font-sans);
    font-weight: 600;
    padding: var(--osjl-spacing-md);
    text-align: left;
}

.osjl-cemetery-table td {
    padding: var(--osjl-spacing-md);
    border-bottom: 1px solid var(--osjl-gray-200);
}

.osjl-cemetery-table tr:hover {
    background-color: var(--osjl-cream);
}

.osjl-cemetery-table .name-cell {
    font-family: var(--osjl-font-serif);
    color: var(--osjl-primary);
}

/*--------------------------------------------------------------
# Heritage/History Styles
--------------------------------------------------------------*/
.osjl-timeline {
    position: relative;
    padding-left: var(--osjl-spacing-2xl);
}

.osjl-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--osjl-secondary);
}

.osjl-timeline-item {
    position: relative;
    padding-bottom: var(--osjl-spacing-xl);
}

.osjl-timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--osjl-spacing-2xl) - 5px);
    top: 0;
    width: 12px;
    height: 12px;
    background-color: var(--osjl-secondary);
    border-radius: 50%;
}

.osjl-timeline-year {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-2xl);
    color: var(--osjl-amber-deep); /* WCAG 1.4.3 — bead 2a3 */
    margin-bottom: var(--osjl-spacing-sm);
}

/* Blockquote for historical quotes */
.osjl-blockquote {
    border-left: 4px solid var(--osjl-secondary);
    padding-left: var(--osjl-spacing-lg);
    margin: var(--osjl-spacing-xl) 0;
    font-style: italic;
    color: var(--osjl-gray-700);
}

.osjl-blockquote cite {
    display: block;
    margin-top: var(--osjl-spacing-sm);
    font-style: normal;
    font-size: var(--osjl-text-sm);
    color: var(--osjl-gray-500);
}

/*--------------------------------------------------------------
# Header Styles (for Elementor customization)
--------------------------------------------------------------*/
.osjl-site-header {
    background-color: var(--osjl-white);
    box-shadow: var(--osjl-shadow-sm);
}

.osjl-site-title {
    font-family: var(--osjl-font-serif);
    color: var(--osjl-primary);
}

.osjl-site-tagline {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-sm);
    color: var(--osjl-gray-600);
    font-style: italic;
}

/* Navigation */
.osjl-nav a {
    font-family: var(--osjl-font-sans);
    font-weight: 500;
    color: var(--osjl-gray-700);
    padding: var(--osjl-spacing-sm) var(--osjl-spacing-md);
    transition: color var(--osjl-transition-fast);
}

.osjl-nav a:hover,
.osjl-nav a.current {
    color: var(--osjl-primary);
}

/*--------------------------------------------------------------
# Footer Styles
--------------------------------------------------------------*/
.osjl-footer {
    background-color: var(--osjl-granite);
    color: var(--osjl-cream);
    padding: var(--osjl-spacing-3xl) 0 var(--osjl-spacing-xl);
}

.osjl-footer h4 {
    color: var(--osjl-secondary-light);
    font-size: var(--osjl-text-lg);
}

.osjl-footer a {
    color: var(--osjl-cream);
}

.osjl-footer a:hover {
    color: var(--osjl-secondary-light);
}

.osjl-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--osjl-spacing-lg);
    margin-top: var(--osjl-spacing-xl);
    font-size: var(--osjl-text-sm);
}

/*--------------------------------------------------------------
# Responsive Adjustments
--------------------------------------------------------------*/

/* Tablet (768–1024px) */
@media (max-width: 1024px) {
    :root {
        --osjl-text-5xl: 2.5rem;
        --osjl-text-4xl: 2rem;
    }

    .osjl-cemetery-table th,
    .osjl-cemetery-table td {
        padding: var(--osjl-spacing-sm) var(--osjl-spacing-md);
    }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
    :root {
        --osjl-text-5xl: 2.25rem;
        --osjl-text-4xl: 1.875rem;
        --osjl-text-3xl: 1.5rem;
    }

    .osjl-cemetery-filters {
        flex-direction: column;
    }

    .osjl-cemetery-table {
        font-size: var(--osjl-text-sm);
    }

    .osjl-cemetery-table th,
    .osjl-cemetery-table td {
        padding: var(--osjl-spacing-sm);
    }
}

/* Small phone (≤480px) */
@media (max-width: 480px) {
    :root {
        --osjl-text-5xl: 1.875rem;
        --osjl-text-4xl: 1.5rem;
        --osjl-text-3xl: 1.25rem;
    }

    .osjl-btn {
        padding: var(--osjl-spacing-md) var(--osjl-spacing-lg);
        width: 100%;
        min-height: 44px;
    }

    .osjl-burial-card {
        padding: var(--osjl-spacing-md);
    }
}

/*--------------------------------------------------------------
# Utility Classes
--------------------------------------------------------------*/
.osjl-text-center { text-align: center; }
.osjl-text-left { text-align: left; }
.osjl-text-right { text-align: right; }

.osjl-mt-sm { margin-top: var(--osjl-spacing-sm); }
.osjl-mt-md { margin-top: var(--osjl-spacing-md); }
.osjl-mt-lg { margin-top: var(--osjl-spacing-lg); }
.osjl-mt-xl { margin-top: var(--osjl-spacing-xl); }

.osjl-mb-sm { margin-bottom: var(--osjl-spacing-sm); }
.osjl-mb-md { margin-bottom: var(--osjl-spacing-md); }
.osjl-mb-lg { margin-bottom: var(--osjl-spacing-lg); }
.osjl-mb-xl { margin-bottom: var(--osjl-spacing-xl); }

.osjl-py-sm { padding-top: var(--osjl-spacing-sm); padding-bottom: var(--osjl-spacing-sm); }
.osjl-py-md { padding-top: var(--osjl-spacing-md); padding-bottom: var(--osjl-spacing-md); }
.osjl-py-lg { padding-top: var(--osjl-spacing-lg); padding-bottom: var(--osjl-spacing-lg); }
.osjl-py-xl { padding-top: var(--osjl-spacing-xl); padding-bottom: var(--osjl-spacing-xl); }

.osjl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*--------------------------------------------------------------
# Dark Mode — Candlelit Heritage
--------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
    :root {
        /* Primary — light sage green for dark backgrounds */
        --osjl-primary: #8ab89a;
        --osjl-primary-dark: #6a9a7a;
        --osjl-primary-light: #a8d4b8;

        /* Secondary — amber brightens in the dark */
        --osjl-secondary: #d4af5c;
        --osjl-secondary-dark: #b8943f;
        --osjl-secondary-light: #e0c47a;
        /* Amber-deep brightens too — same value as light-mode --osjl-secondary-light.
         * #d4af5c on dark cream-dark #1a1816 = 9.05:1. */
        --osjl-amber-deep: #d4af5c;

        /* Neutrals — warm darks, not pure black */
        --osjl-cream: #1a1816;
        --osjl-cream-dark: #141210;
        --osjl-white: #242220;
        --osjl-gray-100: #2a2826;
        --osjl-gray-200: #3a3835;
        --osjl-gray-300: #4a4744;
        --osjl-gray-400: #6b6865;
        --osjl-gray-500: #8a8784;
        --osjl-gray-600: #a5a29f;
        --osjl-gray-700: #c5c2bf;
        --osjl-gray-800: #e0deda;
        --osjl-gray-900: #f0eeea;

        /* Accent — warmed for dark surfaces */
        --osjl-rust: #c4703a;
        --osjl-sage: #7a9a7a;
        --osjl-parchment: #2e2a22;

        /* Muted text — override for sufficient contrast on dark surfaces */
        --osjl-muted: #a5a29f;

        /* Semantic aliases auto-flow via var() on --osjl-gray-800 /
         * --osjl-muted above; only --osjl-border needs its own dark value
         * since its light value is a standalone hex. */
        --osjl-border: #3a3835;

        /* Standalone spec-palette tokens (not var()-aliased). Matching
         * tones for the dark "candlelit heritage" theme. */
        --osjl-stone-border: #5a554f;   /* dimmer limestone on dark */
        --osjl-granite: #1e1c1a;        /* near-black for footer */
        --osjl-cabin-warm: #a88a6c;     /* warm wood, lifted for dark bg */
        --osjl-selection: #2a3a30;      /* selection highlight on dark */

        /* Status — softer on dark backgrounds */
        --osjl-error: #f87171;
        --osjl-error-bg: #3b1515;
        --osjl-error-border: #5c2020;
        --osjl-success: #6ee7a0;
        --osjl-success-bg: #0f2918;
        --osjl-success-border: #1a3d25;

        /* Plot chip palette inverted for dark mode — bead 4zw. Light values
         * become foreground; dark values become background. Same contrast
         * ratio as light mode (~7.7:1). */
        --osjl-chip-cw-bg: #38404a;
        --osjl-chip-cw-fg: #d4d8dc;
        --osjl-chip-1812-bg: #353e35;
        --osjl-chip-1812-fg: #cdd4cc;
        --osjl-chip-died-bg: #252a28;
        --osjl-chip-died-fg: #b4b8b6;

        /* Shadows — lighter spread on dark */
        --osjl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --osjl-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
        --osjl-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
        --osjl-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    }

    /* Body text defaults */
    body {
        color: var(--osjl-gray-800);
        background-color: var(--osjl-cream);
    }

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
        color: var(--osjl-primary);
    }

    /* Links */
    a {
        color: var(--osjl-primary);
    }

    a:hover {
        color: var(--osjl-secondary-light);
    }

    /* Cards get a warm dark surface */
    .osjl-card,
    .osjl-burial-card,
    .osjl-tip-card,
    .osjl-feature-card {
        background-color: var(--osjl-white);
        border-color: var(--osjl-gray-200);
    }

    /* Cemetery table */
    .osjl-cemetery-table {
        background-color: var(--osjl-white);
    }

    .osjl-cemetery-table th {
        background-color: var(--osjl-gray-200);
        color: var(--osjl-gray-800);
    }

    .osjl-cemetery-table td {
        border-bottom-color: var(--osjl-gray-200);
    }

    .osjl-cemetery-table tr:hover {
        background-color: var(--osjl-gray-100);
    }

    /* Search form */
    .osjl-cemetery-search {
        background-color: var(--osjl-white);
    }

    .osjl-cemetery-search input[type="text"],
    .osjl-cemetery-search input[type="search"] {
        background-color: var(--osjl-gray-100);
        border-color: var(--osjl-gray-300);
        color: var(--osjl-gray-800);
    }

    /* Form inputs */
    .osjl-form-input,
    .osjl-form-textarea,
    .osjl-form-select {
        background-color: var(--osjl-gray-100);
        border-color: var(--osjl-gray-300);
        color: var(--osjl-gray-800);
    }

    /* Pagination */
    .osjl-pagination-btn {
        background-color: var(--osjl-white);
        border-color: var(--osjl-gray-300);
        color: var(--osjl-gray-700);
    }

    .osjl-pagination-btn:hover {
        background-color: var(--osjl-gray-100);
    }

    /* View toggle */
    .osjl-view-toggle button {
        background-color: var(--osjl-gray-100);
        border-color: var(--osjl-gray-300);
        color: var(--osjl-gray-700);
    }

    /* Record details */
    .osjl-record-detail {
        background: var(--osjl-gray-100);
    }

    /* Notes on parchment — dark aged paper */
    .osjl-record-notes,
    .osjl-notes-box,
    .osjl-pull-quote {
        background: var(--osjl-parchment);
    }

    /* Map legend */
    .osjl-map-legend {
        background-color: var(--osjl-white);
        border-color: var(--osjl-gray-200);
    }

    .osjl-map-placeholder {
        background-color: var(--osjl-gray-100);
        border-color: var(--osjl-gray-300);
    }

    /* Gallery caption overlay is fine as-is (dark gradient on image) */

    /* Elementor overrides for dark mode */
    .elementor-widget-container {
        color: var(--osjl-gray-800);
    }

    /* Override Elementor sections with light backgrounds */
    [data-dce-background-color="#f5f4f0"],
    [data-dce-background-color="#f5f4f0"].elementor-section {
        background-color: var(--osjl-cream) !important;
    }

    /* Elementor heading widgets */
    .elementor-heading-title {
        color: var(--osjl-primary);
    }

    /* Footer new classes in dark mode */
    .osjl-footer-copyright {
        color: rgba(255, 255, 255, 0.6);
    }

    /* Focus ring — gold stands out on dark */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline-color: var(--osjl-secondary-light);
    }
}