:root {
    --background: #f4f5f7;
    --surface: #ffffff;
    --surface-soft: #eceff3;

    --text: #171a1f;
    --muted: #666f7b;

    --primary: #374151;
    --primary-dark: #111827;
    --accent: #64748b;

    --border: #d9dee7;

    --shadow: 0 24px 70px rgba(17, 24, 39, 0.16);
    --shadow-soft: 0 16px 44px rgba(17, 24, 39, 0.09);
}

body {
    background:
        radial-gradient(circle at top right, rgba(100, 116, 139, 0.16), transparent 34%),
        linear-gradient(180deg, #f7f8fa 0%, #eef1f5 100%);
    color: var(--text);
}

.site-header {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(18px);
}

.logo,
.footer-logo {
    color: var(--primary-dark);
}

.nav a:hover,
.footer-links a:hover {
    color: var(--primary);
}

.hero-card,
.article-card,
.content-card,
.info-card {
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
}

.button,
.btn,
.cta-button {
    background: var(--primary-dark);
    color: #ffffff;
}

.button:hover,
.btn:hover,
.cta-button:hover {
    background: var(--primary);
}