:root{

--font-main:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

--content-width:1100px;

/* LIGHT MODE BASE */

--bg:#f8fafc;
--surf:#ffffff;

--text:#1e293b;
--mute:#64748b;

--accent:#2563eb;
--accent-rgb:37,99,235;

--border:#e2e8f0;
--glow:rgba(37,99,235,.1);

--shadow:0 4px 12px rgba(0,0,0,.05);


/* STATUS COLORS (LIGHT) */

--status-new:#e67700;
--status-updated:#339af0;
--status-ok:#37b24d;
--status-broken:#e03131;
--status-unknown:#f08c00;

}


/* DARK MODE OVERRIDE */

[data-theme="dark"]{

--bg:#1a1d23;
--surf:#23272e;

--text:rgba(239,243,248,.92);
--mute:rgba(156,163,175,.86);

--accent:#00f2ff;
--accent-rgb:0,242,255;

--border:rgba(255,255,255,.06);
--glow:rgba(0,242,255,.12);

--shadow:0 10px 26px rgba(0,0,0,.28);


/* STATUS COLORS (DARK) */

--status-new:#ffd43b;
--status-updated:#4dabf7;
--status-ok:#40c057;
--status-broken:#fa5252;
--status-unknown:#fab005;

}


/* BASE TYPOGRAPHY */

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:var(--font-main);
background:var(--bg);
color:var(--text);
line-height:1.65;
letter-spacing:-.01em;
}


/* HEADINGS */

h1,h2{
font-weight:750;
letter-spacing:-0.02em;
position:relative;
}


/* Gradient titles */

h1,
h2{

background:linear-gradient(
90deg,
var(--text) 0%,
var(--text) 12%,
rgba(255,255,255,.95) 25%,
var(--accent) 55%
);

-webkit-background-clip:text;
background-clip:text;
color:transparent;

background-size:140% 100%;

}

/* Dark glow */

[data-theme="dark"] h1,
[data-theme="dark"] h2{

background:linear-gradient(
90deg,
var(--text) 0%,
rgba(255,255,255,.9) 30%,
var(--accent) 70%
);

-webkit-background-clip:text;
background-clip:text;
color:transparent;

text-shadow:
0 0 16px rgba(0,242,255,.10),
0 0 28px rgba(0,242,255,.06);

}

/* Light cleaner gradient */

[data-theme="light"] h1,
[data-theme="light"] h2{

background:linear-gradient(
90deg,
var(--text) 0%,
var(--text) 40%,
var(--accent) 100%
);

-webkit-background-clip:text;
background-clip:text;
color:transparent;

}

/* Accent underline */

h1::after,
h2::after{

content:"";
display:block;

width:140px;
height:3px;

margin-top:.65rem;

background:linear-gradient(
90deg,
var(--accent),
rgba(var(--accent-rgb),.55),
transparent
);

border-radius:2px;
opacity:.9;

}

[data-theme="dark"] h1::after,
[data-theme="dark"] h2::after{
box-shadow:0 0 10px var(--glow);
}

/* TEXT ELEMENTS */

p{margin:0 0 1rem 0;}

ul,ol{
margin:0 0 1rem 1.2rem;
}

li{
margin:.35rem 0;
}

/* LINKS */

a{
color:var(--accent);
text-decoration:none;
transition:.15s;
}

a:hover{
opacity:.85;
}

/* PAGE CONTAINER */

.site-container{
max-width:var(--content-width);
margin:0 auto;
padding:1.6rem 1.4rem;
min-height:80vh;
}


/* PAGE TRANSITION */

.page-enter{
animation:pageEnter .45s cubic-bezier(.22,1,.36,1);
}

@keyframes pageEnter{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}

/* BACK TO TOP BUTTON */

.back-to-top{
position:fixed;
bottom:28px;
right:28px;
width:44px;
height:44px;

background:var(--surf);
border:1px solid var(--border);

color:var(--accent);

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

opacity:0;
visibility:hidden;

transition:.3s;

box-shadow:var(--shadow);
}

.back-to-top.visible{
opacity:1;
visibility:visible;
}


/* STATUS COLOR */

.status-new{color:var(--status-new);}
.status-updated{color:var(--status-updated);}
.status-ok{color:var(--status-ok);}
.status-broken{color:var(--status-broken);}
.status-unknown{color:var(--status-unknown);}

/* BLOCKQUOTE */

blockquote{
margin:1.2rem 0;
padding:12px 16px;
border-left:3px solid var(--accent);
background:var(--glow);
border-radius:8px;
font-size:inherit;
color:var(--text);
line-height:1.6;
position:relative;
}

blockquote::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:1px;
background:linear-gradient(
90deg,
var(--accent),
transparent
);
opacity:.35;
}

blockquote p{
margin:0;
}

/* CODES */

code{
font-family:var(--font-mono);
font-size:.92em;
padding:2px 6px;
background:var(--surf);
border:1px solid var(--border);
border-radius:6px;
color:var(--accent);
white-space:nowrap;
}

[data-theme="dark"] code{
box-shadow:0 0 0 1px rgba(var(--accent-rgb),.12);
}

pre{
background:var(--surf);
border:1px solid var(--border);
padding:18px 20px;
border-radius:14px;
overflow:auto;
box-shadow:var(--shadow);
position:relative;
}

pre code{
background:none;
border:none;
padding:0;
color:var(--text);
font-size:.92rem;
line-height:1.6;
white-space:pre;
display:block;
}

[data-theme="dark"] pre{
box-shadow:
0 0 0 1px rgba(var(--accent-rgb),.08),
0 8px 28px rgba(0,0,0,.35);
}