/* 主题配置 */
:root {
    /* 主色调：绛紫 */
    --primary: 342, 51%, 37%;
    --primary-content: 0, 0%, 100%;
    --primary-focus: 342, 51%, 32%;

    /* 次要色：赭石 */
    --secondary: 23, 47%, 31%;
    --secondary-content: 0, 0%, 100%;
    --secondary-focus: 23, 47%, 26%;

    /* 强调色：青瓷 */
    --accent: 185, 39%, 45%;
    --accent-content: 0, 0%, 100%;
    --accent-focus: 185, 39%, 40%;

    /* 中性色：古铜 */
    --neutral: 27, 22%, 51%;
    --neutral-content: 0, 0%, 100%;
    --neutral-focus: 27, 22%, 46%;

    /* 基础色：米色 */
    --base-100: 39, 45%, 95%;
    --base-200: 39, 41%, 90%;
    --base-300: 39, 37%, 85%;
    --base-content: 27, 22%, 24%;

    /* 信息类颜色 */
    --info: 185, 39%, 45%;
    --success: 142, 30%, 42%;
    --warning: 34, 54%, 47%;
    --error: 342, 51%, 37%;

    /* 按钮样式 */
    --btn-text-case: none;
    --btn-focus-scale: 0.95;
    --btn-color: var(--primary);
    --btn-border-color: hsl(342, 51%, 37%);
    --btn-hover-border-color: hsl(342, 51%, 42%);
    --btn-focus-border-color: hsl(342, 51%, 32%);

    /* 圆角 */
    --rounded-box: 0.5rem;
    --rounded-btn: 0.25rem;
    --rounded-badge: 0.125rem;

    /* 边框宽度 */
    --border-btn: 1px;
    --tab-border: 1px;
    --tab-radius: 0.25rem;
}

/* scrollbar */
*::-webkit-scrollbar {
    display: none;
}

/* Track */
*::-webkit-scrollbar-track {
    display: none;
}

/*Handle*/
*::-webkit-scrollbar-thumb {
    display: none;
}

