/**
 * Design Tokens - 供应商门户设计令牌
 * 统一的设计变量定义，确保跨页面一致性
 */

:root {
    /* ========== 品牌色系 ========== */
    /* 主色调 - WCAG AA 合规 (白字对比度 ≥ 4.5:1) */
    --primary: #047857;
    /* 对比度 ≈ 5.48:1，符合 AA */
    --primary-hover: #065f46;
    /* 悬停态，更深 */
    --primary-light: rgba(4, 120, 87, 0.1);
    /* 浅色背景 */
    --primary-ring: rgba(4, 120, 87, 0.3);
    /* focus ring */

    /* ========== 语义色 ========== */
    --success: #047857;
    /* 成功 - 与主色一致 */
    --success-bg: #ecfdf5;
    --error: #dc2626;
    /* 错误 - 调整后对比度 ≈ 4.83:1 */
    --error-bg: #fef2f2;
    --warning: #d97706;
    /* 警告 - 调整后对比度 ≈ 3.19:1 */
    --warning-bg: #fffbeb;
    --info: #2563eb;
    /* 信息 */
    --info-bg: #eff6ff;

    /* ========== 中性色 ========== */
    --text-main: #111827;
    /* 主文字 - 加深以提升对比度 */
    --text-secondary: #4b5563;
    /* 次要文字 */
    --text-muted: #6b7280;
    /* 辅助文字 */
    --text-placeholder: #9ca3af;
    /* 占位符 */
    --text-on-primary: #ffffff;
    /* 深色背景上的文字 - 纯白 */

    --bg-page: #f3f4f6;
    /* 页面背景 */
    --bg-card: #ffffff;
    /* 卡片背景 */
    --bg-elevated: #ffffff;
    /* 浮层背景 */
    --bg-hover: #f9fafb;
    /* 悬停背景 */

    --border-light: #e5e7eb;
    /* 浅边框 */
    --border-default: #d1d5db;
    /* 默认边框 */
    --border-dark: #9ca3af;
    /* 深边框 */

    /* ========== 兼容性别名 (供旧代码使用) ========== */
    --white: #ffffff;
    --bg: #f3f4f6;
    --border: #e5e7eb;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    /* ========== 阴影系统 ========== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ========== 圆角 ========== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ========== 间距 ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;

    /* ========== 字体 ========== */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

    /* 字号 */
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;

    /* 行高 */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* ========== 动画 ========== */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-out: cubic-bezier(0, 0, 0.2, 1);

    /* ========== Z-Index 层级 ========== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;
}

/* ========== 深色模式支持 (预留) ========== */
@media (prefers-color-scheme: dark) {
    :root {
        /* 深色模式变量 - 待实现 */
        --dark-mode-placeholder: 1;
        /* 占位符以避免空规则集 */
    }
}

/* ========== 减少动画偏好 ========== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
    }
}