/**
 * 鲁氏族谱系统 - 全局设计Token v1.0
 * 统一颜色、间距、圆角、阴影等设计变量
 * 创建时间：2026-09-20
 */

:root {
  /* ========== 主色调 ========== */
  --color-primary: #C8102E;
  --color-primary-dark: #8B0000;
  --color-primary-light: #E63946;
  --color-primary-bg: rgba(200, 16, 46, 0.1);

  /* ========== 金色系 ========== */
  --color-gold: #D4AF37;
  --color-gold-dark: #B8860B;
  --color-gold-light: #F0E4A6;
  --color-gold-bg: rgba(212, 175, 55, 0.1);

  /* ========== 文字颜色 ========== */
  --color-text: #333333;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-text-light: #BBBBBB;
  --color-text-inverse: #FFFFFF;

  /* ========== 背景颜色 ========== */
  --color-bg: #F5F0E8;
  --color-bg-secondary: #FAF7F2;
  --color-card: #FFFFFF;
  --color-hover: #F9F5ED;

  /* ========== 边框颜色 ========== */
  --color-border: #E5E7EB;
  --color-border-light: #F3F4F6;
  --color-border-dark: #D1D5DB;

  /* ========== 状态颜色 ========== */
  --color-success: #10B981;
  --color-success-dark: #059669;
  --color-success-bg: #D1FAE5;

  --color-warning: #F59E0B;
  --color-warning-dark: #D97706;
  --color-warning-bg: #FEF3C7;

  --color-danger: #EF4444;
  --color-danger-dark: #DC2626;
  --color-danger-bg: #FEE2E2;

  --color-info: #6B7280; /* v2.4.13: 信息提示用中性灰，避免蓝紫色系 */
  --color-info-dark: #57534E;
  --color-info-bg: #DBEAFE;

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

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

  /* ========== 阴影 ========== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);

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

  /* ========== 字体 ========== */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

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

  /* ========== 布局 ========== */
  --sidebar-width: 230px;
  --sidebar-width-collapsed: 60px;
  --header-height: 60px;
  --content-max-width: 1200px;
}

/* ========== 暗色模式（预留） ========== */
@media (prefers-color-scheme: dark) {
  /* 预留暗色模式支持 */
}

/* ========== 响应式断点变量（v198新增） ========== */
:root {
  --bp-xs: 360px;   /* 小屏手机 */
  --bp-sm: 480px;   /* 大屏手机 */
  --bp-md: 768px;   /* 平板竖屏 */
  --bp-lg: 1024px;  /* 平板横屏/小屏电脑 */
  --bp-xl: 1280px;  /* 桌面电脑 */
  --bp-2xl: 1440px; /* 大屏桌面 */
  --bp-3xl: 1920px; /* 超大屏 */
}

/* ========== 响应式布局规则（v198新增） ========== */

/* 小屏手机优化 (<=360px) */
@media (max-width: 360px) {
  :root {
    --text-sm: 12px;
    --text-base: 13px;
    --space-md: 12px;
    --space-lg: 16px;
  }
}

/* 大屏手机优化 (481px-768px) */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --content-max-width: 100%;
  }
}

/* 平板优化 (769px-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --content-max-width: 960px;
  }
}

/* 大屏桌面优化 (>=1440px) */
@media (min-width: 1440px) {
  :root {
    --content-max-width: 1320px;
  }
}

/* 超大屏优化 (>=1920px) */
@media (min-width: 1920px) {
  :root {
    --content-max-width: 1500px;
  }
}

/* ========== 通用响应式工具类（v198新增） ========== */

/* 隐藏/显示工具 */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}

/* 表格响应式 */
.ui-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 防止横向溢出 */
* {
  max-width: 100%;
}

img, video {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   v2.4.13: 图标统一管控
   body.icons-off（后台配置 enable_icons=0 关闭图标时）——
   所有端（前端/总后台/支系后台/小程序web-view）隐藏全部装饰性图标。
   规则覆盖各页面所有图标类；裸写 emoji 统一使用 .icon-deco 类包裹。
   开启图标（icons-on）时恢复显示，无需额外处理。
   ============================================================ */
body.icons-off .menu-icon,
body.icons-off .uc-menu-icon,
body.icons-off .quick-action-icon,
body.icons-off .stat-icon,
body.icons-off .empty-icon,
body.icons-off .worship-btn-icon,
body.icons-off .location-icon,
body.icons-off .scan-icon,
body.icons-off .upload-icon,
body.icons-off .search-icon,
body.icons-off .success-icon,
body.icons-off .icon-deco,
body.icons-off .icon {
  display: none !important;
}
/* 开启图标时的统一图标尺寸约束（保持三端一致、美观） */
body.icons-on .menu-icon { width: 18px; height: 18px; margin-right: 10px; vertical-align: middle; flex-shrink: 0; opacity: 0.9; }
body.icons-off .vote-anonymous-icon,
body.icons-off .app-icon { display: none !important; 
  /* ========== v2.4.50 视觉升级 ========== */
  --grad-primary: linear-gradient(135deg, #C8102E 0%, #8B0000 100%);
  --grad-gold: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
  --grad-gold-text: linear-gradient(135deg, #C8A24A 0%, #8B6914 100%);
  --grad-bg: linear-gradient(180deg, #FBF8F3 0%, #F5EFE3 100%);
  --shadow-card: 0 2px 12px rgba(139, 0, 0, 0.06), 0 8px 30px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 6px 20px rgba(139, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 0 1px rgba(212, 175, 55, 0.25), 0 8px 30px rgba(212, 175, 55, 0.15);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.60);
  --gold-line: linear-gradient(90deg, transparent, #D4AF37 30%, #D4AF37 70%, transparent);
  --font-display: "STKaiti", "KaiTi", "SimSun", serif;
}