/*
 * Golden Thread — Shared Design Tokens & Layout Components
 * Single source of truth for CSS variables, dark mode, and shared
 * layout (header, nav, footer, focus, selection) across every page.
 *
 * Each page links this file; page-specific component overrides stay inline.
 * Artists/artist pages use this for variables only (different layout structure).
 */

/* ══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS (light mode defaults)
   ══════════════════════════════════════════════════════════════ */

:root {
    /* Brand */
    --gold: #C5943A;
    --gold-light: #D4AD5E;
    --gold-dark: #9E7630;
    --gold-text: #8A6628;
    --gold-button: #8A6628;

    /* Surfaces */
    --cream: #F8F4EC;
    --parchment: #EDE7DA;
    --white: #FFFFFF;

    /* Navy */
    --navy: #1E2D4D;
    --navy-light: #2A3D66;

    /* Text */
    --text-dark: #2A2520;
    --text-light: #5C5550;
    --text-muted: #5E5954;   /* 4.72:1 on cream — passes WCAG AA */

    /* Borders */
    --border: #DDD8D0;

    /* Accent */
    --burgundy: #7B2D3B;
    --burgundy-light: #9A3A4A;
    --marian-blue: #4A6FA5;
    --success: #4A7A5C;
    --error: #A63D3D;

    /* Badges */
    --badge-scripture: #4A6FA5;
    --badge-catechism: #7B2D3B;
    --badge-councils: #1E2D4D;
    --badge-fathers: #4A7A5C;
    --badge-literary: #5B3A8F;
    --badge-artists: #C5943A;
    --badge-theology: #6B4C2A;

    /* Highlight */
    --mark-bg: #FFF2BF;

    /* Footer links — on --navy (#1E2D4D) background */
    /* unvisited: #cac6be → ~5.1:1 contrast ratio, passes WCAG AA 4.5:1 */
    --footer-link: #cac6be;
    /* visited: --gold-light (#D4AD5E) → ~6.8:1 contrast ratio, passes WCAG AA */
    --footer-link-visited: #D4AD5E;

    /* Typography */
    --font-serif: 'Crimson Pro', 'Noto Serif', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ══════════════════════════════════════════════════════════════
   2. DARK THEME (explicit toggle)
   ══════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
    --cream: #0f0d0a;
    --parchment: #16130f;
    --white: #1a1714;
    --navy: #0a0f1a;
    --navy-light: #141d33;
    --gold: #d7b35a;
    --gold-light: #e0c474;
    --gold-dark: #c5943a;
    --gold-text: #d7b35a;
    --gold-button: #d7b35a;
    --text-dark: #f2eee5;
    --text-light: #c8c2b8;
    --text-muted: #a09889;
    --border: #2a2520;
    --burgundy: #c04858;
    --burgundy-light: #d4606e;
    --marian-blue: #6b8fc5;
    --success: #6baa7e;
    --error: #d06060;
    --badge-scripture: #6b8fc5;
    --badge-catechism: #c04858;
    --badge-councils: #8a9ab8;
    --badge-fathers: #6baa7e;
    --badge-literary: #9b7abf;
    --badge-artists: #d7b35a;
    --badge-theology: #a08050;
    --mark-bg: #4a3d1a;
    /* Footer links — on dark navy (#0a0f1a); both values have higher contrast here */
    --footer-link: #cac6be;
    --footer-link-visited: #e0c474;
}

/* ══════════════════════════════════════════════════════════════
   3. DARK THEME (system preference fallback)
   ══════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --cream: #0f0d0a;
        --parchment: #16130f;
        --white: #1a1714;
        --navy: #0a0f1a;
        --navy-light: #141d33;
        --gold: #d7b35a;
        --gold-light: #e0c474;
        --gold-dark: #c5943a;
        --gold-text: #d7b35a;
        --gold-button: #d7b35a;
        --text-dark: #f2eee5;
        --text-light: #c8c2b8;
        --text-muted: #a09889;
        --border: #2a2520;
        --burgundy: #c04858;
        --burgundy-light: #d4606e;
        --marian-blue: #6b8fc5;
        --success: #6baa7e;
        --error: #d06060;
        --badge-scripture: #6b8fc5;
        --badge-catechism: #c04858;
        --badge-councils: #8a9ab8;
        --badge-fathers: #6baa7e;
        --badge-literary: #9b7abf;
        --badge-artists: #d7b35a;
        --badge-theology: #a08050;
        --mark-bg: #4a3d1a;
        /* Footer links — on dark navy (#0a0f1a); both values have higher contrast here */
        --footer-link: #cac6be;
        --footer-link-visited: #e0c474;
    }
}

