@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Martel:wght@400;600;700;800;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/*
============================================
MPALO BLOGS & RESEARCH FRAMEWORK
============================================
Based on workbench-framework.css but optimized for content presentation
Typography-focused design system for blogs and research papers
*/

:root {
/* --- Content-Focused Color Palette --- */
--color-content-primary: #FFFFFF;
--color-content-secondary: #F8F9FA;
--color-content-accent: #E9ECEF;
--color-content-card: #FFFFFF;

/* --- Typography Palette --- */
--color-text-primary: #212529;
--color-text-secondary: #495057;
--color-text-tertiary: #6C757D;
--color-text-accent: #516EE1;
--color-text-muted: #ADB5BD;

/* --- Brand Consistency --- */
--color-brand-primary: #516EE1;
--color-brand-hover: #425ACC;
--color-text-on-brand: #FFFFFF;

/* --- Status & Highlight Palette --- */
--color-highlight-bg: rgba(82, 113, 255, 0.1);
--color-quote-accent: #E3F2FD;
--color-code-bg: #F8F9FA;
--color-border-light: #DEE2E6;
--color-border-medium: #CED4DA;

/* --- Layout Dimensions --- */
--content-max-width: 768px;
--content-wide-width: 1024px;
--sidebar-width: 280px;
--header-height: 80px;

/* --- Typography Scale (Golden Ratio - 1.618) --- */
--font-size-100: 12px; /* Caption */
--font-size-200: 14px; /* Small */
--font-size-300: 16px; /* Base */
--font-size-400: 20px; /* Body Large */
--font-size-500: 24px; /* H4 */
--font-size-600: 32px; /* H3 */
--font-size-700: 40px; /* H2 */
--font-size-800: 48px; /* H1 */
--font-size-900: 64px; /* Display */

/* --- Font Families --- */
--font-family-display: 'Martel', serif;
--font-family-heading: 'Inter', sans-serif;
--font-family-body: 'Crimson Text', serif;
--font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

/* --- Font Weights --- */
--font-weight-light: 400;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;

/* --- Spacing Scale (8px base unit) --- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;

/* --- Border Radius --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
}

/*
============================================
BASE STYLES
============================================
*/

html {
scroll-behavior: smooth;
}

body {
font-family: var(--font-family-body);
font-size: var(--font-size-300);
font-weight: var(--font-weight-regular);
line-height: 1.7;
color: var(--color-text-primary);
background-color: var(--color-content-primary);
margin: 0;
padding: 0;
}

/*
============================================
CONTENT TYPOGRAPHY SYSTEM
============================================
*/

/* Display Typography (for exceptional headings like "Blogs Worth Remembering") */
.display-exceptional {
font-family: var(--font-family-display);
font-size: var(--font-size-900);
font-weight: var(--font-weight-black);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 var(--space-8) 0;
color: var(--color-text-primary);
}

/* Article Title */
.article-title {
font-family: var(--font-family-display);
font-size: var(--font-size-800);
font-weight: var(--font-weight-bold);
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0 0 var(--space-6) 0;
color: var(--color-text-primary);
}

/* Section Headings */
.heading-1 {
font-family: var(--font-family-heading);
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
line-height: 1.25;
letter-spacing: -0.01em;
margin: var(--space-16) 0 var(--space-8) 0;
color: var(--color-text-primary);
}

.heading-2 {
font-family: var(--font-family-heading);
font-size: var(--font-size-600);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
margin: var(--space-12) 0 var(--space-6) 0;
color: var(--color-text-primary);
}

.heading-3 {
font-family: var(--font-family-heading);
font-size: var(--font-size-500);
font-weight: var(--font-weight-semibold);
line-height: 1.4;
margin: var(--space-10) 0 var(--space-4) 0;
color: var(--color-text-primary);
}

.heading-4 {
font-family: var(--font-family-heading);
font-size: var(--font-size-400);
font-weight: var(--font-weight-medium);
line-height: 1.5;
margin: var(--space-8) 0 var(--space-3) 0;
color: var(--color-text-secondary);
}

/* Body Text */
.body-intro {
font-family: var(--font-family-body);
font-size: var(--font-size-400);
font-weight: var(--font-weight-regular);
line-height: 1.6;
margin: 0 0 var(--space-8) 0;
color: var(--color-text-secondary);
}

.body-text {
font-family: var(--font-family-body);
font-size: var(--font-size-300);
font-weight: var(--font-weight-regular);
line-height: 1.7;
margin: 0 0 var(--space-6) 0;
color: var(--color-text-primary);
}

.body-small {
font-family: var(--font-family-body);
font-size: var(--font-size-200);
font-weight: var(--font-weight-regular);
line-height: 1.6;
margin: 0 0 var(--space-4) 0;
color: var(--color-text-tertiary);
}

.caption {
font-family: var(--font-family-heading);
font-size: var(--font-size-100);
font-weight: var(--font-weight-medium);
line-height: 1.4;
margin: var(--space-2) 0;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}

/*
============================================
CONTENT LAYOUT COMPONENTS
============================================
*/

/* Main Content Container */
.content-container {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--space-6);
}

.content-wide {
max-width: var(--content-wide-width);
}

/* Article Layout */
.article-layout {
display: flex;
flex-direction: column;
gap: var(--space-8);
}

.article-header {
text-align: center;
padding: var(--space-16) 0 var(--space-12);
border-bottom: 1px solid var(--color-border-light);
margin-bottom: var(--space-12);
}

.article-meta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-6);
font-family: var(--font-family-heading);
font-size: var(--font-size-200);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
}

