:root {
    --s-50: 248 250 252;
    --s-100: 241 245 249;
    --s-200: 226 232 240;
    --s-300: 203 213 225;
    --s-400: 148 163 184;
    --s-500: 100 116 139;
    --s-600: 71 85 105;
    --s-700: 51 65 85;
    --s-800: 30 41 59;
    --s-900: 15 23 42;
    --s-950: 2 6 23;

    --primary: 99 102 241;
    --primary-light: 129 140 248;
    --accent: 16 185 129;
    --danger: 239 68 68;
    --warning: 245 158 11;
    --info: 6 182 212;

    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] {
    --s-50: 15 23 42;
    --s-100: 30 41 59;
    --s-200: 51 65 85;
    --s-300: 71 85 105;
    --s-400: 100 116 139;
    --s-500: 148 163 184;
    --s-600: 203 213 225;
    --s-700: 226 232 240;
    --s-800: 241 245 249;
    --s-900: 248 250 252;
    --s-950: 255 255 255;

    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

* { scrollbar-width: thin; scrollbar-color: rgb(var(--s-600)) transparent; }

body {
    background: rgb(var(--s-950));
    color: rgb(var(--s-200));
}

.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Kanban */
.kanban-column {
    min-height: 200px;
}

.kanban-card {
    cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s;
}

.kanban-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kanban-card.sortable-ghost {
    opacity: 0.4;
}

.kanban-card.sortable-drag {
    transform: rotate(2deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Sidebar */
.sidebar-link {
    transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover {
    background: rgba(var(--primary), 0.1);
}

.sidebar-link.active {
    background: rgba(var(--primary), 0.15);
    color: rgb(var(--primary-light));
    border-right: 3px solid rgb(var(--primary));
}

/* Table */
.data-table tr {
    transition: background 0.1s;
}

.data-table tr:hover {
    background: rgba(var(--primary), 0.05);
}

/* Priority dots */
.priority-high { color: rgb(var(--danger)); }
.priority-normal { color: rgb(var(--s-400)); }
.priority-low { color: rgb(var(--s-600)); }