/* ============================================
   CSS 自定义属性（设计令牌）
   适用于 58 个组件的主题系统
   单位：rem (1rem = 16px)
   命名：双横线 + 小写 + 下划线
   ============================================ */

:root {
  /* ----------------------------
     1. 响应式断点
  ---------------------------- */
  --breakpoint_xs: 0;
  --breakpoint_sm: 36rem;
  /* 576px */
  --breakpoint_md: 48rem;
  /* 768px */
  --breakpoint_lg: 62rem;
  /* 992px */
  --breakpoint_xl: 75rem;
  /* 1200px */
  --breakpoint_xxl: 87.5rem;
  /* 1400px */

  /* ----------------------------
     2. 容器最大宽度
  ---------------------------- */
  --container_max_width_sm: 33.75rem;
  /* 540px */
  --container_max_width_md: 45rem;
  /* 720px */
  --container_max_width_lg: 60rem;
  /* 960px */
  --container_max_width_xl: 71.25rem;
  /* 1140px */
  --container_max_width_xxl: 82.5rem;
  /* 1320px */

  /* ----------------------------
     3. 间距系统 (margin/padding)
     档位：none, half, xs, sm, base, md, lg, xl, xxl
  ---------------------------- */
  --spacing_none: 0;
  --spacing_half: 0.125rem;
  /* 2px */
  --spacing_xs: 0.25rem;
  /* 4px */
  --spacing_sm: 0.5rem;
  /* 8px */
  --spacing_base: 1rem;
  /* 16px */
  --spacing_md: 1.5rem;
  /* 24px */
  --spacing_lg: 2rem;
  /* 32px */
  --spacing_xl: 3rem;
  /* 48px */
  --spacing_xxl: 4rem;
  /* 64px */

  /* ----------------------------
     4. 字体系统
  ---------------------------- */
  /* 字号 */
  --font_size_xs: 0.75rem;
  /* 12px */
  --font_size_sm: 0.875rem;
  /* 14px */
  --font_size_base: 1rem;
  /* 16px */
  --font_size_lg: 1.125rem;
  /* 18px */
  --font_size_xl: 1.25rem;
  /* 20px */
  --font_size_xxl: 1.5rem;
  /* 24px */

  /* 行高 */
  --line_height_tight: 1.2;
  --line_height_base: 1.5;
  --line_height_loose: 1.8;

  /* 字重 */
  --font_weight_light: 300;
  --font_weight_normal: 400;
  --font_weight_medium: 500;
  --font_weight_semibold: 600;
  --font_weight_bold: 700;

  /* 字体家族 */
  --font_family_sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font_family_mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ----------------------------
     5. 圆角
  ---------------------------- */
  --radius_none: 0;
  --radius_half: 0.0625rem;
  --radius_xs: 0.125rem;
  --radius_sm: 0.25rem;
  --radius_base: 0.375rem;
  --radius_md: 0.5rem;
  --radius_lg: 0.75rem;
  --radius_xl: 1rem;
  --radius_round: 50%;
  --radius_pill: 9999rem;

  
  /* ----------------------------
     6. 大小
  ---------------------------- */
  /** 图标尺寸 */
  --icon_size_xs: 0.5rem;
  --icon_size_sm: 0.75rem;
  --icon_size_base: 1rem;
  --icon_size_md: 1.25rem;
  --icon_size_lg: 1.5rem;
  --icon_size_xl: 2rem;
  --icon_size_xxl_ios: 2.75rem;
  --icon_size_xxl: 3rem;
  /** 图片尺寸 */
  /** 32px 用于菜单头像 */
  --img_size_xs: 2rem;
  /** 64px 用于标签页图标 */
  --img_size_sm: 4rem;
  /** 128px 用于卡片图片 */
  --img_size_base: 8rem;
  /** 240px 用于卡片图片 */
  --img_size_md: 15rem;
  /** 320px 用于卡片图片 */
  --img_size_lg: 20rem;
  /** 640px 用于详情图片 */
  --img_size_xl: 40rem;
  /** 800px 用于详情图片 */
  --img_size_xxl: 50rem;

  /* ----------------------------
     7. 阴影
  ---------------------------- */
  --shadow_none: none;
  --shadow_sm: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
  --shadow_base: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.1), 0 0.0625rem 0.125rem -0.0625rem rgba(0, 0, 0, 0.1);
  --shadow_md: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.125rem rgba(0, 0, 0, 0.1);
  --shadow_lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.25rem rgba(0, 0, 0, 0.1);
  --shadow_xl: 0 1.25rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.1), 0 0.5rem 0.625rem -0.375rem rgba(0, 0, 0, 0.1);
  --shadow_inner: inset 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.05);

  /* ----------------------------
     8. 过渡动画
  ---------------------------- */
  --transition_fast: 0.1s ease-in-out;
  --transition_base: 0.2s ease-in-out;
  --transition_slow: 0.3s ease-in-out;
  --transition_slower: 0.5s ease-in-out;

  /* ----------------------------
     9. Z-index 层级
  ---------------------------- */
  --z_dropdown: 1000;
  --z_sticky: 1020;
  --z_fixed: 1030;
  --z_modal_backdrop: 1040;
  --z_modal: 1050;
  --z_popover: 1060;
  --z_tooltip: 1070;
  --z_toast: 1080;

  /* ----------------------------
     10. 基础颜色色板（可选，供语义变量引用）
  ---------------------------- */
  --blue_50: #e6f2ff;
  --blue_100: #b8d9ff;
  --blue_200: #8cbfe6;
  --blue_300: #5c9bd5;
  --blue_400: #2b7fc7;
  --blue_500: #0d6efd;
  --blue_600: #0a58ca;
  --blue_700: #084298;
  --blue_800: #052c65;
  --blue_900: #031633;

  --gray_50: #f8f9fa;
  --gray_100: #f2f2f2;
  --gray_200: #e9ecef;
  --gray_300: #dee2e6;
  --gray_400: #ced4da;
  --gray_500: #adb5bd;
  --gray_600: #6c757d;
  --gray_700: #495057;
  --gray_800: #343a40;
  --gray_900: #212529;

  --green_500: #198754;
  --yellow_500: #ffc107;
  --red_500: #dc3545;
  --cyan_500: #0dcaf0;
  --indigo_500: #6610f2;
  --purple_500: #6f42c1;
  --pink_500: #d63384;
  --orange_500: #fd7e14;
  --teal_500: #20c997;

  /* ----------------------------
     11. 语义颜色（主题、功能、文本、背景、边框）
  ---------------------------- */
  /* 主色 */
  --color_primary: var(--blue_500);
  --color_primary_hover: var(--blue_400);
  --color_primary_active: var(--blue_700);
  --color_primary_focus: var(--blue_400);
  --color_primary_disabled: var(--gray_500);
  --bg_primary: var(--blue_500);
  --bg_primary_hover: var(--blue_400);
  --bg_primary_active: var(--blue_700);
  --bg_primary_disabled: var(--gray_200);
  --border_primary: var(--blue_500);
  --border_primary_hover: var(--blue_400);
  --border_primary_active: var(--blue_700);
  --border_primary_focus: var(--blue_400);
  --border_primary_disabled: var(--gray_200);

  /* 次要色 */
  --color_secondary: var(--gray_600);
  --color_secondary_hover: var(--gray_400);
  --color_secondary_active: var(--gray_800);
  --bg_secondary: var(--gray_600);
  --bg_secondary_hover: var(--gray_400);
  --bg_secondary_active: var(--gray_800);

  /* 成功色 */
  --color_success: var(--green_500);
  --color_success_hover: #146c43;
  --color_success_active: #0f5132;
  --bg_success: var(--green_500);
  --bg_success_hover: #146c43;
  --border_success: var(--green_500);

  /* 警告色 */
  --color_warning: var(--yellow_500);
  --color_warning_hover: #ffca2c;
  --color_warning_active: #ffcd39;
  --bg_warning: var(--yellow_500);
  --border_warning: var(--yellow_500);

  /* 危险/错误色 */
  --color_danger: var(--red_500);
  --color_danger_hover: #bb2d3b;
  --color_danger_active: #b02a37;
  --bg_danger: var(--red_500);
  --bg_danger_hover: #bb2d3b;
  --border_danger: var(--red_500);

  /* 信息色 */
  --color_info: var(--cyan_500);
  --color_info_hover: #31d2f2;
  --bg_info: var(--cyan_500);
  --border_info: var(--cyan_500);

  /* 浅色 / 深色 */
  --color_light: var(--gray_100);
  --color_light_hover: var(--gray_200);
  --color_dark: var(--gray_900);
  --color_dark_hover: #1c1f23;

  /* 文本颜色 */
  --color_text_primary: var(--gray_900);
  --color_text_secondary: var(--gray_700);
  --color_text_tertiary: var(--gray_600);
  --color_text_placeholder: var(--gray_500);
  --color_text_disabled: var(--gray_500);
  --color_text_inverse: white;
  --color_text_link: var(--color_primary);
  --color_text_link_hover: var(--color_primary_hover);

  /* 背景颜色 */
  --bg_body: white;
  --bg_surface: white;
  --bg_surface_secondary: var(--gray_100);
  --bg_surface_tertiary: var(--gray_200);
  --bg_overlay: rgba(0, 0, 0, 0.5);
  --bg_disabled: var(--gray_200);
  --bg_hover: rgba(0, 0, 0, 0.04);
  --bg_active: rgba(0, 0, 0, 0.08);

  /* 边框颜色 */
  --border_color_default: var(--gray_300);
  --border_color_light: var(--gray_200);
  --border_color_dark: var(--gray_400);
  --border_color_focus: var(--color_primary);
}