@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS变量定义 */
:root {
    --font-body: 'Source Sans 3', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-display: 'Space Grotesk', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --primary-color: #2f6bff;
    --primary-hover: #1f56d8;
    --secondary-color: #475569;
    --accent-color: #6aa9ff;
    --success-color: #16a34a;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --primary-rgb: 47, 107, 255;
    --accent-rgb: 106, 169, 255;
    --success-rgb: 22, 163, 74;
    --danger-rgb: 239, 68, 68;
    --bg-color: #f3f6fc;
    --card-bg: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #f7f9ff;
    --surface-3: #eef3ff;
    --text-primary: #0f172a;
    --text-secondary: #5b6476;
    --border-color: #e2e8f4;
    --shadow-sm: 0 6px 14px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 18px 40px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 28px 70px rgba(15, 23, 42, 0.16);
    --border-radius: 0.5rem;
    --border-radius-lg: 0.75rem;
    --transition: all 0.3s ease;
    --box-shadow: var(--shadow-md);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
}

body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

body::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--primary-rgb), 0.12), transparent 55%),
        radial-gradient(circle at 82% 10%, rgba(var(--accent-rgb), 0.16), transparent 45%),
        radial-gradient(circle at 78% 85%, rgba(var(--primary-rgb), 0.1), transparent 55%);
}

body::after {
    background-image:
        linear-gradient(120deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
        radial-gradient(circle, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
    background-size: 100% 100%, 22px 22px;
    mix-blend-mode: multiply;
    opacity: 0.4;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}