:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
:root {
--color-background: #f8fafc;
--color-background-soft: #ffffff;
--color-background-mute: #f1f5f9;
--color-border: rgba(15, 23, 42, 0.08);
--color-border-hover: rgba(15, 23, 42, 0.16);
--color-heading: #0f172a;
--color-text: #475569;
--color-card-bg: #ffffff;
--color-card-shadow: rgba(15, 23, 42, 0.06);
--section-gap: 160px;
}
:root.dark {
--color-background: #0f172a;
--color-background-soft: #1e293b;
--color-background-mute: #334155;
--color-border: rgba(255, 255, 255, 0.12);
--color-border-hover: rgba(255, 255, 255, 0.24);
--color-heading: #f1f5f9;
--color-text: #cbd5e1;
--color-card-bg: #1e293b;
--color-card-shadow: rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
:root:not(.light):not(.dark) {
--color-background: #0f172a;
--color-background-soft: #1e293b;
--color-background-mute: #334155;
--color-border: rgba(255, 255, 255, 0.12);
--color-border-hover: rgba(255, 255, 255, 0.24);
--color-heading: #f1f5f9;
--color-text: #cbd5e1;
--color-card-bg: #1e293b;
--color-card-shadow: rgba(0, 0, 0, 0.4);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}