/* ==========================================================================
   FateKline — Design Tokens
   --------------------------------------------------------------------------
   设计定位：Data Mystic —— 数据可视化的冷静 × 命理文化的叙事感
   反面清单（一律禁止）：紫黑渐变、金粉星星、水晶球塔罗堆砌、霓虹紫、
                        全大写 THE UNIVERSE HAS SPOKEN、感叹号、任何"保证准"

   参照坐标：Linear 的克制 / Stripe 的信息密度 / TradingView 的图表语言
   ========================================================================== */

:root {
  /* ---------- 色彩：深墨基底 + 旧金 + 靛蓝 ---------- */
  /* 背景走近黑偏冷，不用纯黑（纯黑在 OLED 上边缘会"断"，且缺层次） */
  --bg-0: #07080c;              /* 页面底色 */
  --bg-1: #0b0e15;              /* 区块交替 */
  --bg-2: #11151e;              /* 卡片 */
  --bg-3: #171c27;              /* 卡片 hover / 内嵌 */
  --bg-glass: rgba(17, 21, 30, .72);

  /* 描边：极低对比，靠亮度差而非颜色差建立层次 */
  --line-0: rgba(255, 255, 255, .055);
  --line-1: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .14);

  /* 文字：暖米白，不用惨白 #fff（长文阅读刺眼） */
  --text-0: #f4efe6;            /* 标题 */
  --text-1: #c3bdb2;            /* 正文 */
  --text-2: #8e887d;            /* 次要 */
  --text-3: #5d584f;            /* 禁用 / 脚注 */

  /* 强调色一：旧金（命运/价值）。刻意避开 #f0b90b 这类币圈亮黄 */
  --gold-0: #c4a35a;
  --gold-1: #ddc189;
  --gold-2: #8d7440;
  --gold-glow: rgba(196, 163, 90, .16);

  /* 强调色二：靛蓝（理性/数据） */
  --indigo-0: #6b73c9;
  --indigo-1: #9aa0e0;
  --indigo-glow: rgba(107, 115, 201, .14);

  /* K 线涨跌：克制的青绿与砖红，不用金融软件的荧光绿/血红 */
  --rise: #3f9c8d;
  --rise-soft: rgba(63, 156, 141, .15);
  --fall: #bf6060;
  --fall-soft: rgba(191, 96, 96, .15);
  --neutral: #6f6a61;

  /* 语义色 */
  --info: #6b8fc9;
  --warn: #c9954f;
  --danger: #c26565;
  --focus-ring: #8fb0d8;

  /* ---------- 字体 ---------- */
  /* 标题 serif = 文化/叙事；正文 sans = 可读；数据 mono = K线与数字
     全部走系统栈兜底，自托管 woff2 后仅需替换首位族名，无需改结构 */
  --font-serif: "Source Serif 4", "Noto Serif SC", "Noto Serif JP",
                "Songti SC", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR",
               -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace,
               SFMono-Regular, Menlo, Consolas, monospace;
  --font-arabic: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  /* 字阶：1.25 比例，clamp 保证移动端不溢出 */
  --fs-display: clamp(2.5rem, 6.2vw, 4.75rem);
  --fs-h1: clamp(2rem, 4.4vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 2.8vw, 2.125rem);
  --fs-h3: clamp(1.185rem, 1.9vw, 1.4rem);
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-mono: 0.8125rem;

  --lh-tight: 1.14;
  --lh-heading: 1.24;
  --lh-body: 1.72;              /* 中文长文可读性下限 */
  --lh-loose: 1.85;

  --tracking-tight: -0.022em;   /* 大标题收紧，显精致 */
  --tracking-normal: 0;
  --tracking-wide: 0.085em;     /* kicker 小标签用 */

  /* ---------- 间距：8px 基线 ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 48px;
  --s-9: 64px;  --s-10: 80px; --s-11: 96px; --s-12: 128px;
  --s-13: 160px;

  /* 区块垂直节奏三档 */
  --section-y: clamp(72px, 9vw, 128px);
  --section-y-lg: clamp(96px, 12vw, 160px);

  /* ---------- 布局 ---------- */
  --max-w: 1200px;              /* 内容最大宽 */
  --max-w-narrow: 880px;
  --max-read: 720px;            /* 正文阅读宽，超过就伤可读性 */
  --gutter: clamp(20px, 4vw, 40px);

  /* ---------- 圆角 ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ---------- 阴影：低对比，靠边框而非重投影建层次 ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .34);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .46);
  --shadow-gold: 0 0 0 1px var(--gold-glow), 0 12px 36px rgba(196, 163, 90, .1);

  /* ---------- 动效：只服务于理解，不服务于炫技 ---------- */
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --ease-in-out: cubic-bezier(.5, 0, .3, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 340ms;
  --t-draw: 1500ms;             /* hero K 线描边 */

  /* ---------- 层级 ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-modal: 400;
  --z-toast: 500;

  /* 触控目标下限（移动端可用性硬指标） */
  --tap-min: 44px;
}

/* 阿语：字体族切换 + 标题不用 serif（阿语衬线可读性差） */
[dir="rtl"] {
  --font-sans: var(--font-arabic);
  --font-serif: var(--font-arabic);
  --lh-body: 1.9;               /* 阿语字形高，需要更大行高 */
  --tracking-tight: 0;          /* 阿语禁止负字距，会破坏连字 */
}

/* 尊重系统减弱动效偏好 —— 无障碍硬要求，不是可选项 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-draw: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}