/* ==========================================================================
   POSX Design System 2026 · tokens.css · v2.2.0
   「云白为底 · Navy 为骨 · 紫为锋芒 · 四季潮汐」
   PANTONE 11-4201 Cloud Dancer (#f0eee9) × POSX 品牌色系 融合版
   生成: build_tokens.py · 2026-07-20 · 色值经 OKLCH 空间计算，禁止手改
   架构: Layer 1 Primitive → Layer 2 Semantic (light/dark) → Layer 3 组件别名
   配比咒语: Cloud 大底 60% · Navy 支撑 30% · Purple 强调 10% · 次要色 ≤5%
   ========================================================================== */

/* ════════════════════════════════════════════════════════════════
   LAYER 1 · PRIMITIVE 全量色板（主题不变 theme-invariant）
   ════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* ── Cloud · 云白家族（v2.1 新增 · 11 阶全阶）──────────────────
     PANTONE 11-4201 Cloud Dancer 衍生：cloud-100 = #f0eee9 为锚点，
     OKLCH 等距 L（H≈88.6° 暖白，C 平滑递减），50 更亮，200→950 过渡至暖墨黑。
     cloud-50/100 取代 sand-50 成为默认页面底色。*/
  --posx-cloud-50: #f8f6f3; /* oklch(0.974 0.005 78.3) */
  --posx-cloud-100: #f0eee9; /* oklch(0.949 0.007 88.6) ← PANTONE 11-4201 锚点 */
  --posx-cloud-200: #dbd8d0; /* oklch(0.882 0.011 89.7) */
  --posx-cloud-300: #c3beb1; /* oklch(0.802 0.019 89.4) */
  --posx-cloud-400: #a8a190; /* oklch(0.71 0.025 88.3) */
  --posx-cloud-500: #8e8673; /* oklch(0.622 0.029 87.9) */
  --posx-cloud-600: #726c5b; /* oklch(0.532 0.027 90.9) */
  --posx-cloud-700: #595346; /* oklch(0.444 0.022 86.2) */
  --posx-cloud-800: #423e34; /* oklch(0.365 0.017 88.8) */
  --posx-cloud-900: #2c2a23; /* oklch(0.285 0.013 93.9) */
  --posx-cloud-950: #1a1814; /* oklch(0.21 0.008 84.6) */

  /* ── Sand · 沙（legacy 兼容保留 · 仅 50–500；页面底色已由 Cloud 接替）── */
  --posx-sand-50: #f7f6f2; /* oklch(0.973 0.005 95.1) */
  --posx-sand-100: #efeeea; /* oklch(0.949 0.005 95.1) */
  --posx-sand-200: #e3e2de; /* oklch(0.912 0.005 95.1) */
  --posx-sand-300: #cac8be; /* oklch(0.832 0.014 97.5) */
  --posx-sand-400: #b9b7ac; /* oklch(0.778 0.015 98.3) */
  --posx-sand-500: #a8a69a; /* oklch(0.723 0.017 99.1) */

  /* ── Navy · 藏青（支撑 30% · 文字/结构/深色骨架）── */
  --posx-navy-50: #f5f5f7;
  --posx-navy-100: #ededf1;
  --posx-navy-200: #dcdce3;
  --posx-navy-300: #bdbdca;
  --posx-navy-400: #9494a6;
  --posx-navy-500: #6e6e87;
  --posx-navy-600: #4f4f6b;
  --posx-navy-700: #393951;
  --posx-navy-800: #2a2a3f;
  --posx-navy-900: #1b1b2a;
  --posx-navy-950: #0c0c17;

  /* ── Purple · 品牌紫（强调 10% · 锚点 purple-600 #6352CE）── */
  --posx-purple-50: #f6f4fd;
  --posx-purple-100: #eeebfb;
  --posx-purple-200: #dedaf7;
  --posx-purple-300: #c2bbf1;
  --posx-purple-400: #9f94e8;
  --posx-purple-500: #7c6fdb;
  --posx-purple-600: #6352ce;
  --posx-purple-700: #4a3ea8;
  --posx-purple-800: #332c78;
  --posx-purple-900: #231e4c;
  --posx-purple-950: #17142f;

  /* ── Teal · 青（次要色 ≤5% · 每视图至多一个次要色）── */
  --posx-teal-50: #e6fbf8;
  --posx-teal-100: #c0f4ee;
  --posx-teal-200: #94e9de;
  --posx-teal-300: #5dd4c3;
  --posx-teal-400: #35c8b5;
  --posx-teal-500: #0fb5a7;
  --posx-teal-600: #0d968a;
  --posx-teal-700: #0b776e;
  --posx-teal-800: #095a53;
  --posx-teal-900: #06403a;
  --posx-teal-950: #032620;

  /* ── Gold · 金（数据可视化/VIP）── */
  --posx-gold-50: #fdf8ea;
  --posx-gold-100: #f8ebc0;
  --posx-gold-200: #f1d98a;
  --posx-gold-300: #e7c258;
  --posx-gold-400: #ddb344;
  --posx-gold-500: #d4a43a;
  --posx-gold-600: #a88029;
  --posx-gold-700: #876418;
  --posx-gold-800: #664a10;
  --posx-gold-900: #44310a;
  --posx-gold-950: #271c05;

  /* ── Rose · 玫（数据可视化/插画）── */
  --posx-rose-50: #fef0f2;
  --posx-rose-100: #fbdae0;
  --posx-rose-200: #f8b9c2;
  --posx-rose-300: #f493a1;
  --posx-rose-400: #f58091;
  --posx-rose-500: #f27085;
  --posx-rose-600: #d6475f;
  --posx-rose-700: #ae3649;
  --posx-rose-800: #832838;
  --posx-rose-900: #581a24;
  --posx-rose-950: #2f0d13;

  /* ── Azure · 天蓝（数据可视化/插画）── */
  --posx-azure-50: #e8f1fc;
  --posx-azure-100: #c9def7;
  --posx-azure-200: #9dc1ef;
  --posx-azure-300: #75aae8;
  --posx-azure-400: #5c9de5;
  --posx-azure-500: #4a90e2;
  --posx-azure-600: #3578c7;
  --posx-azure-700: #225a9b;
  --posx-azure-800: #164370;
  --posx-azure-900: #0c2b49;
  --posx-azure-950: #071729;

  /* ── Seasonal 2026 · 四季潮汐趋势层（年度可替换槽位，各 100/500/700）── */
  /* 雾面丁香 Burnished Lilac · 配对 Purple · 潘通建议锚 #b7a9c9 → 定稿 #b5aaca · 灰调薰衣草紫，柔焦收敛的高级感，Purple 家族的雾面变体。 */
  --posx-season-lilac-100: #d6d1e0;
  --posx-season-lilac-500: #b5aaca;
  --posx-season-lilac-700: #766d87;
  --season-lilac-100: var(--posx-season-lilac-100); /* 短别名 */
  --season-lilac-500: var(--posx-season-lilac-500); /* 短别名 */
  --season-lilac-700: var(--posx-season-lilac-700); /* 短别名 */

  /* 海洋蓝 Marina · 配对 Azure/Teal · 潘通建议锚 #6e8fa3 → 定稿 #6f8ea4 · 港湾深处的灰蓝，冷静可靠，介于 Azure 与 Teal 之间的季节锚点。 */
  --posx-season-marina-100: #b6c4ce;
  --posx-season-marina-500: #6f8ea4;
  --posx-season-marina-700: #486274;
  --season-marina-100: var(--posx-season-marina-100); /* 短别名 */
  --season-marina-500: var(--posx-season-marina-500); /* 短别名 */
  --season-marina-700: var(--posx-season-marina-700); /* 短别名 */

  /* 浅蕉黄 Pale Banana · 配对 Gold · 潘通建议锚 #f2e3a0 → 定稿 #f5e2a0 · 奶油质感的浅黄，轻盈通透，为 Gold 家族注入春日亮度。 */
  --posx-season-banana-100: #f3ebce;
  --posx-season-banana-500: #f5e2a0;
  --posx-season-banana-700: #9a8b54;
  --season-banana-100: var(--posx-season-banana-100); /* 短别名 */
  --season-banana-500: var(--posx-season-banana-500); /* 短别名 */
  --season-banana-700: var(--posx-season-banana-700); /* 短别名 */

  /* 甜瓜橘 Muskmelon · 配对 Rose · 潘通建议锚 #f2a65e → 定稿 #f7a266 · 果肉般的暖橘，亲和有温度，Rose 家族的暖阳变体。 */
  --posx-season-melon-100: #f6cfb5;
  --posx-season-melon-500: #f7a266;
  --posx-season-melon-700: #a8632f;
  --season-melon-100: var(--posx-season-melon-100); /* 短别名 */
  --season-melon-500: var(--posx-season-melon-500); /* 短别名 */
  --season-melon-700: var(--posx-season-melon-700); /* 短别名 */

  /* banana-300 · v2.1 Dawn 渐变中停（Dawn 已于 v2.2 退役，token 保留兼容） */
  --posx-season-banana-300: #f4e7b7;
  /* melon-300 · melon-100/500 的 OKLCH 中点（Terra 渐变端停，不入季节槽位） */
  --posx-season-melon-300: #f7b98f;

  /* ── 语义状态色（Tailwind 标准值，原样保留）── */
  /* success */
  --posx-success-50: #f0fdf4;
  --posx-success-100: #dcfce7;
  --posx-success-500: #22c55e;
  --posx-success-600: #16a34a;
  --posx-success-700: #15803d;
  /* warning */
  --posx-warning-50: #fffbeb;
  --posx-warning-100: #fef3c7;
  --posx-warning-500: #f59e0b;
  --posx-warning-600: #d97706;
  --posx-warning-700: #b45309;
  /* danger */
  --posx-danger-50: #fef2f2;
  --posx-danger-100: #fee2e2;
  --posx-danger-500: #ef4444;
  --posx-danger-600: #dc2626;
  --posx-danger-700: #b91c1c;
  /* info */
  --posx-info-50: #ecfeff;
  --posx-info-100: #cffafe;
  --posx-info-500: #06b6d4;
  --posx-info-600: #0891b2;
  --posx-info-700: #0e7490;
  --posx-up: #059669; /* 涨（light） */
  --posx-down: #dc2626; /* 跌（light） */
}

