/* ========================================
   拓诺科技 — 统一设计令牌 (Design Tokens)
   所有页面必须引用此文件作为基础样式变量
   ======================================== */

:root {
    /* 颜色方案固定浅色（2026-11-03）：全站无夜间模式设计，未声明时深色系统的
       浏览器会把原生表单/表格/滚动条自动渲染成深色（用户管理/登录日志最显形），
       显式声明 only light 后浏览器不再做任何深色适配 */
    color-scheme: only light;

    /* 品牌色 */
    --color-primary: #3B82F6;
    --color-primary-dark: #2563EB;
    --color-primary-light: #DBEAFE;
    --color-primary-alpha: rgba(59, 130, 246, 0.15);

    /* 语义色 */
    --color-success: #10B981;
    --color-success-dark: #059669;
    --color-warning: #F59E0B;
    --color-warning-dark: #D97706;
    --color-danger: #EF4444;
    --color-danger-dark: #DC2626;

    /* 背景 */
    --bg-base: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --bg-tertiary: #F3F4F6;
    --bg-dark: #0F172A;
    --bg-dark-card: #1E293B;
    --bg-dark-elevated: #334155;

    /* 文字 */
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;
    --text-inverse: #F1F5F9;

    /* 边框与阴影 */
    --border-color: #E2E8F0;
    --border-dark: #334155;
    --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 -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* 圆角 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* 导航 */
    --nav-rail-width: 72px;
    --sidebar-width: 280px;

    /* ===== 兼容旧变量名（向后兼容，逐步废弃） ===== */
    --primary-color: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --primary-light: var(--color-primary-light);
    --accent-color: var(--color-success);
    --accent-orange: var(--color-warning);
    --bg-primary: var(--bg-base);
    --hover-color: #F1F5F9;
    --primary: var(--color-primary);
    --primary-l: var(--color-primary-alpha);
    --bg: var(--bg-base);
    --bg2: var(--bg-secondary);
    --bg3: var(--bg-tertiary);
    --text: var(--text-primary);
    --text2: var(--text-secondary);
    --border: var(--border-color);
}

/* 暗色模式 */
[data-theme="dark"] {
    --bg-base: #1E293B;
    --bg-secondary: #0F172A;
    --bg-tertiary: #1E293B;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --border-color: #334155;
    --hover-color: #334155;

    /* 兼容旧变量名 */
    --bg-primary: var(--bg-base);
    --bg: var(--bg-secondary);
    --bg2: var(--bg-base);
    --bg3: var(--bg-tertiary);
    --text: var(--text-primary);
    --text2: var(--text-secondary);
    --border: var(--border-color);
}

/* ===== 骨架屏 / 加载状态 ===== */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md, 12px);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* spinner旋转动画 */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== z-index 层级系统 ===== */
:root {
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 50;
    --z-modal: 80;
    --z-nav-rail: 100;
    --z-toast: 200;
}

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