/* ============================================================================
 * V46 · Design Tokens — 现代化 + 暗色模式 ready
 *
 * 设计理念:
 *   - 单一信息源（colors / spacing / radius / shadow / type）
 *   - HSL 三原值（h/s/l 拆开 token），方便 dark/light 模式切换
 *   - 沿用旧 --color-* 命名做 alias，让旧模板逐步迁移不爆
 *
 * Loaded AFTER design_tokens.css，会覆盖部分旧值。
 * ============================================================================ */

:root {
  /* === 间距系统（4px base）=== */
  --v46-space-0: 0;
  --v46-space-1: 4px;
  --v46-space-2: 8px;
  --v46-space-3: 12px;
  --v46-space-4: 16px;
  --v46-space-5: 24px;
  --v46-space-6: 32px;
  --v46-space-7: 48px;
  --v46-space-8: 64px;

  /* === 圆角 === */
  --v46-radius-xs: 3px;
  --v46-radius-sm: 5px;
  --v46-radius-md: 7px;
  --v46-radius-lg: 10px;
  --v46-radius-xl: 14px;
  --v46-radius-pill: 999px;

  /* === 字号系统（更克制 + 一致）=== */
  --v46-text-2xs:  10px;
  --v46-text-xs:   11px;
  --v46-text-sm:   12px;
  --v46-text-base: 13px;
  --v46-text-md:   14px;
  --v46-text-lg:   16px;
  --v46-text-xl:   20px;
  --v46-text-2xl:  24px;
  --v46-text-3xl:  32px;

  --v46-leading-tight: 1.25;
  --v46-leading-snug:  1.4;
  --v46-leading-normal:1.55;
  --v46-leading-loose: 1.75;

  --v46-font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI",
    "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans CJK SC", Helvetica, Arial, sans-serif;
  --v46-font-mono:
    "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* === 色板基础（HSL ramp）=== */
  /* Teal — 品牌主色 */
  --v46-teal-50:  #ECFDF5;
  --v46-teal-100: #D1FAE5;
  --v46-teal-200: #A7F3D0;
  --v46-teal-300: #6EE7B7;
  --v46-teal-400: #34D399;
  --v46-teal-500: #10B981;
  --v46-teal-600: #0F6E56;
  --v46-teal-700: #047857;
  --v46-teal-800: #065F46;
  --v46-teal-900: #04342C;

  /* Slate — 中性 */
  --v46-slate-50:  #F8FAFC;
  --v46-slate-100: #F1F5F9;
  --v46-slate-200: #E2E8F0;
  --v46-slate-300: #CBD5E1;
  --v46-slate-400: #94A3B8;
  --v46-slate-500: #64748B;
  --v46-slate-600: #475569;
  --v46-slate-700: #334155;
  --v46-slate-800: #1E293B;
  --v46-slate-900: #0F172A;
  --v46-slate-950: #020617;

  /* Semantic */
  --v46-red-50:    #FEF2F2;
  --v46-red-100:   #FEE2E2;
  --v46-red-500:   #EF4444;
  --v46-red-600:   #DC2626;
  --v46-red-700:   #B91C1C;

  --v46-amber-50:  #FFFBEB;
  --v46-amber-100: #FEF3C7;
  --v46-amber-500: #F59E0B;
  --v46-amber-600: #D97706;
  --v46-amber-700: #B45309;

  --v46-blue-50:   #EFF6FF;
  --v46-blue-100:  #DBEAFE;
  --v46-blue-500:  #3B82F6;
  --v46-blue-600:  #2563EB;
  --v46-blue-700:  #1D4ED8;

  --v46-green-50:  #F0FDF4;
  --v46-green-100: #DCFCE7;
  --v46-green-500: #22C55E;
  --v46-green-600: #16A34A;
  --v46-green-700: #15803D;

  --v46-purple-100:#EDE9FE;
  --v46-purple-500:#8B5CF6;
  --v46-purple-700:#6D28D9;

  /* === Semantic Tokens（light mode default）=== */
  /* 页面底色比 slate-50 再压深一档：白卡片贴在 #F8FAFC 上几乎看不出边，
     模块之间只能靠一条浅灰线分。压到 #F1F4F8 之后靠的是**明度差**，
     边界自然出来，也不用把边框描粗——描粗就土了。 */
  --v46-bg:           #F1F4F8;                  /* 页面 */
  --v46-bg-subtle:    var(--v46-slate-100);    /* 次级表面 */
  --v46-bg-card:      #FFFFFF;                  /* 卡片 */
  --v46-bg-elevated:  #FFFFFF;
  --v46-bg-overlay:   rgba(15, 23, 42, 0.45);

  --v46-border:        var(--v46-slate-200);
  --v46-border-strong: var(--v46-slate-300);
  --v46-border-focus:  var(--v46-teal-600);

  --v46-text:           var(--v46-slate-900);
  --v46-text-secondary: var(--v46-slate-600);
  --v46-text-tertiary:  var(--v46-slate-500);
  --v46-text-disabled:  var(--v46-slate-400);
  --v46-text-inverse:   #FFFFFF;

  --v46-brand:         var(--v46-teal-600);
  --v46-brand-hover:   var(--v46-teal-700);
  --v46-brand-bg:      var(--v46-teal-50);
  --v46-brand-text:    var(--v46-teal-800);

  --v46-success:    var(--v46-green-600);
  --v46-success-bg: var(--v46-green-50);
  --v46-warning:    var(--v46-amber-600);
  --v46-warning-bg: var(--v46-amber-50);
  --v46-danger:     var(--v46-red-600);
  --v46-danger-bg:  var(--v46-red-50);
  --v46-info:       var(--v46-blue-600);
  --v46-info-bg:    var(--v46-blue-50);

  /* === Sidebar — V46 浅色高对比，不再深蓝企业风 === */
  --v46-sidebar-bg:     #FFFFFF;
  --v46-sidebar-border: var(--v46-slate-200);
  --v46-sidebar-item:   var(--v46-slate-700);
  --v46-sidebar-item-hover-bg: var(--v46-slate-100);
  --v46-sidebar-item-active-bg:   var(--v46-teal-50);
  --v46-sidebar-item-active-text: var(--v46-teal-700);
  --v46-sidebar-item-active-bar:  var(--v46-teal-600);
  --v46-sidebar-brand:  var(--v46-slate-900);

  /* === Topbar === */
  --v46-topbar-bg:     #FFFFFF;
  --v46-topbar-border: var(--v46-slate-200);

  /* === Shadow（更细腻）=== */
  /* 卡片常态投影：两层都很薄——贴地的一层给边缘“压出”一条暗线，
     散开的一层给一点点高度。合起来是「纸放在桌上」，不是「悬浮球」。
     商务感的关键是别糊：blur 大、透明度高就开始发脏。 */
  --v46-shadow-card:      0 1px 1px rgba(15, 23, 42, 0.04),
                          0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --v46-shadow-card-hover:0 1px 1px rgba(15, 23, 42, 0.05),
                          0 6px 14px -4px rgba(15, 23, 42, 0.10);
  --v46-shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --v46-shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --v46-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --v46-shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --v46-shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
  --v46-ring-focus: 0 0 0 3px rgba(16, 185, 129, 0.18);

  /* === Layout === */
  --v46-sidebar-width:           220px;
  --v46-sidebar-width-collapsed:  56px;
  --v46-topbar-height:            52px;
  --v46-content-max:            1440px;

  /* === Motion === */
  --v46-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --v46-ease-out:  cubic-bezier(0.0, 0, 0.2, 1);
  --v46-ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --v46-dur-fast:  120ms;
  --v46-dur:       180ms;
  --v46-dur-slow:  260ms;

  /* === 兼容层 — 让旧组件无痛过渡 === */
  --c-deep:    var(--v46-teal-600);
  --c-primary: var(--v46-teal-600);
  --c-border:  var(--v46-border);
  --c-bg:      var(--v46-bg);
  --c-card:    var(--v46-bg-card);
  --c-text:    var(--v46-text);
  --c-text2:   var(--v46-text-secondary);
}

