/* =====================================================================
   CMI LifeTech — Divine Theme Tokens & Typography (Cathedral of Light)
   ===================================================================== */

:root {
    /* 🌟 Solar Dawn (Light Mode — Morning Eucharist in White Limestone & Vellum Parchment) */
    --bg-deep: #fbf9f4;
    --bg-subtle: #f3ede2;
    --bg-stone: #ebe2d3;
    --holy-gold: #b3861b;
    --holy-gold-bright: #d49b29;
    --holy-gold-deep: #78580f;
    --holy-gold-glow: rgba(179, 134, 27, 0.28);
    --holy-amber: #c46816;
    --holy-dark: #261f17;
    --text-primary: #1e1913;
    --text-secondary: #524738;
    --text-muted: #857764;
    --border-gold: rgba(179, 134, 27, 0.32);
    --border-subtle: rgba(179, 134, 27, 0.16);
    --border-engraved: rgba(38, 31, 23, 0.12);
    --shadow-holy: 0 16px 40px rgba(78, 64, 48, 0.08), 0 2px 8px rgba(78, 64, 48, 0.04);
    --shadow-glow: 0 0 35px rgba(212, 155, 41, 0.2);
    --shadow-mensa: 0 20px 50px rgba(60, 48, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --card-bg: rgba(255, 253, 249, 0.88);
    --card-bg-elevated: rgba(255, 255, 255, 0.96);
    --glass-bg: rgba(251, 249, 244, 0.92);
    --glass-blur: blur(24px);
    --input-bg: rgba(255, 255, 255, 0.94);

    /* Liturgical Accents (Sacred Heraldry) */
    --accent-hebrew: #1e557d;
    --accent-greek: #5e1a7a;
    --accent-wisdom: #235ca8;
    --accent-holiness: #b3861b;
    --accent-joy: #c46816;
    --accent-peace: #0d839e;
    --accent-love: #9c2525;
    --accent-faith: #a07a1c;
    --accent-hope: #1f7a62;

    /* Typographic Hierarchy (Cathedral Inscriptions & Manuscripts) */
    --font-gothic-deco: 'Cinzel Decorative', 'Noto Serif TC', serif;
    --font-gothic-art: 'UnifrakturMaguntia', 'Noto Serif TC', serif;
    --font-holy: 'Cormorant Garamond', 'Noto Serif TC', serif;
    --font-body: 'Noto Serif TC', -apple-system, BlinkMacSystemFont, Georgia, serif;
    --font-ancient: 'SBL Hebrew', 'Cardo', 'Ezra SIL', 'Cormorant Garamond', serif;

    /* Dimensional Rhythms */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-mensa: 18px;
    --radius-full: 9999px;
    --transition-processional: 0.52s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-relic: 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 🌌 Midnight Starlight (Dark Mode — Cathedral Nave at Easter Vigil / Caravaggio Tenebrism) */
body.dark-theme {
    --bg-deep: #06030a;
    --bg-subtle: #0f0918;
    --bg-stone: #150d22;
    --holy-gold: #e2ba4d;
    --holy-gold-bright: #ffd466;
    --holy-gold-deep: #8c6a1e;
    --holy-gold-glow: rgba(226, 186, 77, 0.35);
    --holy-amber: #e89b51;
    --holy-dark: #ecd399;
    --text-primary: #f8f5ee;
    --text-secondary: #d4ccbd;
    --text-muted: #9c9180;
    --border-gold: rgba(226, 186, 77, 0.28);
    --border-subtle: rgba(226, 186, 77, 0.14);
    --border-engraved: rgba(255, 255, 255, 0.08);
    --shadow-holy: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 40px rgba(226, 186, 77, 0.08);
    --shadow-glow: 0 0 45px rgba(226, 186, 77, 0.28);
    --shadow-mensa: 0 30px 80px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(226, 186, 77, 0.25);
    --card-bg: rgba(16, 10, 24, 0.82);
    --card-bg-elevated: rgba(23, 15, 36, 0.94);
    --glass-bg: rgba(10, 6, 17, 0.88);
    --input-bg: rgba(20, 13, 31, 0.88);

    --accent-hebrew: #4ba3e3;
    --accent-greek: #c77dff;
    --accent-wisdom: #5390d9;
    --accent-holiness: #e2ba4d;
    --accent-joy: #f77f00;
    --accent-peace: #2ec4b6;
    --accent-love: #e63946;
    --accent-faith: #e2ba4d;
    --accent-hope: #2a9d8f;
}

/* Universal Resets */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: clip;
}

body {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.75;
    min-height: 100vh;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    transition: background 0.8s cubic-bezier(0.25, 1, 0.5, 1), color 0.8s ease;
}

/* overflow-x:hidden on body breaks position:sticky in iOS Safari */
@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}

.text-holy-gold { color: var(--holy-gold); }

#particles-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-gold);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--holy-gold);
}

/* App Container Layout */
.app-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px 130px 24px;
    position: relative;
    z-index: 10;
}

/* ── Cathedral Atmosphere: Film Grain & Tenebrist Vignette ──── */
.cathedral-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(circle at 50% 40%, transparent 52%, rgba(6, 3, 10, 0.6) 100%);
    transition: opacity 0.8s ease;
}
body:not(.dark-theme) .cathedral-vignette {
    background: radial-gradient(circle at 50% 40%, transparent 60%, rgba(60, 48, 36, 0.18) 100%);
}

.cathedral-film-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0.042;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}
body:not(.dark-theme) .cathedral-film-grain {
    opacity: 0.026;
}

@media (prefers-reduced-motion: reduce) {
    .cathedral-film-grain,
    .god-rays-container {
        display: none;
    }
}
@media (max-width: 767px) {
    .cathedral-film-grain { opacity: 0.02; }
    .god-ray { filter: blur(40px); }
    body.dark-theme .god-rays-container { opacity: 0.07; }
}