html {
    font-family: Rubik, sans-serif;
    font-variant-numeric: tabular-nums;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
}

[popover] {
    border: none;
    background-color: transparent;
}

.site-nav-link {
    display: grid;
    place-content: center;
    text-align: center;
    padding-block: var(--action-padding-block);
    padding-inline: var(--action-padding-inline);
    color: var(--color-text-soft);
    font-size: var(--link-font-size);
    font-weight: var(--font-bold);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color 0.4s ease, color 0.4s ease;
    user-select: none;

    &:hover {
        color: var(--color-text);
        background-color: var(--color-control-soft);
    }

    &.active {
        color: var(--color-brand);
        background-color: var(--color-brand-soft);
    }

    &[data-disabled] {
        color: var(--color-text-muted);
        background-color: transparent;
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.65;
    }
}