/**

 * 校园食光 - 全局设计 Tokens

 * 统一的设计系统变量定义

 * 版本：1.0.0

 */



:root {

  /* ==================== 颜色系统 ==================== */

  

  /* 主色调 - 大众点评红 */

  --primary-color: #e60012;

  --primary-hover: #d5000f;

  --primary-active: #c70010;

  --primary-light: rgba(230, 0, 18, 0.1);

  --primary-light-hover: rgba(230, 0, 18, 0.15);

  --primary-gradient: linear-gradient(135deg, #e60012, #ff5252);

  

  /* AI 特色色 - 紫色渐变 */

  --ai-primary: #6a11cb;

  --ai-secondary: #2575fc;

  --ai-gradient: linear-gradient(135deg, var(--ai-primary), var(--ai-secondary));

  --ai-gradient-horizontal: linear-gradient(90deg, var(--ai-primary), var(--ai-secondary));

  --ai-light: rgba(106, 17, 203, 0.1);

  --ai-light-hover: rgba(106, 17, 203, 0.15);

  --ai-dark: rgba(106, 17, 203, 0.8);

  

  /* 中性色 */

  --white: #ffffff;

  --bg-gray: #f8f8f8;

  --bg-light: #f5f5f5;

  --bg-dark: #e9ecef;

  --border-color: #e5e5e5;

  --border-light: #f0f0f0;

  --text-dark: #333333;

  --text-primary: #333333;

  --text-secondary: #666666;

  --text-light: #999999;

  --text-placeholder: #bbbbbb;

  

  /* 功能色 */

  --success-color: #52c41a;

  --success-light: rgba(82, 196, 26, 0.1);

  --warning-color: #fa8c16;

  --warning-light: rgba(250, 140, 22, 0.1);

  --error-color: #ff4d4f;

  --error-light: rgba(255, 77, 79, 0.1);

  --info-color: #1890ff;

  --info-light: rgba(24, 144, 255, 0.1);

  

  /* 评分金色 */

  --rating-color: #ffc107;

  

  /* 标签蓝 */

  --tag-blue: #1890ff;

  

  /* 状态色 */

  --status-open: #52c41a;

  --status-closed: #ff4d4f;

  

  /* 角色色 */

  --role-super-admin: #e60012;

  --role-school-admin: #1890ff;

  --role-merchant-admin: #52c41a;

  --role-stall-admin: #fa8c16;

  

  /* ==================== 间距系统 ==================== */

  --spacing-xs: 4px;

  --spacing-sm: 8px;

  --spacing-md: 16px;

  --spacing-lg: 20px;

  --spacing-xl: 24px;

  --spacing-2xl: 32px;

  --spacing-3xl: 48px;

  --spacing-4xl: 64px;

  

  /* 别名 */

  --spacing-small: 8px;

  --spacing-medium: 15px;

  --spacing-large: 20px;

  

  /* ==================== 边框半径系统 ==================== */

  --radius-sm: 4px;

  --radius-md: 8px;

  --radius-lg: 12px;

  --radius-xl: 16px;

  --radius-2xl: 24px;

  --radius-full: 50%;

  

  /* 别名 */

  --border-radius: 4px;

  

  /* ==================== 阴影系统 ==================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);

  --shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.1);

  --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.15);

  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);

  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  

  /* 别名 */

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);

  --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.1);

  

  /* ==================== 字体系统 ==================== */

  

  /* 字号 */

  --font-size-xs: 11px;

  --font-size-sm: 12px;

  --font-size-md: 14px;

  --font-size-lg: 16px;

  --font-size-xl: 18px;

  --font-size-2xl: 20px;

  --font-size-3xl: 24px;

  --font-size-4xl: 28px;

  --font-size-5xl: 36px;

  

  /* 字重 */

  --font-weight-light: 300;

  --font-weight-normal: 400;

  --font-weight-medium: 500;

  --font-weight-semibold: 600;

  --font-weight-bold: 700;

  --font-weight-extrabold: 800;

  

  /* 行高 */

  --line-height-tight: 1.2;

  --line-height-normal: 1.5;

  --line-height-relaxed: 1.6;

  --line-height-loose: 1.8;

  

  /* 字体家族 */

  --font-family-sans: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;

  --font-family-mono: 'Courier New', Courier, monospace;

  --font-family-serif: 'SimSun', serif;

  

  /* ==================== 动画系统 ==================== */

  

  /* 过渡时间 */

  --transition-fast: 0.2s ease;

  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  

  /* 动画关键帧 */

  --animation-fade-in: fadeIn 0.5s ease-in-out;

  --animation-slide-in-left: slideInLeft 0.5s ease-out;

  --animation-slide-in-right: slideInRight 0.5s ease-out;

  --animation-pulse: pulse 2s infinite;

  --animation-float: float 3s ease-in-out infinite;

  

  /* ==================== 模糊效果 ==================== */

  --blur-sm: blur(4px);

  --blur-md: blur(8px);

  --blur-lg: blur(16px);

  

  /* ==================== 透明度 ==================== */

  --opacity-disabled: 0.6;

  --opacity-hover: 0.9;

  

  /* ==================== Z-Index 层级 ==================== */

  --z-index-dropdown: 1000;

  --z-index-sticky: 1020;

  --z-index-fixed: 1030;

  --z-index-modal-backdrop: 1040;

  --z-index-modal: 1050;

  --z-index-popover: 1060;

  --z-index-tooltip: 1070;

  --z-index-toast: 1080;

  

  /* ==================== 响应式断点 ==================== */

  --breakpoint-sm: 576px;   /* 小屏手机 */

  --breakpoint-md: 768px;   /* 平板 */

  --breakpoint-lg: 992px;   /* 小屏电脑 */

  --breakpoint-xl: 1200px;  /* 大屏电脑 */

  --breakpoint-2xl: 1400px; /* 超大屏 */

  

  /* ==================== 容器最大宽度 ==================== */

  --container-max-width: 1200px;

  

  /* ==================== 其他系统变量 ==================== */

  

  /* 选择文本样式 */

  --selection-bg: var(--ai-light);

  --selection-color: var(--ai-dark);

  

  /* 焦点样式 */

  --focus-outline: 2px solid var(--primary-color);

  --focus-outline-offset: 2px;

  --focus-shadow: 0 0 0 3px var(--primary-light);

}



