/* Theme variables */
:root{
	--bg:#0b0c10; /* dark background */
	--panel:#1f2833;
	--text:#ffffff; /* enforce white text by default */
	--accent:#66fcf1;
	--link:#45a29e;
	--border:#2d3642;
	--code-bg:#0f141a;
	--code-border:#1d2630;
}

/* Light mode overrides (applied when html has .light) */
html.light{
	--bg:#ffffff;
	--panel:#f5f7fb;
	--text:#111111;
	--accent:#66fcf1; /* keep brand accent */
	--link:#1f2937;
	--border:#e5e7eb;
	--code-bg:#f5f7fb;
	--code-border:#e5e7eb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6}
body{overflow-x:hidden}

.site-header{background:var(--panel);border-bottom:1px solid var(--border)}
.site-header nav{max-width:860px;margin:0 auto;padding:12px 16px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.site-header a{color:var(--text);text-decoration:none}
.site-header a:hover{color:var(--accent)}

/* Theme toggle button */
.theme-toggle{margin-left:auto;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:9999px;padding:6px 10px;cursor:pointer;line-height:1}
.theme-toggle:hover{background:var(--panel);color:var(--accent)}

.container{max-width:860px;margin:0 auto;padding:24px 16px;overflow-x:hidden}
h1,h2,h3{color:var(--text)}
a{color:var(--accent)}
pre,code{background:var(--code-bg);border:1px solid var(--code-border);border-radius:6px}
pre{padding:12px;overflow:auto}
code{padding:0 4px}
.post-date{opacity:0.7;font-size:0.9rem;margin:0 0 8px}
.post-list{list-style:none;padding:0}
.post-list li{margin:8px 0}
.site-title{text-align:center;margin-bottom:2rem}
.post-item{margin:2rem 0;border-bottom:1px solid var(--border);padding-bottom:1.5rem}
.post-item:last-child{border-bottom:none}
.post-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.post-title{font-size:1.2rem;font-weight:600;text-decoration:none}
.post-title:hover{color:var(--accent)}
.post-preview-image{margin:1rem 0}
.post-preview-image img{max-width:300px;border-radius:6px}
.post-preview{opacity:0.9;line-height:1.5;margin:0.5rem 0}
.see-more-container{text-align:center;margin:2rem 0}
.see-more-link{display:inline-block;padding:0.75rem 1.5rem;background:var(--panel);color:var(--text);text-decoration:none;border-radius:6px;border:1px solid var(--border);transition:all 0.2s ease}
.see-more-link:hover{background:var(--accent);color:var(--bg);transform:translateY(-1px)}
.loading-indicator, .no-more-posts{text-align:center;margin:2rem 0;opacity:0.7}
.loading-indicator p, .no-more-posts p{margin:0;font-style:italic}
.site-footer{border-top:1px solid var(--border);margin-top:48px}
.site-footer p{max-width:860px;margin:0 auto;padding:12px 16px;opacity:0.8}
.site-footer a{color:var(--text);text-decoration:none}
.site-footer a:hover{color:var(--accent)}

/* Responsive media */
img,svg,video,iframe{max-width:100% !important;height:auto !important}
article img{display:block;margin:16px auto;max-width:100% !important;height:auto !important}
p>img{max-width:100% !important;height:auto !important}
figure{margin:0 0 1rem}
figcaption{opacity:.8;font-size:.9rem;margin-top:.25rem}

/* Long content ergonomics */
table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
td,th{padding:.4rem .6rem;border-bottom:1px solid var(--border)}
p,li{overflow-wrap:anywhere}

/* Type scales that adapt a bit */
h1{font-size:clamp(1.8rem,1.2rem+2vw,2.2rem)}
h2{font-size:clamp(1.4rem,1rem+1.5vw,1.8rem)}
h3{font-size:clamp(1.2rem,.95rem+1vw,1.4rem)}

/* Small screens: tighten paddings */
@media (max-width:600px){
	.container{padding:16px 12px}
	.site-header nav{padding:10px 12px;gap:12px}
}