/* ==========================================================================
   base.css — 设计系统：变量、重置、排版、布局
   ========================================================================== */

/* --- 设计 Token --- */
:root {
    /* 主色 */
    --color-bg-deep: #0a192f;
    --color-bg-card: rgba(17, 34, 64, 0.35);
    --color-bg-alt: rgba(17, 34, 64, 0.4);
    --color-bg-footer: #112240;
    --color-border: rgba(28, 61, 110, 0.5);
    --color-border-hover: rgba(34, 211, 238, 0.6);

    /* 强调色 */
    --color-cyan: #22d3ee;
    --color-cyan-dim: rgba(34, 211, 238, 0.2);
    --color-cyan-border: rgba(34, 211, 238, 0.3);
    --color-green: #64ffda;
    --color-purple: #a78bfa;
    --color-purple-dim: rgba(167, 139, 250, 0.2);
    --color-emerald: #34d399;
    --color-emerald-dim: rgba(52, 211, 153, 0.1);

    /* 文字 */
    --color-text: #ccd6f6;
    --color-text-dim: #8892b0;
    --color-text-muted: rgba(136, 146, 176, 0.6);
    --color-white: #ffffff;

    /* 渐变 */
    --gradient-accent: linear-gradient(135deg, #22d3ee, #64ffda);
    --gradient-hero: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(100, 255, 218, 0.05));

    /* 阴影 */
    --shadow-card: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
    --shadow-card-lg: 0 12px 28px -8px rgba(2, 12, 27, 0.7);
    --shadow-nav: 0 4px 20px rgba(2, 12, 27, 0.5);

    /* 尺寸 */
    --max-width: 80rem; /* 1280px */
    --nav-height: 4rem;

    /* 圆角 */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* 过渡 */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease-in-out;
    --transition-slow: 0.6s ease-out;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    font-size: 17px;
    background-color: var(--color-bg-deep);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

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

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

/* --- 排版 --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-white);
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: 1.625rem; }
h4 { font-size: 1.1875rem; }

p { color: var(--color-text); }

.text-gradient {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- 布局 --- */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.section {
    padding: 6rem 0;
}

.section-alt {
    background-color: var(--color-bg-alt);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-cyan);
    letter-spacing: 0.05em;
}

.section-title {
    margin-top: 0.5rem;
}

.section-subtitle {
    margin-top: 1rem;
    color: var(--color-text-dim);
}

/* Grid 工具 */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

/* Flex 工具 */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* 间距 */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-16 { margin-bottom: 4rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* 文字工具 */
.text-center { text-align: center; }
.text-sm { font-size: 0.9375rem; }
.text-xs { font-size: 0.8125rem; }
.text-lg { font-size: 1.1875rem; }
.text-xl { font-size: 1.375rem; }
.text-2xl { font-size: 1.5rem; }
.text-cyan { color: var(--color-cyan); }
.text-purple { color: var(--color-purple); }
.text-dim { color: var(--color-text-dim); }
.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-white); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.leading-tight { line-height: 1.2; }
.leading-relaxed { line-height: 1.75; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-lg { max-width: 32rem; }
.w-full { width: 100%; }
.hidden { display: none; }
.block { display: block; }
.relative { position: relative; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.shrink-0 { flex-shrink: 0; }

/* --- 响应式 --- */
@media (min-width: 640px) {
    .container { padding: 0 1.5rem; }
    .section { padding: 8rem 0; }
    .sm-flex-row { flex-direction: row; }
}

@media (min-width: 768px) {
    .container { padding: 0 1.5rem; }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .md-flex { display: flex; }
    .md-hidden { display: none; }
    .md-block { display: block; }
}

@media (min-width: 1024px) {
    .container { padding: 0 2rem; }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .lg-grid-2 { grid-template-columns: repeat(2, 1fr); }
}