/* Brain UI - Custom styles and CSS tokens */
/* No @apply directives -- CDN play mode does not support them */

:root {
    /* Dark theme base colors */
    --bg-primary: #0f1117;
    --bg-secondary: #1a1d27;
    --accent: #6366f1;
    --destructive: #ef4444;

    /* Text colors */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Border colors */
    --border: #1e293b;
    --border-hover: #334155;

    /* Urgency tier colors */
    --urgency-overdue: #ef4444;
    --urgency-critical: #f97316;
    --urgency-high: #eab308;
    --urgency-medium: #3b82f6;
    --urgency-low: #6b7280;
    --urgency-none: #374151;
}

/* Skeleton pulse animation for loading states */
@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    background-color: var(--bg-secondary);
    border-radius: 0.375rem;
}

/* Card hover utility */
.card-hover {
    transition: border-color 150ms ease, transform 150ms ease;
}

.card-hover:hover {
    transform: scale(1.01);
}

/* Dark theme scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

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

/* Modal backdrop */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal enter/leave animation */
@keyframes modal-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-enter {
    animation: modal-fade-in 150ms ease-out;
}

/* Toast slide-in animation */
@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.toast-enter {
    animation: toast-slide-in 200ms ease-out;
}

/* Toast fade-out */
@keyframes toast-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.toast-exit {
    animation: toast-fade-out 200ms ease-in forwards;
}