/* 暖色调配色 */
$warm-primary: #FF7E5F;  // 珊瑚橙
$warm-secondary: #FFB347; // 阳光黄
$warm-accent: #FF6B6B;    // 粉红色
$warm-light: #FFF5E6;     // 奶油白
$warm-dark: #5E3023;      // 深棕色
$warm-text: #4A3F35;      // 深褐色文本

/* 标题栏设计 */
.warm-detail-header {
  ion-toolbar {
    --background: #FFB347;
    --color: white;
    --border-width: 0;
    box-shadow: 0 2px 12px rgba($warm-primary, 0.3);
    padding: 0 12px;
  }
}

.warm-detail-title {
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
}

.warm-back-button {
  --color: white;
  --icon-font-size: 1.4em;
}

.warm-edit-button {
  --color: white;
  --background-activated: rgba(255, 255, 255, 0.15);
  --background-hover: rgba(255, 255, 255, 0.1);
  
  ion-icon {
    font-size: 1.4em;
  }
}

/* 内容区域 */
.warm-detail-content {
  --background: $warm-light;
  --padding-top: 16px;
  --padding-bottom: 80px;
}

/* 日记头部信息 */
.warm-diary-header {
  margin-bottom: 24px;
  padding: 0 16px;
}

.warm-date-section {
  margin-bottom: 12px;
  
  .warm-date {
    color: $warm-dark;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.2;
  }
  
  .warm-week-time {
    display: flex;
    gap: 8px;
  }
}

.warm-meta-chip {
  --background: rgba($warm-primary, 0.1);
  --color: $warm-dark;
  font-size: 0.9rem;
  
  .warm-meta-icon {
    color: $warm-primary;
    font-size: 1em;
    margin-right: 6px;
  }
}

.warm-meta-section {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.warm-info-chip {
  --background: white;
  --color: $warm-text;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
  
  ion-icon {
    margin-right: 6px;
  }
  
  &.weather {
    ion-icon {
      color: #4D8BFF; // 天气蓝色
    }
  }
  
  &.mood {
    ion-icon {
      color: #FFC107; // 心情黄色
    }
  }
}

/* 日记内容卡片 */
.warm-content-card {
  background:  #FFD8B8;
  border-radius: 16px;
  margin: 0 16px 24px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.warm-content-text {
  color: $warm-text;
  white-space: pre-line;
  line-height: 1.8;
  font-size: 1.1rem;
  letter-spacing: 0.3px;
}

/* 底部操作栏 */
.warm-action-bar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: white;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.warm-action-button {
  --border-radius: 12px;
  --padding-start: 16px;
  --padding-end: 16px;
  font-weight: 500;
  
  ion-icon {
    font-size: 1.2em;
  }
}