/* ==============================================
 * variables.css - 全局设计变量
 * ============================================== */

:root {
    /* —— 品牌主色（紫色系） —— */
    --color-primary: #5b5bfb;          /* 主色：品牌紫 */
    --color-primary-light: #7c7cff;    /* 主色浅：hover */
    --color-primary-dark: #4848d4;     /* 主色深：按下 */
    --color-primary-deep: #453784;     /* 深紫：导航/CTA */
    --color-primary-bg: #4e3ed9;       /* banner背景紫 */
    --color-slogan: #35297f;           /* 标题深紫 */

    /* —— 辅色（橙色系） —— */

    /* —— 辅色（橙色系） —— */
    --color-accent: #f59e0b;           /* 强调橙 */
    --color-accent-light: #fbbf24;     /* 浅橙 */
    --color-accent-deep: #d97706;      /* 深橙 */
    --color-accent-bg: #f97316;        /* 行动橙 */

    /* —— 中性色 —— */
    --color-text-primary: #1e1b4b;     /* 主文字：深紫黑 */
    --color-text-regular: #4b5563;     /* 常规文字 */
    --color-text-secondary: #6b7280;   /* 次要文字 */
    --color-text-placeholder: #9ca3af; /* 占位文字 */
    --color-text-on-primary: #ffffff;  /* 紫色背景上的白字 */
    --color-text-on-accent: #ffffff;   /* 橙色背景上的白字 */

    /* —— 背景 —— */
    --color-bg-body: #ffffff;
    --color-bg-soft: #f9fafc;          /* 卡片外底色 */
    --color-bg-card: #ffffff;
    --color-bg-tag: #fef3c7;           /* 编号淡黄 */
    --color-bg-tag-dark: #fde68a;

    /* —— 边框 —— */
    --color-border: #e5e7eb;
    --color-border-soft: #f3f4f6;

    /* —— 渐变 —— */
    --gradient-banner: linear-gradient(135deg, #5b5bfb 0%, #6d3ff5 50%, #7c3aed 100%);
    --gradient-banner-alt: linear-gradient(135deg, #6d3ff5 0%, #5b5bfb 100%);
    --gradient-tag: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
    --gradient-nav: linear-gradient(90deg, #453784 0%, #5b5bfb 100%);
    --gradient-title-orange: linear-gradient(180deg, #fff7ed 0%, #fdba74 60%, #f97316 100%);
    --gradient-title-purple: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
    --gradient-divider: linear-gradient(90deg, #fcd9a8 0%, #fb923c 50%, #fcd9a8 100%);

    /* —— 阴影 —— */
    --shadow-sm: 0 1px 2px 0 rgba(15, 12, 80, 0.05);
    --shadow-md: 0 6px 16px rgba(91, 91, 251, 0.10), 0 2px 4px rgba(91, 91, 251, 0.06);
    --shadow-lg: 0 20px 40px rgba(91, 91, 251, 0.15), 0 6px 12px rgba(91, 91, 251, 0.08);
    --shadow-tag: 0 6px 18px rgba(249, 115, 22, 0.30);
    --shadow-banner: 0 30px 80px rgba(76, 29, 149, 0.30);

    /* —— 圆角 —— */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* —— 间距 —— */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* —— 字号 —— */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-3xl: 36px;
    --fs-4xl: 48px;
    --fs-5xl: 64px;

    /* —— 容器最大宽度 —— */
    --container-max: 1240px;
    --container-padding: 24px;

    /* —— 动效曲线 —— */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    --duration-fast: 180ms;
    --duration-base: 320ms;
    --duration-slow: 600ms;

    /* —— Z 轴 —— */
    --z-nav: 100;
    --z-modal: 1000;
    --z-tooltip: 1100;
}