:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #edf2fb;
    --text: #172033;
    --muted: #66758f;
    --accent: #5b45ff;
    --accent-2: #1aa37a;
}
body {
    background: radial-gradient(circle at 12% 0%, rgba(91,69,255,.11), transparent 32rem), radial-gradient(circle at 90% 10%, rgba(26,163,122,.08), transparent 26rem), var(--bg);
}
.hero {
    background:
        linear-gradient(135deg, rgba(91,69,255,.11), rgba(26,163,122,.08)),
        var(--surface);
}
.button { box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 20%, transparent); }
.post-card { background: var(--surface); }
.post-card h2 a:hover { color: var(--accent); }
html[data-color-scheme="dark"] {
    --bg: #0e1522;
    --surface: #151f2e;
    --surface-2: #202b3d;
    --text: #edf4ff;
    --muted: #9baeca;
    --border: rgba(255,255,255,.12);
    --shadow: 0 22px 60px rgba(0,0,0,.34);
}
html[data-color-scheme="dark"] body {
    background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34rem), radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 28rem), var(--bg);
}
html[data-color-scheme="dark"] .hero {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent)),
        var(--surface);
}