/* ==================== 全局动画定义 ==================== */



@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes slideInLeft {

  from {

    opacity: 0;

    transform: translateX(-30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes slideInRight {

  from {

    opacity: 0;

    transform: translateX(30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes pulse {

  0%, 100% {

    opacity: 1;

  }

  50% {

    opacity: 0.7;

  }

}



@keyframes float {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-10px);

  }

}



@keyframes spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}



@keyframes bounce {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-5px);

  }

}



/* ==================== 全局基础样式 ==================== */



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  font-family: var(--font-family-sans);

  font-size: var(--font-size-md);

  font-weight: var(--font-weight-normal);

  line-height: var(--line-height-normal);

  color: var(--text-primary);

  background-color: var(--bg-gray);

}



a {

  color: inherit;

  text-decoration: none;

  transition: var(--transition-fast);

}



a:hover {

  color: var(--primary-color);

}



ul, ol {

  list-style: none;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



button {

  font-family: inherit;

  font-size: inherit;

  cursor: pointer;

  border: none;

  background: none;

  transition: var(--transition-fast);

}



button:disabled {

  opacity: var(--opacity-disabled);

  cursor: not-allowed;

}



input, textarea, select {

  font-family: inherit;

  font-size: inherit;

  transition: var(--transition-fast);

}



/* ==================== 工具类 ==================== */



/* 文本对齐 */

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }



/* 字体大小 */

.text-xs { font-size: var(--font-size-xs); }

.text-sm { font-size: var(--font-size-sm); }

.text-md { font-size: var(--font-size-md); }

