<script setup lang="ts">
import { onLaunch } from '@dcloudio/uni-app'

onLaunch(() => {
  console.log('App Launch')
})
</script>

<style lang="scss">
@import './styles/variables.scss';

/* 设计系统 CSS 变量 */
:root {
  /* 主色调 */
  --museum-accent: #E0DF00;
  --museum-accent-dark: #C2C600;

  /* 背景色 */
  --museum-bg-map: #F6F8F5;
  --museum-bg-light: #F9FAFB;
  --museum-bg-surface: #FFFFFF;
  --museum-bg-cream: #F5F5ED;

  /* 文字色 */
  --museum-text-primary: #000000;
  --museum-text-secondary: #3F3F3F;
  --museum-text-tertiary: #696962;
  --museum-text-disabled: #ADB0B4;

  /* 边框色 */
  --museum-border-light: #E5E5E5;
  --museum-border-medium: #DEDEDE;
  --museum-border-dark: #C2C6D6;

  /* 辅助色 */
  --museum-poi-marker: #5ED0E4;
  --museum-overlay: rgba(0, 0, 0, 0.2);

  /* 圆角 */
  --radius-phone: 32px;
  --radius-card: 16px;
  --radius-button: 8px;
  --radius-small: 6px;
  --radius-mini: 5.5px;
  --museum-h5-page-max-width: 430px;
  --museum-h5-page-width: min(100vw, var(--museum-h5-page-max-width));

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* 阴影 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);

  /* 模糊 */
  --blur-light: blur(5px);
  --blur-medium: blur(10px);
  --blur-heavy: blur(12px);
}

/* 全局样式重置 */
page,
body,
#app,
uni-app,
uni-page,
uni-page-body {
  background-color: var(--museum-bg-light);
  font-family: var(--museum-font-family);
  font-size: 14px;
  color: var(--museum-text-primary);
  line-height: 1.5;
}

view,
text,
button,
input,
textarea,
uni-view,
uni-text,
uni-button,
uni-input,
uni-textarea,
:where(#app, uni-app, uni-page, uni-page-body) * {
  font-family: inherit;
}

/* 通用工具类 */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
