/* Theme Variables */
[data-theme="dark"] {
	--bg:#05070a;
	--card:#0e1418;
	--muted:#9aa6b2;
	--text:#e6f0f6;
	--accent:#06b6d4;
	--accent-2:#7c3aed;
	--border:rgba(255,255,255,0.04);
	--border-light:rgba(255,255,255,0.03);
	--hero-gradient:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
	--post-gradient:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);
	--code-bg:#041018;
	--code-text:#cfeff6;
	--btn-text:#08121a;
}

[data-theme="light"] {
	--bg:#ffffff;
	--card:#f8f9fa;
	--muted:#6c757d;
	--text:#212529;
	--accent:#06b6d4;
	--accent-2:#7c3aed;
	--border:rgba(0,0,0,0.1);
	--border-light:rgba(0,0,0,0.06);
	--hero-gradient:linear-gradient(180deg,rgba(0,0,0,0.02),transparent);
	--post-gradient:linear-gradient(180deg,rgba(0,0,0,0.01),transparent);
	--code-bg:#f5f5f5;
	--code-text:#333333;
	--btn-text:#ffffff;
}

/* Default to dark theme */
:root {
	--bg:#05070a;
	--card:#0e1418;
	--muted:#9aa6b2;
	--text:#e6f0f6;
	--accent:#06b6d4;
	--accent-2:#7c3aed;
	--border:rgba(255,255,255,0.04);
	--border-light:rgba(255,255,255,0.03);
	--hero-gradient:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
	--post-gradient:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);
	--code-bg:#041018;
	--code-text:#cfeff6;
	--btn-text:#08121a;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, Arial, sans-serif;margin:0;color:var(--text);background:var(--bg);transition:background-color 0.3s ease, color 0.3s ease}
/* Prefer reduced motion for animations */
@media (prefers-reduced-motion: reduce){
	*{animation-duration:0.001ms!important;transition-duration:0.001ms!important}
}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{background:transparent;border-bottom:1px solid var(--border);backdrop-filter:blur(6px);transition:border-color 0.3s ease}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{margin:0;font-size:1.25rem}
nav{display:flex;align-items:center;gap:1rem}
nav a{margin-left:1rem;color:var(--muted);text-decoration:none;transition:color 0.3s ease}
nav a:hover{color:var(--accent)}
.hero{padding:3rem 0;display:grid;grid-template-columns:1fr 480px;gap:2rem;align-items:center}
.hero .hero-card{background:var(--hero-gradient);border:1px solid var(--border-light);padding:1.25rem;border-radius:10px}
.hero .hero-title{font-size:2rem;margin:0 0 .5rem;font-family:"Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace}
.hero .hero-sub{color:var(--muted);margin:0 0 1rem}
.hero .hero-cta{margin-top:1rem}
.btn{display:inline-block;padding:.5rem 1rem;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--btn-text);text-decoration:none;border-radius:6px;transition:transform 0.3s ease,color 0.3s ease}
.btn:hover{transform:translateY(-2px)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.card{background:var(--card);border-radius:10px;padding:1rem;border:1px solid var(--border-light);transition:all 0.3s ease}
.card:hover{border-color:var(--accent)}
.card h3{margin-top:0;transition:color 0.3s ease}
.site-footer{margin-top:2rem;padding:1rem;background:transparent;color:var(--muted);transition:color 0.3s ease}
.posts-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.posts-list .post{background:var(--post-gradient);padding:1rem;border-radius:10px;border:1px solid var(--border-light);transition:all 0.3s ease}
.posts-list .post:hover{border-color:var(--accent);transform:translateY(-2px)}
.post .excerpt{color:var(--muted)}
.post-detail{padding:1rem 0}
.meta{color:var(--muted);font-size:.9rem}

/* Logo and header */
.site-logo{height:44px;width:auto;display:inline-block;vertical-align:middle}
.brand{display:none}

/* Larger header nav text (40% larger) */
nav a{margin-left:1rem;color:var(--muted);text-decoration:none;font-size:1.6rem;font-weight:600}

/* Theme Toggle Button */
.theme-toggle{
	position:relative;
	background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
	border:none;
	border-radius:50%;
	width:40px;
	height:40px;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
	margin-left:15px;
	box-shadow:0 4px 15px rgba(0,255,255,0.3);
	overflow:hidden;
}

.theme-toggle::before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	background:radial-gradient(circle,rgba(255,255,255,0.2) 0%,transparent 70%);
	opacity:0;
	transition:opacity 0.3s ease;
}

