:root[data-mantine-color-scheme="light"] {
    --mantine-color-bg: #fefefe;
    --mantine-color-body: #fefefe;
    --mantine-color-text: #121617;
    --tarxiv-color-primary: #b31b1b;
    --tarxiv-card-1: #FDF4F4;
    --tarxiv-footer-bg: #212729;
    --tarxiv-surface-1: #F5F5F8;
    --tarxiv-surface-2: #ebebf1;
}


:root[data-mantine-color-scheme="dark"] {
    --mantine-color-bg: #121617;
    --mantine-color-body: #121617;
    --mantine-color-text: #fefefe;
    --tarxiv-color-primary: #b31b1b;
    --tarxiv-card-1: #212729;
    --tarxiv-footer-bg: #121617;
    --tarxiv-surface-1: #212729;
    --tarxiv-surface-2: #212729;
}


/* Only apply hover colors on devices with a mouse/pointer */
@media (hover: hover) {
    .nav-item-hover:hover {
        background-color: var(--mantine-color-bg);
        transform: scale(1.03);
        transition: transform 200ms ease;
    }

    /* Change the icon/text color on hover */
    .nav-item-hover:hover * {
        color: var(--mantine-color-indigo-6);
    }
}

/* Tactile feedback for mobile and desktop when clicking */
.nav-item-hover:active {
    transform: scale(0.95);
    transition: transform 50ms ease;
}

/* Ensure long words wrap instead of clipping */
.nav-text-wrap {
    white-space: normal;
    word-break: break-word;
    line-height: 1.1;
}