/* 由 scripts/build_tokens.py 从 tokens.json 生成，别手改。套装：tangjiakuo-site */
/* 骨架是苹果（大留白、中性灰、克制排版），表情是任天堂（圆体标题、胶囊按钮、按下去会回弹、每个项目一个糖果色块）；主色用网站一直在用的群青，任天堂红只做小红点。 */

:root {
  color-scheme: light dark;
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-nav-glass: #FFFFFFB8;
  --color-text: #1D1D1F;
  --color-text-secondary: #6E6E73;
  --color-border: #E3E3E8;
  --color-border-strong: #86868B;
  --color-accent: #3D52D5;
  --color-accent-hover: #2C3DB0;
  --color-accent-press: #1F2C85;
  --color-accent-soft: #EBEEFC;
  --color-accent-text: #3D52D5;
  --color-on-accent: #FFFFFF;
  --color-link: #3D52D5;
  --color-focus: #3D52D5;
  --color-success: #1F7A35;
  --color-warning: #A34A00;
  --color-fun-red: #E60012;
  --color-fun-orange: #FF9F0A;
  --color-fun-yellow: #FFCC00;
  --color-fun-green: #2CC66B;
  --color-fun-teal: #30B0C7;
  --color-fun-blue: #00B2E3;
  --color-fun-purple: #8E5CF7;
  --color-on-fun: #1D1D1F;
  --color-scrim: #000000DB;
  --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;
  --space-32: 128px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --display-size: 64px;
  --display-line: 68px;
  --h1-size: 44px;
  --h1-line: 52px;
  --h2-size: 32px;
  --h2-line: 40px;
  --h3-size: 24px;
  --h3-line: 32px;
  --lead-size: 21px;
  --lead-line: 34px;
  --body-size: 17px;
  --body-line: 28px;
  --small-size: 14px;
  --small-line: 21px;
  --caption-size: 12px;
  --caption-line: 16px;
  --gutter: 40px;
  --grid-gap: 24px;
  --grid-columns: 12;
  --section-y: 128px;
  --container-max: 1120px;
  --nav-height: 56px;
  --control-height: 48px;
  --font-family-display: Nunito, "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --font-family-text: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-family-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --shadow-card: 0 1px 2px #0000000A, 0 8px 24px #00000014;
  --shadow-lift: 0 2px 4px #0000000F, 0 16px 40px #0000001F;
  --shadow-press: 0 4px 0 var(--color-accent-press);
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 420ms;
  --motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 深色：跟随系统，也可以用 <html data-theme="dark|light"> 强制 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #000000;
    --color-bg-subtle: #161617;
    --color-surface: #1D1D1F;
    --color-nav-glass: #161617B8;
    --color-text: #F5F5F7;
    --color-text-secondary: #A1A1A6;
    --color-border: #2E2E30;
    --color-border-strong: #6E6E73;
    --color-accent-hover: #4A5FE0;
    --color-accent-soft: #23284A;
    --color-accent-text: #8C9BFF;
    --color-link: #8C9BFF;
    --color-focus: #8C9BFF;
    --color-success: #30D158;
    --color-warning: #FF9F0A;
    --color-fun-purple: #9D74F9;
  }
}
:root[data-theme="dark"] {
  --color-bg: #000000;
  --color-bg-subtle: #161617;
  --color-surface: #1D1D1F;
  --color-nav-glass: #161617B8;
  --color-text: #F5F5F7;
  --color-text-secondary: #A1A1A6;
  --color-border: #2E2E30;
  --color-border-strong: #6E6E73;
  --color-accent-hover: #4A5FE0;
  --color-accent-soft: #23284A;
  --color-accent-text: #8C9BFF;
  --color-link: #8C9BFF;
  --color-focus: #8C9BFF;
  --color-success: #30D158;
  --color-warning: #FF9F0A;
  --color-fun-purple: #9D74F9;
}

/* 平板：768–1023px */
@media (max-width: 1023.98px) {
  :root {
    --display-size: 52px;
    --display-line: 56px;
    --h1-size: 38px;
    --h1-line: 46px;
    --h2-size: 28px;
    --h2-line: 36px;
    --h3-size: 22px;
    --h3-line: 30px;
    --lead-size: 19px;
    --lead-line: 31px;
    --gutter: 32px;
    --grid-gap: 20px;
    --grid-columns: 8;
    --section-y: 96px;
  }
}

/* 手机：< 768px */
@media (max-width: 767.98px) {
  :root {
    --display-size: 40px;
    --display-line: 46px;
    --h1-size: 32px;
    --h1-line: 40px;
    --h2-size: 26px;
    --h2-line: 34px;
    --h3-size: 21px;
    --h3-line: 29px;
    --lead-size: 19px;
    --lead-line: 31px;
    --gutter: 20px;
    --grid-gap: 16px;
    --grid-columns: 4;
    --section-y: 64px;
    --nav-height: 52px;
    --control-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
}

/* 文字样式（和 Figma 的 Text styles 同名） */
.t-display { font: var(--font-weight-heavy) var(--display-size)/var(--display-line) var(--font-family-display); letter-spacing: -0.02em; }
.t-h1 { font: var(--font-weight-heavy) var(--h1-size)/var(--h1-line) var(--font-family-display); letter-spacing: -0.015em; }
.t-h2 { font: var(--font-weight-bold) var(--h2-size)/var(--h2-line) var(--font-family-display); letter-spacing: -0.01em; }
.t-h3 { font: var(--font-weight-semibold) var(--h3-size)/var(--h3-line) var(--font-family-text); letter-spacing: -0.005em; }
.t-lead { font: var(--font-weight-regular) var(--lead-size)/var(--lead-line) var(--font-family-text); letter-spacing: 0; }
.t-body { font: var(--font-weight-regular) var(--body-size)/var(--body-line) var(--font-family-text); letter-spacing: 0; }
.t-button { font: var(--font-weight-bold) var(--body-size)/var(--body-size) var(--font-family-display); letter-spacing: 0.01em; }
.t-small { font: var(--font-weight-regular) var(--small-size)/var(--small-line) var(--font-family-text); letter-spacing: 0; }
.t-caption { font: var(--font-weight-medium) var(--caption-size)/var(--caption-line) var(--font-family-text); letter-spacing: 0.02em; }