/* =========================================================
   DS · Design Tokens
   全站唯一的设计令牌来源。组件只消费 --ds-*，不再直接写死颜色/尺寸。
   ========================================================= */

:root {
    /* -------- 字体 -------- */
    --ds-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC',
                    'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ds-text-xs: 11px;
    --ds-text-sm: 12px;
    --ds-text-base: 13px;
    --ds-text-body: 13px;
    --ds-text-body-sm: 12.5px;
    --ds-text-caption: 12px;
    --ds-text-md: 14px;
    --ds-text-lg: 16px;
    --ds-text-xl: 20px;
    --ds-text-2xl: 24px;
    --ds-text-3xl: 28px;

    /* 标题层级 */
    --ds-text-h1: var(--ds-text-3xl);
    --ds-text-h2: var(--ds-text-2xl);
    --ds-text-h3: var(--ds-text-xl);
    --ds-text-h4: var(--ds-text-lg);

    --ds-leading-tight: 1.2;
    --ds-leading-snug: 1.35;
    --ds-leading-normal: 1.5;
    --ds-leading-relaxed: 1.65;

    --ds-font-weight-regular: 400;
    --ds-font-weight-medium: 500;
    --ds-font-weight-semibold: 600;
    --ds-font-weight-bold: 700;

    --ds-tracking-tight: -0.02em;
    --ds-tracking-normal: 0;
    --ds-tracking-wide: 0.02em;

    /* -------- 颜色（映射现有主题令牌，便于统一换肤） -------- */
    --ds-color-bg: var(--color-bg);
    --ds-color-surface: var(--color-card);
    --ds-color-surface-raised: var(--color-bg-raised);
    --ds-color-text: var(--color-text);
    --ds-color-text-secondary: var(--color-text-secondary);
    --ds-color-text-tertiary: var(--color-text-tertiary);
    --ds-color-border: var(--color-border);
    --ds-color-border-light: var(--color-border-light);
    --ds-color-border-strong: var(--color-border-strong);
    --ds-color-primary: var(--color-primary);
    --ds-color-primary-hover: var(--color-primary-hover);
    --ds-color-primary-active: var(--color-primary-active);
    --ds-color-primary-soft: var(--color-primary-bg);
    --ds-color-success: var(--color-success);
    --ds-color-success-soft: var(--color-success-bg);
    --ds-color-warning: var(--color-warning);
    --ds-color-warning-soft: var(--color-warning-bg);
    --ds-color-danger: var(--color-danger);
    --ds-color-danger-soft: var(--color-danger-bg);
    --ds-color-info: var(--color-info);
    --ds-color-info-soft: var(--color-info-bg);

    /* 状态色补充 */
    --ds-color-disabled-bg: var(--color-bg);
    --ds-color-disabled-border: var(--color-border);
    --ds-color-disabled-text: var(--color-text-tertiary);
    --ds-color-hover-bg: var(--color-sidebar-hover);
    --ds-color-active-bg: var(--color-primary-bg);

    /* 品牌红：破坏性操作 */
    --ds-color-brand-red: #f73b6a;
    --ds-color-brand-red-soft: rgba(247, 59, 106, 0.08);

    /* -------- 语义文字色 -------- */
    --ds-text-primary: var(--color-text);
    --ds-text-secondary: var(--color-text-secondary);
    --ds-text-tertiary: var(--color-text-tertiary);
    --ds-text-disabled: var(--color-text-tertiary);
    --ds-text-inverse: #ffffff;
    --ds-text-link: var(--color-primary);

    /* -------- 控件 -------- */
    --ds-control-bg: var(--color-input-bg);
    --ds-control-border: var(--color-input-border);
    --ds-control-border-hover: var(--color-border-strong);
    --ds-control-placeholder: var(--color-text-tertiary);
    --ds-control-disabled-bg: var(--color-bg);
    --ds-control-disabled-text: var(--color-text-tertiary);
    --ds-focus-ring: 0 0 0 3px var(--color-primary-bg);

    /* -------- 按钮 -------- */
    --ds-btn-h-sm: 28px;
    --ds-btn-h: 32px;
    --ds-btn-h-lg: 40px;
    --ds-btn-px-sm: 10px;
    --ds-btn-px: 12px;
    --ds-btn-px-lg: 16px;
    --ds-btn-gap: 6px;
    --ds-btn-radius: var(--ds-radius-sm);
    --ds-btn-font-size: 12.5px;
    --ds-btn-font-size-sm: 12px;
    --ds-btn-font-size-lg: 13px;
    --ds-btn-font-weight: var(--ds-font-weight-medium);
    --ds-btn-disabled-opacity: 0.45;

    --ds-btn-primary-bg: var(--color-primary);
    --ds-btn-primary-hover-bg: var(--color-primary-hover);
    --ds-btn-primary-active-bg: var(--color-primary-active);
    --ds-btn-primary-text: var(--ds-text-inverse);
    --ds-btn-primary-border: var(--color-primary);

    --ds-btn-secondary-bg: var(--ds-color-surface);
    --ds-btn-secondary-border: var(--ds-color-border);
    --ds-btn-secondary-text: var(--ds-text-secondary);
    --ds-btn-secondary-hover-bg: var(--ds-color-primary-soft);
    --ds-btn-secondary-hover-border: var(--color-primary-border);
    --ds-btn-secondary-hover-text: var(--ds-color-primary);

    --ds-btn-ghost-text: var(--ds-text-secondary);
    --ds-btn-ghost-hover-bg: var(--color-sidebar-hover);
    --ds-btn-ghost-hover-text: var(--ds-text-primary);

    --ds-btn-danger-bg: var(--ds-color-surface);
    --ds-btn-danger-border: rgba(247, 59, 106, 0.35);
    --ds-btn-danger-text: var(--ds-color-brand-red);
    --ds-btn-danger-hover-bg: var(--ds-color-brand-red-soft);
    --ds-btn-danger-hover-border: var(--ds-color-brand-red);

    --ds-btn-success-text: #15803d;
    --ds-btn-warning-text: #b45309;

    /* -------- 表格 / 列表 -------- */
    --ds-table-font-size: var(--ds-text-base);
    --ds-table-head-font-size: var(--ds-text-sm);
    --ds-table-head-font-weight: var(--ds-font-weight-semibold);
    --ds-table-head-color: var(--ds-text-tertiary);
    --ds-table-row-hover: var(--color-table-hover);
    --ds-table-selected-bg: var(--color-primary-bg);

    /* -------- 标签 / 页签 -------- */
    --ds-badge-font-size: var(--ds-text-xs);
    --ds-badge-font-weight: var(--ds-font-weight-medium);
    --ds-tab-font-size: 12.5px;
    --ds-tab-font-weight: var(--ds-font-weight-medium);

    /* -------- 间距（4pt） -------- */
    --ds-space-0: 0;
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;

    /* 栅格与页面边距 */
    --ds-grid-unit: 4px;
    --ds-grid-unit-lg: 8px;
    --ds-page-padding: 24px;
    --ds-page-gutter: 10px;
    --ds-component-gap: 8px;
    --ds-form-gap: 16px;

    /* -------- 圆角 -------- */
    --ds-radius-xs: 6px;
    --ds-radius-sm: 8px;
    --ds-radius-md: 10px;
    --ds-radius-lg: 14px;
    --ds-radius-xl: 18px;
    --ds-radius-full: 9999px;

    /* 组件圆角别名 */
    --ds-radius-button: var(--ds-radius-sm);
    --ds-radius-input: var(--ds-radius-xs);
    --ds-radius-card: var(--ds-radius-lg);
    --ds-radius-modal: var(--ds-radius-xl);
    --ds-radius-badge: var(--ds-radius-full);

    /* -------- 边框 -------- */
    --ds-border-width: 1px;
    --ds-border-width-strong: 2px;
    --ds-border-default: var(--ds-border-width) solid var(--ds-color-border);
    --ds-border-light: var(--ds-border-width) solid var(--ds-color-border-light);

    /* -------- 阴影 -------- */
    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --ds-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
    --ds-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.10), 0 6px 16px rgba(0, 0, 0, 0.05);

    /* 场景阴影别名 */
    --ds-shadow-card: var(--ds-shadow-sm);
    --ds-shadow-hover: var(--ds-shadow-md);
    --ds-shadow-dropdown: var(--ds-shadow-lg);
    --ds-shadow-modal: var(--ds-shadow-lg);
    --ds-shadow-toast: var(--ds-shadow-md);

    /* -------- 图标 -------- */
    --ds-icon-xs: 12px;
    --ds-icon-sm: 14px;
    --ds-icon-md: 16px;
    --ds-icon-lg: 20px;
    --ds-icon-xl: 24px;
    --ds-icon-color: currentColor;
    --ds-icon-gap: 6px;

    /* -------- 控件尺寸 -------- */
    --ds-control-h-sm: 28px;
    --ds-control-h: 32px;
    --ds-control-h-lg: 40px;
    --ds-control-h-xl: 44px;
    --ds-hit-min: 44px;

    /* -------- 响应式断点（供文档与 JS 使用） -------- */
    --ds-breakpoint-sm: 640px;
    --ds-breakpoint-md: 768px;
    --ds-breakpoint-lg: 992px;
    --ds-breakpoint-xl: 1200px;

    /* -------- 表格 -------- */
    --ds-table-head-h: 40px;
    --ds-table-row-h: 44px;
    --ds-table-cell-x: 12px;

    /* -------- 动效 -------- */
    --ds-motion-instant: 90ms;
    --ds-motion-fast: 140ms;
    --ds-motion-base: 200ms;
    --ds-motion-slow: 260ms;
    --ds-motion-slower: 420ms;
    --ds-motion-distance: 10px;
    --ds-motion-stagger: 18ms;
    --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ds-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* -------- 层级 -------- */
    --ds-z-base: 0;
    --ds-z-sticky: 10;
    --ds-z-dropdown: 1000;
    --ds-z-overlay: 1050;
    --ds-z-modal: 1060;
    --ds-z-drawer: 1070;
    --ds-z-toast: 1080;
    --ds-z-tooltip: 1090;
}

[data-theme="dark"] {
    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.24);
    --ds-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.24);
    --ds-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.48), 0 6px 16px rgba(0, 0, 0, 0.30);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ds-motion-instant: 0ms;
        --ds-motion-fast: 0ms;
        --ds-motion-base: 0ms;
        --ds-motion-slow: 0ms;
        --ds-motion-slower: 0ms;
        --ds-motion-stagger: 0ms;
    }
}