/* Theme Variables */
:root {
    /* Light Theme Colors */
    --bg-color: #ffffff;
    --text-color: #2d3748;
    --heading-color: #1a202c;
    --primary-color: #4a5568;
    --primary-hover: #2d3748;
    --secondary-color: #718096;

    /* UI Colors */
    --header-bg: rgba(255, 255, 255, 0.95);
    --sidebar-bg: #f7fafc;
    --border-color: #e2e8f0;
    --hover-bg: #edf2f7;
    --button-bg: #ffffff;
    --button-hover-bg: #f1f5f9;
    --modal-bg: rgba(255, 255, 255, 0.95);

    /* Content Colors */
    --link-color: #4a5568;
    --link-hover-color: #2d3748;
    --emphasis-color: #4a5568;
    --quote-bg: #f7fafc;
    --code-bg: #f1f5f9;
    --code-text: #2d3748;
    --table-bg: #ffffff;
    --table-header-bg: #f7fafc;
    --table-hover-bg: #f1f5f9;
    --highlight-bg: #fed7d7;
    --progress-bg: #e2e8f0;

    /* Status Colors */
    --disabled-bg: #e2e8f0;
    --disabled-text: #a0aec0;

    /* Font Settings */
    --font-family-serif: 'Garamond', 'Times New Roman', 'Times', serif;
    --font-family-sans: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
    --font-family: var(--font-family-serif);

    /* Base font size - this is what gets changed by font size controls */
    --font-size: 16px;

    /* Golden Ratio Typography Scale - all based on --font-size */
    --font-size-small: calc(var(--font-size) * 0.833);
    /* base ÷ 1.2 = 13.33px */
    --font-size-xs: calc(var(--font-size) * 0.694);
    /* base ÷ 1.44 = 11.11px */
    --font-size-p: var(--font-size);
    /* base = 16px */
    --font-size-h6: calc(var(--font-size) * 1.2);
    /* base × 1.2 = 19.2px */
    --font-size-h5: calc(var(--font-size) * 1.44);
    /* base × 1.44 = 23.04px */
    --font-size-h4: calc(var(--font-size) * 1.728);
    /* base × 1.728 = 27.65px */
    --font-size-h3: calc(var(--font-size) * 2.074);
    /* base × 2.074 = 33.18px */
    --font-size-h2: calc(var(--font-size) * 2.488);
    /* base × 2.488 = 39.81px */
    --font-size-h1: calc(var(--font-size) * 2.986);
    /* base × 2.986 = 47.78px */

    /* Golden Ratio Spacing Scale - based on font-size for proportional scaling */
    --spacing-xs: calc(var(--font-size) * 0.618);
    /* 9.888px */
    --spacing-sm: var(--font-size);
    /* 16px - base */
    --spacing-md: calc(var(--font-size) * 1.618);
    /* 25.888px */
    --spacing-lg: calc(var(--font-size) * 2.618);
    /* 41.888px */
    --spacing-xl: calc(var(--font-size) * 4.236);
    /* 67.776px */
    --spacing-xxl: calc(var(--font-size) * 6.854);
    /* 109.664px */

    /* Line Heights based on Golden Ratio */
    --line-height-tight: 1.2;
    /* 1/φ² ≈ 0.382 inverted */
    --line-height-normal: 1.618;
    /* φ */
    --line-height-loose: 1.968;
    /* φ × 1.2 */
}

/* Dark Theme */
.dark-theme {
    --bg-color: #1a202c;
    --text-color: #e2e8f0;
    --heading-color: #f7fafc;
    --primary-color: #a0aec0;
    --primary-hover: #cbd5e0;
    --secondary-color: #a0aec0;

    /* UI Colors */
    --header-bg: rgba(26, 32, 44, 0.95);
    --sidebar-bg: #2d3748;
    --border-color: #4a5568;
    --hover-bg: #4a5568;
    --button-bg: #2d3748;
    --button-hover-bg: #4a5568;
    --modal-bg: rgba(45, 55, 72, 0.95);

    /* Content Colors */
    --link-color: #a0aec0;
    --link-hover-color: #cbd5e0;
    --emphasis-color: #cbd5e0;
    --quote-bg: #2d3748;
    --code-bg: #2d3748;
    --code-text: #e2e8f0;
    --table-bg: #2d3748;
    --table-header-bg: #4a5568;
    --table-hover-bg: #4a5568;
    --highlight-bg: #553c4e;
    --progress-bg: #4a5568;

    /* Status Colors */
    --disabled-bg: #4a5568;
    --disabled-text: #718096;
}

/* Font Family Classes */
.serif {
    --font-family: var(--font-family-serif);
}

.sans-serif {
    --font-family: var(--font-family-sans);
}

/* Font Size Classes */
.font-small {
    --font-size: 13.33px;
    /* Small base size */
}

.font-medium {
    --font-size: 16px;
    /* Medium base size (default) */
}

.font-large {
    --font-size: 19.2px;
    /* Large base size */
}

.font-xl {
    --font-size: 23.04px;
    /* XL base size */
}

.font-xxl {
    --font-size: 27.65px;
    /* XXL base size */
}

/* Custom Scrollbar for Dark Theme */
.dark-theme ::-webkit-scrollbar {
    width: 8px;
}

.dark-theme ::-webkit-scrollbar-track {
    background: var(--sidebar-bg);
}

.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--hover-bg);
}

/* Light Theme Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Print Styles */
@media print {
    body {
        --bg-color: white;
        --text-color: black;
        --heading-color: black;
        font-size: 12pt;
        line-height: 1.4;
    }

    .header,
    .sidebar,
    .chapter-nav,
    .controls {
        display: none !important;
    }

    .main-content {
        margin: 0;
        padding: 0;
    }

    .chapter-content {
        max-width: none;
        padding: 0;
    }

    .chapter-content h1,
    .chapter-content h2,
    .chapter-content h3 {
        page-break-after: avoid;
    }

    .chapter-content p,
    .chapter-content ul,
    .chapter-content ol {
        orphans: 3;
        widows: 3;
    }

    .chapter-content img {
        max-width: 100%;
        page-break-inside: avoid;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --text-color: #000000;
        --bg-color: #ffffff;
    }

    .dark-theme {
        --border-color: #ffffff;
        --text-color: #ffffff;
        --bg-color: #000000;
    }
}

/* Simple Pencil Button */
.pencil-button {
    border-bottom-left-radius: 15px 255px;
    border-bottom-right-radius: 225px 15px;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;

    border: 2px solid var(--primary-color);
    background: var(--bg-color);
    color: var(--primary-color);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    outline: none;

    transition: all 235ms ease-in-out;
    box-shadow: 15px 28px 25px -18px rgba(0, 0, 0, 0.2);
}

.pencil-button:hover {
    transform: translate3d(0, 2px, 0);
    box-shadow: 2px 8px 8px -5px rgba(0, 0, 0, 0.3);
    background: var(--hover-bg);
}


/* Patrick Hand */

/* Excalifont Font - Self-hosted */
@font-face {
    font-family: 'Excalifont';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/Excalifont-Regular.woff2');
}

/* Example usage - you can add these where you want to use Excalifont */
.handwritten {
    font-family: 'Excalifont', cursive, sans-serif;
}

/* More specific selector for handwritten headings in chapter content */
.chapter-content .handwritten {
    font-family: 'Excalifont', cursive, sans-serif;
}