:root {
    /* color */
    --primary-color: #4e73df;
    --danger-color: #f7094c;
    --danger-bg-color: #ffe8e8;
    --background-color: #f5f5f7;
    --title-color: #1d1d1f;
    --text-color: #1d1d1f;
    --light-text-color: #6e6e73;
    --line-color: rgba(0, 0, 0, 0.06);
    --front-bg-color: #FFF;
    --front-dark-bg-color: rgba(255, 255, 255, 0.72);
    --front-dark-bg-hover-color: rgba(255, 255, 255, 0.9);
    --header-color: #1d1d1f;
    --video-tag-bg: var(--primary-color);
    --pre-bg-color: #f3f3f3;
    --pre-head-bg: #ebebeb;
    --nav-glass-bg: rgba(255, 255, 255, 0.78);
    --nav-glass-border: rgba(255, 255, 255, 0.35);
    --nav-blur-strength: 24px;
    --body-gradient: linear-gradient(180deg, #f6f6f8 0%, #ffffff 40%, #f5f5f7 100%);
    --card-bg: rgba(255, 255, 255, 0.86);
    --card-border: rgba(23, 23, 24, 0.06);
    --card-shadow: 0 30px 65px -45px rgba(15, 23, 42, 0.32);
    --card-shadow-hover: 0 48px 90px -50px rgba(15, 23, 42, 0.45);

    /* shadow */
    --primary-shadow: 0 45px 90px -60px rgba(15, 23, 42, 0.42);
    --light-shadow: 0 26px 65px -50px rgba(15, 23, 42, 0.25), 0 15px 35px -40px rgba(15, 23, 42, 0.12);

    /* size */
    --border-radius: 8px;
    --gap: 24px;

    /* other */
    --img-bg-blur-filter: blur(10px);
    --img-filter: none;
    --swiper-filter: none;
}