:root {
    /* color */
    --primary-color: #1077f3;
    --primary-color-60: #8cbef8;

    --background-color: #fafafa;
    --background-color-alt: #fff;
    --background-color-hover: #f1f5f9;
    --background-linear: linear-gradient(45deg, rgba(16, 119, 243, 0.1), rgba(255, 102, 0, 0.05), rgba(0, 204, 102, 0.05));

    --text-color: #1e293b;
    --text-color-secondary: #475569;
    --text-color-muted: #94a3b8;

    --line-color: #f1f5f9;
    --border-color: rgba(0, 0, 0, 0.05);

    /* shadow */
    --light-shadow: 0px 4px 20px -5px rgba(0, 0, 0, 0.08);
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);

    --gap: 20px;
}

.dark {
    --primary-color: #3b82f6;
    --primary-color-60: #1e3a8a;

    --background-color: #0b1120;
    --background-color-alt: #161e31;
    --background-color-hover: #1e293b;
    --background-linear: linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(30, 41, 59, 0.2));

    --text-color: #f8fafc;
    --text-color-secondary: #cbd5e1;
    --text-color-muted: #64748b;

    --line-color: #1e293b;
    --border-color: rgba(255, 255, 255, 0.08);
    
    --light-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
    --card-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.5);

    /* bootstrap hack*/
    --bs-body-bg: #0b1120;
    --bs-border-color: rgba(255, 255, 255, 0.1);
    --bs-body-color: #f8fafc;
    --bs-secondary-color: #64748b;
}

.dark img {
    filter: brightness(0.85) contrast(1.1);
    transition: filter 0.3s ease;
}

.dark img:hover {
    filter: brightness(1) contrast(1);
}

.dark .empty img {
    filter: invert(0.9) hue-rotate(180deg);
}