/* 基础样式文件 - base.css */

/* CSS 变量定义 */
:root {
  /* 苹果风格色彩系统 */
  --color-primary: #007aff;
  --color-success: #34c759;
  --color-warning: #ff9500;
  --color-danger: #ff3b30;

  /* 灰度系统 */
  --color-gray-1: #8e8e93;
  --color-gray-2: #aeaeb2;
  --color-gray-3: #c7c7cc;
  --color-gray-4: #d1d1d6;
  --color-gray-5: #e5e5ea;
  --color-gray-6: #f2f2f7;

  /* 背景色 */
  --bg-primary: #ffffff;
  --bg-secondary: #f2f2f7;
  --bg-tertiary: #ffffff;

  /* 文字颜色 */
  --text-primary: #000000;
  --text-secondary: #3c3c43;
  --text-tertiary: #8e8e93;

  /* 圆角和间距 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* 阴影系统 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* 动画时长 */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 350ms;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 暗色模式 */
[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #1c1c1e;
  --bg-tertiary: #2c2c2e;

  --text-primary: #ffffff;
  --text-secondary: #e5e5e7;
  --text-tertiary: #8e8e93;

  --color-gray-6: #1c1c1e;
  --color-gray-5: #2c2c2e;
  --color-gray-4: #3a3a3c;
  --color-gray-3: #48484a;
  --color-gray-2: #636366;
  --color-gray-1: #8e8e93;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
}

/* 重置和基础样式 */
* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color var(--transition-normal) var(--ease-out),
    color var(--transition-normal) var(--ease-out);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-1);
}

/* 链接样式 */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-out);
}

a:hover {
  color: var(--color-primary);
  opacity: 0.8;
}

/* 标题样式 */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

/* 段落样式 */
p {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

/* 导航栏样式 */
.navbar {
  background-color: var(--bg-primary) !important;
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-gray-5);
  transition: all var(--transition-normal) var(--ease-out);
}

.navbar-brand {
  color: var(--text-primary) !important;
  font-weight: 700;
}

.navbar-nav .nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast) var(--ease-out);
}

.navbar-nav .nav-link:hover {
  color: var(--color-primary) !important;
  background-color: var(--color-gray-6);
}

.navbar-nav .nav-link.active {
  color: var(--color-primary) !important;
  background-color: var(--color-gray-6);
}

/* 主内容区域 */
#main-content {
  min-height: calc(100vh - 200px);
  background-color: var(--bg-secondary);
  /* 修复 fixed-top 导航栏遮挡内容的问题，保证主内容有足够的顶部内边距 */
  padding-top: 72px !important;
}

/* 页脚样式 */
footer {
  background-color: var(--bg-primary) !important;
  border-top: 1px solid var(--color-gray-5);
  color: var(--text-tertiary);
}

/* 加载指示器 */
.spinner-border {
  color: var(--color-primary) !important;
}

/* 主题切换按钮 */
#theme-toggle {
  border: 1px solid var(--color-gray-4);
  color: var(--text-secondary);
  background-color: transparent;
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  transition: all var(--transition-fast) var(--ease-out);
}

#theme-toggle:hover {
  background-color: var(--color-gray-6);
  border-color: var(--color-gray-3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }
}

/* 工具类 */
.glass-effect {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
}

[data-theme="dark"] .glass-effect {
  background: rgba(28, 28, 30, 0.8);
}

.text-primary-custom {
  color: var(--text-primary) !important;
}

.text-secondary-custom {
  color: var(--text-secondary) !important;
}

.text-tertiary-custom {
  color: var(--text-tertiary) !important;
}

.bg-primary-custom {
  background-color: var(--bg-primary) !important;
}

.bg-secondary-custom {
  background-color: var(--bg-secondary) !important;
}

/* 动画类 */
.fade-in {
  animation: fadeIn var(--transition-normal) var(--ease-out);
}

.slide-up {
  animation: slideUp var(--transition-normal) var(--ease-out);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 焦点可见性 */
.btn:focus,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 122, 255, 0.25);
  border-color: var(--color-primary);
}

/* 无障碍访问 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 自定义容器 - 比标准container更宽 */
.container-wide {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-wide {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container-wide {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container-wide {
    max-width: 1140px; /* 比标准的960px更宽 */
  }
}

@media (min-width: 1200px) {
  .container-wide {
    max-width: 1320px; /* 比标准的1140px更宽 */
  }
}

@media (min-width: 1400px) {
  .container-wide {
    max-width: 1500px; /* 比标准的1320px更宽 */
  }
}