/* =============================================================
 * ui-starter · tokens.css
 * Design Tokens（CSS 变量）— GitHub Dark 风格金融/数据 dashboard
 *
 * 用法：
 *   <link rel="stylesheet" href="tokens.css">
 *   <link rel="stylesheet" href="components.css">
 *
 * 改配色只需改本文件；components.css 全部通过 var() 引用。
 * ============================================================= */

:root {
    /* ----- 基础背景 & 边框（GitHub Dark 基色） ----- */
    --bg: #0d1117;        /* 页面背景 */
    --surface: #161b22;   /* 卡片/输入/表头背景 */
    --border: #30363d;    /* 边框/分割线 */

    /* ----- 文本 ----- */
    --text: #e6edf3;      /* 主文本 */
    --text2: #8b949e;     /* 辅助/灰字 */

    /* ----- 语义色 ----- */
    --accent: #58a6ff;    /* 主操作/链接/symbol */
    --green: #3fb950;     /* 通过 / 涨 / 格雷厄姆 */
    --red: #f85149;       /* 失败 / 跌 / 风险 */
    --yellow: #d29922;    /* 高分 / 警示 / 关注 */
    --purple: #bc8cff;    /* 次要维度 / 费雪 / 时光机 */
    --orange: #db6d28;    /* 偏贵/中性告警 */

    /* ----- 半透明底 (用于标签/徽章背景) ----- */
    --green-bg: rgba(63, 185, 80, 0.10);
    --red-bg: rgba(248, 81, 73, 0.10);
    --yellow-bg: rgba(210, 153, 34, 0.10);
    --purple-bg: rgba(188, 140, 255, 0.10);
    --accent-bg: rgba(88, 166, 255, 0.06);

    /* ----- 字体 ----- */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ----- 字号节奏 ----- */
    --fs-h1: 22px;
    --fs-h2: 18px;
    --fs-h3: 15px;
    --fs-body: 14px;
    --fs-sub: 13px;
    --fs-label: 12px;
    --fs-tiny: 11px;

    /* ----- 圆角 ----- */
    --radius-sm: 3px;    /* 小徽章 */
    --radius-md: 6px;    /* 按钮/输入 */
    --radius-lg: 8px;    /* 卡片 */
    --radius-xl: 12px;   /* 大卡片（如登录框） */
    --radius-pill: 20px; /* 胶囊 tab */

    /* ----- 间距 ----- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;

    /* ----- 容器最大宽 ----- */
    --max-w: 1500px;
    --max-w-narrow: 900px;  /* 详情页 */
}

/* 全局重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font-family: inherit; }