﻿/* =========================================================
   玄武盾网络验证系统 · 设计令牌
   全局 CSS 变量,所有颜色 / 间距 / 圆角 / 阴影 / 字号在此声明
   ========================================================= */

:root,
[data-theme="light"] {
  /* —— 颜色 · 主品牌 —— */
  --xw-primary:        #1456F0;
  --xw-primary-hover:  #2563EB;
  --xw-primary-soft:   #EDF3FF;
  --xw-primary-ring:   rgba(20,86,240,.28);

  /* —— 颜色 · 中性 —— */
  --xw-bg:             #F8FAFC;
  --xw-surface:        #FFFFFF;
  --xw-surface-2:      #F1F5F9;
  --xw-surface-hover:  #F8FAFC;
  --xw-border:         #E5E7EB;
  --xw-border-strong:  #D7DCE3;

  /* —— 颜色 · 文字 —— */
  --xw-text:           #18181B;
  --xw-text-muted:     #667085;
  --xw-text-soft:      #8E8E93;
  --xw-text-invert:    #FFFFFF;

  /* —— 颜色 · 语义 —— */
  --xw-success:        #168554;
  --xw-success-soft:   #E8F8EF;
  --xw-success-text:   #137346;
  --xw-warning:        #F59E0B;
  --xw-warning-soft:   #FEF3C7;
  --xw-warning-text:   #B45309;
  --xw-danger:         #EF4444;
  --xw-danger-soft:    #FFF0F2;
  --xw-danger-text:    #A93243;
  --xw-info:           #3B82F6;
  --xw-info-soft:      #DBEAFE;
  --xw-info-text:      #1D4ED8;

  /* —— 颜色 · 侧栏激活态 —— */
  --xw-side-active-bg: #EDF3FF;
  --xw-side-active-fg: #2563EB;
  --xw-side-active-bar: #1456F0;

  /* —— 阴影 —— */
  --xw-shadow-xs:  0 1px 2px rgba(44,30,116,.04);
  --xw-shadow-sm:  0 1px 2px rgba(44,30,116,.04), 0 1px 3px rgba(44,30,116,.06);
  --xw-shadow-md:  0 4px 6px -1px rgba(44,30,116,.06), 0 2px 4px -2px rgba(44,30,116,.04);
  --xw-shadow-lg:  0 10px 15px -3px rgba(44,30,116,.08), 0 4px 6px -4px rgba(44,30,116,.04);
  --xw-shadow-ring:0 0 0 3px var(--xw-primary-ring);
  --xw-focus-ring: 0 0 0 3px var(--xw-primary-ring);
  --xw-danger-ring: rgba(239,68,68,.28);
  --xw-danger-focus-ring: 0 0 0 3px var(--xw-danger-ring);

  /* —— 圆角 —— */
  --xw-radius-xs:   4px;
  --xw-radius-sm:   6px;
  --xw-radius-md:   11px;
  --xw-radius-lg:   16px;
  --xw-radius-xl:   24px;
  --xw-radius-pill: 999px;

  /* Shared interactive control geometry. */
  --xw-control-h:    40px;
  --xw-control-h-sm: 32px;
  --xw-control-h-lg: 44px;
  --xw-control-radius: var(--xw-radius-md);

  /* —— 间距(8dp 节奏)—— */
  --xw-space-1:  4px;
  --xw-space-2:  8px;
  --xw-space-3:  12px;
  --xw-space-4:  16px;
  --xw-space-5:  20px;
  --xw-space-6:  24px;
  --xw-space-8:  32px;
  --xw-space-10: 40px;
  --xw-space-12: 48px;
  --xw-space-16: 64px;

  /* —— 字号 —— */
  --xw-text-xs:   12px;
  --xw-text-sm:   13px;
  --xw-text-base: 14px;
  --xw-text-md:   15px;
  --xw-text-lg:   16px;
  --xw-text-xl:   18px;
  --xw-text-2xl:  20px;
  --xw-text-3xl:  24px;
  --xw-text-4xl:  30px;

  /* —— 行高 —— */
  --xw-leading-tight: 1.25;
  --xw-leading-snug:  1.4;
  --xw-leading-base:  1.55;
  --xw-leading-loose: 1.75;

  /* —— 字重 —— */
  --xw-weight-normal:   400;
  --xw-weight-medium:   500;
  --xw-weight-semibold: 600;
  --xw-weight-bold:     700;

  /* —— 字体栈 —— */
  --xw-font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
                   "Helvetica Neue", Arial, sans-serif;
  --xw-font-cjk:   "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC",
                   "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  --xw-font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* —— 布局尺寸 —— */
  --xw-side-w:   240px;
  --xw-topbar-h: 56px;
  --xw-content-max: 1280px;
  --xw-drawer-sm: 480px;
  --xw-drawer-md: 680px;
  --xw-drawer-lg: 760px;
  --xw-drawer-mobile: 100vw;

  /* —— 动效 —— */
  --xw-ease:    cubic-bezier(.2,.7,.2,1);
  --xw-dur-xs:  120ms;
  --xw-dur-sm:  180ms;
  --xw-dur-md:  240ms;

  /* —— 层级 —— */
  --xw-z-side:   1030;
  --xw-z-topbar: 1020;
  --xw-z-modal:  1050;
  --xw-z-toast:  1080;
}

