/* tokens.css — THE FOX Design Tokens v1.0
 * 真相来源：所有颜色/字体/阴影/圆角都在这里定义。
 * 参考 spec: docs/plans/2026-04-21-thefox-brand-system-design.md
 */

:root {
  /* ===== Brand Colors ===== */
  --color-maroon: #5C1A1B;
  --color-maroon-deep: #3D1112;
  --color-maroon-light: #7A2324;

  /* ===== Backgrounds ===== */
  --color-cream: #FFFFFF;         /* body background — pure white (legacy token name kept) */
  --color-white: #FFFFFF;
  --color-surface: #FFFFFF;       /* card background, same as body */
  --color-hairline: rgba(26, 26, 26, 0.08);  /* card borders so they stand on pure white */

  /* ===== Text ===== */
  --color-ink: #1A1A1A;
  --color-ink-70: rgba(26, 26, 26, 0.7);
  --color-ink-50: rgba(26, 26, 26, 0.5);
  --color-on-maroon: #FFFFFF;    /* text on maroon — pure white */

  /* ===== Typography ===== */
  /* CJK fallbacks so Chinese renders in proper serif/sans faces when language switches */
  --font-display: "Playfair Display", "Noto Serif SC", "Songti SC", "Source Han Serif SC", Georgia, serif;
  --font-body: "Inter", "Noto Sans SC", "PingFang SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "DM Sans", "Noto Sans SC", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --fs-hero: clamp(2.5rem, 5vw + 1rem, 5.5rem);
  --fs-section: clamp(1.75rem, 2.5vw + 1rem, 3rem);
  --fs-subsection: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);
  --fs-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --fs-small: 0.875rem;

  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ===== Shadows ===== */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 8px 24px rgba(92, 26, 27, 0.08);
  --shadow-strong: 0 12px 32px rgba(92, 26, 27, 0.12);
  --shadow-elevated: 0 20px 48px rgba(92, 26, 27, 0.16);

  /* ===== Radius ===== */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* ===== Spacing（4px 基础栅格） ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ===== Layout ===== */
  --container-max: 1200px;
  --container-padding: clamp(1rem, 4vw, 3rem);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-normal: 240ms;
  --dur-slow: 400ms;
}