/* ==========================================================================
   tokens.css —— 设计令牌（Design Tokens）
   全站唯一的颜色 / 间距 / 字号 / 圆角 / 阴影 / 动效来源。
   规范：颜色与间距只允许引用本文件的变量，禁止在其它 CSS 中硬编码色值。
   ========================================================================== */

:root {
  /* ---------- 品牌色：深邃科技蓝 → 透亮天空蓝 ---------- */
  --c-brand-50:  #eef6ff;
  --c-brand-100: #dbeaff;
  --c-brand-200: #b9d8ff;
  --c-brand-300: #8abaff;
  --c-brand-400: #5d9af9;
  --c-brand-500: #3279ec;
  --c-brand-600: #205ed0;
  --c-brand-700: #1649aa;
  --c-brand-800: #103376;
  --c-brand-900: #081a42;

  /* 强调色：明亮的冰蓝色，呼应数据与 AI 场景 */
  --c-accent-100: #e1f7ff;
  --c-accent-300: #8cdeff;
  --c-accent-400: #66ccff;
  --c-accent-500: #3dbcf4;
  --c-accent-600: #168fc8;
  --c-accent-700: #096f9f;

  /* 点缀色：暖金（仅用于「授权代理」徽标，使用面积 < 5%） */
  --c-gold-400: #e0b96a;
  --c-gold-500: #d4a24c;
  --c-gold-600: #b8862f;

  /* ---------- 中性灰阶 ---------- */
  --c-ink-900: #0f172a;
  --c-ink-800: #1e293b;
  --c-ink-700: #334155;
  --c-ink-600: #4b5563;
  --c-ink-500: #6b7280;   /* 次级文字 */
  --c-ink-400: #9ca3af;
  --c-ink-300: #d1d7e0;
  --c-ink-200: #e5e9f0;
  --c-ink-100: #f0f3f8;
  --c-ink-50:  #f5f7fa;
  --c-white:   #ffffff;

  /* ---------- 语义色 ---------- */
  --c-bg:          var(--c-white);
  --c-bg-subtle:   #f4f8ff;
  --c-bg-inverse:  var(--c-brand-800);
  --c-text:        var(--c-ink-900);
  --c-text-muted:  var(--c-ink-500);
  --c-text-invert: #f4f7fb;
  --c-border:      var(--c-ink-200);
  --c-border-strong: var(--c-ink-300);
  --c-success:     #16a34a;
  --c-success-bg:  #eefbf3;
  --c-danger:      #dc2626;
  --c-danger-bg:   #fef2f2;
  --c-warning:     #d97706;
  --c-warning-bg:  #fffbeb;

  /* ---------- 间距阶（4px 基准） ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- 字号阶（fluid，clamp 自适应） ---------- */
  --fs-display: clamp(2rem, 1.15rem + 3.3vw, 3.75rem);
  --fs-h1:      clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --fs-h2:      clamp(1.4rem, 1.15rem + 1.1vw, 2.05rem);
  --fs-h3:      clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.8125rem;

  /* ---------- 行高 / 字重 ---------- */
  --lh-tight:  1.25;
  --lh-snug:   1.45;
  --lh-base:   1.7;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ---------- 圆角 ---------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---------- 阴影（克制，仅两级） ---------- */
  --sh-1: 0 3px 12px rgba(16, 51, 118, 0.07);
  --sh-2: 0 16px 38px rgba(16, 51, 118, 0.11);
  --sh-3: 0 28px 64px rgba(8, 26, 66, 0.17);

  /* ---------- 动效（仅 3 类：首屏淡入 / 滚动进入 / hover） ---------- */
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 560ms;
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);

  /* ---------- 布局 ---------- */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h: 68px;
  --gutter: 20px;
  --focus-ring: 0 0 0 3px rgba(50, 121, 236, 0.25);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

/* 深色模式预留：仅覆写语义变量，组件样式零改动。V1.0 不默认开启。 */
[data-theme="dark"] {
  --c-bg:          #0b1220;
  --c-bg-subtle:   #111b2e;
  --c-bg-inverse:  #060d18;
  --c-text:        #e8eef7;
  --c-text-muted:  #94a3b8;
  --c-text-invert: #e8eef7;
  --c-border:      #1e2b42;
  --c-border-strong: #2c3d5a;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --sh-3: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* 尊重系统「减少动态效果」偏好：全部动效降级为静态 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}