/* 照 design/DESIGN.md。要加新的顏色、字級、間距，先改 DESIGN.md */
:root {
  --wall: #E4E6E9;
  --ink: #2B2826;
  --ink-2: #6B6461;
  --red: #9C0400;
  --paper: #FFFFFF;
  --highlight: #FFE94D;

  --f-display: "Noto Serif TC", "Songti TC", serif;
  --f-body: "Noto Sans TC", "PingFang TC", "Heiti TC", sans-serif;
  --t-13: 13px; --t-17: 17px; --t-23: 23px; --t-31: 31px; --t-41: 41px;
  --t-55: 55px; --t-73: 73px; --t-97: 97px; --t-130: 130px;
  --t-hero: clamp(72px, 18vw, 260px);

  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;
  --margin: 48px; --gap: 24px; --section-y: 96px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-tap: 120ms; --d-ui: 240ms; --d-push: 420ms; --d-settle: 600ms;
  --plate-shadow: 0 8px 16px rgba(43, 40, 38, .18);
  color-scheme: light;
}
@media (max-width: 767px) {
  :root { --margin: 16px; --gap: 12px; --section-y: 64px; }
}
html { background: var(--wall); }
body {
  margin: 0; background: var(--wall); color: var(--ink);
  font: 400 var(--t-17)/1.7 var(--f-body);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-text-size-adjust: 100%;
}
.num { font-variant-numeric: tabular-nums lining-nums; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}