:root {
    color-scheme: dark;
    --bg: #07111f;
    --surface: #0f172a;
    --text: #f8fafc;
    --muted: #9fb0c3;
    --heading: #ffffff;
    --border: #1f2937;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f7fb;
    --surface: #ffffff;
    --text: #14213d;
    --muted: #5f6b7a;
    --heading: #071a3d;
    --border: #e5eaf2;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
}

.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(7, 26, 61, 0.14);
}

.prose p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

.prose h2, .prose h3 {
    color: var(--heading);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}