/* ============================================
   深圳市德保膳食管理有限公司官网
   CSS变量系统 - Variables.css
   ============================================ */

:root {
  /* ========== 颜色系统 ========== */
  
  /* 主色调 */
  --color-primary: #ea580c;           /* 食欲橙 - 主色，温暖有活力 */
  --color-primary-light: #ff8a3c;     /* 橙色浅色版本 */
  --color-primary-dark: #9a3412;      /* 橙色深色版本 */
  
  /* 辅色调 */
  --color-secondary: #16a34a;         /* 健康绿 - 辅色，代表新鲜与安心 */
  --color-secondary-light: #4ade80;   /* 健康绿浅色版本 */
  --color-secondary-dark: #0f8a39;    /* 健康绿深色版本 */
  
  /* 强调色 */
  --color-accent: #fafafa;            /* 厨师白 - 点缀色，营造洁净质感 */
  --color-accent-light: #ffffff;      /* 厨师白更亮版本 */
  --color-accent-dark: #e4e4e7;       /* 厨师白更深版本 */

  --color-amber: #f97316;             /* 温润琥珀，用于高亮 */
  --color-warm-bg: #fff7ed;           /* 暖色背景 */
  --color-warm-bg-2: #ffe4d6;         /* 更深的暖色背景 */
  
  /* 中性色 */
  --color-white: #ffffff;             /* 纯白色 */
  --color-light-bg: #fff9f5;          /* 浅暖背景 */
  --color-light-bg-2: #fff1e6;        /* 更浓郁的暖背景 */
  --color-border: #e0e0e0;            /* 边框色 */
  --color-border-light: #eeeeee;      /* 浅边框色 */
  --color-light-text: #999999;        /* 浅灰文字 */
  --color-text: #666666;              /* 中灰文字 */
  --color-dark-text: #333333;         /* 深灰文字 */
  --color-black: #000000;             /* 纯黑色 */
  
  /* 状态色 */
  --color-success: #27ae60;           /* 成功色 - 绿色 */
  --color-warning: #f39c12;           /* 警告色 - 黄色 */
  --color-error: #e74c3c;             /* 错误色 - 红色 */
  --color-info: #3498db;              /* 信息色 - 蓝色 */
  
  /* ========== 字体系统 ========== */
  
  /* 字体族 */
  --font-family-primary: 'Source Han Sans', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', sans-serif;
  --font-family-mono: 'Courier New', 'Monaco', monospace;
  
  /* 字体大小 */
  --font-size-xs: 12px;               /* 极小 */
  --font-size-sm: 14px;               /* 小 */
  --font-size-base: 16px;             /* 基础 */
  --font-size-lg: 18px;               /* 大 */
  --font-size-xl: 20px;               /* 更大 */
  --font-size-2xl: 24px;              /* 很大 */
  --font-size-3xl: 28px;              /* 超大 */
  --font-size-4xl: 32px;              /* 特大 */
  --font-size-5xl: 40px;              /* 巨大 */
  --font-size-6xl: 48px;              /* 超巨大 */
  
  /* 行高 */
  --line-height-tight: 1.2;           /* 紧凑行高 */
  --line-height-normal: 1.5;          /* 正常行高 */
  --line-height-relaxed: 1.8;         /* 宽松行高 */
  --line-height-loose: 2;             /* 很宽松的行高 */
  
  /* 字重 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* ========== 间距系统 ========== */
  
  /* 基础间距单位：8px */
  --spacing-xs: 4px;                  /* 0.5倍 */
  --spacing-sm: 8px;                  /* 1倍 */
  --spacing-md: 16px;                 /* 2倍 */
  --spacing-lg: 24px;                 /* 3倍 */
  --spacing-xl: 32px;                 /* 4倍 */
  --spacing-2xl: 40px;                /* 5倍 */
  --spacing-3xl: 48px;                /* 6倍 */
  --spacing-4xl: 56px;                /* 7倍 */
  --spacing-5xl: 64px;                /* 8倍 */
  --spacing-6xl: 80px;                /* 10倍 */
  
  /* ========== 圆角系统 ========== */
  
  --radius-none: 0;
  --radius-sm: 4px;                   /* 小圆角 */
  --radius-md: 8px;                   /* 中圆角 */
  --radius-lg: 12px;                  /* 大圆角 */
  --radius-xl: 16px;                  /* 特大圆角 */
  --radius-2xl: 20px;                 /* 超大圆角 */
  --radius-full: 9999px;              /* 完全圆形 */
  
  /* ========== 阴影系统 ========== */
  
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
  
  /* 彩色阴影 */
  --shadow-primary: 0 10px 25px rgba(26, 58, 82, 0.15);
  --shadow-secondary: 0 10px 25px rgba(46, 204, 113, 0.15);
  --shadow-accent: 0 10px 25px rgba(249, 115, 22, 0.2);
  
  /* ========== 过渡效果 ========== */
  
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  
  /* ========== 容器宽度 ========== */
  
  --container-sm: 640px;              /* 小屏幕 */
  --container-md: 768px;              /* 中屏幕 */
  --container-lg: 1024px;             /* 大屏幕 */
  --container-xl: 1280px;             /* 特大屏幕 */
  --container-2xl: 1536px;            /* 超大屏幕 */
  
  /* 实际内容容器宽度（留出边距） */
  --container-width: 1200px;
  --container-padding: 20px;
  
  /* ========== Z-index层级 ========== */
  
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  
  /* ========== 媒体查询断点 ========== */
  
  /* 这些值用于JavaScript或其他需要的地方 */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ========== 深色模式支持（可选） ========== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-light-bg: #1a1a1a;
    --color-light-bg-2: #222222;
    --color-border: #333333;
    --color-border-light: #404040;
    --color-light-text: #999999;
    --color-text: #cccccc;
    --color-dark-text: #e0e0e0;
  }
}

/* ========== 打印样式 ========== */
@media print {
  :root {
    --color-light-bg: #ffffff;
    --color-border: #000000;
    --color-text: #000000;
    --color-dark-text: #000000;
  }
}