/* ══════════════════════════════════════════════════════════════
   4. SHARED LAYOUT COMPONENTS
   Used by all secondary pages (guide, research-guide, privacy,
   kids, about-sources). NOT used by index.html (app page) or
   artists/artist pages (different layout structure).
   ══════════════════════════════════════════════════════════════ */

/* ── Header ── */
header {
    background: var(--navy);
    padding: 14px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Logo ── */
.logo {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--gold);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.8px;
}
.logo:hover { color: var(--gold-dark); }
.logo-mark {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-mark svg {
    width: 22px;
    height: 22px;
}

/* ── Nav ── */
nav {
    display: flex;
    gap: 4px;
    align-items: center;
}
nav a,
nav a:link,
nav a:visited {
    font-size: 13px;
    color: rgba(248, 244, 236, 0.55);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 10px 12px;
    border-radius: 6px;
    position: relative;
    letter-spacing: 0.2px;
    min-height: 44px;
    display: inline-block;
    line-height: 24px;
}
nav a:hover {
    color: rgba(248, 244, 236, 0.9);
    background: rgba(248, 244, 236, 0.06);
    text-decoration: none;
}
nav a.active,
nav a.active:visited,
nav a.active:hover {
    color: var(--gold);
    font-weight: 600;
    background: rgba(197, 148, 58, 0.08);
    text-decoration: none;
}
nav a.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
}

/* ── Footer ── */
footer {
    background: var(--navy);
    padding: 32px 24px;
    text-align: center;
    flex-shrink: 0;
    margin-top: auto;
}
.footer-content {
    max-width: 960px;
    margin: 0 auto;
}
.footer-title {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    color: var(--gold);
}
.footer-tagline {
    font-family: var(--font-sans);
    font-size: 12px;
    color: rgba(248, 244, 236, 0.85);
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}
.footer-text {
    font-family: var(--font-sans);
    font-size: 12px;
    color: rgba(248, 244, 236, 0.85);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
}
.footer-secondary {
    font-family: var(--font-sans);
    font-size: 11px;
    color: rgba(248, 244, 236, 0.75);
    margin-top: 8px;
}
/* Footer links — WCAG AA: 4.5:1 against navy (#1E2D4D).
   rgba(248,244,236,0.85) ≈ #c8d0da on #1E2D4D → ~5.5:1 ✓
   :visited uses gold-light so it remains distinct and legible. */
.footer-secondary a {
    color: rgba(248, 244, 236, 0.85);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.footer-secondary a:visited {
    color: var(--gold-light);
}
.footer-secondary a:hover {
    color: rgba(248, 244, 236, 1);
    text-decoration: underline;
}
.footer-built-with {
    font-family: var(--font-sans);
    font-size: 10px;
    color: rgba(248, 244, 236, 0.4);
    margin-top: 16px;
    letter-spacing: 0.2px;
}
.footer-built-with a,
.footer-built-with a:link {
    color: rgba(248, 244, 236, 0.5);
    text-decoration: none;
}
.footer-built-with a:hover {
    color: rgba(248, 244, 236, 0.8);
}

/* ── Theme toggle button ── */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* ── Skip link (accessibility) ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--gold);
    color: var(--navy);
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 6px 0;
    transition: top 0.1s;
}
.skip-link:focus {
    top: 0;
}

/* ── Screen-reader-only utility ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
}

/* ── Global polish ── */
::selection {
    background: rgba(197, 148, 58, 0.2);
    color: var(--text-dark);
}
*:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
*:focus:not(:focus-visible) {
    outline: none;
}

/* ══════════════════════════════════════════════════════════════
   5. RESPONSIVE — shared header/nav/footer breakpoints
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    header { padding: 12px 16px; }
    nav { gap: 2px; }
    nav a,
    nav a:link,
    nav a:visited { font-size: 12px; padding: 10px 12px; min-height: 44px; line-height: 24px; }
    .logo { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════
   6. MOTION — respect user preference
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .skip-link {
        transition: none;
    }
}