/* ============================================================
   AICEO 品牌 VI 设计令牌体系 (Design Tokens) v3.0
   依据：《AICEO品牌VI升级正式版建议报告》V1.0（2026年7月）
   品牌定位：AI身心健康数据银行 · 高端 · 专业 · 科技感 + 中医文化底蕴
   核心三角：深夜蓝 Night Blue × 帝王金 Imperial Gold × 墨玉绿 Jade Green
   调性：深邃 Profound · 精准 Precise · 尊贵 Prestige · 温润 Gentle

   v3.0 变更（向后兼容 v2.0）：
   1. 深色/浅色双模式语义令牌：
      - 默认 = 深色（保持 v2.0 行为不变，现有页面零影响）
      - html[data-theme="light"] 或 .aiceo-light 容器 → 浅色语义
      - html[data-theme="dark"] 强制深色
   2. 新增浅色派生色板 --aiceo-paper-* 系列
   3. 新增组件库所需令牌：焦点环、禁用态、骨架屏、断点注释

   使用方式：<link rel="stylesheet" href="aiceo-tokens.css">（业务样式之前）
   主题切换：document.documentElement.dataset.theme = 'light' | 'dark'
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. 原始色板 Primitive Colors（VI报告 3.2 推荐配色·精确色值）
        原始色板与主题无关，永不随模式变化
     ---------------------------------------------------------- */

  /* 主色调 Primary Palette */
  --aiceo-night-blue: #0D1B2A;   /* 深夜蓝 · 主背景、深色模式底色 */
  --aiceo-deep-navy:  #1B3A5C;   /* 深宝蓝 · 卡片背景、次级容器 */
  --aiceo-royal-blue: #2C5F8A;   /* 皇家蓝 · 主交互色、按钮、链接 */
  --aiceo-sky-blue:   #4A8BB5;   /* 天空蓝 · 悬停状态、辅助强调 */

  /* 强调色 Accent Palette */
  --aiceo-imperial-gold: #C9A227; /* 帝王金 · Logo点缀、核心CTA、标题装饰 */
  --aiceo-light-gold:    #E8D5A3; /* 浅金色 · 金色辅助、背景纹理 */
  --aiceo-ivory:         #F5EDD4; /* 象牙白 · 浅色模式背景、纸质感 */
  --aiceo-dark-gold:     #8B6914; /* 深金色 · 激活状态、深色金色应用 */

  /* 功能色 Functional Palette */
  --aiceo-jade-green:   #1A4A35;  /* 墨玉绿 · 中医健康模块、成功状态 */
  --aiceo-forest-green: #2E7D52;  /* 森林绿 · 健康正向指标、成功反馈 */
  --aiceo-mist-blue:    #8FA8C0;  /* 雾蓝灰 · 副文字、说明文字、禁用 */
  --aiceo-pure-white:   #FFFFFF;  /* 纯白 · 主文字（深色背景） */

  /* 深色派生色阶 */
  --aiceo-night-950: #081220;
  --aiceo-night-900: var(--aiceo-night-blue);
  --aiceo-night-850: #10222F;
  --aiceo-night-800: #14293D;
  --aiceo-navy-750:  #17334F;
  --aiceo-navy-700:  var(--aiceo-deep-navy);
  --aiceo-navy-600:  #24486E;
  --aiceo-navy-500:  #2E567C;
  --aiceo-royal-600: #245078;
  --aiceo-royal-400: #3A719E;
  --aiceo-gold-300:  #DFC27A;
  --aiceo-green-300: #5CAE85;

  /* 浅色派生色板（纸感层次 · v3 新增） */
  --aiceo-paper-50:  #FDFCF9;    /* 暖白纸面 · 页面底 */
  --aiceo-paper-100: #F8F5EC;    /* 象牙弱化层 */
  --aiceo-paper-200: #F3EFE3;    /* 面板弱层 */
  --aiceo-paper-300: #EAE5D6;    /* 悬浮底 */
  --aiceo-paper-line: #E3DFD2;   /* 暖灰描边 */
  --aiceo-paper-line-strong: #CFC9B8;
  --aiceo-ink-soft:  #2E4258;    /* 浅底次级文字 */
  --aiceo-ink-muted: #5E7186;    /* 浅底弱文字 */

  /* 语义警示/危险（深邃克制的低饱和色） */
  --aiceo-amber:      #B8862E;
  --aiceo-danger:     #A64238;
  --aiceo-danger-300: #D98D82;

  /* ----------------------------------------------------------
     3. 字体令牌 Typography Tokens（VI报告 3.3 · 主题无关）
     ---------------------------------------------------------- */
  --dt-font-display: "Cinzel", "Noto Serif SC", "Songti SC", "STSong", serif;
  --dt-font-serif:   "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --dt-font-sans:    "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
                     "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --dt-font-mono:    "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --dt-fs-xs:   11px;
  --dt-fs-sm:   12px;
  --dt-fs-base: 14px;
  --dt-fs-md:   15px;
  --dt-fs-lg:   17px;
  --dt-fs-xl:   20px;
  --dt-fs-2xl:  24px;
  --dt-fs-3xl:  30px;

  --dt-fw-light:    300;
  --dt-fw-regular:  400;
  --dt-fw-medium:   500;
  --dt-fw-semibold: 600;
  --dt-fw-bold:     700;

  --dt-lh-tight:  1.3;
  --dt-lh-normal: 1.6;
  --dt-lh-loose:  1.8;

  --dt-ls-wide:  .05em;
  --dt-ls-wider: .12em;
  --dt-ls-brand: .18em;

  /* ----------------------------------------------------------
     4. 间距令牌 Spacing Tokens（4px基准 · 留白即奢侈）
     ---------------------------------------------------------- */
  --dt-sp-1: 4px;  --dt-sp-2: 8px;  --dt-sp-3: 12px;
  --dt-sp-4: 16px; --dt-sp-5: 20px; --dt-sp-6: 24px;
  --dt-sp-7: 32px; --dt-sp-8: 48px; --dt-sp-9: 64px;

  /* ----------------------------------------------------------
     5. 圆角令牌 Radius Tokens
     ---------------------------------------------------------- */
  --dt-radius-xs:  6px;
  --dt-radius-sm:  8px;
  --dt-radius-md:  10px;
  --dt-radius-lg:  12px;
  --dt-radius-xl:  16px;
  --dt-radius-full: 999px;

  /* ----------------------------------------------------------
     7. 动效令牌 Motion Tokens（静默自信：从容不喧哗）
     ---------------------------------------------------------- */
  --dt-dur-fast:   .15s;
  --dt-dur-normal: .25s;
  --dt-dur-slow:   .5s;
  --dt-ease:       cubic-bezier(.4, 0, .2, 1);

  /* ----------------------------------------------------------
     8. 层级令牌 Z-index Tokens
     ---------------------------------------------------------- */
  --dt-z-side:    10;
  --dt-z-navbar:  20;
  --dt-z-overlay: 50;
  --dt-z-modal:   55;
  --dt-z-toast:   60;

  /* 响应式断点（仅注释参考，media query 无法使用变量）
     sm: 640px · md: 768px · lg: 1024px · xl: 1280px */
}

