:root {
    --bg: #fbf7ff;
    --surface: #ffffff;
    --surface-2: #f4e9ff;
    --text: #241331;
    --muted: #80638e;
    --accent: #9333ea;
    --accent-2: #ec4899;
}
body {
    background: radial-gradient(circle at 12% 0%, rgba(147,51,234,.13), transparent 32rem), radial-gradient(circle at 90% 10%, rgba(236,72,153,.10), transparent 26rem), var(--bg);
}
.hero {
    background:
        linear-gradient(135deg, rgba(147,51,234,.13), rgba(236,72,153,.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);
}