/**
 * 123ONE Design Tokens
 * 完整的设计令牌体系。所有组件样式引用此处的 CSS 变量。
 * @package 123ONE
 * @since   1.0.34
 */

/* ============================================================
   一、颜色 — 语义化 3 层
   ============================================================ */
:root {
  /* 背景层 */
  --dsd-bg:       #f6f7fb;
  --dsd-panel:    #ffffff;
  --dsd-panel-2:  #fbfbfe;

  /* 边框层 */
  --dsd-line:       #e7e8ec;
  --dsd-line-strong:#dadce2;

  /* 文字层 */
  --dsd-ink:       #1f2430;
  --dsd-ink-600:   #454b57;
  --dsd-ink-400:   #8a909c;
  --dsd-ink-200:   #bcc0c8;

  /* 主色 */
  --dsd-accent:      #4F6EF7;
  --dsd-accent-2:    #3a56d4;
  --dsd-accent-soft: #eef0ff;

  /* 语义色 */
  --dsd-ok:          #0f9d58;
  --dsd-ok-bg:       #ecfdf5;
  --dsd-ok-line:     #a7f3d0;
  --dsd-warn:        #f59e0b;
  --dsd-warn-bg:     #fef3c7;
  --dsd-warn-line:   #fde68a;
  --dsd-bad:         #e23b5a;
  --dsd-bad-bg:      #fff5f5;
  --dsd-bad-line:    #fecaca;
  --dsd-paid:        #f59e0b;
  --dsd-paid-bg:     #fff6e8;

  /* 兼容旧变量 alias */
  --bg:         var(--dsd-bg);
  --panel:      var(--dsd-panel);
  --panel-2:    var(--dsd-panel-2);
  --line:       var(--dsd-line);
  --line-strong:var(--dsd-line-strong);
  --ink:        var(--dsd-ink);
  --ink-600:    var(--dsd-ink-600);
  --ink-400:    var(--dsd-ink-400);
  --accent:     var(--dsd-accent);
  --accent-2:   var(--dsd-accent-2);
  --accent-soft: var(--dsd-accent-soft);
  --ok:         var(--dsd-ok);
  --warn:       var(--dsd-warn);
  --bad:        var(--dsd-bad);
  --paid:       var(--dsd-paid);
  --paid-bg:    var(--dsd-paid-bg);
  --ok-bg:      var(--dsd-ok-bg);
  --ok-border:  var(--dsd-ok-line);
  --bad-bg:     var(--dsd-bad-bg);
  --bad-border: var(--dsd-bad-line);
  --warn-bg:    var(--dsd-warn-bg);
  --warn-border:var(--dsd-warn-line);
}

/* ============================================================
   二、间距 — 4px 基准 8 级
   ============================================================ */
:root {
  --dsd-space-1: 4px;
  --dsd-space-2: 8px;
  --dsd-space-3: 12px;
  --dsd-space-4: 16px;
  --dsd-space-5: 24px;
  --dsd-space-6: 32px;
  --dsd-space-7: 48px;
  --dsd-space-8: 64px;
  /* 别名 */
  --s1: var(--dsd-space-1); --s2: var(--dsd-space-2);
  --s3: var(--dsd-space-3); --s4: var(--dsd-space-4);
  --s5: var(--dsd-space-5); --s6: var(--dsd-space-6);
  --s7: var(--dsd-space-7); --s8: var(--dsd-space-8);
}

/* ============================================================
   三、圆角 — 9 级
   ============================================================ */
:root {
  --dsd-radius-1: 4px;   /* 标签/徽章 */
  --dsd-radius-2: 6px;   /* 内部小元素 */
  --dsd-radius-3: 8px;   /* 按钮/输入框 */
  --dsd-radius-4: 10px;  /* 弹窗输入框/分组 */
  --dsd-radius-5: 12px;  /* 卡片 */
  --dsd-radius-6: 14px;  /* 弹窗 */
  --dsd-radius-7: 16px;  /* 大卡片 */
  --dsd-radius-8: 24px;  /* Hero区 */
  --dsd-radius-full: 999px; /* 药丸 */
  /* 别名 */
  --r0: var(--dsd-radius-1); --r1: var(--dsd-radius-2);
  --r2: var(--dsd-radius-3); --r3: var(--dsd-radius-4);
  --r4: var(--dsd-radius-5); --r5: var(--dsd-radius-6);
  --r7: var(--dsd-radius-7); --r8: var(--dsd-radius-8);
  --r-full: var(--dsd-radius-full);
}

/* ============================================================
   四、阴影 — 4 级
   ============================================================ */
:root {
  --dsd-shadow-sm: 0 2px 8px  rgba(20,24,40,.04);
  --dsd-shadow-md: 0 10px 30px rgba(20,24,40,.08);
  --dsd-shadow-lg: 0 18px 44px rgba(20,24,40,.14);
  --dsd-shadow-xl: 0 28px 60px rgba(20,24,40,.20);
  --shadow-sm: var(--dsd-shadow-sm); --shadow: var(--dsd-shadow-md);
  --shadow-hi: var(--dsd-shadow-lg); --shadow-xl: var(--dsd-shadow-xl);
}

