/* 
  public/styles/base.css
  全局基础样式+常用页面样式
*/

:root,
[data-theme="light"] {
  --color-bg-page: #f5f5f7;
  --color-fg: #000;
  --color-icon: #000;
  --color-fg-paragraph: #0000008f;
}

:root {
  --icon-size: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page: #000;
    --color-fg: #fff;
    --color-icon: #fff;
    --color-fg-paragraph: #ffffffa8;
  }
}

[data-theme="dark"] {
  --color-bg-page: #000;
  --color-fg: #fff;
  --color-icon: #fff;
  --color-fg-paragraph: #ffffffa8;
}

html,
body {
  scrollbar-width: none;

  margin: 0;
  padding: 0;

  background-color: var(--color-bg-page);
  color: var(--color-fg);

  font-family: sans-serif;
  overflow-wrap: anywhere;
}

@media (max-width: 319px) {
  html,
  body {
    overflow-x: scroll;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  transition: all 0.5s ease;
}

#root {
  min-width: 320px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin: 0;
}

h5 {
  font-size: 18px;
  line-height: 24px;
}

p {
  font-size: 12px;
  line-height: 18px;
  margin: 0;
  color: var(--color-fg-paragraph);
}

svg,
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--color-icon);
  color: var(--color-icon);
  
  display: block;
  flex-shrink: 0;
}

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

  /* 兜底 */
  min-height: 100vh;
  /* 优先 */
  min-height: 100dvh;

  max-width: 1024px;
  padding: 24px;
  margin: auto;
}

.status-content {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 6px;               /* 元素之间的间距 */
  text-align: center;
}

.status-header {
  display: flex;
  align-items: center;   /* 图标和标题垂直居中 */
  justify-content: center;
  gap: 12px;             /* 图标与标题之间的间隔 */
}

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

.status-title h5 {
  font-weight: normal;
}