/* =========================================================================
 * tokens.css — 设计令牌（CSS 变量）
 * 黑白灰高端编辑风，禁止 emoji，所有按钮必须用通用路径 SVG 图标
 * ========================================================================= */

:root {
  /* === 颜色（黑白灰主调，仅关键状态色克制使用） === */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f5;        /* 微暖灰，避免纯白刺眼 */
  --color-surface: #ffffff;
  --color-surface-elevated: #fafaf8;

  --color-ink: #0a0a0a;           /* 主文字 */
  --color-ink-soft: #404040;      /* 次级文字 */
  --color-ink-muted: #8a8a8a;     /* 辅助 */
  --color-ink-faint: #b8b8b8;     /* 极弱 */

  --color-line: #1a1a1a;          /* 强分隔 */
  --color-line-soft: #e5e5e5;     /* 弱分隔 */
  --color-line-medium: #cfcfcf;

  --color-accent: #0a0a0a;        /* 强调色 = 黑（按钮） */
  --color-accent-contrast: #ffffff;

  --color-danger: #b00020;
  --color-danger-soft: #fbeaec;
  --color-success: #0a7a3a;
  --color-success-soft: #e8f4ec;
  --color-warn: #8a6300;
  --color-warn-soft: #f5ecd6;
  --color-info: #1a4a8a;
  --color-info-soft: #e4ecf6;

  /* === 字体 === */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
  --font-serif: "Times New Roman", "Songti SC", "STSong", "Noto Serif SC", serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* === 字号 === */
  --fs-display: 3.5rem;
  --fs-display-sm: 2.4rem;
  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-caption: 0.6875rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

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

  /* === 间距（8 倍数） === */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === 圆角（克制） === */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* === 阴影（克制） === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px rgba(10, 10, 10, 0.12);

  /* === 层级 === */
  --z-base: 1;
  --z-nav: 10;
  --z-dropdown: 50;
  --z-modal: 100;
  --z-toast: 200;
  --z-overlay: 300;

  /* === 网格 / 容器 === */
  --grid-cols: 12;
  --grid-gap: var(--space-6);
  --content-narrow: 720px;
  --content-max: 1200px;
  --content-wide: 1440px;

  /* === 边框 === */
  --border-thin: 1px solid var(--color-line-soft);
  --border-medium: 1px solid var(--color-line-medium);
  --border-strong: 1px solid var(--color-line);

  /* === 动效 === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* === safe-area（iOS fullscreen） === */
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);
}

/* 深色模式预留（手动切换，默认浅色） */
[data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-bg-alt: #141414;
  --color-surface: #141414;
  --color-surface-elevated: #1f1f1f;
  --color-ink: #f5f5f5;
  --color-ink-soft: #b8b8b8;
  --color-ink-muted: #8a8a8a;
  --color-line: #f5f5f5;
  --color-line-soft: #2a2a2a;
  --color-line-medium: #404040;
  --color-accent: #f5f5f5;
  --color-accent-contrast: #0a0a0a;
}