/* ============================================================================
 * Dark mode — 系统跟随 + data-theme="dark" 手动覆盖
 * ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v46-bg:           var(--v46-slate-950);
    --v46-bg-subtle:    var(--v46-slate-900);
    --v46-bg-card:      var(--v46-slate-900);
    --v46-bg-elevated:  var(--v46-slate-800);
    --v46-bg-overlay:   rgba(0, 0, 0, 0.65);

    --v46-border:        var(--v46-slate-800);
    --v46-border-strong: var(--v46-slate-700);

    --v46-text:           #F1F5F9;
    --v46-text-secondary: var(--v46-slate-400);
    --v46-text-tertiary:  var(--v46-slate-500);
    --v46-text-disabled:  var(--v46-slate-700);

    --v46-brand-bg:      rgba(16, 185, 129, 0.12);
    --v46-brand-text:    var(--v46-teal-300);

    --v46-success-bg: rgba(34, 197, 94, 0.10);
    --v46-warning-bg: rgba(245, 158, 11, 0.10);
    --v46-danger-bg:  rgba(239, 68, 68, 0.10);
    --v46-info-bg:    rgba(59, 130, 246, 0.10);

    --v46-sidebar-bg:     var(--v46-slate-900);
    --v46-sidebar-brand:  var(--v46-slate-100);
    --v46-sidebar-border: var(--v46-slate-800);
    --v46-sidebar-item:   var(--v46-slate-300);
    --v46-sidebar-item-hover-bg:    var(--v46-slate-800);
    --v46-sidebar-item-active-bg:   rgba(16, 185, 129, 0.15);
    --v46-sidebar-item-active-text: var(--v46-teal-300);

    --v46-topbar-bg:     var(--v46-slate-900);
    --v46-topbar-border: var(--v46-slate-800);

    /* 深色下投影看不见（黑底加黑影等于没加），分层改靠表面明度差 + 边框 */
    --v46-shadow-card:      none;
    --v46-shadow-card-hover:none;
    --v46-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --v46-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
    --v46-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --v46-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.6);
  }
}

