/* ============================================================
   Vastrade Design Tokens · 品牌软件工具统一配色系统 v1.0
   适用：Electron / Vue 3 / Element Plus 项目（报价系统、WhatsApp 工具等）
   用法：在 main.ts 或全局样式中最先 import 本文件
   ============================================================ */

/* ------------------------------------------------------------
   1. 品牌色阶（原始调色板，token 引用源）
   ------------------------------------------------------------ */
:root {
  /* Primary · WhatsApp Green（以 #25D366 为 500） */
  --vt-green-50:  #EBFCEF;
  --vt-green-100: #D1F9DE;
  --vt-green-200: #A7F2BF;
  --vt-green-300: #6FED97;
  --vt-green-400: #3FDF74;
  --vt-green-500: #25D366;  /* 品牌主绿：logo、进度、选中态、图表强调 */
  --vt-green-600: #1CB454;  /* 交互绿：按钮/链接底色（白字可读） */
  --vt-green-700: #17954D;  /* 深绿：浅底上的绿色正文文字、hover 深化 */
  --vt-green-800: #147A42;
  --vt-green-900: #0F5C33;

  /* Secondary · Teal（以 #128C7E / #075E54 为核心） */
  --vt-teal-50:  #E9F5F3;
  --vt-teal-100: #C9E7E2;
  --vt-teal-200: #97CFC6;
  --vt-teal-300: #5FB2A5;
  --vt-teal-400: #2C9C8C;
  --vt-teal-500: #128C7E;  /* 品牌青绿：次级按钮、标签、图表第二色 */
  --vt-teal-600: #075E54;  /* 品牌深青：侧栏、顶栏、页头（WhatsApp 深色 UI 同源） */
  --vt-teal-700: #054A42;
  --vt-teal-800: #043831;
  --vt-teal-900: #02251F;

  /* Neutral · 绿调中性灰 */
  --vt-gray-0:   #FFFFFF;
  --vt-gray-50:  #F6FAF8;
  --vt-gray-100: #EFF4F1;
  --vt-gray-200: #E2EAE5;
  --vt-gray-300: #C9D7CF;
  --vt-gray-400: #A0B5AA;
  --vt-gray-500: #7A9488;
  --vt-gray-600: #5D7669;
  --vt-gray-700: #475D51;
  --vt-gray-800: #30423A;
  --vt-gray-900: #1C2B25;
  --vt-gray-950: #0A201C;  /* 暗色模式页面底色 */

  /* Functional · 功能色 */
  --vt-success-500: #25D366;
  --vt-success-700: #17954D;
  --vt-warning-500: #F6B93B;
  --vt-warning-700: #8A6410;
  --vt-danger-500:  #E5484D;
  --vt-danger-600:  #D0383D;
  --vt-danger-700:  #B22B30;
  --vt-info-500:    #4BA8F5;

  /* ------------------------------------------------------------ 
     2. 语义 Token · 明亮模式（默认）
     ------------------------------------------------------------ */
  --vt-bg-page:      var(--vt-gray-50);      /* 页面背景 */
  --vt-bg-card:      #FFFFFF;                /* 卡片背景 */
  --vt-bg-sidebar:   var(--vt-teal-600);     /* 侧栏 / 顶栏品牌深青 */
  --vt-bg-sidebar-active: var(--vt-teal-700);
  --vt-bg-hover:     var(--vt-gray-100);     /* 悬停态 */
  --vt-bg-selected:  var(--vt-green-50);     /* 选中行 / 激活底 */

  --vt-text-1: var(--vt-gray-900);           /* 主文字 */
  --vt-text-2: var(--vt-gray-600);           /* 次文字 */
  --vt-text-3: var(--vt-gray-400);           /* 占位 / 辅助 */
  --vt-text-on-brand: #FFFFFF;               /* 品牌色上的文字 */
  --vt-text-link: var(--vt-green-700);       /* 链接文字（浅底可读） */

  --vt-border:        var(--vt-gray-200);
  --vt-border-strong: var(--vt-gray-300);

  --vt-primary:            var(--vt-green-500);  /* 品牌识别 / 装饰 / 大色块 */
  --vt-primary-interactive:var(--vt-green-600);  /* 按钮底色 */
  --vt-primary-hover:      var(--vt-green-400);
  --vt-primary-active:     var(--vt-green-700);
  --vt-primary-deep:       var(--vt-green-700);  /* 浅底上的绿色文字 / 描边 */

  --vt-success: var(--vt-success-500);
  --vt-warning: var(--vt-warning-500);
  --vt-danger:  var(--vt-danger-500);
  --vt-info:    var(--vt-info-500);

  --vt-shadow-card: 0 4px 18px rgba(7, 94, 84, 0.08);
  --vt-radius-card: 12px;
  --vt-radius-input: 8px;

  /* 字体（UI 场景） */
  --vt-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vt-font-mono: "JetBrains Mono", Consolas, Menlo, monospace;
}

/* ------------------------------------------------------------
   3. 语义 Token · 暗色模式（html[data-theme="dark"] 时生效）
   ------------------------------------------------------------ */