/* —— 暗色主题 —— */
[data-theme="dark"] {
  --xw-bg:             #0B1220;
  --xw-surface:        #111827;
  --xw-surface-2:      #1F2937;
  --xw-surface-hover:  #1A2333;
  --xw-border:         #1F2937;
  --xw-border-strong:  #334155;

  --xw-text:           #E5E7EB;
  --xw-text-muted:     #8E8E93;
  --xw-text-soft:      #667085;
  --xw-text-invert:    #18181B;

  --xw-primary-soft:   rgba(99,102,241,.18);
  --xw-success-soft:   rgba(16,185,129,.16);
  --xw-warning-soft:   rgba(245,158,11,.16);
  --xw-danger-soft:    rgba(239,68,68,.16);
  --xw-info-soft:      rgba(59,130,246,.16);

  --xw-success-text:   #34D399;
  --xw-warning-text:   #FBBF24;
  --xw-danger-text:    #F87171;
  --xw-info-text:      #60A5FA;

  --xw-side-active-bg: #1456F0;
  --xw-side-active-fg: #FFFFFF;

  --xw-shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --xw-shadow-md:  0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
}

/* —— 自动模式:跟随系统 —— */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --xw-bg:             #0B1220;
    --xw-surface:        #111827;
    --xw-surface-2:      #1F2937;
    --xw-surface-hover:  #1A2333;
    --xw-border:         #1F2937;
    --xw-border-strong:  #334155;
    --xw-text:           #E5E7EB;
    --xw-text-muted:     #8E8E93;
    --xw-text-soft:      #667085;
    --xw-text-invert:    #18181B;
    --xw-primary-soft:   rgba(99,102,241,.18);
    --xw-success-soft:   rgba(16,185,129,.16);
    --xw-warning-soft:   rgba(245,158,11,.16);
    --xw-danger-soft:    rgba(239,68,68,.16);
    --xw-info-soft:      rgba(59,130,246,.16);
    --xw-success-text:   #34D399;
    --xw-warning-text:   #FBBF24;
    --xw-danger-text:    #F87171;
    --xw-info-text:      #60A5FA;
    --xw-side-active-bg: #1456F0;
    --xw-side-active-fg: #FFFFFF;
  }
}

/* Unified MiniMax is intentionally light-first on every product surface.
   Keep legacy theme attributes harmless instead of maintaining a second UI. */
[data-theme="dark"],
:root:not([data-theme]) {
  color-scheme: light;
  --xw-bg:#F8FAFC;
  --xw-surface:#FFFFFF;
  --xw-surface-2:#F8FAFC;
  --xw-surface-hover:#FAFCFF;
  --xw-border:#E5E7EB;
  --xw-border-strong:#D7DCE3;
  --xw-text:#18181B;
  --xw-text-muted:#667085;
  --xw-text-soft:#8E8E93;
  --xw-text-invert:#FFFFFF;
  --xw-primary:#1456F0;
  --xw-primary-hover:#2563EB;
  --xw-primary-soft:#EDF3FF;
  --xw-side-active-bg:#EDF3FF;
  --xw-side-active-fg:#1456F0;
  --xw-side-active-bar:#1456F0;
  --xw-shadow-sm:0 6px 16px rgba(44,30,116,.06);
  --xw-shadow-md:0 14px 34px -10px rgba(44,30,116,.18);
}

