/**
 * Weather Today Component - Typography (字体和字号专用样式)
 * 
 * 专门定义字体、字号、行高、字重等排版相关的样式
 */

/* ==================== 字体定义 ==================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 备用字体栈 */
.weather-typography {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 
               'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 
               'Helvetica Neue', sans-serif;
}

/* ==================== 标题字体样式 ==================== */

/* 标题 - 30px，用于显示城市名称 */
.weather-title {
  font-family: inherit;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #000000;
}

/* 标题变体 */
.weather-title.large {
  font-size: 36px;
}

.weather-title.small {
  font-size: 24px;
}

/* ==================== 大温度字体样式 ==================== */

/* 大温度 - 42px，用于显示主要温度 */
.weather-big-temp {
  font-family: inherit;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #000000;
}

/* 大温度变体 */
.weather-big-temp.large {
  font-size: 48px;
}

.weather-big-temp.small {
  font-size: 36px;
}

/* 温度单位样式 */
.weather-big-temp .unit {
  font-size: 0.65em;
  font-weight: 500;
  vertical-align: super;
  margin-left: 2px;
}

/* 度数字符样式 */
.weather-big-temp .degree {
  font-size: 0.75em;
  vertical-align: super;
}

/* ==================== 标签字体样式 ==================== */

/* 标准布局标签 - 20px，用于中部三项的标签和温度 */
.weather-label-standard {
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000000;
}

/* 宽屏布局标签 - 30px */
.weather-label-wide {
  font-family: inherit;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000000;
}

/* 标签变体 */
.weather-label-standard.small {
  font-size: 16px;
}

.weather-label-wide.small {
  font-size: 24px;
}

.weather-label-standard.bold {
  font-weight: 600;
}

.weather-label-wide.bold {
  font-weight: 600;
}

/* ==================== 时间轴标签字体样式 ==================== */

/* 标准布局时间轴标签 - 20px */
.weather-timeline-label-standard {
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000000;
}

/* 宽屏布局时间轴标签 - 30px */
.weather-timeline-label-wide {
  font-family: inherit;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000000;
}

/* ==================== 通用字体工具类 ==================== */

/* 字体大小类 */
.weather-font-10 { font-size: 10px; }
.weather-font-12 { font-size: 12px; }
.weather-font-14 { font-size: 14px; }
.weather-font-16 { font-size: 16px; }
.weather-font-18 { font-size: 18px; }
.weather-font-20 { font-size: 20px; }
.weather-font-24 { font-size: 24px; }
.weather-font-30 { font-size: 30px; }
.weather-font-36 { font-size: 36px; }
.weather-font-42 { font-size: 42px; }
.weather-font-48 { font-size: 48px; }
.weather-font-64 { font-size: 64px; }

/* 字体粗细类 */
.weather-font-normal { font-weight: 400; }
.weather-font-medium { font-weight: 500; }
.weather-font-semibold { font-weight: 600; }
.weather-font-bold { font-weight: 700; }

/* 行高类 */
.weather-line-height-tight { line-height: 1.1; }
.weather-line-height-normal { line-height: 1.2; }
.weather-line-height-relaxed { line-height: 1.3; }
.weather-line-height-loose { line-height: 1.5; }

/* 字母间距类 */
.weather-tracking-tighter { letter-spacing: -0.05em; }
.weather-tracking-tight { letter-spacing: -0.02em; }
.weather-tracking-normal { letter-spacing: 0; }
.weather-tracking-wide { letter-spacing: 0.02em; }

/* ==================== 文本对齐类 ==================== */

.weather-text-left { text-align: left; }
.weather-text-center { text-align: center; }
.weather-text-right { text-align: right; }

/* ==================== 文本颜色类 ==================== */

.weather-text-black { color: #000000; }
.weather-text-white { color: #FFFFFF; }
.weather-text-red { color: #FF0000; }

/* ==================== 文本装饰类 ==================== */

.weather-uppercase { text-transform: uppercase; }
.weather-lowercase { text-transform: lowercase; }
.weather-capitalize { text-transform: capitalize; }
.weather-no-underline { text-decoration: none; }

/* ==================== 文本截断类 ==================== */

.weather-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.weather-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==================== 响应式字体大小 ==================== */

/* 小屏幕设备 */
@media (max-width: 480px) {
  .weather-title {
    font-size: 24px;
  }
  
  .weather-big-temp {
    font-size: 36px;
  }
  
  .weather-label-standard {
    font-size: 16px;
  }
  
  .weather-label-wide {
    font-size: 24px;
  }
  
  .weather-timeline-label-standard {
    font-size: 16px;
  }
  
  .weather-timeline-label-wide {
    font-size: 24px;
  }
}

/* 超小屏幕设备 */
@media (max-width: 320px) {
  .weather-title {
    font-size: 20px;
  }
  
  .weather-big-temp {
    font-size: 30px;
  }
  
  .weather-label-standard {
    font-size: 14px;
  }
  
  .weather-label-wide {
    font-size: 20px;
  }
  
  .weather-timeline-label-standard {
    font-size: 14px;
  }
  
  .weather-timeline-label-wide {
    font-size: 20px;
  }
}

/* ==================== 打印样式 ==================== */

@media print {
  .weather-title,
  .weather-big-temp,
  .weather-label-standard,
  .weather-label-wide,
  .weather-timeline-label-standard,
  .weather-timeline-label-wide {
    color: #000000 !important;
    font-weight: 700 !important;
  }
}

/* ==================== 高对比度模式 ==================== */

@media (prefers-contrast: high) {
  .weather-title,
  .weather-big-temp,
  .weather-label-standard,
  .weather-label-wide,
  .weather-timeline-label-standard,
  .weather-timeline-label-wide {
    font-weight: 700;
    color: #000000;
  }
}

/* ==================== 字体加载优化 ==================== */

/* 字体显示策略 */
@font-face {
  font-family: 'WeatherFont';
  font-display: swap;
}

/* ==================== 数字字体样式 ==================== */

/* 等宽数字（用于温度显示） */
.weather-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* 温度数字样式 */
.weather-temp-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-weight: 700;
}

/* ==================== 特殊字符样式 ==================== */

/* 度数字符 */
.weather-degree::before {
  content: '°';
  font-size: 0.7em;
  vertical-align: super;
}

/* 摄氏度 */
.weather-celsius::after {
  content: '°C';
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 1px;
}

/* 华氏度 */
.weather-fahrenheit::after {
  content: '°F';
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 1px;
}