/* 设计v35 §6.2 设计令牌 —— 唯一的颜色/间距/字阶/圆角/动效来源。禁止在组件里写裸色值。 */
@layer tokens {
  :root {
    /* 舞台（深色）默认 */
    --bg: #070B12;
    --surface: #0D1420;
    --raised: #121B2A;
    --cyan: #00D4FF;
    --cyan-ink: #00D4FF;        /* 纸面上切换为深青 */
    --amber: #FFB454;
    --ok: #3DDC84;
    --danger: #FF6B6B;
    --text: #E8EEF6;
    --muted: #9FB0C4;
    --line: rgb(232 238 246 / .08);
    --line-strong: rgb(232 238 246 / .16);
    --glow: 0 0 0 1px rgb(0 212 255 / .35), 0 0 24px rgb(0 212 255 / .15);
    --hilite: inset 0 1px 0 rgb(255 255 255 / .06);
    --shadow-float: 0 20px 50px rgb(0 0 0 / .45);
    --btn-ink: #070B12;

    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
    --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 192px;
    --space-section: clamp(4rem, 3rem + 5vw, 9rem);
    --container: 1200px;
    --gutter: clamp(16px, 2vw + 8px, 40px);

    --r-xs: 2px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

    --t-xs: .75rem; --t-sm: .875rem;
    --t-base: clamp(1rem, .95rem + .3vw, 1.125rem);
    --t-lg: 1.25rem;
    --t-xl: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    --t-2xl: clamp(2rem, 1rem + 3.5vw, 3.5rem);
    --t-hero: clamp(2.1rem, 1rem + 5vw, 5.5rem);
    --lh-tight: 1.2; --lh-snug: 1.3; --lh-body: 1.6;

    --font-cjk: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
    --font-display: "Space Grotesk", "SG-fallback", var(--font-cjk);
    --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;

    --dur-fast: 150ms; --dur: 300ms; --dur-slow: 600ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan);
    --z-nav: 100; --z-float: 200; --z-modal: 300;
  }

  /* 纸面（浅色）：文档/下载/FAQ/新闻/搜索/后台 */
  [data-surface="paper"] {
    --bg: #F6F8FB;
    --surface: #FFFFFF;
    --raised: #FFFFFF;
    --cyan-ink: #0086A8;
    --text: #0B111A;
    --muted: #4F6176;
    --line: rgb(11 17 26 / .08);
    --line-strong: rgb(11 17 26 / .16);
    --hilite: none;
    --glow: 0 0 0 1px rgb(0 134 168 / .35), 0 0 24px rgb(0 134 168 / .12);
    --shadow-float: 0 16px 40px rgb(11 17 26 / .12);
    --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan-ink);
  }

  @font-face {
    font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F;
  }
  @font-face {
    font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F;
  }
  @font-face {
    font-family: "SG-fallback"; src: local("Arial"), local("Helvetica");
    size-adjust: 103%; ascent-override: 92%; descent-override: 24%;
  }
}