/* 唯一允许出现颜色字面量的文件。其余 CSS 只能 var(--*)。 */
:root {
  color-scheme: light dark;

  --bg: #f7f7f6;
  --surface: #fff;
  --line: rgb(0 0 0 / 8%);
  --text: #1a1a1a;
  --text-dim: #6b6b6b;
  --accent: #1a1a1a;
  --on-accent: #fff;
  --on-danger: #fff;

  --ok: #1f7a4d;
  --warn: #b25e00;
  --danger: #b3261e;
  --busy: #3b6ea8;
  --role-purple: #7b4fb3;
  --grad-sunset: linear-gradient(90deg, #ff8a3d, #f0366b);
  --grad-ocean: linear-gradient(90deg, #1ea7d8, #5b5be0);
  --grad-aurora: linear-gradient(90deg, #19b97a, #2c8fe6, #9a5bf0);
  --grad-candy: linear-gradient(90deg, #f06bb3, #8b6bf0);
  --grad-gold: linear-gradient(90deg, #d99a1c, #f2c94c, #c27a0a);
  --grad-rainbow: linear-gradient(90deg, #e5484d, #f5a524, #3fb950, #2c8fe6, #9a5bf0);

  --surface-2: #efefed;
  --line-strong: rgb(0 0 0 / 14%);
  --accent-soft: rgb(0 0 0 / 5%);

  --glass: rgb(247 247 246 / 72%);
  --scrim: rgb(0 0 0 / 40%);
  /* 二维码必须深色码点配浅色底,暗色主题下也不反转,否则很多扫码器识别不了 */
  --qr-bg: #fff;
  --qr-fg: #000;
  --shadow-pop: 0 4px 16px rgb(0 0 0 / 12%);
  --shadow-sheet: 0 12px 40px rgb(0 0 0 / 18%);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-avatar: 50%;
  --blur-bar: blur(10px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;

  --font-sans: "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  --bar-h: 52px;

  /* 渐变只表达状态与层次,低饱和、小面积 */
  --ok-soft: color-mix(in srgb, var(--ok) 16%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  --busy-soft: color-mix(in srgb, var(--busy) 14%, transparent);
  --fade-down: linear-gradient(to bottom, var(--glass), transparent);
  --tile-gradient: linear-gradient(145deg, var(--surface), var(--surface-2));
  --progress-gradient: linear-gradient(90deg, var(--busy-soft), var(--busy));
  --warn-bar: linear-gradient(90deg, var(--warn), transparent);

  --duration-exit: 150ms;
  --duration-enter: 210ms;
  --duration-move: 400ms;
}

/* 暗色变量出现两次:跟随系统(未手动选亮色时),和手动指定暗色。改一处必须同步另一处 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #141414;
    --surface: #1c1c1c;
    --line: rgb(255 255 255 / 9%);
    --text: #ececec;
    --text-dim: #8a8a8a;
    --accent: #ececec;
    --on-accent: #141414;
    --on-danger: #141414;

    --ok: #5bc48a;
    --warn: #e0a050;
    --danger: #f2877f;
    --busy: #7fb0e6;
    --role-purple: #b79af0;

    --surface-2: #262626;
    --line-strong: rgb(255 255 255 / 16%);
    --accent-soft: rgb(255 255 255 / 6%);

    --glass: rgb(20 20 20 / 72%);
    --scrim: rgb(0 0 0 / 60%);
    --shadow-pop: 0 4px 16px rgb(0 0 0 / 50%);
    --shadow-sheet: 0 12px 40px rgb(0 0 0 / 60%);
  
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #141414;
  --surface: #1c1c1c;
  --line: rgb(255 255 255 / 9%);
  --text: #ececec;
  --text-dim: #8a8a8a;
  --accent: #ececec;
  --on-accent: #141414;
  --on-danger: #141414;

  --ok: #5bc48a;
  --warn: #e0a050;
  --danger: #f2877f;
  --busy: #7fb0e6;
  --role-purple: #b79af0;

  --surface-2: #262626;
  --line-strong: rgb(255 255 255 / 16%);
  --accent-soft: rgb(255 255 255 / 6%);

  --glass: rgb(20 20 20 / 72%);
  --scrim: rgb(0 0 0 / 60%);
  --shadow-pop: 0 4px 16px rgb(0 0 0 / 50%);
  --shadow-sheet: 0 12px 40px rgb(0 0 0 / 60%);

}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-reduced-transparency: reduce) {
  :root:root {
    --glass: var(--bg);
    --blur-bar: none;
  }
}