/**
 * 茶九度茶饮培训 - 设计系统变量
 * Design System Variables
 */

:root {
  /* ========== 品牌色彩系统 ========== */
  
  /* 主色 - 活力橙色系（更明亮） */
  --color-primary: #FF7043;
  --color-primary-light: #FF8A65;
  --color-primary-lighter: #FFAB91;
  --color-primary-dark: #F4511E;
  
  /* 主色渐变 */
  --gradient-primary: linear-gradient(135deg, #FF7043 0%, #FF8A65 50%, #FFAB91 100%);
  --gradient-primary-vertical: linear-gradient(180deg, #FF7043 0%, #FF8A65 100%);
  --gradient-primary-button: linear-gradient(135deg, #FF7043 0%, #FF8A65 100%);
  
  /* 辅助色 - 暖棕色系（与橙色更搭配） */
  --color-secondary: #8D6E63;
  --color-secondary-light: #A1887F;
  --color-secondary-dark: #6D4C41;
  --gradient-secondary: linear-gradient(135deg, #8D6E63 0%, #A1887F 100%);
  
  /* 点缀色 - 奶茶色 */
  --color-accent: #D7CCC8;
  --color-accent-light: #EFEBE9;
  --color-accent-dark: #BCAAA4;
  
  /* 背景色 - 暖调奶白 */
  --color-bg-page: #FAF8F5;
  --color-bg-cream: #FFF5EB;
  --color-bg-white: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --gradient-bg: linear-gradient(180deg, #FFF5EB 0%, #FFFFFF 100%);
  
  /* 功能色 */
  --color-success: #52C41A;
  --color-warning: #FAAD14;
  --color-error: #FF4D4F;
  --color-info: #1890FF;
  
  /* 中性色 - 文字 */
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-text-placeholder: #CCCCCC;
  --color-text-white: #FFFFFF;
  
  /* 中性色 - 边框/分割 */
  --color-border: #E8E8E8;
  --color-border-light: #F0F0F0;
  --color-divider: #E8E8E8;
  
  /* ========== 玻璃拟态效果 ========== */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-bg-light: rgba(255, 255, 255, 0.85);
  --glass-bg-dark: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(20px);
  --glass-blur-light: blur(10px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.3);
  
  /* ========== 阴影系统 ========== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.16);
  
  /* 品牌色阴影 */
  --shadow-primary: 0 4px 16px rgba(255, 112, 67, 0.3);
  --shadow-primary-lg: 0 8px 24px rgba(255, 112, 67, 0.4);
  
  /* 悬浮阴影 */
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.1);
  
  /* ========== 圆角系统 ========== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  
  /* ========== 间距系统 ========== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  
  /* 页面边距 */
  --page-padding: 16px;
  --card-padding: 16px;
  
  /* ========== 字体系统 ========== */
  --font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  --font-family-number: 'DIN Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* 字号 */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-5xl: 32px;
  
  /* 字重 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ========== 动画系统 ========== */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-bounce: 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* ========== 尺寸系统 ========== */
  /* 小程序模拟尺寸 */
  --screen-width: 375px;
  --screen-height: 812px;
  
  /* 导航栏 */
  --navbar-height: 44px;
  --statusbar-height: 0px;
  --tabbar-height: 83px;
  --tabbar-center-size: 56px;
  
  /* 按钮高度 */
  --button-height-sm: 32px;
  --button-height-md: 40px;
  --button-height-lg: 48px;
  
  /* 输入框高度 */
  --input-height: 44px;
  
  /* ========== Z-Index层级 ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
}

/* 暗色模式变量（预留） */
@media (prefers-color-scheme: dark) {
  :root {
    /* 可以在这里定义暗色模式的变量覆盖 */
  }
}