/* ============================================================
   YANLING Homepage v2 — Design Tokens
   Apple Liquid Glass 风格
   ============================================================ */

/* ---------- 共享令牌（不随主题变化） ---------- */
:root {
    /* 字体系统 */
    --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
    --font-display-brand: 'Montserrat', 'Manrope', -apple-system, sans-serif;

    /* 间距尺度（4px 基准） */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* 圆角 — Apple 风格连续曲率 squircle */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-2xl: 44px;
    --radius-full: 999px;

    /* 缓动函数 — Apple 风格 */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-apple: cubic-bezier(0.32, 0.72, 0, 1); /* Apple 标准缓动 */

    /* 动画时长 */
    --t-fast: 200ms;
    --t-base: 320ms;
    --t-slow: 520ms;
    --t-slower: 800ms;

    /* 强调色（暖琥珀色，营造高级感） */
    --accent: #c8956d;
    --accent-soft: rgba(200, 149, 109, 0.12);
    --accent-hover: #d6a582;

    /* 字号尺度 */
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs-base: 15px;
    --fs-md: 17px;
    --fs-lg: 22px;
    --fs-xl: 30px;
    --fs-2xl: 42px;
    --fs-3xl: 60px;
    --fs-4xl: 84px;

    /* 字重 */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* 内容最大宽度 */
    --content-max: 1120px;
    --content-narrow: 720px;
}

/* ---------- 浅色主题（默认） ---------- */
:root,
html[data-theme='light'] {
    --bg-base: #f5f5f7;
    --bg-subtle: #ebebed;
    --bg-elevated: #ffffff;
    --bg-sunken: #e5e5e7;

    --border-subtle: rgba(10, 10, 10, 0.06);
    --border-default: rgba(10, 10, 10, 0.1);
    --border-strong: rgba(10, 10, 10, 0.16);

    --text-primary: #0a0a0b;
    --text-secondary: #44403c;
    --text-tertiary: #78716c;
    --text-quaternary: #a8a29e;
    --text-inverse: #fafaf9;

    --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04), 0 1px 3px rgba(10, 10, 10, 0.06);
    --shadow-md: 0 4px 16px rgba(10, 10, 10, 0.06), 0 2px 6px rgba(10, 10, 10, 0.04);
    --shadow-lg: 0 12px 40px rgba(10, 10, 10, 0.10), 0 4px 12px rgba(10, 10, 10, 0.05);
    --shadow-xl: 0 28px 64px rgba(10, 10, 10, 0.14), 0 10px 28px rgba(10, 10, 10, 0.08);

    /* ============================================
       Apple Liquid Glass 专用 token
       ============================================ */
    /* 玻璃材质 — 极高透 + 极轻微模糊（Apple 风格） */
    --glass-bg: rgba(255, 255, 255, 0.30);
    --glass-bg-strong: rgba(255, 255, 255, 0.48);
    --glass-bg-subtle: rgba(255, 255, 255, 0.18);

    /* Specular Highlight — 边缘高光（强） */
    --glass-highlight: rgba(255, 255, 255, 0.95);
    --glass-highlight-soft: rgba(255, 255, 255, 0.55);
    --glass-shadow-inner: rgba(255, 255, 255, 0.7);

    /* 边框 */
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-border-inner: rgba(255, 255, 255, 0.28);
    --glass-border-shadow: rgba(0, 0, 0, 0.06);

    /* 折射模糊 — 极轻，强调通透感 */
    --glass-blur: 6px;
    --glass-blur-strong: 12px;
    --glass-saturate: 130%;
    --glass-brightness: 115%;

    /* 投影 — 模拟玻璃物体悬浮感 */
    --glass-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.06),
        inset 0 1px 1px rgba(255, 255, 255, 0.85),
        inset 0 -1px 1px rgba(0, 0, 0, 0.03);
    --glass-shadow-hover:
        0 2px 6px rgba(0, 0, 0, 0.06),
        0 8px 28px rgba(0, 0, 0, 0.12),
        0 20px 56px rgba(0, 0, 0, 0.10),
        inset 0 1px 1px rgba(255, 255, 255, 1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.04);

    /* 玻璃边缘 specular highlight 渐变 */
    --glass-rim-light:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.35) 30%,
            transparent 50%,
            rgba(255, 255, 255, 0.25) 70%,
            rgba(255, 255, 255, 0.75) 100%);

    /* 背景装饰渐变 */
    --bg-aurora: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(200, 149, 109, 0.14), transparent 60%),
                 radial-gradient(ellipse 70% 50% at 80% 10%, rgba(120, 113, 108, 0.10), transparent 60%),
                 radial-gradient(ellipse 60% 40% at 50% 100%, rgba(200, 149, 109, 0.08), transparent 70%);

    /* 噪点纹理叠加 */
    --noise-opacity: 0.025;

    --fill: #0a0a0b;
    --fill-inverse: #fafaf9;
}