/* ════════════════════════════════════════════════════════════════
   LAYER 2 · SEMANTIC 语义映射 —— light
   ════════════════════════════════════════════════════════════════ */
:root {
  --background: var(--posx-cloud-50); /* 页面底色 · 原 sand-50 */
  --foreground: var(--posx-navy-700); /* 正文主色 */
  --card: #ffffff; /* 卡片/面板 */
  --card-foreground: var(--posx-navy-700);
  --popover: #ffffff;
  --popover-foreground: var(--posx-navy-700);
  --primary: var(--posx-purple-600); /* 品牌主紫 */
  --primary-foreground: #ffffff;
  --primary-hover: var(--posx-purple-700); /* 主色悬停 */
  --secondary: var(--posx-cloud-100); /* 次要表面 · 原 sand-100 */
  --secondary-foreground: var(--posx-navy-700);
  --muted: var(--posx-cloud-100); /* 静音表面 */
  --muted-foreground: var(--posx-navy-500);
  --accent: var(--posx-purple-100); /* 强调表面 */
  --accent-foreground: var(--posx-purple-700);
  --destructive: var(--posx-danger-600); /* 危险操作 */
  --border: var(--posx-navy-200); /* 默认描边 */
  --input: var(--posx-navy-200); /* 输入框描边 */
  --ring: var(--posx-purple-500); /* 焦点环 */
  --chart-1: var(--posx-purple-600); /* 图表系列1 */
  --chart-2: var(--posx-teal-500); /* 图表系列2 */
  --chart-3: var(--posx-gold-500); /* 图表系列3 */
  --chart-4: var(--posx-azure-500); /* 图表系列4 */
  --chart-5: var(--posx-rose-500); /* 图表系列5 */
  --sidebar: var(--posx-cloud-100); /* 侧栏底 */
  --sidebar-foreground: var(--posx-navy-700);
  --sidebar-primary: var(--posx-purple-600);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: var(--posx-purple-100);
  --sidebar-accent-foreground: var(--posx-purple-700);
  --sidebar-border: var(--posx-navy-200);
  --sidebar-ring: var(--posx-purple-500);
  --brand: var(--posx-purple-600); /* 兼容原 --brand */
  --brand-hover: var(--posx-purple-700); /* 兼容原 --brand-hover */
  --surface-2: var(--posx-cloud-100); /* 兼容原 --surface-2 */
  --text-secondary: var(--posx-navy-600); /* 兼容原 --text-secondary */
  --text-muted: var(--posx-navy-500); /* 兼容原 --text-muted */
  --up: #059669; /* 涨 / 正向 */
  --down: #dc2626; /* 跌 / 负向 */
  --gold: var(--posx-gold-500); /* 金色语义槽（VIP/权益） */
  --gold-foreground: var(--posx-navy-900); /* 金色上的文字 */
  --teal: var(--posx-teal-500); /* 青色语义槽 */
  --season-1: var(--posx-season-lilac-500); /* 趋势槽1 · 配对 Purple */
  --season-2: var(--posx-season-marina-500); /* 趋势槽2 · 配对 Azure/Teal */
  --season-3: var(--posx-season-banana-500); /* 趋势槽3 · 配对 Gold */
  --season-4: var(--posx-season-melon-500); /* 趋势槽4 · 配对 Rose */
  --on-season: var(--posx-navy-900); /* 趋势色上的文字（四季通用） */
}

