@import url(/style/style.css);
@import url(/style/main.css);

:root {
    --primary-color: #409EFE;
    --text-400: #9CA3AF;
    --text-500: #6B7280;
    --text-600: #4B5563;
}

*,
html {
    scrollbar-color: var(--primary-color) transparent;
}

/* ตั้งค่าดีฟอลต์ด้วย CSS Variables */
body {
    font-family: "Bai Jamjuree", sans-serif;
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    overflow: hidden scroll;
    background-image: radial-gradient(var(--border) 1px, transparent 1px), radial-gradient(var(--border) 1px, var(--bg-color) 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

html,
select {
    cursor: url(https://sweezy-cursors.com/wp-content/uploads/cursor/old-roblox/old-roblox-cursor-32x32.png), auto !important
}

a,
button,
select,
option,
.cursor-pointer,
.hashtag-mention:hover,
.hashtag-mention.mention:hover {
    cursor: url(https://sweezy-cursors.com/wp-content/uploads/cursor/old-roblox/old-roblox-pointer-32x32.png), pointer !important;
}

.border-b,
.border-t,
.border-r,
.border-l,
.border-y,
.border-x,
.border {
    border-color: var(--border) !important;
}

/* โหมด Dark */
.theme-dark {
    --bg-color: #121212;
    --white-smoker: #222222;
    --accent-color: #1B2830;
    --text-color: #DCDCDC;
    --border: #414143;
}

/* โหมด System (media query) */
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light):not(.theme-dark) {
        --bg-color: #121212;
        --white-smoker: #222222;
        --accent-color: #1B2830;
        --text-color: #DCDCDC;
        --border: #414143;
    }
}

/* โหมด Light */
.theme-light {
    --bg-color: #FFF;
    --white-smoker: #F5F5F5;
    --accent-color: #E3F2FD;
    --text-color: #0D0D0D;
    --border: #E5E7EB;
}

@media (prefers-color-scheme: light) {
    :root:not(.theme-light):not(.theme-dark) {
        --bg-color: #FFF;
        --white-smoker: #F5F5F5;
        --accent-color: #E3F2FD;
        --text-color: #0D0D0D;
        --border: #E5E7EB;
    }
}

mark,
.hashtag-mention.mention,
.hashtag-mention {
    color: var(--primary-color);
    transition: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* ease-in-out */
    transition-duration: 300ms
}

mark {
    color: #FFFFFF;
}

.fade-in {
    animation: fadeIn 300ms ease-in-out forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

#intro-screen {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

.animate-slide-out {
    animation: slideOut 0.3s forwards;
}

#intro-screen.fade-out {
    opacity: 0;
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.bg-stripes-gray {
    background-size: 8px 8px;
    background-image: repeating-linear-gradient(135deg, var(--border) 0, var(--border) 1px, var(--bg-color) 0, var(--bg-color) 50%);
}