:root {
    --bg: #f7f7f8;
    --surface: #ffffff;
    --surface-2: #ededf0;
    --text: #101522;
    --muted: #666f7d;
    --accent: #111827;
    --accent-2: #ef4444;
}
body {
    background: radial-gradient(circle at 12% 0%, rgba(17,24,39,.12), transparent 32rem), radial-gradient(circle at 90% 10%, rgba(239,68,68,.08), transparent 26rem), var(--bg);
}
.hero {
    background:
        linear-gradient(135deg, rgba(17,24,39,.12), rgba(239,68,68,.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);
}

body[data-site="fotografia"] .post-grid.view-photo .post-card { background: #0f172a; color: #fff; }
body[data-site="fotografia"] .post-grid.view-photo .post-card p,
body[data-site="fotografia"] .post-grid.view-photo .post-meta { color: rgba(255,255,255,.78); }