@import './tokens.css';

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--th-color-slate-100);
  color: var(--th-color-slate-900);
  font-family: var(--th-font-sans);
  font-variant-numeric: tabular-nums;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.th-page {
  display: grid;
  gap: 18px;
}

.th-section {
  background: var(--th-color-white);
  border: 1px solid var(--th-color-slate-200);
  border-radius: var(--th-radius-md);
  box-shadow: var(--th-shadow-sm);
}

.th-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 0;
}

.th-section-title {
  margin: 0;
  color: var(--th-color-slate-900);
  font-size: 16px;
  font-weight: 700;
}

.th-muted {
  color: var(--th-color-slate-500);
}

.th-code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}