/* 全站共用 design token（來源：設計規格 psa-design-spec；淺色 = 石板拓印、深色 = 夜營篝火）
   元件一律吃語意 token（--color-*、--space-*、--radius-*…），不在元件裡寫死色碼 / 像素。
   深色：跟隨系統（prefers-color-scheme），或 <html data-theme="dark|light"> 強制（theme.js 依 localStorage 設定） */
:root {
  /* Primitive */
  --sand-50: #F7F0E2; --sand-100: #EFE6D4; --sand-200: #E9DFCB; --sand-300: #DCCDB0; --sand-400: #CDBB9A;
  --bark-500: #8A6A43; --bark-700: #6B5A48; --bark-800: #3A2E22; --bark-900: #2B2118; --rust-700: #8A3F17; --gold-300: #E2B66B;
  --coal-950: #14120F; --coal-900: #1B1814; --coal-850: #221F1A; --coal-800: #26221D; --coal-700: #2E2A24; --coal-600: #3A352D;
  --ash-400: #8C8476; --ash-300: #A89F91; --ash-100: #ECE5D8; --ember-400: #F2A65A;

  /* Semantic（淺色） */
  --color-bg: var(--sand-200); --color-surface: var(--sand-50); --color-surface-raised: #FFFFFF; --color-surface-sunken: var(--sand-300);
  --color-border: var(--sand-400); --color-border-strong: var(--bark-500);
  --color-text: var(--bark-900); --color-text-muted: var(--bark-700);
  --color-accent: var(--rust-700); --color-on-accent: #FFFFFF; --color-accent-soft: #F1DCC9;
  --color-header-bg: var(--bark-800); --color-header-fg: #F3EBDD; --color-header-active-bg: var(--gold-300); --color-header-active-fg: var(--bark-900);
  --color-focus: #2F6DB5; --color-best: var(--rust-700);
  --color-success: #3D7A36; --color-warning: #8A5A00; --color-danger: #B3261E;
  --color-mark: #F6DE9A;

  /* 屬性（地水火風） */
  --el-earth: #7A5A2B; --el-water: #2F6DB5; --el-fire: #B93C10; --el-wind: #3D7A36;
  --el-earth-chip-bg: var(--el-earth); --el-earth-chip-fg: #FFFFFF;
  --el-water-chip-bg: var(--el-water); --el-water-chip-fg: #FFFFFF;
  --el-fire-chip-bg: var(--el-fire);   --el-fire-chip-fg: #FFFFFF;
  --el-wind-chip-bg: var(--el-wind);   --el-wind-chip-fg: #FFFFFF;

  /* Type */
  --font-display: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-body: "Noto Sans TC", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Malgun Gothic", sans-serif;
  --font-kr: "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* Space（4px 基準） / Radius / Border */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-18: 72px;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --border-thin: 1px; --border-strong: 2px; --border-band: 6px; --focus-ring: 2px solid var(--color-focus);
  --shadow-raised: 0 1px 2px rgba(43,33,24,.12), 0 2px 8px rgba(43,33,24,.08);

  /* Layout */
  --container-max: 1240px; --container-wide: min(100%, 2200px); --page-margin: 24px; --header-height: 64px;
  --control-h-sm: 32px; --control-h-md: 40px; --control-h-lg: 52px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--coal-950); --color-surface: var(--coal-900); --color-surface-raised: var(--coal-850); --color-surface-sunken: var(--coal-800);
    --color-border: var(--coal-700); --color-border-strong: var(--coal-600);
    --color-text: var(--ash-100); --color-text-muted: var(--ash-300);
    --color-accent: var(--ember-400); --color-on-accent: var(--coal-950); --color-accent-soft: #2A2017;
    --color-header-bg: var(--coal-900); --color-header-fg: var(--ash-100); --color-header-active-bg: var(--ember-400); --color-header-active-fg: var(--coal-950);
    --color-focus: #8FB8EA; --color-best: var(--ember-400);
    --color-success: #9BD38E; --color-warning: #E8C46A; --color-danger: #F28B82; --color-mark: #5A4A14;
    --el-earth: #A8803F; --el-water: #4A8AD4; --el-fire: #E0673A; --el-wind: #5FA552;
    --el-earth-chip-bg: #3A2D1B; --el-earth-chip-fg: #E8C98F; --el-water-chip-bg: #1B2C44; --el-water-chip-fg: #8FB8EA;
    --el-fire-chip-bg: #3F1E14; --el-fire-chip-fg: #F29A7A; --el-wind-chip-bg: #1E3319; --el-wind-chip-fg: #9BD38E;
    --shadow-raised: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: var(--coal-950); --color-surface: var(--coal-900); --color-surface-raised: var(--coal-850); --color-surface-sunken: var(--coal-800);
  --color-border: var(--coal-700); --color-border-strong: var(--coal-600);
  --color-text: var(--ash-100); --color-text-muted: var(--ash-300);
  --color-accent: var(--ember-400); --color-on-accent: var(--coal-950); --color-accent-soft: #2A2017;
  --color-header-bg: var(--coal-900); --color-header-fg: var(--ash-100); --color-header-active-bg: var(--ember-400); --color-header-active-fg: var(--coal-950);
  --color-focus: #8FB8EA; --color-best: var(--ember-400);
  --color-success: #9BD38E; --color-warning: #E8C46A; --color-danger: #F28B82; --color-mark: #5A4A14;
  --el-earth: #A8803F; --el-water: #4A8AD4; --el-fire: #E0673A; --el-wind: #5FA552;
  --el-earth-chip-bg: #3A2D1B; --el-earth-chip-fg: #E8C98F; --el-water-chip-bg: #1B2C44; --el-water-chip-fg: #8FB8EA;
  --el-fire-chip-bg: #3F1E14; --el-fire-chip-fg: #F29A7A; --el-wind-chip-bg: #1E3319; --el-wind-chip-fg: #9BD38E;
  --shadow-raised: none; color-scheme: dark;
}

