* {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --color-zinc-50: #fafafa;
    --color-zinc-100: #f5f5f5;
    --color-zinc-200: #e5e5e5;
    --color-zinc-300: #d4d4d4;
    --color-zinc-400: #a3a3a3;
    --color-zinc-500: #737373;
    --color-zinc-600: #525252;
    --color-zinc-700: #404040;
    --color-zinc-800: #262626;
    --color-zinc-900: #171717;
    --color-zinc-950: #0a0a0a;

    --color-accent: var(--color-neutral-800);
    --color-accent-content: var(--color-neutral-800);
    --color-accent-foreground: var(--color-white);

    --main-bg-color: #F3F3EF;
    --surface-color: #fff;
    --border-color: #E6E4DE;
    --primary-text-color: #1F2328;
    --secondary-text-color: #5B616A;
    --primary-accent-color: #3E2BEA;
    --accent-hover-color: #160B78;
    --success-color: #59A96E;
    --success-emphasis: #7dcc79;
    --success-container: #274625;
    --secondary-accent-color: #2783D2;

    --sidebar-width: 58px;

    --icon-color: #5B616A;

    --checkbox-color: #2783D2;

    --dark-gray: #5B616A;

    --gray-bg: #FCFCF9;

    --icon-green-color: #59A96E;

    --icon-progress-color: #f6825a;

    --icon-waiting-color: #f98686;

    --icon-submit-color: #85b8ff;

    --filter-primary-color: invert(8%) sepia(4%) saturate(3411%) hue-rotate(174deg) brightness(90%) contrast(85%);
}

*::-webkit-scrollbar {
    background: transparent;
    width: 0px;
    height: 0px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #999;
}

html,
body {
    background-color: var(--main-bg-color);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--primary-text-color);
}

/* Class color */
.text-secondary-color {
    color: var(--secondary-text-color);
}

.text-primary-color {
    color: var(--primary-text-color);
}

.accent-color {
    color: var(--primary-accent-color);
}

/* End Class color */

/* Class Background */
.accent-bg-color {
    background-color: var(--primary-accent-color);
}

.border-bg-color {
    background-color: var(--border-color);
}

.main-border-color {
    border-color: var(--primary-text-color);
}

.surface-bg-color {
    background-color: var(--surface-color);
}

.main-bg-color {
    background-color: var(--main-bg-color);
}

.filter-primary-color {
    filter: var(--filter-primary-color);
}

.secondary-bg-color {
    background-color: var(--secondary-text-color);
}

.bg-gray {
    background-color: var(--gray-bg);
}

.bg-dark-gray {
    background-color: var(--dark-gray);
}

.icon-color {
    color: var(--icon-color);
}
.icon-submit-color {
    color: var(--icon-submit-color);
}
.icon-resolved-color {
    color: var(--icon-green-color);
}
.icon-progress-color {
    color: var(--icon-progress-color);
}
.icon-waiting-color {
    color: var(--icon-waiting-color);
}