/* Modern: the app's own default look. */

:root {
    --bg: #f7f7fb;
    --surface: #ffffff;
    --surface-alt: #eef0fa;
    --text: #1c1e29;
    --text-muted: #6b7086;
    --accent: #5b5bf0;
    --accent-text: #ffffff;
    --border: #e4e5f1;
    --radius: 12px;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: var(--font-body);
    --shadow: 0 2px 10px rgba(30, 30, 60, 0.06);
}

.site-header {
    backdrop-filter: blur(6px);
}

.category-card,
.post {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(30, 30, 60, 0.1);
}

.row-item {
    transition: background 0.12s ease;
}

.row-item:hover {
    background: var(--surface-alt);
}

.row-title a {
    font-weight: 600;
}

/* Dark mode. Everything above reads off the shared variables, so this is
   the whole thing: no structural overrides needed. */
[data-theme-mode="dark"] {
    --bg: #14151c;
    --surface: #1c1e29;
    --surface-alt: #262838;
    --text: #e7e8f0;
    --text-muted: #9497ac;
    --accent: #7c7cf5;
    --accent-text: #ffffff;
    --border: #33354a;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}