:root {
    --text-color-default: #2C313BEB;
    --text-color-hover: #2C313B94;
    --text-color-code: #E7E9EEEB;
    --text-color-on-colored-bg: #2C313BEB;
    --bg-default: #ffffff;
    --bg-note: #FEF0DD;
    --bg-code: #2C313B;
    --graphite-50: #F6F7F9;
    --graphite-pane-50: #303E5A0A;
    --graphite-75: #EFF1F5;
    --graphite-pane-75: #2D3D5D12;
    --graphite-100: #E7E9EE;
    --graphite-pane-100: #1E2A481A;
    --graphite-200: #DCDFE5;
    --graphite-300: #D0D4DC;
    --graphite-400: #AEB5C1;
    --graphite-500: #8F96A3;
    --graphite-600: #6B7280;
    --graphite-700: #41464F;
    --graphite-800: #2C313B;
    --graphite-900: #1F2229;
    --cyan-default: #31aee3;
    --cyan-200: #C8EAF9;
    --cyan-400: #75CBF0;
    --cyan-container-opposite: #C8EAF9;
    --mauve-default: #4643BD;
    --mauve-container-opposite: #BBC4F9;
    --toc-fs-default: 16px;
    --toc-fs-smaller: 14px;
    --toc-lh-default: 24px;
    --menu-width: 360px;
    --innerdiv-max-width: 832px;
    --sidemenu-width: 240px;
    --font-default: 'Geologica';
    --font-default-bold: 'Geologica Bold';
    --font-code: 'Roboto Mono';
    --border-radius-default: 8px;
    --lh-default: 1.5;
    --lh-h1: 40px;
    --lh-h2: 32px;
    --lh-h3: 28px;
    --lh-code: 22px;
    --lh-tablecell: 20px;
    --lh-tableheading: 22px;
    --fs-default: 16px;
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-code: 14px;
    --fs-tablecell: 14px;
    --fs-tableheading: 14px;
    --fs-comment: 12px;    
}

@media (max-width: 768px) {
:root {
    --lh-h1: 36px;
    --lh-h2: 30px;
    --lh-h3: 26px;
    --fs-h1: 28px;
    --fs-h2: 22px;
    --fs-h3: 18px;		
    }
}

@media (max-width: 480px) {
:root {
    --lh-h1: 32px;
    --lh-h2: 28px;
    --lh-h3: 26px;
    --fs-h1: 24px;
    --fs-h2: 20px;
    --fs-h3: 18px; 	
    }
}

@media (prefers-color-scheme: dark) {
:root {
    --text-color-default: #E7E9EEEB;
    --text-color-hover: #E7E9EE94;
    --text-color-code: #E7E9EEEB;
    --text-color-on-colored-bg: #E7E9EEEB;
    --bg-default: #1F2229;
    --bg-note: #453217;
    --bg-code: #2C313B;
    --graphite-50: #23272F;
    --graphite-pane-50: #B5C9DE08;
    --graphite-75: #272C35;
    --graphite-pane-75: #B3C9E00F;
    --graphite-100: #2C313B;
    --graphite-pane-100: #BECDE417;
    --graphite-200: #41464F;
    --graphite-300: #555B68;
    --graphite-500: #8F96A3;    
    --graphite-400: #6B7280;
    --graphite-600: #AEB5C1;
    --graphite-700: #DCDFE5;
    --graphite-800: #E7E9EE;
    --graphite-900: #FFFFFF;
    --cyan-200: #0E467C;
    --cyan-400: #087AAF;
    }    
}