.light {
    /* Primary colors */
    --accent-primary: 252, 211, 41;
    /* Surfaces (backgrounds) */
    --surface: 238, 238, 238;
    --surface-alt: 250, 250, 250;
    --surface-muted: 223, 223, 223;
    /* Header */
    --accent-text: 31, 31, 31;
    --divider: 31, 31, 31;
    /* Foreground text (keeps same variable name usage: text-dark) */
    --dark: 31, 31, 31;
    --inactive-dark: 139, 139, 139;
    /* Semantic colors */
    --success: 130, 238, 146;
    --money: 22, 199, 132;
    --failure: 238, 130, 130;
    --danger: 252, 211, 41;
    --neutral: 250, 250, 250;
    /* Chart/data colors */
    --time-span-progress: 130, 238, 146;
    --selected-item: 252, 211, 41;
    --spread-blue: 41, 98, 255;
    /* Brand colors */
    --telegram-blue: 125, 192, 255;
    --badge-text: 31, 31, 31;
    --active-row: 241, 231, 188;
    --bybit-image: var(--surface);
}

.dark {
    /* Primary colors */
    --accent-primary: 252, 211, 41;
    /* Surfaces (backgrounds) */
    --surface: 18, 18, 18;
    --surface-alt: 27, 27, 27;
    --surface-muted: 12, 12, 12;
    /* Header */
    --accent-text: 31, 31, 31;
    --divider: 10, 10, 10;
    /* Foreground text  */
    --dark: 195, 195, 195;
    --inactive-dark: 156, 163, 175;
    /* Semantic colors (tuned for dark bg) */
    --success: 75, 180, 90;
    --money: 75, 180, 90;
    --failure: 207, 63, 63;
    --danger: 226, 194, 64;
    --neutral: 200, 200, 200;
    /* Chart/data colors */
    --time-span-progress: 74, 222, 128;
    --selected-item: 252, 211, 41;
    --spread-blue: 96, 165, 250;
    /* Brand colors */
    --telegram-blue: 125, 192, 255;
    --badge-text: 31, 31, 31;
    --active-row: 27, 27, 27;
    --bybit-image: var(--accent-primary);
}

.midnight {
    /* Primary colors (blue-ish accent) */
    --accent-primary: 96, 165, 250; /* sky-blue */
    /* Surfaces (deep navy, but still neutral enough for UI) */
    --surface: 10, 14, 22; /* near #0A0E16 */
    --surface-alt: 14, 20, 32; /* slightly lighter card surface */
    --surface-muted: 7, 10, 16; /* deepest blocks */
    /* Header (accent text stays readable on blue-ish surfaces) */
    --accent-text: 10, 14, 22; /* cool off-white */
    --divider: 18, 28, 44; /* subtle navy divider */
    /* Foreground text */
    --dark: 217, 225, 236; /* main text */
    --inactive-dark: 148, 163, 184; /* slate-ish muted text */
    /* Semantic colors (cool-tuned, avoid neon on dark navy) */
    --success: 64, 200, 140; /* teal-green */
    --money: 34, 197, 94; /* green */
    --failure: 239, 68, 68; /* red */
    --danger: 96, 165, 250; /* blue accent (keeps “danger” visible without yellow screaming) */
    --neutral: 203, 213, 225; /* light slate */
    /* Chart/data colors */
    --time-span-progress: 64, 200, 140;
    --selected-item: 96, 165, 250;
    --spread-blue: 59, 130, 246; /* stronger blue for charts */
    /* Brand colors */
    --telegram-blue: 125, 192, 255;
    --badge-text: 10, 14, 22; /* for badges on light accent */
    --active-row: 32, 38, 50; /* subtle highlight row */
    --bybit-image: var(--accent-primary);
}

.darklight {
    /* Primary colors */
    --accent-primary: 252, 211, 41;
    /* Surfaces (backgrounds) - lifted grays */
    --surface: 38, 38, 38;
    --surface-alt: 48, 48, 48;
    --surface-muted: 28, 28, 28;
    /* Header */
    --accent-text: 31, 31, 31;
    --divider: 24, 24, 24;
    /* Foreground text - brighter for contrast */
    --dark: 220, 220, 220;
    --inactive-dark: 140, 140, 140;
    /* Semantic colors */
    --success: 90, 195, 105;
    --money: 90, 195, 105;
    --failure: 220, 80, 80;
    --danger: 235, 200, 70;
    --neutral: 210, 210, 210;
    /* Chart/data colors */
    --time-span-progress: 90, 210, 120;
    --selected-item: 252, 211, 41;
    --spread-blue: 110, 175, 250;
    /* Brand colors */
    --telegram-blue: 125, 192, 255;
    --badge-text: 31, 31, 31;
    --active-row: 50, 48, 38;
    --bybit-image: var(--accent-primary);
}

/* Smooth theme transition */
    body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Fade in animation for dropdowns */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.15s ease-out forwards;
}

/* Scale in animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scaleIn {
    animation: scaleIn 0.15s ease-out forwards;
}

/* Scrollbar theming */
.scrollbar-custom::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-custom::-webkit-scrollbar-track {
    background: rgb(var(--main-bg));
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background: rgb(var(--block));
    border-radius: 4px;
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--block-hover));
}

/* Selection color */
::selection {
    background-color: rgba(var(--accent-primary), 0.3);
    color: rgb(var(--main-text));
}

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

:root {
    --chart-grid: rgb(var(--border-light));
    --chart-text: rgb(var(--secondary-text));
    --chart-up: rgb(var(--success));
    --chart-down: rgb(var(--failure));
    --chart-line: rgb(var(--accent-primary));
}