/* ════════════════════════════════════════════════════════════════
   LAYER 2 · SEMANTIC 语义映射 —— dark
   同时支持 shadcn `.dark` 与原站点 `[data-theme=dark]`
   ════════════════════════════════════════════════════════════════ */
.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --background: var(--posx-navy-900); /* 页面底色 */
  --foreground: var(--posx-navy-100); /* 正文主色 */
  --card: var(--posx-navy-800); /* 卡片/面板 */
  --card-foreground: var(--posx-navy-100);
  --popover: var(--posx-navy-800);
  --popover-foreground: var(--posx-navy-100);
  --primary: var(--posx-purple-400); /* 品牌主紫 */
  --primary-foreground: var(--posx-purple-950);
  --primary-hover: var(--posx-purple-300); /* 主色悬停 */
  --secondary: var(--posx-navy-700); /* 次要表面 */
  --secondary-foreground: var(--posx-navy-100);
  --muted: var(--posx-navy-700); /* 静音表面 */
  --muted-foreground: var(--posx-navy-300);
  --accent: var(--posx-purple-900); /* 强调表面 */
  --accent-foreground: var(--posx-purple-300);
  --destructive: var(--posx-danger-500); /* 危险操作 */
  --border: var(--posx-navy-600); /* 默认描边 */
  --input: var(--posx-navy-600); /* 输入框描边 */
  --ring: var(--posx-purple-500); /* 焦点环 */
  --chart-1: var(--posx-purple-400); /* 图表系列1 */
  --chart-2: var(--posx-teal-400); /* 图表系列2 */
  --chart-3: var(--posx-gold-300); /* 图表系列3 */
  --chart-4: var(--posx-azure-300); /* 图表系列4 */
  --chart-5: var(--posx-rose-300); /* 图表系列5 */
  --sidebar: var(--posx-navy-800); /* 侧栏底 */
  --sidebar-foreground: var(--posx-navy-100);
  --sidebar-primary: var(--posx-purple-400);
  --sidebar-primary-foreground: var(--posx-purple-950);
  --sidebar-accent: var(--posx-purple-900);
  --sidebar-accent-foreground: var(--posx-purple-300);
  --sidebar-border: var(--posx-navy-600);
  --sidebar-ring: var(--posx-purple-500);
  --brand: var(--posx-purple-400); /* 兼容原 --brand */
  --brand-hover: var(--posx-purple-300); /* 兼容原 --brand-hover */
  --surface-2: var(--posx-navy-700); /* 兼容原 --surface-2 */
  --text-secondary: var(--posx-navy-200); /* 兼容原 --text-secondary */
  --text-muted: var(--posx-navy-300); /* 兼容原 --text-muted */
  --up: #34d399; /* 涨 / 正向（dark 提亮） */
  --down: #f87171; /* 跌 / 负向（dark 提亮） */
  --gold: var(--posx-gold-300); /* 金色语义槽（VIP/权益） */
  --gold-foreground: var(--posx-navy-950); /* 金色上的文字 */
  --teal: var(--posx-teal-400); /* 青色语义槽 */
  --season-1: var(--posx-season-lilac-500); /* 趋势槽1 */
  --season-2: var(--posx-season-marina-500); /* 趋势槽2 */
  --season-3: var(--posx-season-banana-500); /* 趋势槽3 */
  --season-4: var(--posx-season-melon-500); /* 趋势槽4 */
  --on-season: var(--posx-navy-900); /* 趋势色上的文字（四季通用） */
}

