/* Segian Reptile — 共用 design tokens 與基礎樣式 */

:root {
  --ground: #edf0e8;
  --surface: #ffffff;
  --surface-2: #f6f8f2;
  --ink: #15201a;
  --ink-2: #3d4a41;
  --muted: #6b7a6e;
  --line: #d6dcd0;
  --line-soft: #e4e9de;
  --canopy: #1c3326;
  --canopy-ink: #e4eadf;
  --moss: #4a7a55;
  --ember: #b85a1b;
  --ember-ink: #ffffff;
  --sold: #8b8f86;
  --hold: #9a7b2e;
  --danger: #a8341f;
  --shadow: 0 1px 2px rgba(21, 32, 26, 0.06), 0 8px 20px -14px rgba(21, 32, 26, 0.35);
  --radius: 3px;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --serif: "Noto Serif TC", "Songti TC", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0e1411;
    --surface: #161e19;
    --surface-2: #1c2620;
    --ink: #e6ece3;
    --ink-2: #b7c2b8;
    --muted: #8c9a8d;
    --line: #2b372f;
    --line-soft: #232e27;
    --canopy: #0a100d;
    --canopy-ink: #d8e2d5;
    --moss: #6fa377;
    --ember: #d9762f;
    --ember-ink: #100a05;
    --sold: #6e756c;
    --hold: #c0a04d;
    --danger: #d4614a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -16px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  --ground: #0e1411;
  --surface: #161e19;
  --surface-2: #1c2620;
  --ink: #e6ece3;
  --ink-2: #b7c2b8;
  --muted: #8c9a8d;
  --line: #2b372f;
  --line-soft: #232e27;
  --canopy: #0a100d;
  --canopy-ink: #d8e2d5;
  --moss: #6fa377;
  --ember: #d9762f;
  --ember-ink: #100a05;
  --sold: #6e756c;
  --hold: #c0a04d;
  --danger: #d4614a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -16px rgba(0, 0, 0, 0.8);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--serif); }

/* 狀態色票，前後台共用 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill--ok { background: color-mix(in srgb, var(--moss) 16%, transparent); color: var(--moss); border-color: color-mix(in srgb, var(--moss) 40%, transparent); }
.pill--hold { background: color-mix(in srgb, var(--hold) 16%, transparent); color: var(--hold); border-color: color-mix(in srgb, var(--hold) 40%, transparent); }
.pill--sold { background: color-mix(in srgb, var(--sold) 16%, transparent); color: var(--sold); border-color: color-mix(in srgb, var(--sold) 40%, transparent); }
.pill--off { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); border-color: var(--line); }

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--canopy);
  color: var(--canopy-ink);
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 80;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: min(520px, 90vw);
}
.toast--bad { background: var(--danger); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}