:root {
    --header-height: 50px;

    --bs-font-serif: "Times New Roman", serif;
    --bs-body-font-family: var(--bs-font-serif);
    /* Greyscale Core */
    --gray-50: #f9f9f9;
    --gray-100: #f2f2f2;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    /* Map to Bootstrap’s semantic color slots if desired */
    --bs-gray: var(--gray-600);
    --bs-gray-dark: var(--gray-800);
    /* Optional semantic overrides */
    --bs-primary: var(--gray-800);
    --bs-secondary: var(--gray-500);
    --bs-secondary-color: var(--gray-500);
    --bs-success: var(--gray-500);
    --bs-info: var(--gray-400);
    --bs-warning: var(--gray-300);
    --bs-danger: var(--gray-700);
    --bs-light: var(--gray-100);
    --bs-dark: var(--gray-900);
    /* Borders, backgrounds, text colors for a greyscale UI */
    --bs-border-color: var(--gray-300);
    --bs-body-bg: var(--gray-50);
    --bs-body-color: var(--gray-800);
    --bs-card-bg: var(--gray-100);
    --bs-card-border-color: var(--gray-300);
    --bs-emphasis-color: var(--gray-500);
    --bs-dropdown-divider-bg: var(--gray-200);
    --bs-border-color-translucent: var(--bs-dropdown-divider-bg);
}