/**
 * Organic/Natural Design System
 * 有机/自然风格设计系统
 * 简化版 - 适配 Bootstrap 项目
 */

/* ========================================
   1. 字体导入
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700;800&family=Nunito:wght@400;500;600;700&display=swap');

/* ========================================
   2. CSS 变量定义（设计 Tokens）
   ======================================== */
:root {
  /* 颜色系统 - 大地色调 */
  --color-background: #FDFCF8;        /* 米纸白 */
  --color-foreground: #2C2C24;        /* 深壤土 */
  --color-primary: #5D7052;           /* 苔藓绿 */
  --color-primary-foreground: #F3F4F1; /* 淡雾 */
  --color-secondary: #C18C5D;         /* 陶土橙 */
  --color-secondary-foreground: #FFFFFF;
  --color-accent: #E6DCCD;            /* 沙色 */
  --color-accent-foreground: #4A4A40; /* 树皮 */
  --color-muted: #F0EBE5;             /* 石色 */
  --color-muted-foreground: #78786C;  /* 干草 */
  --color-border: #DED8CF;            /* 原木 */
  --color-destructive: #A85448;       /* 焦赭 */

  /* 字体系统 */
  --font-heading: 'Fraunces', serif;
  --font-body: 'Nunito', sans-serif;

  /* 圆角系统 */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* 阴影系统 - 柔和带色阴影 */
  --shadow-soft: 0 4px 20px -2px rgba(93, 112, 82, 0.15);
  --shadow-float: 0 10px 40px -10px rgba(193, 140, 93, 0.2);
  --shadow-hover: 0 6px 24px -4px rgba(93, 112, 82, 0.25);

  /* 间距系统 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
}

/* ========================================
   2.5. 夜间模式 CSS 变量覆盖
   ======================================== */
html.dark-mode,
body.dark-mode {
  /* 颜色系统 - 深色大地色调 */
  --color-background: #1a1916;        /* 深夜壤土 */
  --color-foreground: #e8e6e0;        /* 月光白 */
  --color-primary: #7a9a6e;           /* 明亮苔藓绿 */
  --color-primary-foreground: #1a1916; /* 深色文字 */
  --color-secondary: #d4a574;         /* 明亮陶土橙 */
  --color-secondary-foreground: #1a1916;
  --color-accent: #3a3632;            /* 深沙色 */
  --color-accent-foreground: #c8c4bc; /* 浅树皮 */
  --color-muted: #2a2622;             /* 深石色 */
  --color-muted-foreground: #a8a69c;  /* 浅干草 */
  --color-border: #3a3632;            /* 深原木 */
  --color-destructive: #d47a6e;       /* 明亮焦赭 */

  /* 阴影系统 - 深色柔和阴影 */
  --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 6px 24px -4px rgba(0, 0, 0, 0.45);
}

/* ========================================
   3. 全局样式重置
   ======================================== */
body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-foreground);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-foreground);
}

/* ========================================
   4. 按钮样式
   ======================================== */
.btn {
  border-radius: var(--radius-pill);
  padding: 0.75rem 2rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background-color: #4a5d42;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  color: var(--color-primary-foreground);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-primary {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-secondary-foreground);
  box-shadow: var(--shadow-soft);
}

.btn-secondary:hover {
  background-color: #a67549;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  color: var(--color-secondary-foreground);
}

/* ========================================
   5. 卡片样式
   ======================================== */
