:root {
    --bg: #f7f4ff;
    --surface: #ffffff;
    --surface-2: #efe9ff;
    --text: #1d1732;
    --muted: #70658d;
    --accent: #7c3aed;
    --accent-2: #22c55e;
}
body {
    background: radial-gradient(circle at 12% 0%, rgba(124,58,237,.13), transparent 32rem), radial-gradient(circle at 90% 10%, rgba(34,197,94,.10), transparent 26rem), var(--bg);
}
.hero {
    background:
        linear-gradient(135deg, rgba(124,58,237,.13), rgba(34,197,94,.10)),
        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);
}