/* 設計 token 與共用元件（按鈕、卡片、標籤）。widgets.css 與 app.css 都建立在這上面。 */
:root {
  --c-bg: #f6f7f4;
  --c-surface: #ffffff;
  --c-surface-2: #f2f4f1;
  --c-text: #2f3437;
  --c-muted: #6b7378;
  --c-line: #e3e6e2;
  --c-line-strong: #cfd4cf;

  --c-primary: #22b573;      /* 主色：綠 */
  --c-primary-dark: #178a57;
  --c-primary-soft: #e3f7ec;
  --c-blue: #1f9de0;
  --c-blue-dark: #157bb3;
  --c-blue-soft: #e2f3fc;
  --c-purple: #8b5cf6;
  --c-purple-dark: #6d3fd8;
  --c-purple-soft: #efe8ff;
  --c-orange: #ff8a00;       /* 三角錐 */
  --c-orange-dark: #d96500;
  --c-orange-soft: #fff1df;
  --c-red: #ef4444;
  --c-red-dark: #c42b2b;
  --c-red-soft: #fde8e8;
  --c-gold: #ffc53d;         /* 已完成 */
  --c-gold-dark: #d99a00;
  --c-gold-soft: #fff6d9;
  --c-locked: #e4e7eb;
  --c-locked-dark: #c3c8cf;
  --c-locked-text: #9aa1a8;

  --c-code-bg: #1f2430;
  --c-code-text: #e6e9ef;

  --radius-sm: 0.625rem;
  --radius: 1rem;
  --radius-lg: 1.375rem;
  --shadow-card: 0 0.125rem 0 var(--c-line);
  --font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* 流體字級：手機／平板維持 16px，1280 起隨視窗放大（1920≈20.5px、2560≈24px）；整個版面用 rem，所以會一起等比放大 */
html { -webkit-text-size-adjust: 100%; font-size: clamp(16px, calc(10px + 0.55vw), 26px); }
/* 講師模式（投影）再大一號：1280≈19px、1920≈23.5px、2560≈28px */
html.teach { font-size: clamp(18px, calc(10.5px + 0.68vw), 30px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
a { color: var(--c-blue-dark); }
code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 0.375rem;
  padding: .05em .35em;
}
mark { background: var(--c-gold-soft); color: inherit; padding: 0 .2em; border-radius: 0.25rem; box-shadow: inset 0 -.35em 0 rgba(255, 197, 61, .45); }
:focus-visible { outline: 0.1875rem solid var(--c-blue); outline-offset: 0.125rem; }

.ico { display: inline-flex; width: 1.2em; height: 1.2em; vertical-align: -.2em; }
.ico svg { width: 100%; height: 100%; }

/* ---------- 按鈕：多鄰國式立體按鈕 ---------- */
.btn {
  --b-bg: var(--c-surface);
  --b-fg: var(--c-text);
  --b-edge: var(--c-line-strong);
  --b-border: var(--c-line-strong);
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 2.75rem;
  padding: .55em 1.15em;
  border: 0.125rem solid var(--b-border);
  border-radius: 0.875rem;
  background: var(--b-bg);
  color: var(--b-fg);
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 0.25rem 0 var(--b-edge);
  transform: translateY(0);
  transition: transform .08s, box-shadow .08s, filter .15s, background .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(0.25rem); box-shadow: 0 0 0 var(--b-edge); }
.btn[disabled], .btn.is-disabled {
  --b-bg: var(--c-locked); --b-fg: var(--c-locked-text); --b-edge: var(--c-locked-dark); --b-border: var(--c-locked-dark);
  cursor: not-allowed; filter: none;
}
.btn[disabled]:active { transform: none; box-shadow: 0 0.25rem 0 var(--b-edge); }
.btn-primary { --b-bg: var(--c-primary); --b-fg: #fff; --b-edge: var(--c-primary-dark); --b-border: var(--c-primary); }
.btn-blue { --b-bg: var(--c-blue); --b-fg: #fff; --b-edge: var(--c-blue-dark); --b-border: var(--c-blue); }
.btn-purple { --b-bg: var(--c-purple); --b-fg: #fff; --b-edge: var(--c-purple-dark); --b-border: var(--c-purple); }
.btn-gold { --b-bg: var(--c-gold); --b-fg: #5a4100; --b-edge: var(--c-gold-dark); --b-border: var(--c-gold); }
.btn-danger { --b-bg: var(--c-red); --b-fg: #fff; --b-edge: var(--c-red-dark); --b-border: var(--c-red); }
.btn-secondary { --b-bg: var(--c-surface); --b-fg: var(--c-blue-dark); --b-edge: var(--c-line-strong); --b-border: var(--c-line-strong); }
.btn-ghost { --b-bg: transparent; --b-border: transparent; --b-edge: transparent; box-shadow: none; }
.btn-ghost:active { transform: none; }
.btn-sm { min-height: 2.125rem; padding: .3em .8em; font-size: .9em; border-radius: 0.6875rem; box-shadow: 0 0.1875rem 0 var(--b-edge); }
.btn-sm:active { transform: translateY(0.1875rem); }
.btn-lg { min-height: 3.375rem; padding: .7em 1.6em; font-size: 1.08em; }
.btn-block { display: flex; width: 100%; }
.btn-icon { min-width: 2.75rem; padding: .4em; }

/* ---------- 卡片／標籤 ---------- */
.card {
  background: var(--c-surface);
  border: 0.125rem solid var(--c-line);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
}
.chip {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .2em .7em;
  border-radius: 999px;
  border: 0.125rem solid var(--c-line);
  background: var(--c-surface);
  font-size: .88em; font-weight: 700;
  cursor: pointer;
}
.chip.is-active { border-color: var(--c-blue); background: var(--c-blue-soft); color: var(--c-blue-dark); }
.badge {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .05em .55em;
  border-radius: 0.5rem;
  font-size: .8em; font-weight: 800; letter-spacing: .03em;
  background: var(--c-surface-2); color: var(--c-muted);
}
.badge-green { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.badge-blue { background: var(--c-blue-soft); color: var(--c-blue-dark); }
.badge-orange { background: var(--c-orange-soft); color: var(--c-orange-dark); }
.badge-red { background: var(--c-red-soft); color: var(--c-red-dark); }
.badge-purple { background: var(--c-purple-soft); color: var(--c-purple-dark); }
.badge-gold { background: var(--c-gold-soft); color: #8a6200; }
.muted { color: var(--c-muted); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}