/* 舊頁面（style.css / 英雄戰場 / 閻羅殿 / 文件…）沿用的變數名，全部指到新 token，這樣不用逐頁改版 */
:root {
  --bg: var(--color-bg); --panel: var(--color-surface); --fg: var(--color-text); --muted: var(--color-text-muted);
  --line: var(--color-border); --accent: var(--color-accent); --accent-bg: var(--color-accent-soft);
  --link: var(--color-accent); --mark: var(--color-mark); --chip: var(--color-surface-sunken);
}

/* 文字樣式（Text style token） */
.t-display-xl { font: 900 44px/52px var(--font-display); letter-spacing: 2px; }
.t-display-l { font: 900 32px/40px var(--font-display); letter-spacing: 1px; }
.t-h2 { font: 700 22px/30px var(--font-display); }
.t-label { font: 500 13px/18px var(--font-body); letter-spacing: .5px; }
.t-caption { font: 400 12px/18px var(--font-body); }
.t-data { font: 500 14px/20px var(--font-body); font-variant-numeric: tabular-nums; }
.t-data-l { font: 900 28px/32px var(--font-display); font-variant-numeric: tabular-nums; }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* 元件：按鈕 / 篩選 chip / 屬性 chip / 分段控制 */
.btn { font: 700 14px/20px var(--font-body); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h-md); padding: 0 var(--space-4); border-radius: var(--radius-sm); border: var(--border-thin) solid transparent; cursor: pointer; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--color-surface-raised); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { border-color: var(--color-border-strong); }
.btn-sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: 13px; font-weight: 500; }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }

.filter-chip { font: 500 13px/18px var(--font-body); height: var(--control-h-sm); padding: 0 var(--space-3); border-radius: var(--radius-pill);
  border: var(--border-thin) solid var(--color-border); background: transparent; color: var(--color-text); cursor: pointer; white-space: nowrap; }
.filter-chip:hover { border-color: var(--color-border-strong); }
.filter-chip[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); font-weight: 700; }
.filter-chip.add { border-style: dashed; color: var(--color-text-muted); }

.el-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  font: 500 12px/18px var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.el-chip.el-earth { background: var(--el-earth-chip-bg); color: var(--el-earth-chip-fg); }
.el-chip.el-water { background: var(--el-water-chip-bg); color: var(--el-water-chip-fg); }
.el-chip.el-fire { background: var(--el-fire-chip-bg); color: var(--el-fire-chip-fg); }
.el-chip.el-wind { background: var(--el-wind-chip-bg); color: var(--el-wind-chip-fg); }
/* 篩選用屬性 chip：未選時只有字色 / 邊框，選取時才填底（B 設計） */
.filter-chip.el-earth { color: var(--el-earth-chip-fg); } .filter-chip.el-water { color: var(--el-water-chip-fg); }
.filter-chip.el-fire { color: var(--el-fire-chip-fg); } .filter-chip.el-wind { color: var(--el-wind-chip-fg); }
.filter-chip.el-earth[aria-pressed="true"] { background: var(--el-earth-chip-bg); border-color: var(--el-earth); }
.filter-chip.el-water[aria-pressed="true"] { background: var(--el-water-chip-bg); border-color: var(--el-water); }
.filter-chip.el-fire[aria-pressed="true"] { background: var(--el-fire-chip-bg); border-color: var(--el-fire); }
.filter-chip.el-wind[aria-pressed="true"] { background: var(--el-wind-chip-bg); border-color: var(--el-wind); }
.el-bar { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface-sunken); }
.el-bar i { display: block; height: 100%; }
.el-bar .el-earth { background: var(--el-earth); } .el-bar .el-water { background: var(--el-water); }
.el-bar .el-fire { background: var(--el-fire); } .el-bar .el-wind { background: var(--el-wind); }

.score-hi { font: 900 14px/20px var(--font-body); background: var(--color-accent); color: var(--color-on-accent); padding: 2px var(--space-2); border-radius: var(--radius-sm); }

.seg { display: flex; border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { font: inherit; font-size: 13px; background: transparent; color: var(--color-header-fg); border: 0; padding: 0 var(--space-3); min-height: var(--control-h-sm); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--color-header-active-bg); color: var(--color-header-active-fg); font-weight: 700; }