/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全局颜色变量 */
:root {
  --color-primary: var(--theme-primary, #2d4c3c);
  --color-primary-light: var(--theme-primary-light, rgba(45, 76, 60, 0.5));
  --color-primary-hover: var(--theme-primary-hover, rgba(45, 76, 60, 0.7));
  --scrollbar-thumb: var(--theme-scrollbar-thumb, var(--color-primary-light));
  --scrollbar-thumb-hover: var(--theme-scrollbar-thumb-hover, var(--color-primary-hover));
}

/* 深色模式颜色变量 */
/* 深色模式颜色变量 - 使用 .dark 类 */
.dark:root {
  --color-primary: var(--theme-primary-dark, #ffee6f);
  --color-primary-light: var(--theme-primary-dark-light, rgba(255, 238, 111, 0.5));
  --color-primary-hover: var(--theme-primary-dark-hover, rgba(255, 238, 111, 0.7));
  /* 滚动条颜色现在由 theme.ts 通过 --theme-scrollbar-thumb(-dark) 控制，
     这里不再需要覆盖 --scrollbar-thumb，globals.css 的 :root 定义会根据
     --theme-scrollbar-thumb 的值自动生效。
     如果需要为 .dark 类强制指定不同的基础回退值，可以在这里覆盖 --color-primary-light 等。
     但为了让 theme.ts 的设置生效，我们不直接覆盖 --scrollbar-thumb。
     保留 .dark:root 块是为了其他深色模式变量。
   */
  /* --scrollbar-thumb: var(--theme-scrollbar-thumb-dark, var(--color-primary-light)); */ /* 注释掉或移除此行 */
  /* --scrollbar-thumb-hover: var(--theme-scrollbar-thumb-hover-dark, var(--color-primary-hover)); */ /* 注释掉或移除此行 */
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
  height: 100%;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-track {
  background: transparent; /* 移除滚动条轨道背景 */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb); /* 使用专用滚动条变量 */
  border-radius: 3px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover); /* 使用专用滚动条变量 */
}

/* Firefox滚动条样式 */
@supports (scrollbar-color: red blue) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent; /* 使用专用滚动条变量 */
  }
}

/* 深色模式滚动条调整 - 使用CSS变量自动处理，无需重复定义 */