/* ✦ THE HORIZON TIMES — SADGURU / YOGI JEE SPIRITUAL THEME ✦ */
/* MEDITATION • INNER PEACE • DIVINE ENERGY • EARTH ELEMENTS */

:root {

    /* ✦ CORE COLORS ✦ */
    --bg-base: #f6f1e7;                 /* Warm spiritual parchment */
    --bg-reading: #fffaf2;
    --surface: rgba(255,248,235,0.92);

    /* ✦ YOGI PALETTE ✦ */
    --accent: #c26b2d;                  /* Saffron Orange */
    --accent-secondary: #e39b4e;        /* Sacred Glow */
    --accent-earth: #6e4a2d;            /* Rudra Earth Brown */
    --accent-sky: #8c6dd1;              /* Mystic Purple */
    --accent-energy: #ffd27a;           /* Divine Gold */

    /* ✦ GLOW EFFECTS ✦ */
    --accent-glow: rgba(194,107,45,0.25);
    --blue-glow: rgba(140,109,209,0.15);

    /* ✦ TEXT COLORS ✦ */
    --text-main: #2b1d12;
    --text-muted: #74604c;

    /* ✦ UI ✦ */
    --border: rgba(194,107,45,0.18);
    --ease-spring: cubic-bezier(0.25,1.2,0.5,1);
    --ease-smooth: cubic-bezier(0.25,1,0.5,1);
}

/* ✦ BASE ✦ */

body {
    background:
        linear-gradient(
            180deg,
            #f8f1e4 0%,
            #fff7eb 40%,
            #f4ead8 100%
        );

    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

/* ✦ CINEMATIC SPIRITUAL BACKGROUND ✦ */

body::before,
body::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

/* SAFFRON AURA */

body::before {
    top: -15%;
    left: -10%;

    width: 55vw;
    height: 55vw;

    background:
        radial-gradient(
            circle,
            rgba(194,107,45,0.16) 0%,
            transparent 72%
        );

    animation: farmGlow 18s ease-in-out infinite alternate;
}

/* DIVINE PURPLE ENERGY */

body::after {
    bottom: -20%;
    right: -10%;

    width: 60vw;
    height: 60vw;

    background:
        radial-gradient(
            circle,
            rgba(140,109,209,0.16) 0%,
            transparent 75%
        );

    animation: skyGlow 22s ease-in-out infinite alternate;
}

@keyframes farmGlow {
    0% {
        transform: translate(0,0) scale(1);
    }

    100% {
        transform: translate(12vw,8vh) scale(1.15);
    }
}

@keyframes skyGlow {
    0% {
        transform: translate(0,0) scale(1);
    }

    100% {
        transform: translate(-8vw,-10vh) scale(1.12);
    }
}

/* ✦ READING MODE ✦ */

body.reading-mode {
    background: #fffaf2;
}

body.focus-mode {
    background: #1b140f;
}

/* ✦ LOADER ✦ */

#loader {
    background:
        linear-gradient(
            180deg,
            #f8f1e4,
            #f4ead8
        );
}

.loader-logo {
    color: var(--accent);
    font-family: 'Outfit', sans-serif;
    letter-spacing: 2px;
}

.progress-line {
    background: rgba(194,107,45,0.08);
}

.progress-line::after {
    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-secondary)
        );
}

/* ✦ BOOK ✦ */

.book-bounds {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.25),
            rgba(255,255,255,0.05)
        );

    border-radius: 22px;
}

/* ✦ PAGE ✦ */

.page {

    background: #fffdf8;

    border: 1px solid rgba(194,107,45,0.08);

    box-shadow:
        0 12px 40px rgba(0,0,0,0.08),
        0 4px 18px rgba(194,107,45,0.08);

    overflow: hidden;
}

/* ✦ INNER PAGE SHADOW ✦ */

.st-page-right .page::before {

    background:
        linear-gradient(
            to right,
            rgba(194,107,45,0.12),
            transparent
        );
}

.st-page-left .page::before {

    background:
        linear-gradient(
            to left,
            rgba(194,107,45,0.12),
            transparent
        );
}

/* ✦ NAVIGATION TABS ✦ */

.nav-tab {

    background:
        rgba(255,250,240,0.86);

    backdrop-filter: blur(25px);

    border: 1px solid rgba(194,107,45,0.08);

    box-shadow:
        0 8px 24px rgba(194,107,45,0.08);
}

.nav-icon {
    color: var(--text-muted);
}

.nav-icon:hover {

    color: var(--accent);

    background:
        rgba(194,107,45,0.10);
}

