/*
Palette:
- Primary: #3B82F6 (Blue)
- Secondary: #10B981 (Green)
- Background: #F9FAFB (Light Gray)
- Surface: #FFFFFF (White)
- Text: #1F2937 (Dark Gray)
- Subtle Text: #6B7280 (Lighter Gray)
*/

:root {
    --primary-color: #3B82F6;
    --secondary-color: #10B981;
    --background-color: #F9FAFB;
    --surface-color: #FFFFFF;
    --text-color: #1F2937;
    --subtle-text-color: #6B7280;
    --heading-font: Georgia, 'Times New Roman', Times, serif;
    --body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--body-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
}

.navbar-brand {
    font-family: var(--heading-font);
    font-weight: bold;
}

.post-card {
    background-color: var(--surface-color);
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.post-card img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #2563EB;
    border-color: #2563EB;
}

.post-content {
    line-height: 1.8;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.footer {
    background-color: var(--surface-color);
}