/* ============================================================
   全站主题颜色配置
   修改 :root 中的颜色值即可全局生效（所有页面同步更新）
   ============================================================ */
:root {
    /* ---- 主色调 ---- */
    --color-primary: #4b42ed;            /* 主色 */
    --color-primary-dark: #2d24c9;       /* 深主色 */
    --color-primary-light: #8b7df0;      /* 浅主色 */
    --color-primary-lighter: #c4bff5;    /* 更浅主色 */
    --color-primary-lightest: #e8e5fb;   /* 最浅主色 */

    /* ---- 次色 / 强调色 ---- */
    --color-secondary: #818cf8;          /* 次色 */
    --color-accent: #a5b4fc;             /* 强调色 */

    /* ---- 中性色 ---- */
    --color-dark: #1e293b;               /* 深色 (slate-800) */
    --color-light: #f8fafc;              /* 浅色 (slate-50) */

    /* ---- Footer 颜色 ---- */
    --color-footer-bg: #111827;          /* footer 背景 (gray-900) */
    --color-footer-divider: #1f2937;     /* footer 分割线 (gray-800) */
    --color-footer-text: #9ca3af;        /* footer 文字 (gray-400) */
    --color-footer-link: #d1d5db;        /* footer 链接 (gray-300) */

    /* ---- 渐变 ---- */
    --gradient-primary: linear-gradient(135deg, #4b42ed 0%, #6d5ef0 50%, #8b7df0 100%);
    --gradient-hero: linear-gradient(180deg, #f5f4ff 0%, #ebe8ff 50%, #e0dcff 100%);
    --gradient-card-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    --gradient-text: linear-gradient(to right, #4b42ed, #2d24c9);
    --gradient-soft: linear-gradient(to right, #f5f4ff, #ebe8ff);

    /* ---- 阴影 ---- */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-primary: 0 10px 15px -3px rgba(75, 66, 237, 0.3), 0 4px 6px -2px rgba(75, 66, 237, 0.1);
    --shadow-primary-sm: 0 4px 15px rgba(75, 66, 237, 0.4);
    --shadow-primary-md: 0 6px 20px rgba(75, 66, 237, 0.5);
    --shadow-primary-hover: 0 10px 15px -3px rgba(75, 66, 237, 0.2);
}

/* ============================================================
   公共样式类
   ============================================================ */

/* --- 渐变背景 --- */
.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-hero {
    background: var(--gradient-hero);
}

.gradient-card-overlay {
    background: var(--gradient-card-overlay);
}

/* --- 渐变文字 --- */
.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --- 柔和渐变背景 --- */
.gradient-soft {
    background: var(--gradient-soft);
}

/* --- 滚动条隐藏 --- */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- 阴影 --- */
.shadow-card {
    box-shadow: var(--shadow-card);
}

.shadow-primary {
    box-shadow: var(--shadow-primary);
}

/* ============================================================
   主题色工具类（替代分散的 bg-orange-500 / text-cyan-600 等）
   ============================================================ */

/* --- 背景色 --- */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-primary-lighter { background-color: var(--color-primary-lighter); }
.bg-primary-lightest { background-color: var(--color-primary-lightest); }

/* --- 文字色 --- */
.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-primary-light { color: var(--color-primary-light); }

/* --- 边框色 --- */
.border-primary { border-color: var(--color-primary); }

/* --- Hover 背景色 --- */
.hover\:bg-primary:hover { background-color: var(--color-primary); }
.hover\:bg-primary-light:hover { background-color: var(--color-primary-light); }
.hover\:bg-primary-lightest:hover { background-color: var(--color-primary-lightest); }

/* --- Hover 文字色 --- */
.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:text-primary-light:hover { color: var(--color-primary-light); }
.hover\:text-primary-dark:hover { color: var(--color-primary-dark); }

/* --- Group Hover 文字色 --- */
.group:hover .group-hover\:text-primary { color: var(--color-primary); }
.group:hover .group-hover\:text-primary-dark { color: var(--color-primary-dark); }

/* --- Focus ring 色 --- */
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary); }
.focus\:ring-primary-light:focus { --tw-ring-color: var(--color-primary-light); }

/* --- Footer 颜色 --- */
.bg-footer { background-color: var(--color-footer-bg); }
.border-footer { border-color: var(--color-footer-divider); }
.text-footer { color: var(--color-footer-text); }
.text-footer-link { color: var(--color-footer-link); }

/* --- Hover 阴影 --- */
.hover\:shadow-primary:hover { box-shadow: var(--shadow-primary); }