/* CSS custom properties matching Tailwind theme */
:root {
    --bg: #0E0E12;
    --surface: #171720;
    --surface-hover: #1F1F2B;
    --border: rgba(255,255,255,0.06);
    --fg: #ECECF1;
    --fg-muted: #9A9AAB;
    --fg-subtle: #5C5C6B;
    --accent: #BB86FC;
    --accent-hover: #A473E5;
    --accent-soft: rgba(187,134,252,0.12);
    --danger: #F87171;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--fg-subtle);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--fg-muted);
}

/* Focus ring */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sheet drag handle */
.sheet-drag-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--fg-subtle);
    margin: 8px auto;
}

/* Sheet slide-in animation */
@keyframes sheet-slide-in {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.sheet-enter {
    animation: sheet-slide-in 250ms cubic-bezier(.2,.9,.3,1);
}

/* List item enter animation */
@keyframes item-enter {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.item-enter {
    animation: item-enter 180ms ease-out;
}

/* List item exit animation */
@keyframes item-exit {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.97);
    }
}

.item-exit {
    animation: item-exit 180ms ease-out forwards;
}

/* Tabular numerals for times */
.tabular {
    font-variant-numeric: tabular-nums;
}

/* Toast enter animation */
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}