/* ---------- 深色主题（默认主题） ---------- */
html[data-theme='dark'] {
    --bg-base: #000000;
    --bg-subtle: #0c0c0e;
    --bg-elevated: #1c1c1e;
    --bg-sunken: #08080a;

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.18);

    --text-primary: #f5f5f7;
    --text-secondary: #d6d3d1;
    --text-tertiary: #a8a29e;
    --text-quaternary: #78716c;
    --text-inverse: #0a0a0b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.7), 0 10px 28px rgba(0, 0, 0, 0.5);

    /* ============================================
       Apple Liquid Glass 专用 token (Dark)
       ============================================ */
    --glass-bg: rgba(80, 80, 95, 0.22);
    --glass-bg-strong: rgba(100, 100, 115, 0.38);
    --glass-bg-subtle: rgba(60, 60, 75, 0.14);

    --glass-highlight: rgba(255, 255, 255, 0.24);
    --glass-highlight-soft: rgba(255, 255, 255, 0.12);
    --glass-shadow-inner: rgba(255, 255, 255, 0.16);

    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-border-inner: rgba(255, 255, 255, 0.10);
    --glass-border-shadow: rgba(0, 0, 0, 0.4);

    --glass-blur: 8px;
    --glass-blur-strong: 14px;
    --glass-saturate: 140%;
    --glass-brightness: 118%;

    --glass-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 12px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.14),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    --glass-shadow-hover:
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 8px 28px rgba(0, 0, 0, 0.45),
        0 20px 56px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.20),
        inset 0 -1px 1px rgba(0, 0, 0, 0.25);

    --glass-rim-light:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.08) 30%,
            transparent 50%,
            rgba(255, 255, 255, 0.05) 70%,
            rgba(255, 255, 255, 0.18) 100%);

    --bg-aurora: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(200, 149, 109, 0.18), transparent 60%),
                 radial-gradient(ellipse 70% 50% at 80% 10%, rgba(80, 80, 90, 0.16), transparent 60%),
                 radial-gradient(ellipse 60% 40% at 50% 100%, rgba(200, 149, 109, 0.10), transparent 70%);

    --noise-opacity: 0.05;

    --accent: #d6a582;
    --accent-soft: rgba(214, 165, 130, 0.14);
    --accent-hover: #e4b896;

    --fill: #fafaf9;
    --fill-inverse: #0a0a0b;
}

/* ---------- 全局重置 ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* 滚动收缩动画时禁用 smooth，由 JS 控制 */
    scroll-behavior: auto;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-base);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color var(--t-base) var(--ease-out),
                color var(--t-base) var(--ease-out);
}

::selection {
    background: var(--accent-soft);
    color: var(--text-primary);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

img {
    max-width: 100%;
    display: block;
}

/* 滚动条 — Apple 风格极细 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-quaternary);
}

/* ============================================
   全局按钮弹动动画（果冻质感）
   所有 .jelly 元素点击时会弹一下
   ============================================ */
@keyframes jellyBounce {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.92) translateY(2px); }
    55%  { transform: scale(1.04) translateY(-2px); }
    80%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

@keyframes jellyBounceSmall {
    0%   { transform: scale(1); }
    35%  { transform: scale(0.88); }
    70%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.jelly-pop {
    animation: jellyBounce 460ms var(--ease-spring);
}
.jelly-pop-small {
    animation: jellyBounceSmall 360ms var(--ease-spring);
}