/**
 * ============================================================================
 * Design Tokens - 项目级设计令牌系统
 * ============================================================================
 * 基于 Bootstrap 5 断点扩展，增加 xxs 和 xs 断点支持移动端
 * 
 * 断点系统:
 *   xxs: < 375px
 *   xs:  >= 375px
 *   sm:  >= 576px  (Bootstrap 默认)
 *   md:  >= 768px  (Bootstrap 默认)
 *   lg:  >= 992px  (Bootstrap 默认)
 *   xl:  >= 1200px (Bootstrap 默认)
 * ============================================================================
 */

/* ==========================================================================
   1. 基础变量 (xxs 断点 - 默认值，< 375px)
   ========================================================================== */
:root {
   /* ----------------------------------------------------------
       1.1 断点值 (供 JavaScript 使用)
       ---------------------------------------------------------- */
   --breakpoint-xxs: 0;
   --breakpoint-xs: 375px;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;

   /* ----------------------------------------------------------
       1.2 字体大小 (xxs 默认值)
       ---------------------------------------------------------- */
   --font-sm: 9px;
   --font-base: 11px;
   --font-lg: 16px;

   /* ----------------------------------------------------------
       1.3 品牌色
       ---------------------------------------------------------- */
   --color-primary: #003d79;
   --color-primary-light: #0056b3;

   /* ----------------------------------------------------------
       1.4 语义色
       ---------------------------------------------------------- */
   --color-success: #198754;
   --color-success-light: #d4edda;
   --color-warning: #c97600;
   --color-warning-light: #fff3cd;
   --color-danger: #dc3545;
   --color-danger-light: #f8d7da;

   /* ----------------------------------------------------------
       1.5 中性色 (Gray Scale)
       ---------------------------------------------------------- */
   --color-gray-50: #f9fafb;
   --color-gray-100: #f3f4f6;
   --color-gray-200: #e5e7eb;
   --color-gray-300: #d1d5db;
   --color-gray-400: #9ca3af;
   --color-gray-500: #6b7280;
   --color-gray-600: #4b5563;
   --color-gray-700: #374151;
   --color-gray-800: #1f2937;
   --color-gray-900: #111827;

   /* ----------------------------------------------------------
       1.6 语义别名 - 背景色
       ---------------------------------------------------------- */
   --bg-body: var(--color-gray-50);
   --bg-card: #ffffff;
   --bg-hover: var(--color-gray-100);

   /* ----------------------------------------------------------
       1.7 语义别名 - 边框色
       ---------------------------------------------------------- */
   --border-light: var(--color-gray-200);
   --border-default: var(--color-gray-300);

   /* ----------------------------------------------------------
       1.8 语义别名 - 文字色
       ---------------------------------------------------------- */
   --text-primary: var(--color-gray-900);
   --text-secondary: var(--color-gray-700);
   --text-muted: var(--color-gray-500);

   /* ----------------------------------------------------------
       1.9 间距 (Spacing)
       ---------------------------------------------------------- */
   --space-xs: 4px;
   --space-sm: 8px;
   --space-md: 16px;
   --space-lg: 24px;
   --space-xl: 32px;

   /* ----------------------------------------------------------
       1.10 圆角 (Radius)
       ---------------------------------------------------------- */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-full: 9999px;

   /* ----------------------------------------------------------
       1.11 阴影 (Shadow)
       ---------------------------------------------------------- */
   --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);
}

/* ==========================================================================
   2. 响应式字体大小 - xs 断点 (>= 375px)
   ========================================================================== */
@media (min-width: 375px) {
   :root {
      --font-sm: 10px;
      --font-base: 12px;
      --font-lg: 18px;
   }
}

/* ==========================================================================
   3. 响应式字体大小 - sm 断点 (>= 576px)
   ========================================================================== */
@media (min-width: 576px) {
   :root {
      --font-sm: 11px;
      --font-base: 13px;
      --font-lg: 20px;
   }
}

/* ==========================================================================
   4. 响应式字体大小 - md 断点 (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
   :root {
      --font-sm: 12px;
      --font-base: 14px;
      --font-lg: 22px;
   }
}

/* ==========================================================================
   5. 响应式字体大小 - lg 断点 (>= 992px)
   ========================================================================== */
@media (min-width: 992px) {
   :root {
      --font-sm: 12px;
      --font-base: 15px;
      --font-lg: 24px;
   }
}

/* ==========================================================================
   6. 响应式字体大小 - xl 断点 (>= 1200px)
   ========================================================================== */
@media (min-width: 1200px) {
   :root {
      --font-sm: 13px;
      --font-base: 16px;
      --font-lg: 26px;
   }
}