/* 手动强制暗色 */
:root[data-theme="dark"] {
  /* 同上：深色下投影无效，分层靠明度差 + 边框 */
  --v46-shadow-card:      none;
  --v46-shadow-card-hover:none;
  --v46-bg:           var(--v46-slate-950);
  --v46-bg-subtle:    var(--v46-slate-900);
  --v46-bg-card:      var(--v46-slate-900);
  --v46-bg-elevated:  var(--v46-slate-800);
  --v46-bg-overlay:   rgba(0, 0, 0, 0.65);

  --v46-border:        var(--v46-slate-800);
  --v46-border-strong: var(--v46-slate-700);

  --v46-text:           #F1F5F9;
  --v46-text-secondary: var(--v46-slate-400);
  --v46-text-tertiary:  var(--v46-slate-500);
  --v46-text-disabled:  var(--v46-slate-700);

  --v46-brand-bg:      rgba(16, 185, 129, 0.12);
  --v46-brand-text:    var(--v46-teal-300);

  --v46-success-bg: rgba(34, 197, 94, 0.10);
  --v46-warning-bg: rgba(245, 158, 11, 0.10);
  --v46-danger-bg:  rgba(239, 68, 68, 0.10);
  --v46-info-bg:    rgba(59, 130, 246, 0.10);

  --v46-sidebar-bg:     var(--v46-slate-900);
  --v46-sidebar-brand:  var(--v46-slate-100);
  --v46-sidebar-border: var(--v46-slate-800);
  --v46-sidebar-item:   var(--v46-slate-300);
  --v46-sidebar-item-hover-bg:    var(--v46-slate-800);
  --v46-sidebar-item-active-bg:   rgba(16, 185, 129, 0.15);
  --v46-sidebar-item-active-text: var(--v46-teal-300);

  --v46-topbar-bg:     var(--v46-slate-900);
  --v46-topbar-border: var(--v46-slate-800);
}