.article-meta-separator {
width: 4px;
height: 4px;
background-color: var(--color-text-muted);
border-radius: 50%;
}

.article-content {
max-width: var(--content-max-width);
margin: 0 auto;
}

/* Blog Grid Layout */
.blogs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-8);
padding: var(--space-8) 0;
}

.blog-card {
background: var(--color-content-card);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border-color: var(--color-brand-primary);
}

.blog-card-image {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
background-color: var(--color-content-accent);
}

.blog-card-content {
padding: var(--space-6);
}

.blog-card-title {
font-family: var(--font-family-heading);
font-size: var(--font-size-400);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
margin: 0 0 var(--space-3) 0;
color: var(--color-text-primary);
}

.blog-card-excerpt {
font-family: var(--font-family-body);
font-size: var(--font-size-200);
line-height: 1.5;
margin: 0 0 var(--space-4) 0;
color: var(--color-text-secondary);
}

.blog-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--font-size-100);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}

/*
============================================
CONTENT ELEMENTS
============================================
*/

/* Blockquotes */
blockquote {
margin: var(--space-12) 0;
padding: var(--space-8) var(--space-10);
background: var(--color-quote-accent);
border-left: 4px solid var(--color-brand-primary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p {
font-family: var(--font-family-body);
font-size: var(--font-size-400);
font-style: italic;
line-height: 1.6;
margin: 0;
color: var(--color-text-primary);
}

blockquote cite {
display: block;
margin-top: var(--space-4);
font-family: var(--font-family-heading);
font-size: var(--font-size-200);
font-style: normal;
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
}

/* Code blocks */
pre, code {
font-family: var(--font-family-mono);
font-size: var(--font-size-200);
}

pre {
background: var(--color-code-bg);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
padding: var(--space-6);
margin: var(--space-8) 0;
overflow-x: auto;
line-height: 1.5;
}

code {
background: var(--color-code-bg);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
}

/* Lists */
ul, ol {
margin: var(--space-6) 0;
padding-left: var(--space-8);
}

li {
margin: var(--space-3) 0;
line-height: 1.7;
}

/* Links */
a {
color: var(--color-brand-primary);
text-decoration: underline;
transition: color 0.2s ease;
}

a:hover {
color: var(--color-brand-hover);
}

/* Images */
.content-image {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
margin: var(--space-12) 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.image-caption {
text-align: center;
margin-top: var(--space-4);
font-family: var(--font-family-heading);
font-size: var(--font-size-200);
color: var(--color-text-tertiary);
font-style: italic;
}

/*
============================================
NAVIGATION & STRUCTURE
============================================
*/

.content-nav {
background: var(--color-content-secondary);
border-bottom: 1px solid var(--color-border-light);
padding: var(--space-4) 0;
margin-bottom: var(--space-12);
}

.breadcrumb {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--space-6);
font-family: var(--font-family-heading);
font-size: var(--font-size-200);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
}

.breadcrumb a {
color: var(--color-brand-primary);
text-decoration: none;
}

.breadcrumb a:hover {
text-decoration: underline;
}

/* Table of Contents */
.table-of-contents {
background: var(--color-content-secondary);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-8);
margin: var(--space-12) 0;
}

.table-of-contents h4 {
margin: 0 0 var(--space-4) 0;
font-family: var(--font-family-heading);
font-size: var(--font-size-300);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}

.table-of-contents ul {
margin: 0;
padding-left: var(--space-6);
list-style: none;
}

.table-of-contents li {
margin: var(--space-2) 0;
}

.table-of-contents a {
color: var(--color-text-secondary);
text-decoration: none;
font-size: var(--font-size-200);
line-height: 1.5;
}

.table-of-contents a:hover {
color: var(--color-brand-primary);
}

/*
============================================
RESPONSIVE DESIGN
============================================
*/

@media (max-width: 768px) {
:root {
--content-max-width: 100%;
--space-16: 48px;
--space-20: 64px;
--space-24: 80px;
}

.content-container {
padding: 0 var(--space-4);
}

.article-title {
font-size: var(--font-size-700);
}

.heading-1 {
font-size: var(--font-size-600);
}

.heading-2 {
font-size: var(--font-size-500);
}

.display-exceptional {
font-size: var(--font-size-800);
line-height: 1.2;
}

.blogs-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}

.article-header {
padding: var(--space-12) 0 var(--space-8);
}

.article-meta {
flex-direction: column;
gap: var(--space-2);
}

.blog-card-content {
padding: var(--space-5);
}
}

@media (max-width: 480px) {
.content-container {
padding: 0 var(--space-3);
}

.article-title {
font-size: var(--font-size-600);
}

.display-exceptional {
font-size: var(--font-size-700);
}
}

/*
============================================
UTILITY CLASSES
============================================
*/

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-display { font-family: var(--font-family-display); }
.font-heading { font-family: var(--font-family-heading); }
.font-body { font-family: var(--font-family-body); }
.font-mono { font-family: var(--font-family-mono); }

.weight-light { font-weight: var(--font-weight-light); }
.weight-regular { font-weight: var(--font-weight-regular); }
.weight-medium { font-weight: var(--font-weight-medium); }
.weight-semibold { font-weight: var(--font-weight-semibold); }
.weight-bold { font-weight: var(--font-weight-bold); }

.color-primary { color: var(--color-text-primary); }
.color-secondary { color: var(--color-text-secondary); }
.color-tertiary { color: var(--color-text-tertiary); }
.color-accent { color: var(--color-text-accent); }
.color-muted { color: var(--color-text-muted); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.highlight {
background: var(--color-highlight-bg);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
}