/* --------------------------------------------------
  body
-------------------------------------------------- */
body {
  --hl: var(--hl--base);
  font-size: var(--fz--base);
  font-family: var(--ff--base);
  letter-spacing: var(--lts--base);
  background-color: var(--base);
  color: var(--text);
  text-underline-offset: var(--under-offset, 0.125em);
}

/* --------------------------------------------------
  line-height
-------------------------------------------------- */
* {
  line-height: calc(1em + var(--hl) * 2);
}

/* --------------------------------------------------
  Heading
-------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--headings-ff, inherit);
  font-weight: var(--headings-fw, var(--fw--bold));
}
h1 {
  font-size: var(--fz--3xl);
}
h2 {
  font-size: var(--fz--2xl);
}
h3 {
  font-size: var(--fz--xl);
}
h4 {
  font-size: var(--fz--l);
}
h5,
h6 {
  font-size: var(--fz--m);
}

/* --------------------------------------------------
  texts
-------------------------------------------------- */
a {
  color: var(--link-c, var(--link));
  text-decoration: var(--link-td, underline);
  text-decoration-thickness: var(--link-td-thickness, auto);
  text-decoration-color: var(--link-td-color, currentColor);
}

small {
  --hl: var(--hl--s);
  font-size: var(--fz--xs);
}

b,
strong {
  font-weight: var(--fw--bold);
}

sup,
sub {
  --hl: var(--hl--xs);
  font-size: 80%;
}

code,
kbd,
var,
samp {
  font-family: var(--ff--mono);
}

blockquote {
  background-color: var(--base-2);
  padding: var(--s30);
}

legend,
caption,
figcaption {
  font-size: var(--fz--s);
}

hr {
  border: none;
  block-size: 0;
  border-block-start: 1px solid var(--divider);
}

/* --------------------------------------------------
  list
-------------------------------------------------- */
// classを持たない、もしくは Property Classしかない(≒ Property Class で始まる) リスト要素はブラウザ標準のスタイルを復活させる。
:is(ul, ol):where(:not([class])),
:is(ul, ol):where([class^='-']) {
  list-style: revert;
  padding-inline-start: var(--list-px-s, var(--s30));
}

dt {
  font-weight: var(--fw--bold);
}
dd + dt {
  margin-block-start: var(--s20);
}

/* --------------------------------------------------
  table
-------------------------------------------------- */
table {
  --td-c: inherit;
  --td-bgc: transparent;
  --td-p: var(--s10);
  --td-min-sz: initial;
}
td {
  color: var(--td-c);
  background-color: var(--td-bgc);
  padding: var(--td-p);
  min-inline-size: var(--td-min-sz);
}
th {
  // デフォルト: tdと同じスタイル
  color: var(--th-c, var(--td-c));
  background-color: var(--th-bgc, var(--td-bgc));
  padding: var(--th-p, var(--td-p));
  min-inline-size: var(--th-min-sz, var(--td-min-sz));
}

/* --------------------------------------------------
  Form fields
-------------------------------------------------- */
input,
button,
textarea,
select,
::file-selector-button {
  // フォーム系コントロールの最低限の見た目（テーマ差し替えは --controls-*）
  background-color: var(--controls-bgc, var(--base-2));
  border: solid 1px var(--controls-bdc, var(--divider));
  padding: var(--controls-p, var(--s5) var(--s10));
  border-radius: var(--controls-bdrs, var(--bdrs--10));
}

:disabled {
  opacity: var(--o---20);
}

/* --------------------------------------------------
  フォーカス要素
-------------------------------------------------- */
:focus-visible {
  outline-offset: var(--focus-offset, 0px);
}