html.no-theme-transition *,
html.no-theme-transition *::before,
html.no-theme-transition *::after{
transition:none !important;
}
:root {
/* light theme */
--bg: #FFFDF2;
--text: #6D4715;
--muted: rgba(109, 71, 21, 0.72);
--line: rgba(109, 71, 21, 0.18);
--panel: rgba(109, 71, 21, 0.04);
--panel-2: rgba(109, 71, 21, 0.06);
--sidebar-bg: rgba(255, 253, 242, 0.75);
--accent: #6D4715;
--shadow: 0 10px 30px rgba(109, 71, 21, 0.08);
/* toggle (light mode) */
--toggle-track: #F3ECDF; /* warm ivory for contrast */
--toggle-icon: #6D4715;
--toggle-thumb: #FFFDF2;
}
html[data-theme="dark"] {
--bg: #041e05;
--text: #c1e3b8;
--muted: rgba(237, 230, 214, 0.70);
--line: rgba(237, 230, 214, 0.14);
--accent: #7AA2F7;
--panel: rgba(40, 56, 38, 1);
--panel-2: rgba(38, 56, 38, 0.70);
--shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
--sidebar-bg: rgba(45, 66, 43, 0.85);
/* toggle (dark mode) */
--toggle-track: rgba(237, 230, 214, 0.12);
--toggle-icon: #041e05;
--toggle-thumb: #EDE6D6;
}
html, body {
height: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: "Inter",
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;
font-weight: 400;
line-height: 1.6;
}
/* smooth theme transitions */
body,
.sidebar,
.sidebar-card,
.main,
.page,
.panel,
.project-card,
.tech-item,
.nav-link,
.theme-toggle-track,
.theme-toggle-thumb {
transition:
background-color 240ms ease,
color 240ms ease,
border-color 240ms ease,
box-shadow 240ms ease;
}
img {
transition: filter 240ms ease;
}
/* keep code monospace */
.mono, .v, code, pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}