/* ===================================================================
 * Bitunix 时之砂 · 设计系统 Token（Demo 用）
 *
 * 说明：本文件为 Demo 工程占位 token，基于 Presentation v1.1 风格沉淀。
 * Bitunix 真实设计系统 token 应由 UI 设计师交付后覆盖本文件。
 *
 * 使用：所有 Demo HTML 通过 <link> 引入此文件
 *   <link rel="stylesheet" href="../shared/tokens/design-tokens.css">
 * ================================================================ */

:root {
  /* ============== 背景色阶 ============== */
  --bg: #0a0906;
  --bg-2: #110e09;
  --surface: #15120c;
  --surface-2: #1d1810;
  --surface-3: #2a2216;

  /* ============== 边框 ============== */
  --border: #2d2619;
  --border-strong: #4a3f29;

  /* ============== 文字色阶 ============== */
  --text: #f3ebd8;
  --text-2: #b7a987;
  --text-3: #6e634c;
  --text-dim: #4a4132;

  /* ============== 品牌主色 ============== */
  --gold: #d4a24c;
  --gold-bright: #f5c878;
  --gold-dark: #8c6a2a;
  --amber: #b8732e;
  --amber-soft: #e8a054;

  /* ============== 状态色 ============== */
  --danger: #c0392b;       /* 100% 触顶 / 错误 */
  --warn: #d4932b;         /* 90% 软降级 */
  --ok: #7a9e5c;           /* 正常 */
  --info: #5e8eb8;         /* 信息提示 */

  /* ============== 段位色（沙漏 8 档对应） ============== */
  --tier-1: #6b655a;       /* 尘土 */
  --tier-2: #9c8e6d;       /* 细沙 */
  --tier-3: #c9a770;       /* 流沙 */
  --tier-4: #d4a24c;       /* 金沙（与品牌色一致） */
  --tier-5: #c2691f;       /* 琥珀 */
  --tier-6: #8a4fa8;       /* 紫晶 */
  --tier-7: #8fc4e8;       /* 钻晶 */
  --tier-8: #f3ebd8;       /* 永恒（金白色） */

  /* ============== 字体 ============== */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

  /* ============== 字号 ============== */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  /* ============== 间距 ============== */
  --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;

  /* ============== 圆角 ============== */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ============== 卡片 / 容器 ============== */
  --card-bg: var(--surface);
  --card-border: 1px solid var(--border);
  --card-radius: var(--radius-md);
  --card-padding: var(--sp-5);

  /* ============== 阴影 ============== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 16px rgba(212, 162, 76, 0.3); /* 永恒徽章高光用 */

  /* ============== 动效缓动 ============== */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ============== 动效时长（PRD 规定） ============== */
  --duration-sandglass-drop: 1500ms;     /* V1-E05 沙漏掉落 */
  --duration-number-roll: 700ms;          /* V1-E04 卡位数字滚动 */
  --duration-eternal-glow: 2500ms;        /* V1-E07 永恒徽章高光 */
  --duration-fade: 200ms;
  --duration-slide: 300ms;

  /* ============== 布局 ============== */
  --max-width: 1160px;
  --max-width-mobile: 375px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ============== 卡位尺寸（V1-E04 §6.4 规定） ============== */
  --trade-widget-desktop-w: 240px;
  --trade-widget-desktop-h: 80px;
  --trade-widget-mobile-h: 60px;
}

/* ============== ★ 白天主题（[data-theme="light"]） ============== */
:root[data-theme="light"] {
  /* 背景色阶（米白/暖白系，呼应"沙"的质感） */
  --bg: #fafaf6;
  --bg-2: #f4f1e8;
  --surface: #ffffff;
  --surface-2: #f6f3ea;
  --surface-3: #ebe6d6;

  /* 边框 */
  --border: #d8d2bc;
  --border-strong: #b3aa90;

  /* 文字色阶 */
  --text: #1a1610;
  --text-2: #4a4332;
  --text-3: #847660;
  --text-dim: #b3aa90;

  /* 品牌主色（白底用更深的金，提高对比度） */
  --gold: #b8732e;
  --gold-bright: #c8893c;
  --gold-dark: #6a4218;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(106, 66, 24, 0.10);
  --shadow: 0 2px 8px rgba(106, 66, 24, 0.12);
  --shadow-lg: 0 8px 24px rgba(106, 66, 24, 0.15);
  --shadow-glow: 0 0 16px rgba(212, 162, 76, 0.50);
}

/* ============== 全局 reset ============== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============== 通用工具类 ============== */
.text-gold { color: var(--gold); }
.text-eternal { color: var(--tier-8); }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }

.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}

/* ============== 永恒徽章容器（统一规格） ============== */
.eternal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.eternal-badge--sm { width: 32px; height: 32px; }
.eternal-badge--md { width: 48px; height: 48px; }
.eternal-badge--lg { width: 80px; height: 80px; }
.eternal-badge--xl { width: 200px; height: 200px; }

/* ============== 沙漏视觉容器（8 档共用） ============== */
.sandglass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sandglass--sm { width: 48px; height: 48px; }
.sandglass--md { width: 80px; height: 80px; }
.sandglass--lg { width: 120px; height: 120px; }
.sandglass--xl { width: 200px; height: 200px; }