/* ============================================================
   五、字体
   ============================================================ */
:root {
  --dsd-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
  --dsd-font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;
  --font:  var(--dsd-font-sans);
  --mono:  var(--dsd-font-mono);

  --dsd-fs-xs: 11px; --dsd-fs-sm: 13px; --dsd-fs-md: 14px;
  --dsd-fs-lg: 15px; --dsd-fs-xl: 16px; --dsd-fs-2xl: 19px;
  --dsd-fs-3xl: 24px; --dsd-fs-4xl: 32px; --dsd-fs-5xl: 40px;

  --dsd-fw-normal: 400; --dsd-fw-medium: 500;
  --dsd-fw-semi: 600; --dsd-fw-bold: 700; --dsd-fw-xbold: 800;

  --dsd-lh-tight: 1.3; --dsd-lh-normal: 1.55; --dsd-lh-relax: 1.65;
}

/* ============================================================
   六、布局宽度
   ============================================================ */
:root {
  --dsd-wrap:     min(1600px, 100% - 32px);
  --dsd-wrap-sm:  min(960px,  100% - 32px);
  --dsd-wrap-xs:  min(860px,  100% - 32px);
  --dsd-w-article: 820px;
  --dsd-w-sidebar: 320px;
  --dsd-w-search:  680px;
  --dsd-w-modal:   500px;
  --dsd-w-modal-lg:600px;
  --dsd-w-modal-sm:460px;
  --dsd-w-modal-xs:400px;
  --dsd-w-input:   520px;
  --dsd-w-input-lg:560px;
  --wrap: var(--dsd-wrap); --wrap-sm: var(--dsd-wrap-sm);
  --wrap-xs: var(--dsd-wrap-xs); --w-article: var(--dsd-w-article);
  --w-sidebar: var(--dsd-w-sidebar); --w-search: var(--dsd-w-search);
  --w-modal: var(--dsd-w-modal); --w-modal-lg: var(--dsd-w-modal-lg);
  --w-modal-sm: var(--dsd-w-modal-sm); --w-modal-xs: var(--dsd-w-modal-xs);
  --w-input: var(--dsd-w-input); --w-input-lg: var(--dsd-w-input-lg);
}

/* ============================================================
   七、动画 + Z-index
   ============================================================ */
:root {
  --dsd-t-fast: .12s; --dsd-t-normal: .15s;
  --dsd-t-slow: .25s; --dsd-t-slower: .35s;
  --dsd-ease-out: cubic-bezier(.25,1,.5,1);

  --dsd-z-drop: 120; --dsd-z-sticky: 200;
  --dsd-z-overlay: 900; --dsd-z-modal: 1000;
  --dsd-z-toast: 1100; --dsd-z-tooltip: 1200;
}

/* ============================================================
   八、暗色模式 + 9 色主题
   ============================================================ */
body.dsd-dark {
  --dsd-bg:#0f1115; --dsd-panel:#171b23; --dsd-panel-2:#1d222c;
  --dsd-line:#272d39; --dsd-line-strong:#323a48;
  --dsd-ink:#e8eaed; --dsd-ink-600:#b9bfca; --dsd-ink-400:#7e8694;
  --dsd-accent:#7c9cff; --dsd-accent-2:#9b7bff; --dsd-accent-soft:#1a1f2b;
  --dsd-ok-bg:#052e16; --dsd-ok-line:#065f46;
  --dsd-bad-bg:#2d0b0b; --dsd-bad-line:#7f1d1d;
  --dsd-warn-bg:#2d1b0e; --dsd-warn-line:#78350f;
  --dsd-shadow-md:0 10px 30px rgba(0,0,0,.3);
  --dsd-shadow-lg:0 18px 44px rgba(0,0,0,.45);
}

/* 分类配色 */
body.dsd-theme-purple{--dsd-accent:#7048e8;--dsd-accent-2:#d6336c}
body.dsd-theme-teal{--dsd-accent:#0d9488;--dsd-accent-2:#0891b2}
body.dsd-theme-red{--dsd-accent:#e23b5a;--dsd-accent-2:#ff7a8a}
body.dsd-theme-cyan{--dsd-accent:#06b6d4;--dsd-accent-2:#2563eb}
body.dsd-theme-green{--dsd-accent:#16a34a;--dsd-accent-2:#0f9d58}
body.dsd-theme-amber{--dsd-accent:#f59e0b;--dsd-accent-2:#f97316}
body.dsd-theme-gray{--dsd-accent:#5b6472;--dsd-accent-2:#7a8290}
body.dsd-theme-mono{--dsd-accent:#7c9cff;--dsd-accent-2:#9b7bff;--dsd-bg:#0f1115;--dsd-panel:#171b23;--dsd-ink:#e8eaed}