/* ════════════════════════════════════════════════════════════════
   LAYER 3 · 组件别名（示例 · 只引用语义层，dark 自动跟随）
   ════════════════════════════════════════════════════════════════ */
:root {
  --button-primary-bg: var(--primary); /* 主按钮底 */
  --button-primary-bg-hover: var(--primary-hover); /* 主按钮悬停 */
  --button-primary-text: var(--primary-foreground); /* 主按钮文字 */
  --button-secondary-bg: var(--secondary); /* 次按钮底 */
  --button-secondary-text: var(--secondary-foreground); /* 次按钮文字 */
  --table-row-hover: var(--accent); /* 表格行悬停 */
  --table-row-alt: var(--muted); /* 表格斑马纹 */
  --table-border: var(--border); /* 表格分隔线 */
  --input-focus-ring: var(--ring); /* 输入聚焦环 */
  --chart-series-1: var(--chart-1); /* 图表系列 1 */
  --chart-series-2: var(--chart-2); /* 图表系列 2 */
  --chart-series-3: var(--chart-3); /* 图表系列 3 */
  --chart-series-4: var(--chart-4); /* 图表系列 4 */
  --chart-series-5: var(--chart-5); /* 图表系列 5 */
  --vip-badge-bg: var(--gold); /* VIP 徽标底 */
  --vip-badge-text: var(--gold-foreground); /* VIP 徽标字 */
  --trending-badge-bg: var(--season-1); /* 趋势徽标底（年度可换槽位） */
  --trending-badge-text: var(--on-season); /* 趋势徽标字 */
  --stock-up: var(--up); /* 涨 */
  --stock-down: var(--down); /* 跌 */
}

