/* ====================================================
   设计系统 - CSS变量定义
   包含颜色管理系统和字体大小管理系统
   ==================================================== */

:root {
  /* ================================================
     颜色管理系统
     ================================================ */

  /*先保留参考页面的元素*/
    --primary: #0F3460; /* 深海蓝主色 */
    --secondary: #E67E22; /* 暖橙辅助色 */
    --light-gray: #F5F7FA;
    --mid-gray: #666666;
    --dark-gray: #333333;
    --white: #FFFFFF;
    --shadow: 0 4px 12px rgba(0,0,0,0.08);

  
  /* 主色调 - 用于主要品牌色、按钮、重要元素 */
  --color-primary: #0F3460;            /* 深海蓝 - 主色 */
  --color-primary-light: #1A4D8A;     /* 主色浅色 - 用于悬浮状态 */
  --color-primary-dark: #0A2540;      /* 主色深色 - 用于激活状态 */
  --color-primary-transparent: rgba(15, 52, 96, 0.1); /* 主色透明 - 用于背景 */
  
  /* 辅助色 - 用于强调、提示、次要元素 */
  --color-secondary: #E67E22;         /* 暖橙 - 辅助色 */
  --color-secondary-light: #FF9933;   /* 辅助色浅色 */
  --color-secondary-dark: #CC6A1B;    /* 辅助色深色 */
  --color-secondary-transparent: rgba(230, 126, 34, 0.1);
  
  /* 功能色 - 状态、反馈 */
  --color-success: #28A745;           /* 成功 - 绿色 */
  --color-warning: #FFC107;           /* 警告 - 黄色 */
  --color-error: #DC3545;             /* 错误/危险 - 红色 */
  --color-info: #17A2B8;              /* 信息 - 蓝色 */
  --color-disabled: #CED4DA;          /* 禁用状态 */
  
  /* 字体颜色系统 */
  --font-color-title: #1A1A1A;        /* 标题/重要文字 */
  --font-color: #333333;         /* 加粗/正文标题 */
  --font-color-normal: #666666;       /* 正文/普通文字 */
  --font-color-light: #999999;        /* 次要/辅助文字 */
  --font-color-placeholder: #CCCCCC;  /* 占位符 */
  --font-color-inverse: #FFFFFF;      /* 反色文字 */
  
  /* 中性色 - 背景、边框、分隔线 */
  --color-bg-primary: #FFFFFF;        /* 主背景色 */
  --color-bg-secondary: #F8F9FA;      /* 次要背景色 */
  --color-bg-tertiary: #E9ECEF;       /* 三级背景色 */
  --color-border: #DEE2E6;            /* 边框色 */
  --color-divider: #E0E0E0;           /* 分隔线色 */
  --color-overlay: rgba(0, 0, 0, 0.5); /* 遮罩层 */
  
  /* 交互色 - 鼠标悬停、激活状态 */
  --color-hover: rgba(0, 0, 0, 0.04);  /* 悬停背景 */
  --color-active: rgba(0, 0, 0, 0.08); /* 激活背景 */
  --color-focus: rgba(15, 52, 96, 0.1); /* 焦点边框 */
  
  /* 阴影系统 */
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-medium: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --shadow-large: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  --shadow-elevated: 0 20px 40px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  
  /* ================================================
     字体大小管理系统
     ================================================ */
  
  /* 字体大小层级系统 */
  --font-size-xxl: 3rem;      /* 48px - 超大标题 */
  --font-size-xl: 2.5rem;     /* 40px - 大标题 */
  --font-size-large: 2rem;    /* 32px - 标题 */
  --font-size-medium: 1.5rem; /* 24px - 中标题 */
  --font-size-title:1.2rem; 
  --font-size-normal: 1rem;   /* 16px - 正文 */
  --font-size-small: 0.875rem;/* 14px - 小字/辅助文字 */
  --font-size-xs: 0.75rem;    /* 12px - 备注/注释 */
  --font-size-xxs: 0.625rem;  /* 10px - 极小文字 */
  
  /* 行高系统 */
  --line-height-tight: 1.2;   /* 紧密行高 - 用于标题 */
  --line-height-normal: 1.5;  /* 正常行高 - 用于正文 */
  --line-height-relaxed: 1.8; /* 宽松行高 - 用于长文本 */
  --line-height-loose: 2;     /* 松散行高 - 用于特殊排版 */
  
  /* 字重系统 */
  --font-weight-light: 300;   /* 细体 */
  --font-weight-regular: 400; /* 常规 */
  --font-weight-medium: 500;  /* 中等 */
  --font-weight-semibold: 600; /* 半粗 */
  --font-weight-bold: 700;    /* 粗体 */
  --font-weight-black: 900;    /* 超粗 */
  
  /* 字间距系统 */
  --letter-spacing-tight: -0.025em;  /* 紧密 */
  --letter-spacing-normal: normal;   /* 正常 */
  --letter-spacing-wide: 0.025em;    /* 宽松 */
  --letter-spacing-wider: 0.05em;    /* 更宽 */
  
  /* 字体族系统 */
  --font-family: "思源黑体", "Microsoft YaHei", Arial, sans-serif;
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  --font-family-serif: Georgia, 'Times New Roman', Times, serif;
  --font-family-mono: 'SF Mono', Monaco, 'Courier New', 'Microsoft YaHei', monospace;
  --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  
  /* ================================================
     间距系统
     ================================================ */
  --spacing-xxs: 0.25rem;  /* 4px */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 0.75rem;   /* 12px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-xxl: 3rem;     /* 48px */
  --spacing-xxxl: 4rem;    /* 64px */
  
  /* 圆角系统 */
  --border-radius-none: 0;
  --border-radius-sm: 0.25rem;  /* 4px */
  --border-radius-md: 0.5rem;   /* 8px */
  --border-radius-lg: 1rem;     /* 16px */
  --border-radius-full: 9999px; /* 完全圆形 */
  
  /* 动画时间 */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  
  /* 层级系统 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;
}

/* ================================================
   实用类 - 颜色类
   ================================================ */
.text-title { color: var(--font-color-title); }
.text-bold { color: var(--font-color-bold); }
.text-normal { color: var(--font-color-normal); }
.text-light { color: var(--font-color-light); }
.text-placeholder { color: var(--font-color-placeholder); }
.text-inverse { color: var(--font-color-inverse); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }
.text-disabled { color: var(--color-disabled); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }
.bg-info { background-color: var(--color-info); }
.bg-disabled { background-color: var(--color-disabled); }

.bg-light { background-color: var(--color-bg-secondary); }
.bg-lighter { background-color: var(--color-bg-tertiary); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-light { border-color: var(--color-border); }

/* ================================================
   实用类 - 字体大小类
   ================================================ */
.font-xxl { font-size: var(--font-size-xxl); }
.font-xl { font-size: var(--font-size-xl); }
.font-large { font-size: var(--font-size-large); }
.font-medium { font-size: var(--font-size-medium); }
.font-normal { font-size: var(--font-size-normal); }
.font-small { font-size: var(--font-size-small); }
.font-xs { font-size: var(--font-size-xs); }
.font-xxs { font-size: var(--font-size-xxs); }

.font-weight-light { font-weight: var(--font-weight-light); }
.font-weight-regular { font-weight: var(--font-weight-regular); }
.font-weight-medium { font-weight: var(--font-weight-medium); }
.font-weight-semibold { font-weight: var(--font-weight-semibold); }
.font-weight-bold { font-weight: var(--font-weight-bold); }
.font-weight-black { font-weight: var(--font-weight-black); }

.line-height-tight { line-height: var(--line-height-tight); }
.line-height-normal { line-height: var(--line-height-normal); }
.line-height-relaxed { line-height: var(--line-height-relaxed); }
.line-height-loose { line-height: var(--line-height-loose); }

.letter-spacing-tight { letter-spacing: var(--letter-spacing-tight); }
.letter-spacing-normal { letter-spacing: var(--letter-spacing-normal); }
.letter-spacing-wide { letter-spacing: var(--letter-spacing-wide); }
.letter-spacing-wider { letter-spacing: var(--letter-spacing-wider); }


/*按钮*/

 .btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 16px;
}

.btn-orange {
    background: var(--color-secondary);
    color: var(--font-color-inverse);
}

.btn-orange:hover {
    background: #d36f17;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    color: var(--font-color-inverse);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary-dark);
    margin-left: 15px;
}

.btn-outline:hover {
    background: var(--color-secondary);
    color: var(--font-color-inverse);
}

/* ================================================
   暗色主题支持
   ================================================ */
/*@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #4A90E2;*/            /* 更亮的蓝色 */
    /*--color-primary-light: #6BAEFF;
    --color-primary-dark: #2A6FB8;
    
    --color-secondary: #FFA726;*/          /* 更亮的橙色 */
    
    /*--font-color-title: #FFFFFF;
    --font-color-bold: #F0F0F0;
    --font-color-normal: #CCCCCC;
    --font-color-light: #999999;
    --font-color-placeholder: #666666;
    --font-color-inverse: #333333;
    
    --color-bg-primary: #121212;*/         /* 深色背景 */
    /*--color-bg-secondary: #1E1E1E;
    --color-bg-tertiary: #2D2D2D;
    --color-border: #404040;
    --color-divider: #333333;
  }
}*/

/* ================================================
   RWD响应式字体大小
   ================================================ */
/*@media (max-width: 768px) {
  :root {
    --font-size-xxl: 2.5rem;*/    /* 40px */
    /*--font-size-xl: 2rem;*/       /* 32px */
    /*--font-size-large: 1.75rem;*/ /* 28px */
    /*--font-size-medium: 1.25rem;*//* 20px */
  /*}
}

@media (max-width: 480px) {
  :root {
    --font-size-xxl: 2rem;*/      /* 32px */
    /*--font-size-xl: 1.75rem;*/    /* 28px */
    /*--font-size-large: 1.5rem;*/   /* 24px */
    /*--font-size-medium: 1.125rem;*//* 18px */
  /*}
}*/