/* ============================================================
   深信服品牌设计令牌
   色值来源：www.sangfor.com.cn 官方样式表 CSS 变量 + 官方 logo SVG 取色
   ============================================================ */

:root {
  /* —— 品牌原色（官方权威值，勿随意改动）—— */
  --sf-blue:          #006CD9;  /* --theme-primary-blue  主蓝 */
  --sf-navy:          #003466;  /* --theme-primary-color 藏青 */
  --sf-green:         #53C700;  /* --theme-primary-green 品牌绿 */
  --sf-blue-2:        #669ACC;  /* --theme-secondary-color 辅助蓝 */
  --sf-blue-bright:   #1684E3;  /* 官网高频亮蓝（hover 态）*/
  --sf-blue-pale:     #DEECF9;  /* 官网高频浅蓝底 */
  /* logo 取色 */
  --sf-logo-blue:     #0B318F;
  --sf-logo-navy:     #152754;
  --sf-logo-green:    #6FBA2C;
  --sf-logo-green-d:  #18943B;
  --sf-logo-cyan:     #7ECEF4;

  /* —— 语义色 —— */
  --brand:            var(--sf-blue);
  --brand-hover:      var(--sf-blue-bright);
  --brand-active:     #0059B2;
  --brand-soft:       var(--sf-blue-pale);
  --brand-ink:        var(--sf-navy);
  --accent:           var(--sf-logo-green-d);

  /* 品牌渐变：呼应 logo 缎带的蓝→绿过渡 */
  --brand-gradient:   linear-gradient(100deg, var(--sf-navy) 0%, var(--sf-blue) 42%, var(--sf-logo-green) 100%);
  --brand-gradient-soft: linear-gradient(100deg, rgba(0,108,217,.10), rgba(111,186,44,.10));

  /* —— 中性色阶（浅色主题）—— */
  --bg:               #F5F8FC;
  --bg-elevated:      #FFFFFF;
  --surface:          #FFFFFF;
  --surface-2:        #F0F4FA;
  --surface-3:        #E8EFF8;
  --border:           #DCE4EF;
  --border-strong:    #C3D0E2;
  --text:             #16202E;
  --text-2:           #47566B;
  --text-3:           #7A8798;
  --text-invert:      #FFFFFF;

  --danger:           #D93026;
  --danger-soft:      #FDECEA;
  --warn:             #D98800;
  --success:          #18943B;

  /* —— 排版 —— */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* —— 形状与阴影 —— */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px;
  --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16,32,54,.06), 0 1px 3px rgba(16,32,54,.04);
  --shadow-2: 0 2px 8px rgba(16,32,54,.07), 0 1px 3px rgba(16,32,54,.05);
  --shadow-3: 0 8px 28px rgba(16,32,54,.10), 0 2px 8px rgba(16,32,54,.06);
  --shadow-brand: 0 4px 14px rgba(0,108,217,.24);

  --rail-w: 268px;
  --measure: 812px;          /* 正文最佳阅读宽度 */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* —— 深色主题 —— */
:root[data-theme="dark"] {
  --brand:            #3B93EE;
  --brand-hover:      #5AA7F5;
  --brand-active:     #2A7FD6;
  --brand-soft:       rgba(59,147,238,.16);
  --brand-ink:        #A9CDF3;
  --accent:           #4FC46A;

  --brand-gradient:   linear-gradient(100deg, #0A4C8C 0%, #1E7FD6 45%, #5FB831 100%);
  --brand-gradient-soft: linear-gradient(100deg, rgba(59,147,238,.16), rgba(95,184,49,.14));

  --bg:               #0C1420;
  --bg-elevated:      #121C2B;
  --surface:          #131E2E;
  --surface-2:        #18253A;
  --surface-3:        #1F2E46;
  --border:           #223146;
  --border-strong:    #2F4159;
  --text:             #E7EEF8;
  --text-2:           #A9B8CC;
  --text-3:           #74859B;

  --danger:           #FF6B5E;
  --danger-soft:      rgba(255,107,94,.14);
  --warn:             #E8A33D;
  --success:          #4FC46A;

  --shadow-1: 0 1px 2px rgba(0,0,0,.36);
  --shadow-2: 0 2px 10px rgba(0,0,0,.42);
  --shadow-3: 0 10px 34px rgba(0,0,0,.52);
  --shadow-brand: 0 4px 16px rgba(59,147,238,.30);
}