/* 字体定义 */
@font-face {
    font-family: 'Alibaba-PuHuiTi';
    src: url('../assets/fonts/Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'XinYiJiXiangSong';
    src: url('../assets/fonts/Fontquan-XinYiJiXiangSong-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'QiuHongKai';
    src: url('../assets/fonts/Yanshi-QiuHongKai.ttf') format('truetype');
}

@font-face {
    font-family: 'XiaoWei';
    src: url('../assets/fonts/Zcool-XiaoWei.otf') format('opentype');
}

/* 基础样式 */
body {
    font-family: 'XinYiJiXiangSong', 'Alibaba-PuHuiTi', serif;
    background: #ffffff94;
    background-image: url('../assets/images/bg-pattern.jpg');
    background-repeat: repeat;
    background-size: 512px;
}

/* 字体应用规范 */
.shading-font {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.heading-font {
    font-family: 'XiaoWei', 'Alibaba-PuHuiTi', sans-serif;
    font-weight: bolder;
}

.text-font {
    font-family: 'XinYiJiXiangSong', 'Alibaba-PuHuiTi', serif;
    font-weight: normal;
}

.classic-font {
    font-family: 'QiuHongKai', 'Alibaba-PuHuiTi', serif;
    font-weight: normal;
}

/* 特定场景字体应用 */
.nav-text {
    font-family: 'XiaoWei', 'Alibaba-PuHuiTi', sans-serif;
}

.interpretation,
.poem,
.divination {
    font-family: 'QiuHongKai', 'Alibaba-PuHuiTi', serif;
}

/* 中国风UI样式 */
.btn {
    color: white;
    border: 1px solid transparent;
}

.btn:focus-visible {
    outline: 2px solid hsl(342, 51%, 37%);
    outline-offset: 2px;
}

.btn-primary {
    color: white !important;
    background-image: linear-gradient(to bottom right, hsl(342, 51%, 37%), hsl(342, 51%, 32%));
    border-color: hsl(342, 51%, 30%) !important;
}

.btn-primary:hover {
    color: white;
    background-image: linear-gradient(to bottom right, hsl(342, 51%, 42%), hsl(342, 51%, 37%));
    border-color: hsl(342, 51%, 35%);
}

.btn-primary:focus {
    color: white;
    background-image: linear-gradient(to bottom right, hsl(342, 51%, 37%), hsl(342, 51%, 32%));
    border-color: hsl(342, 51%, 30%);
    box-shadow: 0 0 0 1px hsl(342, 51%, 30%);
}

.btn-ghost {
    color: #374151;
    background-color: transparent;
    border-color: transparent;
}

.btn-ghost:hover {
    background-color: hsl(39, 45%, 90%);
    color: #111827;
    border-color: hsl(39, 41%, 85%);
}

.btn-ghost:focus {
    background-color: hsl(39, 45%, 90%);
    border-color: hsl(39, 41%, 85%);
}

.card {
    border: 1px solid hsl(39, 41%, 85%);
    background-image: linear-gradient(to bottom right, hsl(39, 45%, 97%), hsl(39, 45%, 93%));
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.navbar {
    background-image: linear-gradient(to bottom, hsl(39, 45%, 97%), hsl(39, 45%, 95%));
    border-bottom: 1px solid hsl(39, 41%, 85%);
}

/* 表单样式 */
.form-label {
    font-weight: 700;
    color: #374151;
    font-family: 'XiaoWei', 'Alibaba-PuHuiTi', sans-serif;
}

.input-bordered,
.select-bordered,
.textarea-bordered {
    border-color: #D1D5DB;
    font-family: 'XinYiJiXiangSong', 'Alibaba-PuHuiTi', serif;
    border-color: hsl(39, 41%, 80%);
    background-color: hsl(39, 45%, 98%);
}

.input-bordered:focus,
.select-bordered:focus,
.textarea-bordered:focus {
    border-color: hsl(342, 51%, 37%);
    box-shadow: 0 0 0 1px hsla(342, 51%, 37%, 0.2);
}

/* 标签页样式 */
.tab-lifted {
    border-color: hsl(39, 41%, 85%);
}

.tab-lifted.tab-active {
    background-color: hsl(39, 45%, 97%);
    border-color: hsl(39, 41%, 85%);
    border-bottom-color: transparent;
}

/* 卦象样式 */
.hexagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hexagram-line {
    width: 4rem;
    height: 0.5rem;
}

.hexagram-line.yang {
    background-color: hsl(27, 22%, 24%);
}

.hexagram-line.yin {
    display: flex;
    justify-content: space-between;
}

.hexagram-line.yin::before,
.hexagram-line.yin::after {
    content: "";
    width: 1.75rem;
    height: 0.5rem;
    background-color: hsl(27, 22%, 24%);
}

.hexagram-line.yang.changing {
    background-color: hsl(342, 51%, 37%);
}

.hexagram-line.yin.changing::before,
.hexagram-line.yin.changing::after {
    background-color: hsl(342, 51%, 37%);
}

/* 页脚样式 */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100px;
    border-top: 2px solid hsl(39, 41%, 85%);
}

.footer-motto {
    font-family: 'QiuHongKai', 'Alibaba-PuHuiTi', serif;
}

/* 分隔文字样式 */
.result-divider-text {
    writing-mode: horizontal-tb;
    font-family: 'XiaoWei', 'Alibaba-PuHuiTi', sans-serif;
}

@media only screen and (min-width: 1024px) {
    .result-divider-text {
        writing-mode: vertical-rl;
        text-orientation: upright;
    }
}

/* 动画效果 */
.btn,
.input,
.select,
.textarea {
    transition: all 0.3s ease;
}

/* 警告和错误信息样式 */
.text-error {
    color: hsl(342, 51%, 37%);
}

.text-warning {
    color: hsl(34, 54%, 47%);
}

.text-info {
    color: hsl(185, 39%, 45%);
}

/* New Tab Styles */
.tabs-lifted .tab-active {
    background-color: hsl(39, 45%, 97%);
    border-color: hsl(39, 41%, 85%);
    border-bottom-color: transparent;
}

.join .btn-active {
    background-color: hsl(342, 51%, 37%);
    color: white;
    border-color: hsl(342, 51%, 37%);
}

.join .btn-outline {
    background-color: transparent;
    color: hsl(342, 51%, 37%);
    border-color: hsl(342, 51%, 37%);
}

.join .btn-outline:hover {
    background-color: hsl(342, 51%, 37%);
    color: white;
    border-color: hsl(342, 51%, 37%);
}