/* common-base.css - 基础样式和导入管理 */

/* 导入CSS变量 */
@import url("variables.css");

/* 导入其他common CSS文件 */
@import url("common-header.css");
@import url("common-footer.css");
@import url("button.css");
@import url("animations.css");
@import url("common-desktop.css") screen and (min-width: 769px);
@import url("common-mobile.css") screen and (max-width: 768px);
@import url("common-dialog.css");
@import url("image-viewer.css");

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-dark);
  background-color: var(--background-light);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  /* body动画已移至animations.css */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

svg {
  max-width: 100%;
  height: auto;
}

.user-select-none {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Webkit浏览器滚动条 */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-bg);
}

/* Firefox浏览器 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

/* 颜色主题 */
.dark {
  color: var(--text-light);
  background-color: var(--background-dark);
}

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

/* 注意：头部、按钮、动画、页脚样式已移至对应的文件中 */

/* 容器区域基础样式 */
.container-area {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}