/* ============================================================
   2. 语义令牌 Semantic Tokens · 深色模式（默认，与 v2.0 一致）
   ============================================================ */
:root,
html[data-theme="dark"],
.aiceo-dark {
  color-scheme: dark;

  /* 品牌 */
  --dt-brand:           var(--aiceo-royal-blue);
  --dt-brand-strong:    var(--aiceo-royal-600);
  --dt-brand-hover:     var(--aiceo-sky-blue);
  --dt-brand-soft:      rgba(44, 95, 138, .18);
  --dt-brand-gold:      var(--aiceo-imperial-gold);
  --dt-brand-gold-soft: rgba(201, 162, 39, .15);
  --dt-brand-jade:      var(--aiceo-jade-green);
  --dt-gradient-navy:   linear-gradient(180deg, #0D1B2A 0%, #10222F 100%);
  --dt-gradient-royal:  linear-gradient(135deg, #2C5F8A 0%, #245078 100%);
  --dt-gradient-gold:   linear-gradient(135deg, #E8D5A3 0%, #C9A227 55%, #8B6914 100%);
  --dt-gold-line:       linear-gradient(90deg, transparent, rgba(201,162,39,.65), transparent);

  /* 背景 */
  --dt-bg-page:        var(--aiceo-night-blue);
  --dt-bg-page-deep:   var(--aiceo-night-950);
  --dt-bg-panel:       var(--aiceo-night-850);
  --dt-bg-card:        var(--aiceo-deep-navy);
  --dt-bg-card-subtle: var(--aiceo-navy-750);
  --dt-bg-card-hover:  var(--aiceo-navy-500);
  --dt-bg-input:       rgba(8, 18, 32, .75);
  --dt-bg-overlay:     rgba(8, 18, 32, .90);
  --dt-bg-ivory:       var(--aiceo-ivory);

  /* 文字 */
  --dt-text-primary:   var(--aiceo-pure-white);
  --dt-text-secondary: #D3DEEA;
  --dt-text-muted:     var(--aiceo-mist-blue);
  --dt-text-disabled:  #5F7891;
  --dt-text-on-brand:  var(--aiceo-pure-white);
  --dt-text-gold:      var(--aiceo-gold-300);
  --dt-text-link:      var(--aiceo-sky-blue);

  /* 边框 */
  --dt-border:        var(--aiceo-navy-600);
  --dt-border-strong: var(--aiceo-navy-500);
  --dt-border-gold:   rgba(201, 162, 39, .50);
  --dt-border-focus:  var(--aiceo-imperial-gold);
  --dt-focus-ring:    0 0 0 3px rgba(201, 162, 39, .28);

  /* 功能语义 */
  --dt-success:        var(--aiceo-forest-green);
  --dt-success-strong: var(--aiceo-jade-green);
  --dt-success-soft:   rgba(46, 125, 82, .18);
  --dt-success-text:   var(--aiceo-green-300);
  --dt-warning:        var(--aiceo-amber);
  --dt-warning-soft:   rgba(184, 134, 46, .15);
  --dt-warning-text:   var(--aiceo-gold-300);
  --dt-danger:         var(--aiceo-danger);
  --dt-danger-soft:    rgba(166, 66, 56, .16);
  --dt-danger-text:    var(--aiceo-danger-300);
  --dt-info:           var(--aiceo-royal-blue);
  --dt-info-soft:      rgba(44, 95, 138, .18);
  --dt-info-text:      #9CC3DE;

  /* 风险等级（审批场景） */
  --dt-risk-high:    var(--aiceo-danger-300);
  --dt-risk-high-bg: rgba(166, 66, 56, .18);
  --dt-risk-med:     var(--aiceo-gold-300);
  --dt-risk-med-bg:  rgba(184, 134, 46, .16);
  --dt-risk-low:     var(--aiceo-green-300);
  --dt-risk-low-bg:  rgba(46, 125, 82, .16);

  /* 阴影 */
  --dt-shadow-sm:    0 1px 2px rgba(4, 10, 18, .40);
  --dt-shadow-md:    0 4px 16px rgba(4, 10, 18, .45);
  --dt-shadow-lg:    0 12px 36px rgba(4, 10, 18, .55);
  --dt-glow-gold:    0 0 10px rgba(201, 162, 39, .35);
  --dt-glow-royal:   0 0 10px rgba(74, 139, 181, .35);
  --dt-glow-success: 0 0 8px rgba(46, 125, 82, .45);
  --dt-glow-danger:  0 0 8px rgba(166, 66, 56, .45);

  /* 骨架屏 */
  --dt-skeleton-base:  var(--aiceo-night-800);
  --dt-skeleton-sheen: rgba(143, 168, 192, .12);
}

/* ============================================================
   2b. 语义令牌 · 浅色模式（v3 新增）
       触发：html[data-theme="light"] 或容器加 .aiceo-light
   ============================================================ */
html[data-theme="light"],
.aiceo-light {
  color-scheme: light;

  /* 品牌 */
  --dt-brand:           var(--aiceo-royal-blue);
  --dt-brand-strong:    var(--aiceo-royal-600);
  --dt-brand-hover:     #24507A;
  --dt-brand-soft:      rgba(44, 95, 138, .10);
  --dt-brand-gold:      var(--aiceo-dark-gold);
  --dt-brand-gold-soft: rgba(201, 162, 39, .12);
  --dt-brand-jade:      var(--aiceo-jade-green);
  --dt-gradient-navy:   linear-gradient(180deg, #FDFCF9 0%, #F8F5EC 100%);
  --dt-gradient-royal:  linear-gradient(135deg, #2C5F8A 0%, #245078 100%);
  --dt-gradient-gold:   linear-gradient(135deg, #C9A227 0%, #8B6914 100%);
  --dt-gold-line:       linear-gradient(90deg, transparent, rgba(139,105,20,.45), transparent);

  /* 背景 */
  --dt-bg-page:        var(--aiceo-paper-50);
  --dt-bg-page-deep:   var(--aiceo-paper-100);
  --dt-bg-panel:       var(--aiceo-paper-100);
  --dt-bg-card:        #FFFFFF;
  --dt-bg-card-subtle: var(--aiceo-paper-200);
  --dt-bg-card-hover:  var(--aiceo-paper-300);
  --dt-bg-input:       #FFFFFF;
  --dt-bg-overlay:     rgba(13, 27, 42, .45);
  --dt-bg-ivory:       var(--aiceo-ivory);

  /* 文字 */
  --dt-text-primary:   var(--aiceo-night-blue);
  --dt-text-secondary: var(--aiceo-ink-soft);
  --dt-text-muted:     var(--aiceo-ink-muted);
  --dt-text-disabled:  #9AA8B6;
  --dt-text-on-brand:  var(--aiceo-pure-white);
  --dt-text-gold:      var(--aiceo-dark-gold);
  --dt-text-link:      var(--aiceo-royal-blue);

  /* 边框 */
  --dt-border:        var(--aiceo-paper-line);
  --dt-border-strong: var(--aiceo-paper-line-strong);
  --dt-border-gold:   rgba(139, 105, 20, .45);
  --dt-border-focus:  var(--aiceo-imperial-gold);
  --dt-focus-ring:    0 0 0 3px rgba(201, 162, 39, .30);

  /* 功能语义 */
  --dt-success:        var(--aiceo-forest-green);
  --dt-success-strong: var(--aiceo-jade-green);
  --dt-success-soft:   rgba(46, 125, 82, .10);
  --dt-success-text:   var(--aiceo-jade-green);
  --dt-warning:        var(--aiceo-amber);
  --dt-warning-soft:   rgba(184, 134, 46, .10);
  --dt-warning-text:   #7A5A12;
  --dt-danger:         var(--aiceo-danger);
  --dt-danger-soft:    rgba(166, 66, 56, .08);
  --dt-danger-text:    #8C352C;
  --dt-info:           var(--aiceo-royal-blue);
  --dt-info-soft:      rgba(44, 95, 138, .08);
  --dt-info-text:      #1F4B70;

  /* 风险等级 */
  --dt-risk-high:    #8C352C;
  --dt-risk-high-bg: rgba(166, 66, 56, .10);
  --dt-risk-med:     #7A5A12;
  --dt-risk-med-bg:  rgba(184, 134, 46, .12);
  --dt-risk-low:     var(--aiceo-jade-green);
  --dt-risk-low-bg:  rgba(46, 125, 82, .10);

  /* 阴影（浅底：淡而弥散的暖影） */
  --dt-shadow-sm:    0 1px 2px rgba(13, 27, 42, .06);
  --dt-shadow-md:    0 4px 16px rgba(13, 27, 42, .08);
  --dt-shadow-lg:    0 12px 36px rgba(13, 27, 42, .12);
  --dt-glow-gold:    0 0 10px rgba(201, 162, 39, .25);
  --dt-glow-royal:   0 0 10px rgba(44, 95, 138, .22);
  --dt-glow-success: 0 0 8px rgba(46, 125, 82, .28);
  --dt-glow-danger:  0 0 8px rgba(166, 66, 56, .28);

  /* 骨架屏 */
  --dt-skeleton-base:  var(--aiceo-paper-200);
  --dt-skeleton-sheen: rgba(255, 255, 255, .65);
}

/* ============================================================
   2c. 跟随系统偏好（仅当页面未显式声明 data-theme 时生效）
   ============================================================ */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --dt-brand-hover: #24507A;
    --dt-brand-soft: rgba(44, 95, 138, .10);
    --dt-brand-gold: var(--aiceo-dark-gold);
    --dt-brand-gold-soft: rgba(201, 162, 39, .12);
    --dt-gradient-navy: linear-gradient(180deg, #FDFCF9 0%, #F8F5EC 100%);
    --dt-gradient-gold: linear-gradient(135deg, #C9A227 0%, #8B6914 100%);
    --dt-gold-line: linear-gradient(90deg, transparent, rgba(139,105,20,.45), transparent);
    --dt-bg-page: var(--aiceo-paper-50);
    --dt-bg-page-deep: var(--aiceo-paper-100);
    --dt-bg-panel: var(--aiceo-paper-100);
    --dt-bg-card: #FFFFFF;
    --dt-bg-card-subtle: var(--aiceo-paper-200);
    --dt-bg-card-hover: var(--aiceo-paper-300);
    --dt-bg-input: #FFFFFF;
    --dt-bg-overlay: rgba(13, 27, 42, .45);
    --dt-text-primary: var(--aiceo-night-blue);
    --dt-text-secondary: var(--aiceo-ink-soft);
    --dt-text-muted: var(--aiceo-ink-muted);
    --dt-text-disabled: #9AA8B6;
    --dt-text-gold: var(--aiceo-dark-gold);
    --dt-text-link: var(--aiceo-royal-blue);
    --dt-border: var(--aiceo-paper-line);
    --dt-border-strong: var(--aiceo-paper-line-strong);
    --dt-border-gold: rgba(139, 105, 20, .45);
    --dt-success-soft: rgba(46, 125, 82, .10);
    --dt-success-text: var(--aiceo-jade-green);
    --dt-warning-soft: rgba(184, 134, 46, .10);
    --dt-warning-text: #7A5A12;
    --dt-danger-soft: rgba(166, 66, 56, .08);
    --dt-danger-text: #8C352C;
    --dt-info-soft: rgba(44, 95, 138, .08);
    --dt-info-text: #1F4B70;
    --dt-risk-high: #8C352C;
    --dt-risk-high-bg: rgba(166, 66, 56, .10);
    --dt-risk-med: #7A5A12;
    --dt-risk-med-bg: rgba(184, 134, 46, .12);
    --dt-risk-low: var(--aiceo-jade-green);
    --dt-risk-low-bg: rgba(46, 125, 82, .10);
    --dt-shadow-sm: 0 1px 2px rgba(13, 27, 42, .06);
    --dt-shadow-md: 0 4px 16px rgba(13, 27, 42, .08);
    --dt-shadow-lg: 0 12px 36px rgba(13, 27, 42, .12);
    --dt-skeleton-base: var(--aiceo-paper-200);
    --dt-skeleton-sheen: rgba(255, 255, 255, .65);
  }
}