.text-lg { font-size: var(--font-size-lg); }

.text-xl { font-size: var(--font-size-xl); }



/* 字体粗细 */

.font-light { font-weight: var(--font-weight-light); }

.font-normal { font-weight: var(--font-weight-normal); }

.font-medium { font-weight: var(--font-weight-medium); }

.font-semibold { font-weight: var(--font-weight-semibold); }

.font-bold { font-weight: var(--font-weight-bold); }



/* 文本颜色 */

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

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

.text-light { color: var(--text-light); }

.text-success { color: var(--success-color); }

.text-warning { color: var(--warning-color); }

.text-error { color: var(--error-color); }

.text-info { color: var(--info-color); }



/* 背景颜色 */

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

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

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

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

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

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

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

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



/* 间距 */

.m-0 { margin: 0; }

.m-1 { margin: var(--spacing-xs); }

.m-2 { margin: var(--spacing-sm); }

.m-3 { margin: var(--spacing-md); }

.m-4 { margin: var(--spacing-lg); }

.m-5 { margin: var(--spacing-xl); }



.p-0 { padding: 0; }

.p-1 { padding: var(--spacing-xs); }

.p-2 { padding: var(--spacing-sm); }

.p-3 { padding: var(--spacing-md); }

.p-4 { padding: var(--spacing-lg); }

.p-5 { padding: var(--spacing-xl); }



/* 圆角 */

.rounded-sm { border-radius: var(--radius-sm); }

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

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

.rounded-lg { border-radius: var(--radius-lg); }

.rounded-xl { border-radius: var(--radius-xl); }

.rounded-full { border-radius: var(--radius-full); }



/* 阴影 */

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

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

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

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

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



/* 显示 */

.hidden { display: none !important; }

.block { display: block; }

.inline-block { display: inline-block; }

.flex { display: flex; }

.inline-flex { display: inline-flex; }

.grid { display: grid; }



/* Flex 工具类 */

.flex-row { flex-direction: row; }

.flex-col { flex-direction: column; }

.items-center { align-items: center; }

.items-start { align-items: flex-start; }

.items-end { align-items: flex-end; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.justify-end { justify-content: flex-end; }

.flex-1 { flex: 1; }

.flex-shrink-0 { flex-shrink: 0; }



/* 栅格布局 */

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }



/* 响应式工具类 */

@media (max-width: 576px) {

  .sm\:hidden { display: none !important; }

  .sm\:block { display: block; }

  .sm\:flex { display: flex; }

  .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

}



@media (max-width: 768px) {

  .md\:hidden { display: none !important; }

  .md\:block { display: block; }

  .md\:flex { display: flex; }

  .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

}



@media (max-width: 992px) {

  .lg\:hidden { display: none !important; }

  .lg\:block { display: block; }

  .lg\:flex { display: flex; }

}



/* ==================== 滚动条美化 ==================== */



::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



::-webkit-scrollbar-track {

  background: var(--bg-light);

  border-radius: var(--radius-full);

}



::-webkit-scrollbar-thumb {

  background: var(--primary-light);

  border-radius: var(--radius-full);

  transition: var(--transition-fast);

}



::-webkit-scrollbar-thumb:hover {

  background: var(--primary-color);

}



/* ==================== 选择文本样式 ==================== */



::selection {

  background-color: var(--selection-bg);

  color: var(--selection-color);

}



/* ==================== 焦点样式 ==================== */



*:focus-visible {

  outline: var(--focus-outline);

  outline-offset: var(--focus-outline-offset);

  border-radius: var(--radius-sm);

}



/* ==================== 禁用文本选择 ==================== */



.no-select {

  user-select: none;

}



/* ==================== 毛玻璃效果 ==================== */



.glass {

  background: rgba(255, 255, 255, 0.7);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.3);

}



/* ==================== 渐变文字 ==================== */



.gradient-text {

  background: var(--ai-gradient);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  font-weight: var(--font-weight-bold);

}