.theme-toggle:hover{
	transform:scale(1.1) rotate(10deg);
	box-shadow:0 6px 25px rgba(0,255,255,0.5),0 0 30px rgba(0,255,255,0.3);
}

.theme-toggle:hover::before{
	opacity:1;
}

.theme-toggle:active{
	transform:scale(0.95);
}

.theme-toggle svg{
	width:20px;
	height:20px;
	stroke:#fff;
	fill:none;
	filter:drop-shadow(0 0 8px rgba(255,255,255,0.8));
	transition:all 0.3s ease;
	z-index:1;
}

.theme-toggle:hover svg{
	filter:drop-shadow(0 0 15px rgba(255,255,255,1));
	transform:scale(1.1);
}

[data-theme="light"] .theme-toggle svg{
	stroke:#FFD700;
	filter:drop-shadow(0 0 12px rgba(255,215,0,0.9));
}

[data-theme="light"] .theme-toggle:hover svg{
	filter:drop-shadow(0 0 20px rgba(255,215,0,1));
}

@media (max-width:1200px){
	.site-logo{height:72px}
}

@media (max-width:900px){
	.site-logo{height:56px}
	nav a{font-size:1.47rem}
}

/* Header: absolute-positioned logo so logo size doesn't expand header */
.site-header{position:relative;height:96px}
.site-header .container{align-items:center;height:100%;padding-left:180px}
.site-logo{position:absolute;left:60px;top:50%;transform:translateY(-50%);height:64px}
@media (max-width:1200px){
	.site-header .container{padding-left:160px}
	.site-logo{height:56px;left:52px}
}
@media (max-width:900px){
	.site-header{height:84px}
	.site-header .container{padding-left:130px}
	.site-logo{height:48px;left:44px}
}
@media (max-width:600px){
	.site-header{height:72px}
	.site-header .container{padding-left:110px}
	.site-logo{height:29px;left:32px}
}

@media (max-width:600px){
	.site-logo{height:29px}
	nav a{font-size:1.4rem}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
}

@media (max-width:600px){.site-header .container{flex-direction:column;align-items:flex-start}nav{margin-top:.5rem}}

/* Infographics and demo */
.infographics{margin-top:2rem}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.info-card{text-align:center}
.info-icon{height:48px;margin-bottom:.5rem;opacity:.95}
.demo-row{display:grid;grid-template-columns:1fr 420px;gap:1rem;margin-top:1rem}
.code-card pre{background:var(--code-bg);padding:1rem;border-radius:8px;overflow:visible;white-space:pre-wrap;word-break:break-word;max-width:100%;border:1px solid var(--border-light);transition:background 0.3s ease}
.code-card code{font-family:SFMono-Regular,Menlo,Monaco,monospace;color:var(--code-text);transition:color 0.3s ease}
.soc-card .soc-feed{height:260px;overflow:auto;padding:.5rem;background:var(--code-bg);border-radius:8px;border:1px solid var(--border-light);transition:background 0.3s ease}
.soc-item{padding:.35rem .5rem;border-bottom:1px dashed var(--border);font-family:SFMono-Regular,Menlo,Monaco,monospace;font-size:.88rem}
.soc-ts{color:var(--muted);margin-right:.5rem}
.soc-sev{font-weight:700;margin-right:.5rem;padding:.12rem .4rem;border-radius:4px}
.sev-info{background:rgba(6,182,212,0.08);color:var(--accent)}
.sev-low{background:rgba(124,58,237,0.04);color:#9aa6b2}
.sev-medium{background:rgba(255,165,0,0.06);color:orange}
.sev-high{background:rgba(255,69,58,0.06);color:#ff6b6b}
.sev-critical{background:rgba(255,0,0,0.08);color:#ff3b30}

@media (max-width:900px){
	.info-grid{grid-template-columns:1fr}
	.demo-row{grid-template-columns:1fr}
}

/* About page System Overview styling */
.system-overview-section {
	margin-top: 2em;
	line-height: 1.8;
}
.system-overview-section h3 {
	font-style: italic;
	color: #00bfff;
	margin-bottom: 0.7em;
}
.system-overview-section ul {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}