/* ==========================================================
 * MXGF Tokens — 共享设计系统（极夜默认 / 极昼 opt-in）
 * v2.0 — 增加渐变、阴影、缓动、网格背景、动效曲线
 * 与主站 mxgf.cc 同源；不打包字体，font-display: swap 自动降级
 * ========================================================== */

:root {
    /* ============ surface — 极夜深灰 ============ */
    --ink-warm-0: #232328;
    --ink-warm-1: #1F1F23;
    --ink-warm-2: #2A2A30;
    --ink-warm-3: #313138;
    --ink-warm-4: #3A3A42;
    --ink-warm-5: #454550;

    /* ============ bone — 暖白文字 ============ */
    --bone-100: #F0EDE8;
    --bone-200: #D8D2C7;
    --bone-300: #9A9388;
    --bone-400: #6E6961;
    --bone-500: #4A4640;

    /* ============ brand ============ */
    --coral-500: #FF6B3D;
    --coral-400: #FF8A65;
    --coral-300: #FFAB91;
    --coral-200: #FFD0BC;
    --amber-500: #FFA94D;
    --amber-400: #FFC078;
    --sage-500: #9DB67A;
    --sage-400: #B8CC9A;
    --gold-500: #E0B864;
    --gold-400: #EDC880;
    --jade-500: #6FB89A;
    --jade-400: #8FCFB4;
    --crimson-500: #C0392B;
    --crimson-400: #D75A4D;
    --azure-500: #5B9BD5;
    --violet-500: #9B7EDE;

    /* ============ hairline ============ */
    --hairline: rgba(240, 237, 232, 0.06);
    --hairline-2: rgba(240, 237, 232, 0.10);
    --hairline-3: rgba(240, 237, 232, 0.18);
    --hairline-strong: rgba(240, 237, 232, 0.30);

    --nav-bg: rgba(31, 31, 35, 0.85);
    --bg-tint: rgba(240, 237, 232, 0.025);
    --bg-tint-2: rgba(240, 237, 232, 0.04);

    /* ============ gradient（品牌）============ */
    --grad-primary: linear-gradient(135deg, #FF6B3D 0%, #FFA94D 100%);
    --grad-coral: linear-gradient(135deg, #FF6B3D 0%, #FF8A65 50%, #FFAB91 100%);
    --grad-amber: linear-gradient(135deg, #FFA94D 0%, #FFCB80 100%);
    --grad-jade: linear-gradient(135deg, #6FB89A 0%, #8FCFB4 100%);
    --grad-crimson: linear-gradient(135deg, #C0392B 0%, #E55A4D 100%);
    --grad-violet: linear-gradient(135deg, #9B7EDE 0%, #B89DFF 100%);
    --grad-gold: linear-gradient(135deg, #E0B864 0%, #EDC880 100%);
    --grad-text: linear-gradient(135deg, #FF8A65 0%, #FFA94D 50%, #E0B864 100%);
    --grad-text-soft: linear-gradient(135deg, #F0EDE8 0%, #D8D2C7 100%);

    /* ============ shadow（分层）============ */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.20);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.30);
    --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.40);
    --shadow-coral: 0 6px 24px rgba(255, 107, 61, 0.25);
    --shadow-coral-strong: 0 12px 32px rgba(255, 107, 61, 0.40);
    --shadow-jade: 0 4px 16px rgba(111, 184, 154, 0.25);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-inset-strong: inset 0 2px 4px rgba(0, 0, 0, 0.30);

    /* ============ glow（光晕）============ */
    --glow-coral: 0 0 0 0 rgba(255, 107, 61, 0);
    --glow-coral-hover: 0 0 24px rgba(255, 107, 61, 0.40);
    --glow-jade: 0 0 24px rgba(111, 184, 154, 0.40);
    --glow-gold: 0 0 24px rgba(224, 184, 100, 0.40);
    --glow-soft: 0 0 32px rgba(255, 107, 61, 0.15);

    /* ============ radius ============ */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* ============ 字体 ============ */
    --font-serif: 'xiachan', 'Noto Serif SC', 'Songti SC', 'STSong', serif;
    --font-sans: 'PingFang SC', -apple-system, 'Noto Sans SC', 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
    --font-display: 'xiachan', 'Noto Serif SC', 'Songti SC', serif;

    /* ============ 动效曲线（easing）============ */
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.18, 0.89, 0.32, 1.28);

    /* ============ 动效时长 ============ */
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 360ms;
    --dur-slower: 520ms;

    /* ============ 布局 ============ */
    --max-w: 1280px;
    --max-w-narrow: 880px;
    --side-w: 232px;
    --topbar-h: 64px;
    --color-scheme: dark;

    /* ============ 背景图案（径向渐变网点）============ */
    --bg-pattern: radial-gradient(circle at 20% 0%, rgba(255, 107, 61, 0.04) 0%, transparent 40%),
                  radial-gradient(circle at 80% 100%, rgba(255, 169, 77, 0.03) 0%, transparent 50%);
}

[data-mxgf-theme="day"] {
    /* surface — 极昼暖白 */
    --ink-warm-0: #FFFFFF;
    --ink-warm-1: #FBFAF7;
    --ink-warm-2: #F2EBDE;
    --ink-warm-3: #E8DFCC;
    --ink-warm-4: #D8CBAF;
    --ink-warm-5: #C8B894;
    /* bone — 暖墨 */
    --bone-100: #1A1410;
    --bone-200: #3D2F23;
    --bone-300: #6E5A48;
    --bone-400: #9C846B;
    --bone-500: #B8A48A;
    /* brand 白底加深 */
    --coral-500: #C84A1F;
    --coral-400: #E85A2C;
    --coral-300: #F26B3D;
    --coral-200: #F89D7A;
    --amber-500: #B97A1F;
    --amber-400: #D9902F;
    --sage-500: #5A8240;
    --sage-400: #7AA058;
    --gold-500: #9C7520;
    --gold-400: #B68A2C;
    --jade-500: #2E9970;
    --jade-400: #4DB58A;
    --crimson-500: #A82B1F;
    --crimson-400: #C03D2F;
    --azure-500: #3B7AB5;
    --violet-500: #7B5EBE;
    --hairline: rgba(26, 20, 16, 0.06);
    --hairline-2: rgba(26, 20, 16, 0.10);
    --hairline-3: rgba(26, 20, 16, 0.18);
    --hairline-strong: rgba(26, 20, 16, 0.30);
    --nav-bg: rgba(250, 247, 242, 0.82);
    --bg-tint: rgba(26, 20, 16, 0.025);
    --bg-tint-2: rgba(26, 20, 16, 0.04);
    --shadow-1: 0 1px 2px rgba(40, 24, 10, 0.06);
    --shadow-2: 0 4px 12px rgba(40, 24, 10, 0.10);
    --shadow-3: 0 8px 24px rgba(40, 24, 10, 0.14);
    --shadow-4: 0 16px 48px rgba(40, 24, 10, 0.20);
    --shadow-coral: 0 6px 24px rgba(200, 74, 31, 0.20);
    --shadow-coral-strong: 0 12px 32px rgba(200, 74, 31, 0.32);
    --shadow-jade: 0 4px 16px rgba(46, 153, 112, 0.20);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --shadow-inset-strong: inset 0 2px 4px rgba(40, 24, 10, 0.08);
    --color-scheme: light;
    --bg-pattern: radial-gradient(circle at 20% 0%, rgba(200, 74, 31, 0.04) 0%, transparent 40%),
                  radial-gradient(circle at 80% 100%, rgba(185, 122, 31, 0.03) 0%, transparent 50%);
}

/* ==========================================================
 * 全局动效 keyframes
 * ========================================================== */
@keyframes mxgf-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mxgf-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes mxgf-fade-down {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes mxgf-slide-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes mxgf-scale-in {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes mxgf-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes mxgf-pulse-coral {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 61, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(255, 107, 61, 0); }
}
@keyframes mxgf-spin {
    to { transform: rotate(360deg); }
}
@keyframes mxgf-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes mxgf-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@keyframes mxgf-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes mxgf-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes mxgf-glow-breath {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 107, 61, 0.20); }
    50% { box-shadow: 0 0 32px rgba(255, 107, 61, 0.40); }
}
@keyframes mxgf-progress-stripe {
    0% { background-position: 0 0; }
    100% { background-position: 32px 0; }
}
@keyframes mxgf-equalizer {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}
@keyframes mxgf-checkmark {
    0% { stroke-dashoffset: 24; }
    100% { stroke-dashoffset: 0; }
}