:root {
    --bg: #f8f7f3;
    --surface: #ffffff;
    --surface-2: #f0ede4;
    --text: #241a12;
    --muted: #756b5f;
    --accent: #b45309;
    --accent-2: #7f1d1d;
}
body {
    background: radial-gradient(circle at 12% 0%, rgba(180,83,9,.14), transparent 32rem), radial-gradient(circle at 88% 8%, rgba(127,29,29,.10), transparent 28rem), var(--bg);
}
.hero {
    background:
        linear-gradient(135deg, rgba(180,83,9,.14), rgba(127,29,29,.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: #0f1117;
    --surface: #171b24;
    --surface-2: #242a36;
    --text: #f6f1e8;
    --muted: #b9ad9b;
    --border: rgba(255,255,255,.13);
    --shadow: 0 22px 60px rgba(0,0,0,.38);
    --accent: #f59e0b;
    --accent-2: #ef4444;
}
html[data-color-scheme="dark"] body {
    background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 34rem), radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent-2) 11%, 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);
}