.card {
  background-color: #FEFEFA;
  border: 1px solid rgba(222, 216, 207, 0.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid rgba(222, 216, 207, 0.5);
  padding: 1.5rem;
}

.card-body {
  padding: 1.5rem;
}

/* 有机形状卡片变体 */
.card-organic-1 {
  border-radius: 32px 24px 32px 24px;
}

.card-organic-2 {
  border-radius: 24px 32px 24px 32px;
}

.card-organic-3 {
  border-radius: 40px 24px 40px 24px;
}

/* ========================================
   6. 表单元素
   ======================================== */
.form-control {
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(93, 112, 82, 0.1);
  background-color: #FFFFFF;
}

.form-label {
  font-weight: 600;
  color: var(--color-foreground);
  margin-bottom: 0.5rem;
}

/* ========================================
   7. 导航栏样式
   ======================================== */
.navbar {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  padding: 1rem 2rem;
}

.nav-link {
  color: var(--color-foreground);
  font-weight: 500;
  transition: color 0.3s ease;
  padding: 0.5rem 1rem;
}

.nav-link:hover {
  color: var(--color-primary);
}

/* ========================================
   8. 徽章和标签
   ======================================== */
.badge {
  border-radius: var(--radius-pill);
  padding: 0.35rem 1rem;
  font-weight: 600;
}

.badge-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.badge-secondary {
  background-color: var(--color-secondary);
  color: var(--color-secondary-foreground);
}

.badge-success {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.badge-warning {
  background-color: var(--color-secondary);
  color: var(--color-secondary-foreground);
}

.badge-danger {
  background-color: var(--color-destructive);
  color: #FFFFFF;
}

.badge-light {
  background-color: var(--color-muted);
  color: var(--color-muted-foreground);
}

.badge-info {
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
}

/* ========================================
   9. 表格样式
   ======================================== */
.table {
  background-color: #FEFEFA;
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
}

html.dark-mode .table {
  background-color: #2a2622;
}

.table thead th {
  background-color: var(--color-muted);
  color: var(--color-foreground);
  font-weight: 700;
  border: none;
  padding: 1rem;
}

html.dark-mode .table thead th {
  background-color: var(--color-muted);
  color: var(--color-foreground);
}

.table tbody tr {
  transition: background-color 0.2s ease;
}

.table tbody tr:hover {
  background-color: rgba(240, 235, 229, 0.3);
}

html.dark-mode .table tbody tr:hover {
  background-color: rgba(58, 54, 50, 0.4);
}

.table td {
  padding: 1rem;
  border-color: rgba(222, 216, 207, 0.3);
  color: var(--color-foreground);
}

html.dark-mode .table td {
  border-color: rgba(122, 154, 110, 0.2);
  color: var(--color-foreground);
}

/* 仅在模态框中的表格处理溢出 */
.modal .table {
  table-layout: fixed;
}

.modal .table td,
.modal .table th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ========================================
   10. 警告框
   ======================================== */
.alert {
  border-radius: var(--radius-lg);
  border: none;
  padding: 1.25rem 1.5rem;
}

.alert-warning {
  background-color: rgba(193, 140, 93, 0.1);
  color: #8a6342;
  border-left: 4px solid var(--color-secondary);
}

.alert-success {
  background-color: rgba(93, 112, 82, 0.1);
  color: #4a5d42;
  border-left: 4px solid var(--color-primary);
}

.alert-danger {
  background-color: rgba(168, 84, 72, 0.1);
  color: #7a3d34;
  border-left: 4px solid var(--color-destructive);
}

.alert-info {
  background-color: rgba(230, 220, 205, 0.3);
  color: var(--color-accent-foreground);
  border-left: 4px solid var(--color-accent);
}

/* ========================================
   11. 图标容器
   ======================================== */
.icon-container {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: rgba(93, 112, 82, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.icon-container:hover {
  background-color: var(--color-primary);
  transform: scale(1.05);
}

.icon-container:hover i,
.icon-container:hover em {
  color: #FFFFFF;
}

.icon-container i,
.icon-container em {
  color: var(--color-primary);
  font-size: 24px;
  transition: color 0.3s ease;
}

/* ========================================
   12. 工具类
   ======================================== */
.bg-organic {
  background-color: var(--color-background);
}

.bg-muted {
  background-color: var(--color-muted);
}

.bg-accent {
  background-color: var(--color-accent);
}

.text-primary-organic {
  color: var(--color-primary);
}

.text-secondary-organic {
  color: var(--color-secondary);
}

.text-muted-organic {
  color: var(--color-muted-foreground);
}

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-float {
  box-shadow: var(--shadow-float);
}

/* 柔和的分隔线 */
.divider-organic {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border), transparent);
  border: none;
  margin: 2rem 0;
}

/* ========================================
   13. 响应式调整
   ======================================== */
@media (max-width: 768px) {
  .btn {
    padding: 0.65rem 1.5rem;
  }

  .card {
    border-radius: var(--radius-md);
  }

  .navbar {
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
  }
}

/* ========================================
   14. 动画效果
   ======================================== */
@keyframes gentle-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: gentle-float 3s ease-in-out infinite;
}

/* 平滑过渡 */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}