/* ════════════════════════════════════════════════════════════════
   渐变 v2.2 · 四层趋势渐变体系（135deg linear）
   L1 Signature 签名 · L2 Atmospheric 大气氛围（light 原生）
   L3 Bio-Luminescence 生物夜光（dark 原生）· L4 Heritage 新怀旧（light 原生）
   色停全部取自现有 token 阶值或相邻两阶 OKLCH 中点 · 叠加文字实测见 color-spec.md §4
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Signature 签名层 ── */
  --grad-brand-core: linear-gradient(135deg, #6352ce, #393951); /* 品牌核心 Brand Core · 品牌主 Hero / 登录页 / 发布会主视觉 */
  --grad-brand-aurora: linear-gradient(135deg, #6352ce, #7c6fdb 45%, #0fb5a7); /* 极光 Aurora · 营销 Hero / 活动主视觉 / 品牌亮点带 */
  /* ── Atmospheric 大气氛围层 ── */
  --grad-cloud-veil: linear-gradient(135deg, #f8f6f3, #f6f4fd 52%, #eeebfb); /* 云纱 Cloud Veil · 默认柔底 / 区块与审批背景 / 卡片衬底（接替旧 soft） */
  --grad-mist: linear-gradient(135deg, #f0eee9, #b6c4ce 55%, #c9def7); /* 烟波 Mist · 数据/仪表盘区块底 / 科技感营销页 */
  --grad-lilac-haze: linear-gradient(135deg, #f0eee9, #d6d1e0 50%, #dedaf7); /* 紫雾 Lilac Haze · 内容页衬底 / 会员与社区氛围带 */
  --grad-daybreak: linear-gradient(135deg, #f0eee9, #f3ebce 45%, #fbdae0); /* 破晓 Daybreak · 营销落地页 / 欢迎与空状态 / 温馨提示区 */
  /* ── Bio-Luminescence 生物夜光层 ── */
  --grad-abyss: linear-gradient(135deg, #0c0c17, #0b776e 65%, #095a53); /* 深渊光 Abyss · dark Hero / 仪表盘首屏 / 数据大屏 */
  --grad-nebula: linear-gradient(135deg, #1b1b2a, #332c78 50%, #6352ce); /* 星云 Nebula · dark 营销页 / 品牌故事页 */
  --grad-ember: linear-gradient(135deg, #0c0c17, #a8632f 60%, #832838); /* 余烬 Ember · dark 活动页 / 促销与暖调强调带 */
  /* ── Heritage 新怀旧层 ── */
  --grad-brand-gilded: linear-gradient(135deg, #6352ce, #d4a43a); /* 鎏金 Gilded · VIP / 权益页 / 会员卡片 */
  --grad-terra: linear-gradient(135deg, #dbd8d0, #f6cfb5 45%, #f7b98f); /* 陶土 Terra · 生活方式内容 / 品牌故事 / 暖调区块 */
  --grad-harvest: linear-gradient(135deg, #f0eee9, #f5e2a0 50%, #ddb344); /* 秋日金 Harvest · 运营活动 / 丰收季营销 / 暖金强调带 */

  /* ── Deprecated 别名（v2.2 退役映射 · 值=目标渐变，请迁移至新 token）── */
  --grad-brand-sunset: linear-gradient(135deg, #0c0c17, #a8632f 60%, #832838); /* deprecated → --grad-ember · 落日（紫→玫）退役 → 暖调深色场景由 Ember 余烬承接；浅色暖调场景请改用 Daybreak */
  --grad-brand-sky: linear-gradient(135deg, #f0eee9, #b6c4ce 55%, #c9def7); /* deprecated → --grad-mist · 天际（藏青→天蓝）退役 → 烟波蓝 Mist 承接，dark 跟随 Mist dark */
  --grad-brand-soft: linear-gradient(135deg, #f8f6f3, #f6f4fd 52%, #eeebfb); /* deprecated → --grad-cloud-veil · 柔底退役 → Cloud Veil 云纱承接（dark 同为 navy-900→purple-900） */
  --grad-dawn: linear-gradient(135deg, #f0eee9, #f3ebce 45%, #fbdae0); /* deprecated → --grad-daybreak · Dawn（v2.1）退役 → Daybreak 破晓承接（更轻盈的蜜桃晨曦） */
}

.dark,
[data-theme="dark"] {
  --grad-cloud-veil: linear-gradient(135deg, #1b1b2a, #231e4c); /* dark 变体 · 云纱 Cloud Veil */
  --grad-mist: linear-gradient(135deg, #1b1b2a, #486274 55%, #164370); /* dark 变体 · 烟波 Mist */
  --grad-lilac-haze: linear-gradient(135deg, #1b1b2a, #766d87 50%, #332c78); /* dark 变体 · 紫雾 Lilac Haze */
  --grad-daybreak: linear-gradient(135deg, #1b1b2a, #9a8b54 45%, #832838); /* dark 变体 · 破晓 Daybreak */
  --grad-terra: linear-gradient(135deg, #1b1b2a, #a8632f); /* dark 变体 · 陶土 Terra */
  --grad-harvest: linear-gradient(135deg, #1b1b2a, #9a8b54 55%, #876418); /* dark 变体 · 秋日金 Harvest */
  --grad-brand-sky: linear-gradient(135deg, #1b1b2a, #486274 55%, #164370); /* deprecated → --grad-mist（dark 跟随目标渐变） */
  --grad-brand-soft: linear-gradient(135deg, #1b1b2a, #231e4c); /* deprecated → --grad-cloud-veil（dark 跟随目标渐变） */
  --grad-dawn: linear-gradient(135deg, #1b1b2a, #9a8b54 45%, #832838); /* deprecated → --grad-daybreak（dark 跟随目标渐变） */
}

/* ── 选区色（原样保留）── */
::selection { background: #dedaf7; color: #1b1b2a; } /* purple-200 / navy-900 */
.dark ::selection,
[data-theme="dark"] ::selection { background: #4a3ea8; color: #f6f4fd; } /* purple-700 / purple-50 */