/* ==========================================================================
ClawSearch 设计令牌（Design Tokens）
--------------------------------------------------------------------------
零依赖、零构建，直接 引入即可。所有组件只消费本文件的变量，
换肤 / 换品牌色只改这一处。
用法：
主题切换：
不设 data-theme → 跟随系统偏好
→ 强制暗色
→ 强制浅色
命名约定：
--color-* 颜色（语义化，不写具体色值名，如用 --color-brand 而非 --color-blue）
--fs-* 字号 --sp-* 间距 --r-* 圆角
--sh-* 阴影 --t-* 时长 --z-* 层级
========================================================================== */
/* ===== 1. 品牌与语义色板（原始值，一般不在组件里直接用） ===== */
:root {
--palette-blue-50: #eff6ff;
--palette-blue-100: #dbeafe;
--palette-blue-400: #60a5fa;
--palette-blue-600: #2563eb;
--palette-blue-700: #1d4ed8;
--palette-blue-800: #1e40af;
--palette-blue-950: #172554;
--palette-slate-50: #f8fafc;
--palette-slate-100: #f1f5f9;
--palette-slate-200: #e2e8f0;
--palette-slate-300: #cbd5e1;
--palette-slate-400: #94a3b8;
--palette-slate-500: #64748b;
--palette-slate-800: #1e293b;
--palette-slate-900: #0f172a;
--palette-green-600: #15803d;
--palette-green-50: #f0fdf4;
--palette-amber-600: #b45309;
--palette-amber-50: #fffbeb;
--palette-red-600: #b91c1c;
--palette-red-50: #fef2f2;
--palette-cyan-600: #0369a1;
--palette-cyan-50: #f0f9ff;
}
/* ===== 2. 语义令牌 · 浅色（默认） ===== */
:root {
/* 品牌 */
--color-brand: #0e7490;
--color-brand-hover: #0c5f76;
--color-brand-soft: #ecfeff;
--color-on-brand: #ffffff; /* 品牌色底上的文字 */
/* 背景与表面 */
--color-bg: #ffffff;
--color-bg-alt: var(--palette-slate-50);
--color-surface: #ffffff;
--color-surface-2: var(--palette-slate-100);
/* 边框 */
--color-border: var(--palette-slate-200);
--color-border-strong:var(--palette-slate-300);
/* 文字 */
--color-text: var(--palette-slate-900);
--color-text-muted: var(--palette-slate-500);
--color-text-faint: var(--palette-slate-400);
/* 语义色 */
--color-success: var(--palette-green-600);
--color-success-soft: var(--palette-green-50);
--color-warning: var(--palette-amber-600);
--color-warning-soft: var(--palette-amber-50);
--color-danger: var(--palette-red-600);
--color-danger-soft: var(--palette-red-50);
--color-info: var(--palette-cyan-600);
--color-info-soft: var(--palette-cyan-50);
/* 焦点环（键盘可访问性必需，勿删） */
--shadow-ring: 0 0 0 3px rgba(14, 116, 144, 0.35);
}
/* ===== 3. 语义令牌 · 暗色 =====
① 跟随系统偏好（未显式指定 data-theme 时）
② 显式
两处变量务必保持一致；暗色下品牌色需提亮，否则对比度不达标。 */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--color-brand: #22d3ee;
--color-brand-hover: #67e8f9;
--color-brand-soft: #07323d;
--color-on-brand: #042f2e;
--color-bg: #0b1220;
--color-bg-alt: #111a2b;
--color-surface: #131c2e;
--color-surface-2: #1a2540;
--color-border: #22304a;
--color-border-strong:#33415c;
--color-text: #e6edf7;
--color-text-muted: #94a3b8;
--color-text-faint: #64748b;
--color-success: #4ade80;
--color-success-soft: #0f2a1a;
--color-warning: #fbbf24;
--color-warning-soft: #2a1f08;
--color-danger: #f87171;
--color-danger-soft: #2c1214;
--color-info: #7dd3fc;
--color-info-soft: #0c2536;
/* 暗色下投影几乎不可见，需加深并配合 --color-border 描边来表达层级 */
--sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--sh-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
--sh-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--sh-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
--sh-xl: 0 24px 56px rgba(0, 0, 0, 0.6);
--shadow-ring: 0 0 0 3px rgba(34, 211, 238, 0.4);
}
}
:root[data-theme='dark'] {
--color-brand: var(--palette-blue-400);
--color-brand-hover: #93c5fd;
--color-brand-soft: #14243d;
--color-on-brand: #08111f;
--color-bg: #0b1220;
--color-bg-alt: #111a2b;
--color-surface: #131c2e;
--color-surface-2: #1a2540;
--color-border: #22304a;
--color-border-strong:#33415c;
--color-text: #e6edf7;
--color-text-muted: #94a3b8;
--color-text-faint: #64748b;
--color-success: #4ade80;
--color-success-soft: #0f2a1a;
--color-warning: #fbbf24;
--color-warning-soft: #2a1f08;
--color-danger: #f87171;
--color-danger-soft: #2c1214;
--color-info: #7dd3fc;
--color-info-soft: #0c2536;
--sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--sh-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
--sh-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--sh-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
--sh-xl: 0 24px 56px rgba(0, 0, 0, 0.6);
--shadow-ring: 0 0 0 3px rgba(96, 165, 250, 0.4);
}
/* ===== 4. 字体 ===== */
:root {
/* 中文优先的系统字体栈：无需下载，首屏零阻塞 */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
"Source Han Sans SC", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* 行高 */
--lh-tight: 1.25; /* 标题 */
--lh-snug: 1.4; /* 小标题 */
--lh-normal: 1.75; /* 正文（中文需要更松） */
/* 字间距：中文标题略收紧更好看 */
--ls-tight: -0.02em;
--ls-normal: 0;
}
/* ===== 5. 字号阶梯（流式，随视口平滑缩放） ===== */
:root {
--fs-xs: 0.75rem; /* 12 辅助说明、角标 */
--fs-sm: 0.875rem; /* 14 次要文字、表头 */
--fs-base: 1rem; /* 16 正文基准 */
--fs-md: 1.125rem; /* 18 导语 */
--fs-lg: 1.25rem; /* 20 小标题 */
--fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 24 区块标题 */
--fs-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); /* 32 次级大标题 */
--fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); /* 40 主标题 */
--fs-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); /* 52 Hero 标题 */
}
/* ===== 6. 间距（4px 基准，遵循 8 点网格） ===== */
:root {
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
/* 区块垂直节奏 */
--section-py: clamp(48px, 6vw, 96px);
}
/* ===== 7. 圆角 ===== */
:root {
--r-sm: 6px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-2xl: 24px;
--r-full: 9999px;
}
/* ===== 8. 阴影（低透明度多层，避免"脏"） ===== */
:root {
--sh-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--sh-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--sh-md: 0 4px 12px rgba(15, 23, 42, 0.08);
--sh-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
--sh-xl: 0 24px 56px rgba(15, 23, 42, 0.16);
}
/* ===== 9. 动效 ===== */
:root {
--t-fast: 150ms;
--t-base: 250ms;
--t-slow: 400ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ===== 10. 布局：容器与栅格 ===== */
:root {
--container: 1160px; /* 正文容器 */
--container-sm: 720px; /* 文章 / 表单 */
--gutter: 24px; /* 左右安全边距 */
--gap: 24px; /* 栅格间隙 */
}
/* ===== 11. 层级 ===== */
:root {
--z-base: 0;
--z-sticky: 100;
--z-nav: 200;
--z-overlay:300;
--z-modal: 400;
--z-toast: 500;
}