@import url('https://fonts.googleapis.com/css2?family=Poppins:300,400,500,600,700&display=swap');


/* Dynamic Font Styles */
:root {
    --primary-font: 'Poppins', sans-serif;
    --secondary-font: 'Poppins', sans-serif;
    --base-font-size: 16px;
    --h1-font-size: 30px;
    --h2-font-size: 28px;
    --h3-font-size: 20px;
    --sidebar-font-size: 14px;
    --blog-content-font-size: 18px;
}

/* Base Typography */
body {
    font-family: var(--primary-font) !important;
    font-size: var(--base-font-size) !important;
    line-height: 1.6;
}

/* Headings */
h1, .text-4xl, .text-5xl, .text-6xl {
    font-family: var(--secondary-font) !important;
    font-size: var(--h1-font-size) !important;
    line-height: 1.2;
}

h2, .text-3xl {
    font-family: var(--secondary-font) !important;
    font-size: var(--h2-font-size) !important;
    line-height: 1.3;
}

h3, .text-2xl {
    font-family: var(--secondary-font) !important;
    font-size: var(--h3-font-size) !important;
    line-height: 1.4;
}

h4, .text-xl {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--h3-font-size) * 0.9) !important;
}

h5, .text-lg {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--h3-font-size) * 0.8) !important;
}

h6, .text-base {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--h3-font-size) * 0.7) !important;
}

/* Paragraphs and Text */
p, .text-sm, .text-xs {
    font-family: var(--primary-font) !important;
}

/* Blog Content */
.blog-content, .blog-content p, .prose, .prose p {
    font-family: var(--primary-font) !important;
    font-size: var(--blog-content-font-size) !important;
    line-height: 1.7;
}

.blog-content h1 {
    font-family: var(--secondary-font) !important;
    font-size: var(--h1-font-size) !important;
}

.blog-content h2 {
    font-family: var(--secondary-font) !important;
    font-size: var(--h2-font-size) !important;
}

.blog-content h3 {
    font-family: var(--secondary-font) !important;
    font-size: var(--h3-font-size) !important;
}

.blog-content h4 {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--h3-font-size) * 0.9) !important;
}

.blog-content h5 {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--h3-font-size) * 0.8) !important;
}

.blog-content h6 {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--h3-font-size) * 0.7) !important;
}

/* Sidebar Elements */
.sidebar-card, .sidebar-card p, .sidebar-card span, .sidebar-card a, .sidebar-card li {
    font-family: var(--primary-font) !important;
    font-size: var(--sidebar-font-size) !important;
}

.sidebar-card h3, .sidebar-card h4 {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--sidebar-font-size) * 1.3) !important;
}

/* Table of Contents */
.toc-nav a, .toc-link, .toc-nav li {
    font-family: var(--primary-font) !important;
    font-size: var(--sidebar-font-size) !important;
}

.toc-nav h3 {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--sidebar-font-size) * 1.2) !important;
}

/* Navigation */
.header-menu a, nav a, .nav-link {
    font-family: var(--primary-font) !important;
    font-size: var(--base-font-size) !important;
}

/* Forms */
input, textarea, select, button {
    font-family: var(--primary-font) !important;
    font-size: var(--base-font-size) !important;
}

label {
    font-family: var(--primary-font) !important;
    font-size: calc(var(--base-font-size) * 0.9) !important;
}

/* Cards and Components */
.card-title, .feature-card h3 {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--base-font-size) * 1.25) !important;
}

.card-text, .feature-card p {
    font-family: var(--primary-font) !important;
    font-size: var(--base-font-size) !important;
}

/* Footer */
footer, footer p, footer a, footer span {
    font-family: var(--primary-font) !important;
    font-size: calc(var(--base-font-size) * 0.9) !important;
}

footer h3, footer h4 {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--base-font-size) * 1.1) !important;
}

/* Admin Panel */
.admin-content, .admin-content p {
    font-family: var(--primary-font) !important;
    font-size: var(--base-font-size) !important;
}

/* Blog List Items */
.blog-list-item h2, .blog-card h2 {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--h2-font-size) * 0.9) !important;
}

.blog-list-item p, .blog-card p {
    font-family: var(--primary-font) !important;
    font-size: var(--base-font-size) !important;
}

.blog-meta, .blog-meta span {
    font-family: var(--primary-font) !important;
    font-size: calc(var(--base-font-size) * 0.85) !important;
}

/* Hero Sections */
.hero h1, .hero-title {
    font-family: var(--secondary-font) !important;
    font-size: calc(var(--h1-font-size) * 1.2) !important;
}

.hero p, .hero-subtitle {
    font-family: var(--primary-font) !important;
    font-size: calc(var(--base-font-size) * 1.1) !important;
}

/* Buttons */
.btn, button, .button {
    font-family: var(--primary-font) !important;
    font-size: var(--base-font-size) !important;
}

/* Lists */
ul, ol, li {
    font-family: var(--primary-font) !important;
    font-size: var(--base-font-size) !important;
}

/* Tables */
table, td, th {
    font-family: var(--primary-font) !important;
    font-size: var(--base-font-size) !important;
}

th {
    font-family: var(--secondary-font) !important;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1, .text-4xl, .text-5xl, .text-6xl, .hero h1 {
        font-size: calc(var(--h1-font-size) * 0.8) !important;
    }
    
    h2, .text-3xl {
        font-size: calc(var(--h2-font-size) * 0.85) !important;
    }
    
    h3, .text-2xl {
        font-size: calc(var(--h3-font-size) * 0.9) !important;
    }
    
    .blog-content, .blog-content p {
        font-size: calc(var(--blog-content-font-size) * 0.9) !important;
    }
    
    .hero p {
        font-size: var(--base-font-size) !important;
    }
}

@media (max-width: 480px) {
    body {
        font-size: calc(var(--base-font-size) * 0.9) !important;
    }
    
    h1, .hero h1 {
        font-size: calc(var(--h1-font-size) * 0.7) !important;
    }
    
    h2 {
        font-size: calc(var(--h2-font-size) * 0.75) !important;
    }
    
    h3 {
        font-size: calc(var(--h3-font-size) * 0.8) !important;
    }
}