[data-theme="dark"] {
  --vt-bg-page:    var(--vt-gray-950);
  --vt-bg-card:    #11302A;
  --vt-bg-sidebar: #082621;
  --vt-bg-sidebar-active: #0E3630;
  --vt-bg-hover:   #16382F;
  --vt-bg-selected:#123826;

  --vt-text-1: #E9F4EE;
  --vt-text-2: #A0B5AA;
  --vt-text-3: #6C8377;
  --vt-text-on-brand: #FFFFFF;
  --vt-text-link: var(--vt-green-300);       /* 暗底上用亮绿文字 */

  --vt-border:        #1E3B33;
  --vt-border-strong: #2A4A40;

  --vt-primary:            var(--vt-green-500);  /* 深底上 #25D366 对比极佳，直接用 */
  --vt-primary-interactive:var(--vt-green-400);
  --vt-primary-hover:      var(--vt-green-300);
  --vt-primary-active:     var(--vt-green-600);
  --vt-primary-deep:       var(--vt-green-300);  /* 暗底上的绿色文字用亮档 */

  --vt-success: #2ACA57;
  --vt-warning: #F6C344;
  --vt-danger:  #FF6369;
  --vt-info:    #63B3F8;

  --vt-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------
   4. Element Plus 主题覆盖（Vue 3 + Element Plus 项目直接生效）
   ------------------------------------------------------------ */
:root {
  --el-color-primary: #1CB454;
  --el-color-primary-light-3: #55D47F;
  --el-color-primary-light-5: #8CE6A6;
  --el-color-primary-light-7: #C2F2CD;
  --el-color-primary-light-8: #DBF7E2;
  --el-color-primary-light-9: #EEFBF2;
  --el-color-primary-dark-2: #17954D;

  --el-color-success: #25D366;
  --el-color-success-light-9: #EEFBF2;
  --el-color-warning: #F6B93B;
  --el-color-warning-light-9: #FDF6E7;
  --el-color-danger:  #E5484D;
  --el-color-error:   #E5484D;
  --el-color-danger-light-9: #FDEDEE;
  --el-color-info:    #7A9488;
  --el-color-info-light-9: #F0F4F2;

  --el-text-color-primary:   #17281F;
  --el-text-color-regular:   #5D7669;
  --el-text-color-secondary: #A0B5AA;
  --el-text-color-placeholder: #A0B5AA;

  --el-border-color:        #E2EAE5;
  --el-border-color-light:  #E2EAE5;
  --el-border-color-lighter:#EFF4F1;

  --el-fill-color:       #F6FAF8;
  --el-fill-color-light: #EFF4F1;
  --el-fill-color-lighter:#F6FAF8;

  --el-bg-color-page: #F6FAF8;

  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-border-radius-round: 20px;

  --el-font-family: var(--vt-font-sans);
}

/* Element Plus 暗色模式（配合 html.dark 或 data-theme="dark"） */
[data-theme="dark"] {
  --el-color-primary: #2ACA57;
  --el-color-primary-light-3: #4CE87E;
  --el-color-primary-light-5: #7BF0A2;
  --el-color-primary-light-7: #A9F5C4;
  --el-color-primary-light-8: #C2F8D6;
  --el-color-primary-light-9: #123826;
  --el-color-primary-dark-2: #25D366;

  --el-color-success: #2ACA57;
  --el-color-warning: #F6C344;
  --el-color-danger:  #FF6369;
  --el-color-error:   #FF6369;
  --el-color-info:    #7A9488;

  --el-text-color-primary:   #E9F4EE;
  --el-text-color-regular:   #A0B5AA;
  --el-text-color-secondary: #6C8377;
  --el-text-color-placeholder: #6C8377;

  --el-border-color:        #1E3B33;
  --el-border-color-light:  #1E3B33;
  --el-border-color-lighter:#16382F;

  --el-fill-color:       #11302A;
  --el-fill-color-light: #16382F;
  --el-fill-color-lighter:#11302A;

  --el-bg-color:      #11302A;
  --el-bg-color-page: #0A201C;
  --el-bg-color-overlay: #16382F;
}

/* ------------------------------------------------------------
   5. 通用工具类（可选）
   ------------------------------------------------------------ */
.vt-brand-gradient {
  background: linear-gradient(180deg, #4EE566 0%, #2ACA57 50%, #15A640 100%);
}
.vt-sidebar-gradient {
  background: linear-gradient(180deg, #075E54 0%, #054A42 100%);
}

/* ============================================================
   可读性规则（重要）：
   · #25D366 上放白色文字仅限 ≥18px 加粗或图形元素；
     小号正文场景改用 --vt-green-600/700 做底色。
   · 浅色底上的绿色文字一律用 --vt-green-700（对比度 4.6:1，AA 达标）。
   · 深色底（#0A201C）上的绿色文字用 --vt-green-300/400。
   · 绿色占比遵循 60-30-10：中性色 60%，深青 30%，品牌绿 ≤10% 只做行动点。
   ============================================================ */