.nav-divider {
    background: rgba(194,107,45,0.08);
}

/* ✦ TOOLTIPS ✦ */

[data-tooltip]::after {

    background: #fffdf8;

    border: 1px solid var(--accent);

    color: var(--accent);

    box-shadow:
        0 10px 25px rgba(194,107,45,0.15);
}

/* ✦ TOOLBAR ✦ */

.toolbar {

    background:
        rgba(255,250,240,0.88);

    backdrop-filter: blur(22px);

    border-top:
        1px solid rgba(194,107,45,0.08);
}

/* ✦ LOGO ✦ */

.logo {

    color: var(--accent);

    font-family: 'Outfit', sans-serif;
}

/* ✦ BUTTONS ✦ */

.btn {

    color: var(--text-muted);
}

.btn:hover {

    color: var(--accent);

    background:
        rgba(194,107,45,0.08);
}

.btn.active {

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-secondary)
        );

    color: white;

    box-shadow:
        0 10px 20px var(--accent-glow);
}

/* ✦ PAGE PILL ✦ */

.page-pill {

    background: #fffdf8;

    border:
        1px solid rgba(194,107,45,0.12);

    box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.02);
}

.page-input {
    color: var(--accent);
}

/* ✦ DRAWER ✦ */

.drawer {

    background:
        rgba(255,250,240,0.92);

    border-left:
        1px solid rgba(194,107,45,0.12);

    box-shadow:
        -10px 0 40px rgba(194,107,45,0.08);
}

/* ✦ TABS ✦ */

.drawer-tabs {

    background:
        rgba(194,107,45,0.05);
}

.d-tab.active {

    background: white;

    color: var(--accent);

    box-shadow:
        0 4px 12px rgba(194,107,45,0.08);
}

/* ✦ THUMBNAILS ✦ */

.thumb-item {

    border:
        1px solid rgba(194,107,45,0.12);

    box-shadow:
        0 6px 18px rgba(0,0,0,0.06);
}

.thumb-item:hover {

    border-color: var(--accent);

    transform: translateY(-6px);

    box-shadow:
        0 14px 30px rgba(194,107,45,0.20);
}

.thumb-num {

    background:
        rgba(255,250,240,0.92);

    color: var(--accent);

    border-top:
        1px solid rgba(194,107,45,0.08);
}

/* ✦ TOC ✦ */

.toc-item {

    background: white;

    border:
        1px solid rgba(194,107,45,0.08);

    box-shadow:
        0 2px 8px rgba(0,0,0,0.03);
}

.toc-item:hover {

    border-color: var(--accent);

    background:
        rgba(194,107,45,0.04);

    transform: translateX(5px);
}

.toc-page {

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-secondary)
        );

    color: white;
}

/* ✦ MODALS ✦ */

.modal {

    background:
        rgba(255,250,240,0.94);

    border:
        1px solid rgba(194,107,45,0.12);

    box-shadow:
        0 25px 50px rgba(194,107,45,0.12);
}

.modal-title {
    color: var(--accent);
}

/* ✦ ANALYTICS ✦ */

.stat-box {

    background: white;

    border:
        1px solid rgba(194,107,45,0.10);
}

.stat-value.highlight {
    color: var(--accent);
}

/* ✦ AMBIENT ITEMS ✦ */

.ambient-item {

    background: white;

    border:
        1px solid rgba(194,107,45,0.08);
}

.ambient-item:hover {

    border-color: var(--accent);

    color: var(--accent);
}

.ambient-item.active {

    background:
        rgba(194,107,45,0.10);

    color: var(--accent);
}

/* ✦ TOAST ✦ */

.toast {

    background:
        rgba(255,250,240,0.94);

    border:
        1px solid rgba(194,107,45,0.12);

    box-shadow:
        0 10px 25px rgba(194,107,45,0.12);
}

.toast i {
    color: var(--accent);
}

/* ✦ RESET ZOOM ✦ */

#resetZoomBtn {

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-secondary)
        );

    color: white;

    box-shadow:
        0 12px 28px rgba(194,107,45,0.28);
}

/* ✦ ERASER ✦ */

#eraserBtn {

    background: white;

    color: var(--accent);

    border:
        1px solid rgba(194,107,45,0.12);
}

#eraserBtn:hover {

    background: var(--accent);

    color: white;
}

/* ✦ MOBILE ✦ */

@media (max-width:768px) {

    .toolbar {

        background:
            rgba(255,250,240,0.94);
    }

    .drawer {

        background:
            rgba(255,250,240,0.97);
    }

    .thumb-grid {
        gap: 12px;
    }
}