:root {
    --cv-ui-ease: 180ms ease;
    --cv-ui-lift: -1px;
    --cv-ui-shadow-soft: 0 10px 20px rgba(15, 23, 42, 0.10);
    --cv-ui-focus: 2px solid rgba(33, 196, 90, 0.45);
}

body {
    transition: opacity 140ms ease, filter 140ms ease;
}

body.cv-page-loading {
    opacity: 0.88;
    filter: saturate(0.96);
    cursor: progress;
}

:where(
    button,
    .btn,
    .btn-enter,
    .btn-secondary-access,
    .password-toggle,
    .icon-btn,
    .hero-button,
    .hero-button-secondary,
    .quick-item,
    .action-button,
    .location-refresh,
    .location-retry-btn,
    .history-more,
    .detail-btn,
    .detail-link,
    .detail-close,
    .period-btn,
    .filter-submit,
    .photo-button,
    .photo-action-btn,
    .photo-add-btn,
    .obs-toggle,
    .client-option,
    .top-icon-btn
) {
    transition: transform var(--cv-ui-ease), box-shadow var(--cv-ui-ease), filter var(--cv-ui-ease), background-color var(--cv-ui-ease), color var(--cv-ui-ease), border-color var(--cv-ui-ease);
}

:where(
    .card,
    .quick-block,
    .login-card,
    .setup-card,
    .auth-card,
    .hero-card,
    .summary-card,
    .status-card,
    .module-card,
    .resume-card,
    .history-item,
    .report-item
) {
    transition: transform var(--cv-ui-ease), box-shadow var(--cv-ui-ease), background-color var(--cv-ui-ease), border-color var(--cv-ui-ease);
}

:where(
    button,
    .btn,
    .btn-enter,
    .btn-secondary-access,
    .password-toggle,
    .icon-btn,
    .hero-button,
    .hero-button-secondary,
    .quick-item,
    .action-button,
    .location-refresh,
    .location-retry-btn,
    .history-more,
    .detail-btn,
    .detail-link,
    .detail-close,
    .period-btn,
    .filter-submit,
    .photo-button,
    .photo-action-btn,
    .photo-add-btn,
    .obs-toggle,
    .client-option,
    .top-icon-btn,
    a[href]
):focus-visible {
    outline: var(--cv-ui-focus);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    :where(
        button,
        .btn,
        .btn-enter,
        .btn-secondary-access,
        .password-toggle,
        .icon-btn,
        .hero-button,
        .hero-button-secondary,
        .quick-item,
        .action-button,
        .location-refresh,
        .location-retry-btn,
        .history-more,
        .detail-btn,
        .detail-link,
        .detail-close,
        .period-btn,
        .filter-submit,
        .photo-button,
        .photo-action-btn,
        .photo-add-btn,
        .obs-toggle,
        .client-option,
        .top-icon-btn
    ):not(:disabled):not(.disabled):hover {
        transform: translateY(var(--cv-ui-lift));
        box-shadow: var(--cv-ui-shadow-soft);
        filter: saturate(1.02);
    }

    :where(
        .card,
        .quick-block,
        .login-card,
        .setup-card,
        .auth-card,
        .hero-card,
        .summary-card,
        .status-card,
        .module-card,
        .resume-card,
        .history-item,
        .report-item
    ):hover {
        transform: translateY(-1px);
    }
}

:where(
    button,
    .btn,
    .btn-enter,
    .btn-secondary-access,
    .password-toggle,
    .icon-btn,
    .hero-button,
    .hero-button-secondary,
    .quick-item,
    .action-button,
    .location-refresh,
    .location-retry-btn,
    .history-more,
    .detail-btn,
    .detail-link,
    .detail-close,
    .period-btn,
    .filter-submit,
    .photo-button,
    .photo-action-btn,
    .photo-add-btn,
    .obs-toggle,
    .client-option,
    .top-icon-btn
):not(:disabled):not(.disabled):active {
    transform: translateY(0);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}