@charset "utf-8";
/* ============================================
 * tokens.css - Design Tokens
 * gdnms.com 设计令牌系统 v1.0
 * 前后台共享，所有颜色/间距/圆角/字号统一从此文件引用
 * ============================================ */

:root {
  /* === 主色调 === */
  --color-primary: #2867b0;
  --color-primary-dark: #1e4d80;
  --color-primary-light: #3a82cc;
  --color-primary-bg: #e8f0f9;

  /* === 辅助色 === */
  --color-secondary: #28b09e;
  --color-secondary-dark: #1e8a7c;
  --color-secondary-light: #3ac4b0;
  --color-secondary-bg: #e6f5f2;

  /* === 语义色 === */
  --color-success: #009688;
  --color-success-bg: #e0f5f3;
  --color-warning: #f39700;
  --color-warning-bg: #fff4e0;
  --color-danger: #ef4444;
  --color-danger-bg: #fee8e8;
  --color-info: #6b7280;
  --color-info-bg: #f3f4f6;

  /* === 中性色 === */
  --color-text: #333333;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-text-disabled: #cccccc;
  --color-text-white: #ffffff;

  /* === 背景色 === */
  --color-bg: #ffffff;
  --color-bg-body: #f4f7fb;
  --color-bg-secondary: #f5f5f5;
  --color-bg-tertiary: #f0f0f0;
  --color-bg-hover: #f8f9fa;
  --color-bg-active: #e8f0f9;

  /* === 边框色 === */
  --color-border: #dddddd;
  --color-border-light: #eeeeee;
  --color-border-dark: #dcdcdc;

  /* === 间距体系（4px基准） === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

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

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

  /* === 字重 === */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

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

  /* === 过渡 === */
  --transition-fast: 0.15s ease;
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* === z-index层级 === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-overlay: 1000;
  --z-modal: 1100;
  --z-popover: 1200;
  --z-toast: 1300;

  /* === 布局 === */
  --header-height: 100px;
  --sidebar-width: 220px;
  --container-width: 1200px;
  --container-min-width: 1200px;

  /* === 后台侧边栏 === */
  --sidebar-bg: #2c3e50;
  --sidebar-bg-dark: #1a2733;
  --sidebar-bg-sub: #233444;
  --sidebar-text: #b8c7ce;
  --sidebar-text-active: #ffffff;
  --sidebar-text-sub: #8aa4af;
  --sidebar-accent: #3B82F6;
}

/* === 响应式断点 === */
/* 移动端优先，以下断点为PC端扩展 */
/* 断点契约(与 base.css/responsive.css 对齐): mobile(<=767) / tablet(768-1024) / desktop(1025-1400) / wide(>=1401) */

/* ============================================
 * tokens.css - Extended for Frontend v1.1
 * 追加前台专用变量，不覆盖现有变量
 * 2026-07-29 Phase 1
 * ============================================ */

:root {
  /* 前台主色调别名（与已有变量映射） */
  --pc-primary: var(--color-primary);
  --pc-primary-dark: var(--color-primary-dark);
  --pc-primary-light: var(--color-primary-light);
  --mobile-primary: var(--color-primary);
  
  /* 文字色阶快捷别名 */
  --text-heading: var(--color-text);
  --text-body: var(--color-text-secondary);
  --text-hint: var(--color-text-muted);
  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-dark);
  
  /* 间距快捷别名 */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-3);
  --space-lg: var(--space-4);
  --space-xl: var(--space-6);
  --space-xxl: var(--space-8);
  
  /* 圆角快捷别名 */
  --radius-sm: var(--space-1);
  --radius-md: var(--space-2);
  --radius-lg: var(--space-3);
  --radius-xl: var(--space-4);
  
  /* 响应式断点变量（实际值） */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-desktop: 1200px;
  --bp-wide: 1400px;
}