:root {
    --color-primary: #000000;
    --color-on-primary: #ffffff;
    --color-secondary: #000000;
    --color-on-secondary: #ffffff;
    --color-background: #ffffff;
    --color-on-background: #000000;
    --color-surface: #ffffff;
    --color-on-surface: #000000;
    --color-surface-variant: #f6f6f6;
    --color-on-surface-variant: #4a4a4a;
    --color-outline: #000000;
    --color-outline-variant: #dbdbdb;
    --color-outline-hover: #999999;

    --font-label: 'JetBrains Mono', monospace;
    --font-body: 'EB Garamond', serif;
    --font-headline: 'EB Garamond', serif;
    --font-display: 'EB Garamond', serif;

    --transition-speed: 0.3s;
    --radius: 0;
}

html{overflow-y:scroll}
html::-webkit-scrollbar{width:12px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:var(--color-on-surface-variant);border:2px solid var(--color-background);border-radius:6px;min-height:48px}

[data-theme="dark"] {
    --color-primary: #ffffff;
    --color-on-primary: #000000;
    --color-secondary: #ffffff;
    --color-on-secondary: #000000;
    --color-background: #0a0a0a;
    --color-on-background: #ffffff;
    --color-surface: #121212;
    --color-on-surface: #ffffff;
    --color-surface-variant: #1c1c1c;
    --color-on-surface-variant: #a3a3a3;
    --color-outline: #ffffff;
    --color-outline-variant: #333333;
    --color-outline-hover: #666666;
}
html[data-theme="dark"]::-webkit-scrollbar-track{background:#2a2a2a!important}
html[data-theme="dark"]::-webkit-scrollbar-thumb{background:#999999!important;border:2px solid #2a2a2a!important;border-radius:8px!important;min-height:50px!important}