/* --- Custom Font Definitions --- */

/* 1. The Font for Titles and Headings (formerly Merriweather) */
@font-face {
    font-family: 'HeadingFont';
    /* Ensure your file in assets/fonts matches this name exactly */
    src: url('/assets/fonts/HeadingFont.woff2') format('woff2'),
         url('/assets/fonts/HeadingFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 2. The Font for Body Text (formerly Inter) */
@font-face {
    font-family: 'BodyFont';
    src: url('/assets/fonts/BodyFont.woff2') format('woff2'),
         url('/assets/fonts/BodyFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 3. The Font for Tag Text (formerly Inter) */
@font-face {
    font-family: 'LightFont';
    src: url('/assets/fonts/LightFont.woff2') format('woff2'),
         url('/assets/fonts/LightFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 3. The Font for Quote Text (formerly Inter) */
@font-face {
    font-family: 'ItalicFont';
    src: url('/assets/fonts/ItalicFont.woff2') format('woff2'),
         url('/assets/fonts/ItalicFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --- Global Styles --- */
body {
    background-color: #f8fafc;
    color: #1e293b;
    /* Default to Body Font */
    font-family: 'BodyFont', sans-serif; 
}

/* --- Utility Classes for React --- */
/* We use these classes in the JS instead of inline styles now */

.font-title {
    font-family: 'HeadingFont', serif;
}

.font-heading {
    font-family: 'BodyFont', sans-serif;
}

.font-body {
    font-family: 'BodyFont', sans-serif;
}

.font-tag {
    font-family: 'LightFont', sans-serif;
}

.font-quote {
    font-family: 'ItalicFont', serif;
    font-style: italic;
}

/* --- Layout Utilities --- */
.prose-text {
    line-height: 1.8;
    font-size: 1.125rem;
}

html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}