/* ========================================================================
   主题 token —— 用 CSS 变量统一管理白天 / 夜间两套主题。
   组件不硬编码颜色；同一张卡片在两套主题下都应成立。
   ======================================================================== */

:root {
  /* ---- 白天：低饱和莫兰迪，避免大面积纯白 ---- */
  --bg:          #e7e5dd;   /* 暖灰底，不是纯白 */
  --surface:     #efece4;   /* 分区面 */
  --surface-2:   #ddd9cf;   /* 更深分区 */
  --card:        #f4f1ea;   /* 卡片底 */
  --card-muted:  #e6e2d7;   /* 次级卡片 */
  --text:        #2d2b26;   /* 暖黑，不是纯黑 */
  --text-muted:  #6d6960;
  --line:        #d2cdc1;   /* 细边框 */
  --accent:      #5f8597;   /* 雾蓝：可点击 / 当前项 */
  --accent-2:    #bd8762;   /* 浅陶土：次强调 */
  --good:        #6f9070;   /* 灰绿 */
  --warn:        #bd9a4f;
  --danger:      #b3736b;
  --shadow:      40 36 28;  /* 阴影 RGB，配 alpha 用 */
  --glass:       244 241 234;
  /* 毛玻璃内部分层叠加：白天用半透明黑（浅底上显暗） */
  --glass-fill:    rgb(40 36 28 / .05);
  --glass-border:  rgb(40 36 28 / .12);

  /* 派生：强调色的浅底（标签 / 高亮区） */
  --accent-soft:   #5f859722;
  --accent-2-soft: #bd876222;

  color-scheme: light;
}

:root[data-theme="night"] {
  /* ---- 夜间：近黑炭灰，TUI 工作台感 ---- */
  --bg:          #14161a;
  --surface:     #1b1e24;
  --surface-2:   #242831;
  --card:        #1e222a;
  --card-muted:  #181b21;
  --text:        #d7dbe2;
  --text-muted:  #8b929e;
  --line:        #2d323c;
  --accent:      #6fb3ad;   /* 克制的终端青 */
  --accent-2:    #c4966b;
  --good:        #7bb389;
  --warn:        #cda861;
  --danger:      #d18079;
  --shadow:      0 0 0;
  --glass:       18 20 24;
  /* 夜间用半透明白（深底上显亮） */
  --glass-fill:    rgb(255 255 255 / .04);
  --glass-border:  rgb(255 255 255 / .09);

  --accent-soft:   #6fb3ad22;
  --accent-2-soft: #c4966b22;

  color-scheme: dark;
}

/* 无 JS 时跟随系统（theme.js 会写 data-theme 覆盖此项） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --bg: #14161a; --surface: #1b1e24; --surface-2: #242831;
    --card: #1e222a; --card-muted: #181b21;
    --text: #d7dbe2; --text-muted: #8b929e; --line: #2d323c;
    --accent: #6fb3ad; --accent-2: #c4966b;
    --good: #7bb389; --warn: #cda861; --danger: #d18079;
    --shadow: 0 0 0; --glass: 18 20 24;
    --glass-fill: rgb(255 255 255 / .04); --glass-border: rgb(255 255 255 / .09);
    --accent-soft: #6fb3ad22; --accent-2-soft: #c4966b22;
    color-scheme: dark;
  }
}

:root {
  /* ---- 布局 / 尺寸 token（固定比例、统一节奏）---- */
  --container: 1200px;
  --gap: 24px;
  --gap-sm: 12px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

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

  /* 卡片固定尺寸槽位 */
  --card-small-w: 210px;       /* 小卡片最小宽 */
  --card-small-h: 238px;       /* 小卡片统一总高：图片 + 最多 4 行事实标签 */
  --card-small-media-h: 120px; /* 图片槽固定高；原图比例不参与卡片尺寸计算 */
  --big-ratio: 56.25%;     /* 大卡片 16:9 */

  --btn-h: 38px;
  --btn-h-sm: 30px;
  --fab: 46px;             /* 圆形悬浮按钮直径 */

  /* 字体：Maple Mono CN 优先用于参数 / 数字 / 标签 / TUI 元素 */
  /* 按页面语言选常用包；生僻字由完整 Maple Mono CN 按需回退。 */
  --font-maple-common: "Maple Mono CN Common SC";
  --font-sans: var(--font-maple-common), "Maple Mono CN", ui-sans-serif, system-ui, "PingFang SC",
               "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI Symbol",
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --font-mono: var(--font-maple-common), "Maple Mono CN", "Maple Mono", ui-monospace, "Cascadia Code",
               "JetBrains Mono", "Sarasa Mono SC", Menlo, Consolas, "Segoe UI Symbol",
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 34px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --z-overlay: 1000;
  --z-fab: 900;
  --z-toolbar: 950;
}

html[lang="zh-TW"] {
  --font-maple-common: "Maple Mono CN Common TC";
}

@media (max-width: 640px) {
  :root {
    --card-small-h: 204px;       /* 手机固定为图片 + 2 行事实标签 */
    --card-small-media-h: 138px;
  }
}